SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Starting site utilizing HTML Utopia book...

    So, I am far enough into the book that I am starting to wet my feet with a lot of the knowledge I have picked up from HTML Utopia

    One initial hurdle I am experiencing that I am stumped on. Here's the site I am building: www.vertpro.com

    This site is laid out using CSS inside a center frame. (left frame, middle, right). If you notice, on the bottom I have a horizontal scroll bar appearing. I have no clue as to why, and no matter how wide I make the frame, it always shows the same amount of extra scroll down there. All images are max 640 wide and currently the frame is set to 660 (640 + 20 to allow for the vertical scroll). Margin is set to "0" on the body tag, same with padding. My CSS file is at www.vertpro.com/vertpro.css . Can anyone help on this one? I've spent about 2 hours trying to trouble shoot it and I've run out of ideas %) .

    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using? Mozilla Firebird does not show any scroll.
    -Lewis

  3. #3
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 6 .. hm.

  4. #4
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MetalAges
    IE 6 .. hm.
    Yep, Opera does not have it either. IE6 does some strange things with width. Try reducing the width of left and right to 139 pixels and see what happens.

    Edit: He actually mentions this phenomena in the book, can't remember where, but he makes a point of things not adding up to 100%. If it adds up to even 99.5%, then IE is happy.

  5. #5
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I didn't have to change the 99.5% or anything (I saw that part and it refers to dealing with asolution when you are using decimal paddings etc. like 1.5% padding etc., unless I missed something).

    What I did chang eto make it work though, is the DOC TYPE reference. Originally I had:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    I changed that to:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    This was talked about in the Utopia book when dealing with IE6 and getting it to kick into "quirks" mode. Still to green about it to explain it further, but it solved my problem. Also solved the problem I was having with the scroll bar CSS edits (they show up now whereas they did not before).

    Does anyone that has more knowledge of DOCTYPE stuff know what the cons of this will be for me?

  6. #6
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, i downloaded Firebird as well to test in addition to my Mozilla Gecko... mama mia. Now both of those do not show the dashed content boxes correct whereas IE does, LOL. Back to the drawing board bleh!

  7. #7
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I had to abandon this CSS hurdle for now... I need to get this site done today. Seems to be a lottt of quirks when dealing with issues between the different browsers, and I'm only dealing with IE 6, Firebird, Gecko. I thought all these problems were history sheesh lol. I will have to reattempt this one after today but it's back to the ol reliable table method for today, doh!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Does anyone that has more knowledge of DOCTYPE stuff know what the cons of this will be for me?
    If you use the partial doctype (without uri) then ie will work in quirks mode. Among other things this will make ie6 use the broken box model (where padding and borders are inside the width of the element whereas in the correct box model padding and borders are added to the width/height of the element.)

    This will mean that when you are working in quirks mode your layout will probably not work on other browsers such as mozilla etc. Obviously quirks mode in ie6 makes the layout similar to ie5 and 5.5. which have the broken box model anyway.

    It is generally regarded easier to code in standards mode with a full doctype and then just cater for the broken box model in ie5 and ie 5,5 ( don't use padding and borders on the same element that has a specified width or use the box model hacks). This is easier than the reverse of trying to change it for every other browsers except ie5 and 5.5.

    I assume the link at the top of the page now refers to your new table design so I can't say what your problem was. If you were trying to copy that design into css only then I can't see that there would be much problem though.

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I may be wide of the mark here but if it is the table in your link that you are converting to css then here it is in css for you.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Verztyle Productions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
     scrollbar-3d-light-color:#CCCCCC;
     scrollbar-arrow-color:#CCCCCC;
     scrollbar-base-color:#666666;
     scrollbar-dark-shadow-color:#333333;
     scrollbar-face-color:#000000;
     scrollbar-track-color: #666666;
     scrollbar-highlight-color:#CCCCCC;
     scrollbar-shadow-color:#666666;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     margin: 0px;
     background-color: #000000;
     padding: 0px;
     color: #CCCCCC;
     text-align:center
    }
    #header {
     height: 170px;
     background-image:  url(http://www.vertpro.com/images/vertback_01.jpg);
     background-repeat: no-repeat;
     color: #FFFFFF;
     width: 640px;
     margin:auto;
    }
    #left {
     background-image: url(http://www.vertpro.com/images/vertback_02.jpg);
     width: 640px;
     background-repeat: no-repeat;
     margin:auto;
     height: 582px;
     position:relative
    }
    #right {
     background-image: url(http://www.vertpro.com/images/vertback_04.jpg);
     background-repeat: no-repeat;
     position: absolute;
     width: 140px;
     left:500px;
     height: 582px;
     }
    #footer {
     background-image: url(http://www.vertpro.com/images/vertback_05.jpg);
     background-repeat: no-repeat;
     position:absolute;
     height: 122px;
     width: 360px;
     left: 140px;
     bottom:0px;
    }
    #splash1 {
     height: 80px;
     width: 344px;
     left: 140px;
     top: 170px;
     position: absolute;
     padding: 6px;
     border: 1px dashed #999999;
     margin: 6px;
    }
    #splash2 {
     height: 80px;
     width: 344px;
     left: 146px;
     top: 268px;
     position: absolute;
     padding: 6px;
     border: 1px dashed #999999;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="left">
     <div id="right"></div>
     <div id="footer"></div>
    </div>
    </body>
    </html>
    The layout is the same in IE, mozilla, firebird and Opera but it does of course depend on what you add next.

    The coloured scrollbars only show in IE and will only show in quirks mode so you will have to use a partial doctype if you want to see them.

    If that wasn't the table you wanted then ignore this. It only took about 5 minutes to do anyway

    Paul

  10. #10
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. That part was actually the not so hard part. The part I really started experiencing the hurdle was when I started placing the content containers inside the middle area here: http://www.vertpro.com/index-frames.html

    In quirks mode, it shows fine in IE etc, of course..but in Firebird/Mozilla etc. the right side border gets pushed outside the boundary of the middle section and into the right graphc section. I tried everything I can think of and every combo I could come up with to try and make it not so, but to no avail. I assume because, reading the post above a couple spots, that being in Quirks mode will blow out the other browsers.

  11. #11
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I too had to play with this a little. I took a different approach than Paul did though (he is far better at this CSS stuff than I am) in that what I did uses a fluid design with no absolute or relative positioning.

    I threw it up on my site, PM me if you want a link to view it.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Theres no problem in putting those boxes in the middle you just need to understand the rules a bit better.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Verztyle Productions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {height:100%}
    body {
     scrollbar-3d-light-color:#CCCCCC;
     scrollbar-arrow-color:#CCCCCC;
     scrollbar-base-color:#666666;
     scrollbar-dark-shadow-color:#333333;
     scrollbar-face-color:#000000;
     scrollbar-track-color: #666666;
     scrollbar-highlight-color:#CCCCCC;
     scrollbar-shadow-color:#666666;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     margin: 0px;
     background-color: #000000;
     padding: 0px;
     color: #CCCCCC;
     text-align:center
    }
    #header {
     height: 170px;
     background-image:  url(http://www.vertpro.com/images/vertback_01.jpg);
     background-repeat: no-repeat;
     color: #FFFFFF;
     width: 640px;
    }
    #left {
     background-image: url(http://www.vertpro.com/images/vertback_02.jpg);
     width: 640px;
     background-repeat: no-repeat;
     height: 582px;
     position:relative
    }
    #right {
     background-image: url(http://www.vertpro.com/images/vertback_04.jpg);
     background-repeat: no-repeat;
     position: absolute;
     width: 140px;
     top:0px;
     left:500px;
     height: 582px;
     }
    #footer {
     background-image: url(http://www.vertpro.com/images/vertback_05.jpg);
     background-repeat: no-repeat;
     position:absolute;
     height: 122px;
     width: 360px;
     left: 140px;
     bottom:0px;
    }
    #splash1 {
     height: 80px;
     width: 344px;
     border: 1px dashed #999999;
     margin-left:auto;
     margin-right:auto;
     margin-bottom:25px; 
    }
    #splash1 p {padding:6px}
    #container{width:640px;margin:auto}
    </style>
    </head>
    <body>
    <div id="container">
     <div id="header"></div>
     <div id="left">
       <div id="splash1"><p>&bull; This is a test of news headlines.</p></div>
      <div id="splash1"><p>&bull; This is a test of news headlines.</p></div>
      <div id="right"></div>
      <div id="footer"></div>
    </div>
    </div>
    </body>
    </html>
    This works in all the browsers as mentioned above.

    (I'm sure Keriam's answer is just as good as well . )

    One thing I'm not sure about is why you are using frames? Hardly anyone uses frames these days as they are very bad for a number of reasons, least of all they make your site almost invisible on the web as search engines don't like them.

    I wouldn't use them unless you have a very good reason.

    Paul

  13. #13
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am going to try that code right now....

    I used frames because I was having trouble centering up everything in the page. I enclosed it all within a DIV tage with align set to center and it wouldn't work for me. Same within a <p> tag. MAma I feel so dopey on these forums...LOL. That was the only reason for the frames, center alignment.

  14. #14
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SWEET! It worked indeed. Now time to compare and dissect to see what I was doing wrong. Thanks for all the replies and thanks Paul for the code, let me know if you need any graphics or somethig in the future

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad it helped.

    One error that crept in there was that you need to change id="spalsh1" to class="splash1" and then change #splash1 to .splash1.

    It won't make any difference to the layout but you are only supposed used to used id's uniquely (ie once per page) oherwise it should be a class. The error crept in when I deleted your #splash2 id as it was unnecessary but then i forgot to change the splash1 to a class so you could use it over again.

    Thanks for the offer of graphics (you obviously know my weak spot lol).

    Paul

  16. #16
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I had no idea on your weak spot, that's just what I'm best at lol. I'm still learning this CSS, obviously, and using the HTML Utopia book as a guide to start learning some of the more tougher layout tricks so I can move away from tables. Some of the things you used I haven't come across in this book yet and it baffles me a bit:

    I noticed on #left you made it 640px wide instead of it's actual needed size of 140px, and you made it relative instead of absolute. I know that you contained the other IDs into it, just not sures to WHY that was needed, is it a trick? Also, the margin settings to just simply "auto" ... I can't seem to find in this book where it goes into that more so that I know *why* that achieves the desired affect.

    Also, i was going to have splash2 as a different size so that's why i had made it an ID. i just left it as is (a duplicate) as I was troubleshooting the issues I was having.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok ! I'll try and explain the reasoning behind the code!

    margin:auto

    When you set margin:auto you are setting all four side of the element to auto but all we are really interested in is the left and the right.

    What you really need is margin-left:auto and margin-right:auto the margin top and bottom don't really apply in this case. What you are telling the browser is that it can apply automatic margins to the left and right sides of your fixed widtrh element. This means that they will adjust to the same length. If they are the same length then that must mean that the element is centred.

    So margin:auto centres an element in compliant browsers. Remember the element must have a specified width otherwise this technique doesn't work.

    Unfortunately IE5 and ie5.5. don't understand margin:auto so you also have to add another rule to a parent element (such as the body in your example) which is text-align:center. Text-align:center should only centre text and images within the element however IE5 and 5.5. (and ie6 in quirks mode) get this wrong (luckily) and will also centre nested elements.

    Therefore to centre for all browsers we use margin auto on the fixed width element itself and then text-align:center on the parent element.

    In your page above I just made a container div for the whole page and simply gave it a width and margin:auto. This container contains all the other elements so that we don't need to add margin:auto to every single element.

    #left you made it 640px wide instead of it's actual needed size of 140px, and you made it relative instead of absolute
    #left is your main content area and needs to be wide enough to hold all your content. The fact that you have a background image is beside the point because you will be placing things inside this element anyway.

    Although the element is defined as position:relative it is in fact still in the flow of the document because no co-ordinates have been used. Therefore it just follows on naturally from the header. It was given a position relative so that it would have a stacking context so that we could place elements in relation to the left element and not in relation to the body. This keeps everything together.

    This then makes it easier to place the #right element and the #footer element where we want. We just place them in relation to the top left of the #left elements top corner (which is 0,0).

    I made the right element and the footer element position absolute so that they didn't take up any space. Absolute positioning removes an element from the flow and basically doesn't take up any space on the page. However as it is contained within the #left element the whole lot will move together when the page is resized smaller.

    When you add more content you will still need to make sure your content doesn't overlap the background images unless of course you want that effect.

    Yes by all means use splash2 for different sized elements that you want to follow on. Just look how splash1 is positioned and you should be able to work out what properties to use.

    I added the 6px padding to the <p> tag in splash1 so that it doesn't upset the broken box model of ie5 and 5.5. If you put the 6px padding directly into the splash1 element itself then ie5 will be 12px (6px each side) smaller as it places padding inside the width when in fact should add to it.

    The same thing should be done for the borders but I don't think anyone will notice a 2px difference in the element so it's not worth bothering with.

    There are many different ways that this page could be coded and my example is just one way. I'm sure Keriam's would be just as interesting.

    You could for example stitch your image into one big image and just stick it centre in the background of the body tag. Then all you need to do is use the container div which you can set to the width and height of the background image and place your content inside that.

    Hope that helps.

    Paul

  18. #18
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Killer, food for thought indeed. Thanks Paul! Checks in the mail!


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
  •