I searched around and seen multiple postings on how to fix my issue, however, I couldn't get any of them to work. I am sure it is just my stupidity. Here is my css code: @charset "utf-8"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #161616; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } #container { width: 906px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #161616; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ text-align: left; /* this overrides the text-align: center on the body element. */ } #header { background-image: url(images/img_03.png); background-repeat:no-repeat; height: 196px; } #nav { background-image:url(images/img_05.png); background-repeat:no-repeat; height: 35px; } #container2 { width: 279px; background: #161616; text-align: left; float:right; } #sidebar1_top { background-image:url(images/img_08.png); background-repeat:no-repeat; width: 279px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ height: 39px; background: #161616; /* the background color will be displayed for the length of the content in the column, but no further */ } #sidebar1_middle { background-image:url(images/img_10.png); background-repeat:repeat-y; width: 279px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #161616; /* the background color will be displayed for the length of the content in the column, but no further */ } #sidebar1_bottom { background-image:url(images/img_12.png); background-repeat:no-repeat; width: 279px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ height: 39px; background: #161616; /* the background color will be displayed for the length of the content in the column, but no further */ } #mainContent_container { width: 613px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #161616; text-align: left; /* this overrides the text-align: center on the body element. */ } #mainContent_top { background-image:url(images/img_06.png); background-repeat:no-repeat; height:39px; } #mainContent_mid { background-image:url(images/img_09.png); background-repeat:repeat-y; } #mainContent_bottom { background-image:url(images/img_11.png); background-repeat:no-repeat; height:39px; } #footer { background:#161616; background-image:url(images/img_15.png); background-repeat:no-repeat; height:94px; } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } Code (markup): Here is my html 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="twoColFixRtHdr.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="nav"></div> <div id="container2"> <div id="sidebar1_top"></div> <div id="sidebar1_middle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque</div> <div id="sidebar1_bottom"></div> </div> <div id="mainContent_container"> <div id="mainContent_top"></div> <div id="mainContent_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <h2>H2 level heading </h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. </div> <div id="mainContent_bottom"></div> </div> <div id="footer"></div> </div> </body> </html> HTML: Now, I know there are probably other issues in there so be nice. The CSS file comments are because I started from using a template out of Dreamweaver and then modified and made all kind of changes. Haven't deleted the comments yet. The main issue is with the sidebar. I cannot get those background images to display in the floated div. Like I said, I searched your forums and tried the posted fixes but couldn't figure it out.
Do you have a live copy? I'd have to see the images in question to be 100% sure what's going on - and I could probably suggest some techniques for reducing the number of separate images needed speeding up your page-loads. Some of the problem could be that you are restating widths you don't have to; If #container2 is set to width:279px you don't need to restate that on it's block level child div. Condensing your properties might also make it clearer what's going on... I would also suggest using a CSS reset so you have less cross-browser worries on things like margins and padding... There's also no reason to state the background-color on #sidebar1_top and #sidebar1_bottom, or even middle for that matter since it's wrapper, #container2 has the same color on it. Really though I'd have to see what you are trying to do for images to say a whole lot more. I do think that some of your problems could be stemming from not having a complete semantic markup BEFORE applying your CSS - but that's just the difference in how I do things from how most everyone else handles it. There are things like .clearfloat (which is just a play on clearfix) that I'd never use because they aren't needed if you know what you are doing.
Here is a sample of it: http://www.teamflatline.com I still have to cut the nav up for the buttons. Any recommendations or changes will be considered. This is my first website.
azace, as far as i concern the problem is not on the float box. but on your css. Lets use #sidebar1_top as example : ( i removed the comments so we could focus) #sidebar1_top { background-image:url(images/img_08.png); background-repeat:no-repeat; width: 279px; height: 39px; background: #161616; } Code (markup): first you define background-image : , next background-repeat : .. that is stil all good, however near the end you define background : this will override all your previous setting. If you only want to define the background color use this background-color : , better yet use shorthand ie : #sidebar1_top { background:#161616 url(images/img_08.png) 0 0 no-repeat; } Code (markup):
Good catch - agreed, that's most likely the cause. Condensing the properties as I suggested (and exactly what your code example shows) would have avoided that problem in the first place. Though the page is knee deep in other problems. Table for layout, no graceful fallback for images off, images for large sections of content, non-semantic markup... I had a few moments to spare, so I tossed together how I'd approach what you are trying to do. http://www.cutcodedown.com/for_others/azace/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/azace is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working 100% in IE 5.5, 6, 7 & 8, Opera 10.10 and 10.52 beta, FF2 and 3.6, and the latest flavors of Safari and Chrome. The biggest changes were reducing the number of images used to only THREE. One shared image for the heading and footer, one for the main menu, and one for all the styled borders. By sliding them around in the CSS we reduce the number of separate files needed, remove that pesky 'hover' delay as it loads the menu images on first roll-over, made it simpler to deal with the menu code-wise (even if it is a hair more markup), and reduced the overall filesizes. Case in point, it takes your original 300k in 20 images to just 94k in three, brining the template back under the simultaneous handshake limit. You'll notice I moved the content column before the sidebar and added an extra couple wrappers and sandbags. This opens you up to the possibility of a fluid layout instead of fixed; in fact all the hooks are there, it would just take some minor tweaks to implement it... I used a variation of my Eight corners under one roof technique for the border images. One file == faster page loads == less server strain. It also means when combined they can share the same palette further reducing the filesize. The biggest savings though came from dropping those to 8 bit .png with no alpha channel. 178k is just too large for a header banner - now it and the footer combined are less than half that. Semantics-wise I mead the menu - a list of choices - into a list, made the first heading your single h1 (since you should only ever have one h1 on a page and every other heading should be a subsection of it - it's the only element that makes sense for it), and tossed in a couple paragraphs around the flow text. The largest change is the handling of images using a variant of 'gilder-levin image replacement' - if you turn images off (or pay attention during pageload on slow rendering browsers like FF or IE) you can see the content you have as images is also present as normal text. The dummy span's are given the background image and positioned over that text. This way search engines, screen readers, and people browsing without images have something to look at. Whenever you use an image instead of text, a technique like this should be used since not everyone is going to have images enabled - especially CSS images. Load it up your original in Opera Mobile or Opera Mini to see what I mean (hit 'small screen' in desktop opera to get the same rendering)- there are no navigation links. Try it with mine, and boom, you've got nav. It also means that with CSS disabled you still get meaningful formatting. Site title H1, menu as a list, I even have horizontal rules breaking up the various sections; which are removed for 'screen'. You'll also notice I left commented out the hooks to format for handheld and print. For handheld you will likely just want to copy the FAC from the screen stylesheet and not bother with much else apart from perhaps a few text-align's... for print I usually strip all colors, presentational images (as opposed to content images), declare the font sizes in pt, and set things like the menu to display:none (since there's no real reason for the user to want your menu wasting their ink). Hope this helps, or at least gets you thinking on some new directions on handling things.
Thanks for the help and tips. Like I said, this is the first website I have ever worked on so I guess I have a lot to learn. I had no idea you could use images in that manner otherwise I would have.
Okay, I got those changes made and started to add content to the site. How would I go about making more sidebar content boxes? I tried doing it but it just overlaps them. How would I go about making more main content boxes?
could you post your current code ( or live site url ) ? have you try to clear the float boxes ? i.e : clear : right; ( on sidebars)
#sidebar refers to the ENTIRE sidebar column, just as #content refers to the entire content column. You want separate subsections, your best bet is to make new div INSIDE #sidebar. (and move that border off of it to it's children). I just uploaded a copy that does that, the big change goes on inside #sideBar <div id="sideBar"> <div class="borderTop"><div></div></div> <div class="borderSidesOuter"><div class="borderSidesInner"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque </p> <!-- .borderSidesInner, .borderSidesOuter --></div></div> <div class="borderBottom"><div></div></div> <div class="borderTop"><div></div></div> <div class="borderSidesOuter"><div class="borderSidesInner"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque </p> <!-- .borderSidesInner, .borderSidesOuter --></div></div> <div class="borderBottom"><div></div></div> <!-- #sideBar --></div> Code (markup): I also moved the 4px bottom padding to .borderBottom instead of on #content and #sideBar so you can repeat those boxes until blue in the face in both columns. Those outer DIV are there to define the ENTIRE column - regardless of how many 'boxes' you put in them - It's part of why I make #sideBar an ID, as a reminder to only use it once. Oh, BTW - semantically the text inside .borderTop are not paragraphs and should not be defined with B, they should be heading tags. I'll add that to my example in a few moments.
-- I added the headings and footer examples too. Neither of those qualify as paragraphs grammatically, so in my mind it's semantically incorrect to wrap them in P. Basically <div id="contentWrapper"><div id="content"> <h2 class="borderTop">Under Construction<div></div></h2> <div class="borderSidesOuter"><div class="borderSidesInner"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. </p> <h3>H3 level heading </h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. </p> <!-- .borderSidesInner, .borderSidesOuter --></div></div> <div class="borderBottom">Posted by: azace --- April 3, 2010<div></div></div> <!-- #content, #contentWrapper --></div><hr /></div> Code (markup): With some minor changes to the CSS .borderTop, .borderBottom { position:relative; margin-right:2px; height:36px; padding:0 14px 0 16px; font:bold 100%/34px arial,helvetica,sans-serif; background:url(images/borders.png) 0 0 no-repeat; } .borderBottom { font:normal 100%/40px arial,helvetica,sans-serif; text-align:right; padding-bottom:4px; background-position:0 -36px; } Code (markup): If you REALLY want it as a paragraph you could make the .borderBottom DIV into a paragraph tag, but I wouldn't since it's not part of the article flow - it's separate information about the article. I try to reserve P for use around grammatical paragraphs instead of using it as a divider for layout - since layout is presentation and presentation goes in the CSS. Remember, say what things are - paragraph, heading, etc - not how they are going to appear. The use of 100% size on .borderBottom and .borderTop should be ok for the forseeable future so long as you remember to leave at least half the line blank. Really long titles could dick with you in the long term on that so far as the interaction with the background image is concerned, so it MIGHT not be a bad idea to set .borderTop to 16px and .borderBottom to 14px - though that's up to you depending on what you are planning to show for data. It's one of the few cases where I would even CONSIDER px for font-size to be valid; see the gilder-levin header for example. It might not be a bad idea to even consider moving the gradient part of that into it's own image file, moving the solid borders into the CSS, and making those headers/footers truly 'dynamic' on not just width, but height as well. With headings it's often a PITA if you have a long title you want to put there when the image size is fixed. Oh, and the white text on such a bright green has accessibility issues, very difficult to read. You might want to consider making that text black, or darkening up the green a bit. The 'ideal' is at least 50% luminance difference, and with full intensity green chewing up over 50% of the visible light spectrum, it's VERY hard to use bright green with white. Well, I must say I'm a little surprised this is your first - you're remarkably far along for a nube all things considered... part of why I want to tell you all this is I see a lot of potential... There's lots of little nuances and details that you will rarely find in the decade out of date books on the subjects or get from career educators who are just as far behind the times; much less the rubbish code vomited up as examples by trash like Dreamweaver. But I'm tryin, Ringo. I'm tryin' real hard to be the shepherd.