Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    div's acting erratically in timeline

    Hey all,
    i'm new here so i should introduce myself quick. I just started coding HTML and CSS a few weeks ago. I started a project at my firehouse and thought it would be cool to make interactive, so i figured the web would be the best medium. so far it's been going well, i've had many problems along the way but i've managed to work through them with extensive help from google. I've already learned a lot just browsing this forum, but i think it's time to say hi.

    So, on to the code.
    my site is here WHFD timeline

    at the time of this post, I have most of the Chief's in place. the items below that are just place holders from initial testing.

    Problem 1: It looks completely wrong in IE. but i'm not really worried about that now, just a warning.

    Problem 2: The div elements for "charles cameron" and "artur travis (AT)" won't stay on the same line. i used the same technique to line up 3 divs in the same td in the 2007 area but that's not working here. Is there a way to "force" them onto the same plane? or do i need to change things drasticly? i've tried both a pos left from the box it needs to be in and a neg left from the next one, both give the same problem.

    Here's the CSS:
    Code:
    /*TABLES*/
    .table1 {
      width:100px;
      border-collapse:collapse;
    }
    .table2 {
      width:3000px;
      border-collapse:collapse;
      table-layout:fixed;
    }
    .table3 {
      border-collapse:collapse;
    }
    .table4 {
      border-collapse:collapse;
    	width: 500px;
    }
    
    #timeline {
      width:800px;
      overflow:hidden;
      overflow-x:scroll;
      position:relative;
    }
    
    /*CELLS & HEADER*/
    td, th {
      padding:0;
      height:22px;
      border: 1px solid #b4ced8;
    }
    th {
      font:bold 14px "Trebuchet MS", sans-serif;
      color:#4f6b72;
      letter-spacing:2px;
      text-align:center;
      background:#cae3ed;
    }
    
    /*BOXES*/
    td div {
      float: left;
    }
    
    td div div {
      margin:0;
      text-align:center;
      cursor:default;
      font-size:12px;
      padding:0px;
    float:left;
    }
    
    
    /*BOX GROUPS*/
    div.blue {
      background:#b1c7ef;
      border:1px solid #8487ad;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      font-family:Verdana;
    }
    div.gray {
      background:#98AFC7;
      border:1px solid #657383;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      font-family:Verdana;
    }
    div.brown {
      background: #ccb199;
      border: 1px solid #a38d7b;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      font-family:Verdana;
    }
    
    
    /*INDIVIDUAL BOXES*/
    
    div#C-JPOB {
      position: relative;
      width:30%;
      left: 72%;
    }
    
    div#C-EWS {
      position: relative;
      width:4%;
      left: 72%;
    }
    
    div#C-WLA {
      position: relative;
      width:4%;
      left: 72%;
    }
    
    div#C-WSJjr {
      position: relative;
      width:261%;
      left: 11%;
    }
    
    div#C-JCH {
      position: relative;
      width:94%;
      left: 16%;
    }
    
    div#C-WSJsr {
      position: relative;
      width:256%;
      left: 58%;
    }
    
    div#C-LJC {
      position: relative;
      width:259%;
      left: -4%;
    }
    
    div#C-AT {
      position: relative;
      width:16%;
      left: 80%;
    }
    
    div#C-CAC {
      position: relative;
      width:120%;
      left: -50%;
    }
    
    div#C-FAS {
      position: relative;
      width:40%;
      left: 10%;
    }
    
    div#C-ABW {
      position: relative;
      width:20%;
      left: 90%;
    }
    
    div#C-WVW {
      position:relative;
      width:60%;
      left:0%;
    }
    
    div#three {
      position:relative;
      width:90%;
      left:20%;
    }
    div#four {
      position:relative;
      width:400%;
      left:95%;
    }
    
    /* Pop-ups*/
    a.info{
        position:relative; /*this is the key*/
        text-decoration:none;
        /*z-index:5;*/
    }
    a.info span{
        display: none;
        z-index:10;
    }
    a.info:hover span{        /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top:2em; left:2em; width:20em;
        border:1px solid #000;
        color:#000;
        background-color:#C9C9C9;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        text-align: center;
        z-index:15;
    }
    Last edited by sathirtythree; 11-07-2010 at 07:23 PM.

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Have you considered doing a vertical timeline instead? 1) Might look a little neater. 2) You can color code each entry to correspond to each position.

    The conflict for your current problem is with <div id="C-AT">. It's cause the line shift.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The problem you desccribe is caused by the negative left positioning on #C-AC, which is within the same table cell. Although this div has shifted left as you require, the space it should take up is forcing #C-AT down.

    You could apply a negative top to #C-AT.

    An alternate approach which might be easier in the long run is to use absolute positioning for your divs. The absolute positioning would avoid different timelines interfering with each other as here.

  • Users who have thanked SB65 for this post:

    sathirtythree (11-07-2010)

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    i thought about a vertical timeline, however, once i get a system going, there are going to be about 40 more "Ranks" added so a horizontal timeline will be easier to use.

    i originally had "C-CAC" with pos left positioning from the cell in front of it, but i had the same problem, so i tried neg left positioning on a whim to see if it would change anything, it didn't.

    can you tell me a little more about absolute position, what is it "absolute" in relation to? the top left of the browser window? or can you define a starting point?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    absolute - Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

    (per w3 schools)

    "the first parent element" would that mean in my case, if the table it were in had a position of relative, i could then assign an absolute position off the top left of that table?

  • #6
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

    Check out tab 3 on this link for a good explanation and example.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • Users who have thanked optimus203 for this post:

    sathirtythree (11-07-2010)

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by optimus203 View Post
    When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

    Check out tab 3 on this link for a good explanation and example.
    LOL thank you, i just googled into that exact page, i was coming back to post that i had my answer and you already found it for me.

    good good, i'm going to adjust everything, i'll report back when I have everything in place.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    update:
    i am having fantastic success, everything is acting in a predictable fashion now.

    Edit:
    Everything is fixed and uploaded, thank-you all for your help.
    WHFD History

    before


    after
    Last edited by sathirtythree; 11-07-2010 at 06:16 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •