SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a layout problem...

    the site in question:

    http://cleanitvalet.com/test/index.html

    problem: when visitor zooms in, "DIV 1" and "DIV 3" go out of position because they are "position absolute."

    So I was thinking of having the entire page top just made in illustrator and have it as a .gif for top part BUT that won't work because I need "DIV 1" and "DIV2" and "DIV 3" as individual divs AND NOT a part of a .gif because I want these "DIV"s to implement a different jquery slideshow...

    what do you think would be the best way to achieve that layout (DIVS #1 #2 #3 are all still divs waiting for slideshow content)...

    i could even maybe have #page_word floated to left and #header floated to the right and repeat again for #navigation and #real_content underneath... there are so many different ways to do this my head is gonna explode trying to figure out best way...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Just do away with all that AP/RP positioning and use floats and margins.

    Take that little DIV#1 (#page_word) and nest it in your #header div. It soes not matter if it is taller you can drag it through the top and bottom with negative margins.

    Take that RP off the #header div and drag it into the #page_content top padding with a neg margin also.
    Code:
    #header {
      height:60px;
      width:540px;
      margin:-17px 0 17px 222px;
      background:url(images/header.gif) top left no-repeat;
    }
    
    #page_word {
      float:left;
      width:63px;
      height:66px;
      margin:-3px 0 -3px 33px;
      background: url(images/word1.gif) top left no-repeat;
      display:inline;/*ie6 dbl margin bug*/
    }
    Now nest it in the header in your html

    Code:
        <div id="page_content">
          
          <div id="header">
            <div id="page_word"></div>
            <div id="sitebranding"><h1>Testing</h1></div>
            <div id="tagline"><p>more and more testing..</p></div>
          </div> <!-- end of header div -->
    Do the same technique (float & margin) with the other AP div #real_content

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    For the other div you will need to float the nav bar left in order to remove it from the page flow. Then float the #real_content div to the right, now you will need your main wrapper to contain all these floats.

    Since you are going to pull that lower right div (#real_content) out of the wrapping div you will not be able to use overflow:hidden for float containment. You will need to use a "clearfix" adaption.
    Code:
    #page_content {
      width: 855px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 35px;
      margin-top: 25px;
      background:url(images/pipe_left.gif) top left repeat-y;
      padding-bottom: 10px;
    }
    
    #page_content:after { /*Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:0;
        font-size:0;
    }
    Now float the two divs and adjust the margins to your liking.
    Code:
    /* nav styling */
    #navigation {
      float:left;
      width: 124px;
      text-align: center;
      margin-top: 19px;
    }
    
    /* real content */
    #real_content {
      float:right;
      width:650px;
      margin:120px -80px 0 0;
     /*background:lime;testing only*/
    }
    Now clear the floats above the footer
    Code:
    #footer {
      clear:both;
      text-align: center;
      color: #828282;
      font-size: 10px;
      margin-top: 25px;
    }
    Now get that relative positioned "p" class out of your footer. It is giving you a premature horizontal scrollbar.

    All the above will leave you with this working page free of positioning problems.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Layout Testing...</title>
     
    <style type="text/css">
    /* Reset padding and margins */
    * {
      padding: 0;
      margin: 0;
    }
     
    body {
      font-family: Verdana, "Trebuchet MS", sans-serif;
    }
     
    #page_content {
      width: 855px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 35px;
      margin-top: 25px;
      background:#EEF url(images/pipe_left.gif) top left repeat-y;
      padding-bottom: 10px;
    }
     
    #page_content:after { /*Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:0;
        font-size:0;
    }
     
    #sitebranding h1 {
      display: none;
    }
     
    #tagline p {
      display: none;
    }
     
    #header {
      height:60px;
      width:540px;
      margin:-17px 0 17px 222px;
      background:url(images/header.gif) top left no-repeat;
    }
     
    #page_word {
      float:left;
      width:63px;
      height:66px;
      margin:-3px 0 -3px 33px;
      background: url(images/word1.gif) top left no-repeat;
    }
     
    #horiz_pipe {
      width: 855px;
      height: 3px;
      font-size:0;/*IE6 needs this*/
      background-color: #444444;
    }
     
    /* nav styling */
    #navigation {
      float:left;
      width: 124px;
      text-align: center;
      margin-top: 19px;
    }
     
    #navigation ul {
      list-style: none;
    }
     
    #navigation li a:link, #navigation li a:visited  {
      font-size: 18px;
      display: block;
      padding: 5px 0 5px 0;
      color: #828282;
      text-decoration: none;
      margin-bottom: 10px;
    }
     
    #navigation li a:hover {
      color: #444444;
    }
     
    /* real content */
    #real_content {
      float:right;
      width:650px;
      margin:150px -100px 0 0;
      position:relative;/*IE6 needs this when shifting outside of parent*/
    }
     
    #real_content p {
      font-size: 12px;
      color: #6b6b6b;
      text-align: left;
      margin-bottom: 14px;
    }
     
    #test1 {
        width: 650px;
        height: 228px;
        margin-bottom: 2px;
        font-size: 16px;
        color: #000000;
        background-color: #d6d6d6;
      }
     
     
    #real_content #caption_style {
      font-size: 10px;
      text-align: right;
      color: #6b6b6b;
    }
     
    #footer {
      clear:both;
      text-align: center;
      color: #828282;
      font-size: 10px;
      margin-top: 25px;
    }
     
    </style>
    </head>
    <body>
     
        <div id="page_content">
     
          <div id="header">
            <div id="page_word"></div>
            <div id="sitebranding"><h1>Testing</h1></div>
            <div id="tagline"><p>more and more testing..</p></div>
          </div> <!-- end of header div -->
     
          <div id="horiz_pipe"></div>
     
          <div id="navigation">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="blog.html">Blog</a></li>
            </ul>
          </div>
     
          <div id="real_content">
            <div id="test1">DIV #3</div>
            <p id="caption_style">testing never ends...</p>
          </div> <!-- end of real_content id -->
     
        </div> <!-- end of page_content id -->
     
        <div id="footer">
          <p>&copy; testing... All rights reserved.</p>
          <p><a href="mailto:test123@test.com" title="email us">test123@test.com</a> | <a href="mailto:test123@test.com" title="email owner">test123@test.com</a></p>
          <p>Phone: (312) 712-8650 | Fax: (312) 712-5203</p>
        </div>
     
    </body>
    </html>

  4. #4
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did what you said but now DIV 1 is not in the right spot (upper left above navigation) now...

    what to do...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I posted the complete code (css/html) at the very end of my last post.
    Copy and paste the complete code and run it beside your images folder as test.html or something like that.

    Compare it to your code to see where you went wrong.

  6. #6
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i copied and pasted what you sent and DIV 3 and DIV 1 are out of place... have a look please:

    http://cleanitvalet.com/test/index.html
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Looking at your new live code these are some things I see missing that I explained above.

    1) You have not set the "clearfix" float containment on your main wrapping div.
    2) You did not float your Nav div to the left
    3) You did not float the #real_content to the right
    Code:
    #page_content {
      width: 855px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 35px;
      margin-top: 25px;
      background: url(images/pipe_left.gif) top left repeat-y;
      padding-bottom: 10px;
    }
    /*no clearfix added here yet*/
    
    #sitebranding h1 {
      display: none;
    }
    
    #tagline p {
      display: none;
    }
    
    #header {
      height: 60px;
      width: 540px;
      margin:-17px 0 17px 222px;
      background: url(images/header.gif) top left no-repeat;  
    }
    
    #page_word {
      float:left;
      width: 63px;
      height: 66px;
      margin:-3px 0 -3px 33px;
      background: url(images/word1.gif) top left no-repeat;
      display:inline;/*ie6 dbl margin bug*/
    }
    
    #horiz_pipe {
      width: 855px;
      height: 3px;
      background-color: #444444;
    }
    
    /* nav styling */
    #navigation {
    /*no float added yet*/
      width: 124px;
      text-align: center;
      margin-top: 19px;
    }
    
    #navigation ul {
      list-style: none;
    }
    
    #navigation li a:link, #navigation li a:visited  {
      font-size: 18px;
      display: block;
      padding: 5px 0 5px 0;
      color: #828282;
      text-decoration: none;
      margin-bottom: 10px;
    }
    
    #navigation li a:hover {
      color: #444444;
    }
    
    /* real content */
    #real_content {
      position: absolute;/*needs to be a float and margins*/
      top: 149px;
      left: 540px;
      width: 650px;
    }

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    yeah i copied and pasted what you sent and DIV 3 and DIV 1 are out of place... have a look please:

    http://cleanitvalet.com/test/index.html
    Div#1 (image Div#1 actually) is exactly like it was on your original link

    Now float the two divs and adjust the margins to your liking.
    As for Div #3 I had mentioned that you would need to adjust it to your preferences. Just change the margins.
    Code:
    #real_content {
      float:right;
      width:650px;
      margin:150px -100px 0 0;
      position:relative;/*IE6 needs this when shifting outside of parent*/
    }

  9. #9
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok cool... i thought that was the exact code or something...

    I didn't even know what clearfix was, but I'm reading about it now. I'll start again tomorrow and see if I don't have any other questions.

    thanks again...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your welcome.
    You can zoom in on your page now and it holds together.

  11. #11
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again... you wanted me to position #page_word within #header. This causes
    a problem because I actually need #page_word to the left of #header so "float: left"
    in #page_word will lock it within the #header div when need it off to the left above
    the navigation.

    the markup you kindly added to:

    #header {
    height:60px;
    width:540px;
    margin:-17px 0 17px 222px;
    background:url(images/header.gif) top left no-repeat;
    }

    #page_word {
    float:left;
    width:63px;
    height:66px;
    margin:-3px 0 -3px 33px;
    background: url(images/word1.gif) top left no-repeat;
    display:inline;/*ie6 dbl margin bug*/
    }

    <div id="page_content">

    <div id="header">
    <div id="page_word"></div>
    <div id="sitebranding"><h1>Testing</h1></div>
    <div id="tagline"><p>more and more testing..</p></div>
    </div> <!-- end of header div -->
    ---
    I realized #page_word was inside #header so I took #page_word out of the #header
    and had #page_word come before #header and floated BOTH left with margin-right
    to #page_word creating separation between #page_word and #header.

    http://cleanitvalet.com/test/index.html

    Im also thinking about positioning both #page_word and #header relative because if I had say "margin-top: -15px" for #page_word instead of relative positioning, negative
    margins cuts off the line piping area for the top of page.

    #page_word {
    float:left;
    width:63px;
    height:66px;
    margin-right: 150px;
    background: url(images/word1.gif) top left no-repeat;
    }

    #header {
    height:60px;
    width:540px;
    background:url(images/header.gif) top left no-repeat;
    float: left;
    }

    ---
    another problem is that IE7 and IE6 are displaying the proportions for padding within
    the top of the page all messed up even before the relative positioning is implemented...
    why is IE7 and IE6 displaying the top of this page differently from FireFox and IE8?
    (the area underneath div 1 and div 2 are being extended vertically)

    http://cleanitvalet.com/test/index.html
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    Hi again... you wanted me to position #page_word within #header. This causes
    a problem because I actually need #page_word to the left of #header so "float: left"
    in #page_word will lock it within the #header div when need it off to the left above
    the navigation.
    If you need it "on the left side and above the nav" now then yes you will want to take it back out of the header. That is not where it was when I gave you the revised code though. I was imitating what I saw before a zoom with your original link.

    I think the problem is that my monitor was displaying it different than yours because you were AP'ing off the viewport originally. Hence I was not seeing it in the same place that you were.

    That is the reason you need to position it in relationship to your main wrapping div. It can be done either way (floats or position) as long as you are using the wrapping div as your reference.

  13. #13
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok then two questions please:

    1) if i "postion: relative" for a div i notice that this DOES NOT mess up layout when user zooms in and out... is this the case with all major browsers (i develop using FireFox)? i ask because i know "position: absolute" messes things up bad when user zooms in and out...

    http://cleanitvalet.com/test/index.html
    2)why this page look the same in IE8 and FireFox, but adds extra white space underneath DIV 1 and DIV 2 when viewed in IE7 and IE6. What .css problem is causing this?

    thanks again...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    1) if i "postion: relative" for a div i notice that this DOES NOT mess up layout when user zooms in and out... is this the case with all major browsers (i develop using FireFox)? i ask because i know "position: absolute" messes things up bad when user zooms in and out...
    Relative positioning does not remove an element from the page flow as Absolute positioning does. But RP will position an element in relation to itself and the original space it occupied is still preserved. It leaves a black hole behind if you will and neighboring elements still act as if the RP element never moved.

    CSS static and relative positioning
    CSS absolute and fixed positioning

    2)why this page look the same in IE8 and FireFox, but adds extra white space underneath DIV 1 and DIV 2 when viewed in IE7 and IE6. What .css problem is causing this?
    That clearing div your using is adding a default line-height in IE6/7, you really don't need a hard clearing div there anyway.

    But when you do need a clearing div
    set the font-size to zero and give it overflow:hidden to kill IE6/7 default line-heights on empty divs.

    All you need to do is set clear:both on your #horiz_pipe, that fixes IE6/7. Remove the clearing div from the html and adjust your css.

    Code:
        <div id="page_content">
         
          <div id="page_word"></div>
          <div id="header">
            <div id="sitebranding"><h1>Testing</h1></div>
            <div id="tagline"><p>more and more testing..</p></div>
          </div> <!-- end of header div -->
          
          <!--<div class="clear_it"></div> not needed-->
         
          <div id="horiz_pipe"></div>
    Code:
    .clear_it {
    clear: both;
    font-size:0;
    overflow:hidden;
    }
    
    #horiz_pipe {
      clear: both;  
      width: 855px;
      height: 3px;
      font-size:0;/*IE6/7 need this*/
      background-color: #444444;
    }

  15. #15
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks great now... everything does... thanks
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  16. #16
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one more question though...

    http://cleanitvalet.com/test/index.html

    well in FireFox, the #navigation content is just tall enough to fit and match the #DIV 3 area nicely... however, in IE 6 and 7 this #navigation is being stretched out lengthwise so that it is much longer in length than #DIV 3 and it is causing massive problems...

    please help...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I saw the problem briefly but when I refreshed the page it was fixed.
    You must have changed something in the css before I got a chance to look at it.

    EDIT:
    Ok I see it happening in IE6 now, let me take a look

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, try setting the anchors to have haslayout
    Code:
    #navigation li a:link, #navigation li a:visited{width:100&#37;;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Give IE6 haslayout on the nav li a by setting a width, you don't need a:link. Just set it as "li a"

    Code:
    #navigation li a, #navigation li a:visited  {
      font-size: 18px;
      display: block;
      width: 124px;
      padding: 5px 0 5px 0;
      color: #828282;
      text-decoration: none;
      margin-bottom: 10px;
    }

  20. #20
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks everyone worked like a charm... just had to match the anchor widths with the div... thanks for the direction...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    .. just had to match the anchor widths with the div...
    It's not that you had to match the widths, a defined width was just the easiest way to trip "haslayout" for IE6 in this case.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    thanks everyone worked like a charm... just had to match the anchor widths with the div... thanks for the direction...
    As Ray said all it needed was haslayout. zoom:1; woulda also worked however it isn't valid. THe width was the easiest to set because it's valid and safe .

    You can find a list of all the haslayout properties/values in the list Ray gave you. It depends which to use in a certain situation though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •