SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning with CSS

    Hi, I'm working on a layout for my new site www.destroi.com, I decided I would try and incorporate abit of CSS and it was working great until I showed the site to a few friends. View what I'm working on by visiting:

    http://www.destroi.com/css.html

    For some of you, the navigation, news and account information will be very much out of place. This also occurs when you restore the screen to different sizes.

    This occurs in Internet Explorer, Opera and Firefox. I am using absolute positioning for the boxes in question.

    Any advice is much appreciated.
    Jeff

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Source code

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css" media="all">
    body { 
    margin: 0;
    padding: 0;
    color: #5c7889;
    background-color: #CCC; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; 
    }
    .nav {
    	background-image:url(nav_menu.gif);
    	font-size: 24pt;
    	font-weight: bold;
    	padding: 10px;
    	position: absolute;
    	left: 199px;
    	top: 172px;
    	width: 3px;
    	height: 194px;
    }
    .nav_cont {
    	background-image:url(nav_content.gif);
    	font-size: 10pt;
    	font-weight: bold;
    	padding: 5px;
    	position: absolute;
    	left: 42px;
    	top: 172px;
    	width: 84px;
    	height: 194px;
    }
    .news {
    	background-image:url(news_menu.gif);
    	font-size: 10pt;
    	font-weight: bold;
    	padding: 5px;
    	position: absolute;
    	left: 332px;
    	top: 172px;
    	width: 458px;
    	height: 13px;
    }
    .news_cont {
    	background-image:url(news_content.gif);
    	font-size: 10pt;
    	font-weight: bold;
    	padding: 5px;
    	position: absolute;
    	left: 332px;
    	top: 195px;
    	width: 457px;
    	height: 182px;
    }
    .info {
    	background-image:url(info_menu.gif);
    	font-size: 10pt;
    	font-weight: bold;
    	padding: 5px;
    	position: absolute;
    	left: 811px;
    	top: 182px;
    	width: 244px;
    	height: 14px;
    }
    .info_cont {
    	background-image:url(info_cont.gif);
    	font-size: 10pt;
    	font-weight: bold;
    	padding: 5px;
    	position: absolute;
    	left: 811px;
    	top: 206px;
    	width: 244px;
    	height: 174px;
    }
    .style3 {font-size: 10px; padding: 10px; position: absolute; left: 222px; top: 172px; width: 84px; height: 194px; color: #FFFFFF; background-image: url(nav_content.gif);}
    .style4 {
    	color: #009900;
    	font-weight: bold;
    }
    .style6 {font-size: 10pt; padding: 5px; position: absolute; left: 332px; top: 195px; width: 457px; height: 182px; color: #FFFFFF; background-image: url(news_content.gif);}
    </style>
    </head>
    
    <body>
    <table width="896" border="0" cellpadding="0" cellspacing="0" background="content.gif" align="center">
      <!--DWLayoutTable-->
      <tr>
        <td height="398" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="top.gif">
          <!--DWLayoutTable-->
          <tr>
            <td width="10" height="164">&nbsp;</td>
            <td width="619">&nbsp;</td>
            <td width="267">&nbsp;</td>
          </tr>
          <tr>
            <td height="234">&nbsp;</td>
            <td valign="top"><div class= "nav" ></div><div class= "news" ></div>
            <div class= "style6" ><strong>July 31st 2006,</strong><br />
                <br />
                  Lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet, lorem Ipsum dolor sit amet...<br />
                    <br />
                  <strong>Posted by: </strong>Jeff<strong><br />
                  View more<br />
                    Comments </strong>(23)
    <br />
    </div><div class= "info" ></div>
            <div class= "info_cont" ></div>
                    <div class="style3">
              <p>+ Home<br />
                + Forum <span class="style4">NEW! </span><strong>Tutorials</strong><br />
                + Scripting<br />
                + Coding
                <br />
                + 
                Media<br />
                <strong>Downloads<br />
                  </strong>+ Habbo<br />
                + Other<br />
                <strong>------------</strong><br />
                + Staff<br />
                + Facts<br />
                + Links<br />
                + Contact </p>
              </div></td>
            <td>&nbsp;</td>
          </tr>
          
          
        </table></td>
      </tr>
      <tr>
        <td height="29" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="content_banner.gif">
          <!--DWLayoutTable-->
          <tr>
            <td width="896" height="29">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td width="18" height="107">&nbsp;</td>
        <td width="851" valign="top"><table cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <td valign="top" width="99%"><div id="lipsum">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sagittis orci   ac tortor. Nulla laoreet nisi at nisl. Praesent iaculis, pede at rutrum aliquet,   est quam varius dolor, consectetuer porta nulla augue vel nunc. Maecenas nonummy   pellentesque ipsum. Donec vitae mauris at mauris nonummy tempor. Phasellus purus   lectus, consectetuer a, euismod ut, tempor in, felis. Sed elementum sem vel   neque. Proin risus sapien, cursus venenatis, posuere sed, volutpat vel, ante.   Praesent risus elit, scelerisque vel, dictum vitae, bibendum ut, turpis. Quisque   interdum. Nulla suscipit, turpis vel imperdiet fringilla, ipsum felis venenatis   diam, at sodales magna risus sit amet turpis. Proin mi. Integer accumsan tellus.   Praesent diam. </p>
                <p>Suspendisse enim lacus, congue non, blandit eu, faucibus non, elit. Donec   semper augue at nibh. Ut a nisi. Aenean vitae eros. Donec nisl urna, ornare   eget, aliquam quis, nonummy dictum, lorem. Sed aliquet congue arcu. Mauris eget   diam. Ut nunc nisl, commodo quis, blandit et, vehicula eu, sapien. Proin elit   eros, porta eu, venenatis non, sagittis eu, dui. Curabitur felis. Duis sit amet   velit. Ut in est. Mauris at justo. Phasellus consequat, dolor in egestas   malesuada, ipsum nulla hendrerit massa, a convallis magna nisi non turpis.   Vivamus gravida commodo risus. Suspendisse fermentum tempor justo. Lorem ipsum   dolor sit amet, consectetuer adipiscing elit. Aenean facilisis dolor sit amet   lacus. Aliquam erat volutpat. Aenean ac nibh eget erat vestibulum aliquet. </p>
                <p>Suspendisse convallis augue ac ante. Nam imperdiet mauris in tellus. Vivamus   nec purus. Nam eu nibh eu neque scelerisque sodales. Cras gravida. Nullam nunc   nibh, cursus laoreet, scelerisque a, mollis vel, pede. Quisque dapibus nisi non   risus. Nam ornare felis eget turpis. Quisque iaculis lorem non ipsum. Fusce   placerat, tellus vel adipiscing lobortis, nibh augue semper metus, at hendrerit   sem pede vel arcu. Sed imperdiet dignissim turpis. Mauris sagittis. Cras   rhoncus. Vestibulum interdum. Nulla pretium nisi quis leo. Praesent nibh dolor,   bibendum ut, laoreet mollis, adipiscing nec, nisl. Aliquam ac nunc eu orci   bibendum tincidunt. Cras ultricies, orci id ultricies commodo, orci ligula   malesuada risus, quis condimentum lectus purus id quam. </p>
              </div></td>
            </tr>
          </tbody>
        </table></td>
        <td width="27">&nbsp;</td>
      </tr>
      <tr>
        <td height="59" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="bottom.gif">
          <!--DWLayoutTable-->
          <tr>
            <td width="896" height="59">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Do you want it liquid?

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll take what works. The thing is, only 3 of the boxes on my site are done with DIVS, the rest is tables, I would have done it all in tables but it never works.

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    OK. Don't worry. I will do some testing and give you an answer... the only thing that I need to know is how is supposed to look, because you have been doing changes all the way around, and each time I look at it, it's different. Kind of confusing for me

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks but I'm good, I fixed it with tables, you have no idea how much I appreciate your offer though. This is a great forum.

  7. #7
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ummm... when this gets fixed, can somebody explain what happened as well? It's quite interesting because I run into the same problem every now and then whenever I use absolute positioning.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two things you need to understand about absolute positioning:
    1. elements that are AP are taken out of the normal flow of the document which means elements around them have no awareness that they're there.
    2. AP elements take their coordinates from the window in the absence of a parent element with either position: relative/absolute applied.
    For some further reading.

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    So finally, that's how is supossed to look... Don't want to burst your bubble, but are you sure that you are happy with your code? while it is clean, it could be improved so much!

    I understand that, if you normally use tables, you get them to work and you understand them... but why stop there?

    You use transitional instead of strict doctype. Transitional were meant to provide backwards compatibility with older sites. All new pages should be built using strict doctype (basically, it means that you separate structure from styling)

    You use quite a bit of superflous code (not including the tables, which have their share of empty cells). Example: Have you tried to use a list for your navigation? It would be easier than using so many br's...

    You could save bandwidth if you slice your images in a different way...

    The complexity of your layout (to make it liquid) comes from the amount of curves you use.

    Have you tried to make it tableless? It is not that hard, and the amount of tags that would be reduced greatly.

    Think about it, very specially if you are going to do the maintenance of the site. It may hard at the beggining, but it will save you bandwith and time.

    Now, about positioning...

    As Tyssen said, when you position something you take it out of the normal flow (that also occurs with floats).

    The normal flow is the place where the element would be seen if we haven't changed its position.

    When you are positioning an element, the browser calculates the new positioning based on:

    a) Absolute positioning : the top left corner of the FIRST POSITIONED ANCESTOR (or the root element, which could be either the body or the html element, if there is not an ancestor with a position property)

    b) Relative positioning : the top left corner of the box that would have been created if the element wasn't moved.

    When we use an absolute position, the gap that would represent the place of that element in the normal flow is filled with any content included in the code after that element.

    When the position is relative, the gap is not filled, stays there. The element is simply offseted from its normal place.

    And that's about it, really.


Bookmarks

Posting Permissions

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