I have not been able to find a single solution to my problem. I made a three column div layout but there is a sizeable space between my header and my content and menu divs. you can view the page here: www.imthequeen.com/index3.html Here is my code: <style type="text/css"> body { margin: 0px; padding: 0px; background: url('bg.jpg'); } h1 {text-align:center;} div#header { clear: both; background-image:url('banner.jpg'); height: 200px; width: 800px; margin-left:auto; margin-right:auto; display: block; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#left { float: left; width: 150px; height:500px; background: #fff; display: block; } div#right { float: right; width: 150px; height:500px; background: #fff; display: block; } div#content { height:500px; width:500px; margin-left:auto; margin-right:auto; background: #fff; } div#footer { clear: both; width:800px; margin-left:auto; margin-right:auto; text-align:center; } </style> If anyone has a solution I would greatly appreciate it.
This is a real ugly way of doing it but I can´t come up with another solution for you. div#container { width:800px; margin-left:auto; margin-right:auto; position: relative; top: -21px; } PHP: What i added was position: relative; top: -21px; I hope someone else can come up with a better solution for you, but if not you still can use this way..
Ok, much of this is likely NOT the root of your problem, but I'm just going down the list to see if I can find what's causing that gap... 1) You might want to get the HTML 3.2 out of your XHTML doctype. 2) You might want to use a STRICT doctype since this is a new page. Tranny is for legacy ****. 3) A possible cause is the lack of a CSS reset. Default padding and/or margins may be screwing with you. 4) You don't need to say div# every fracking time. 5) You should probably have condensed your properties. Margin:0 auto; may have corrected that issue. 6) there is no 'name' attribute for anchors, you should NOT be using presentational attributes like 'border', and that menu is a menu - aka a list of choices... List? Don't we have tags for those? 7) Never fix the height of flow elements. You want that white background (or any background for that matter) behind all three columns, put the color and/or background on your #container wrapper. 8) A little more sensible indentation wouldn't hurt either. 9) Image recombination for the menu might not be a bad idea, that way you can use image replacement techniques so people browsing with images off get something pretty to look at. Gimme a few minutes to get some food in my belly, and I'll toss together a working rewrite. -- edit -- yeah, it's the lack of a reset. The test * { margin:0; padding:0; } fixes it right up - lemme fix the rest of it. (I'd never use that on deployment code given how badly it mangles forms)
Ok, I did a rewrite for you, but I may have gone overboard on adding effects and changing things. http://www.cutcodedown.com/for_others/2kungfu4u/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/2kungfu4u is unlocked so you can grab the gooey bits and pieces. The targeted reset I use in the CSS removes all default margins and padding from elements, which was your actual problem with the page. While in there I tossed hover states on your menu, moved the presentational images out of the menu and into the CSS - recombining that menu and it's hover states into a single file. Hope this helps. I figure you might have a few questions on how some of the bits and pieces works, so fire away.
Heh, I don't rap, I don't sugarcoat. I tell you how it is straight up and to hell with if it offends anyone. Tends to be more... helpful - though not everyone can handle the truth. Basically, I'm a New Englander, we skip platitudes and jump right to the meat of ripping things apart to make them better. We are NOT what you would consider a friendly people. Which is why we'll feed you and give you the shirt off our back while saying "Whaddayah, freaking retahded?" Remember, our answer to everything is "Welp, yah cahn't geht theyah frum heeyah"
That was supposed to be jokingly, nothing really translates online, I'm from Ohio but I live in the south right now, but I try to hang out with northerners and they're the same way. If anyone learns anything from me it's that I am never serious if it sounds like I'm offended I probably kidding.
What if I wanted the top part to not sit directly at the top but rather to come down about 10-20 pixels? If I were to change the menu how would I recreate what you did with the images? Also, since you seem very adept at image work I thought I'd ask this question, If I wanted to add some grunge to the actual site around the edges how could I do that? The idea I am trying to put forth is like if the splatters were on the edge and you could see through to the background.
add padding-top to the body element in the CSS. I'd match it with an equal bottom padding so that you have an even spacing all-around. Why padding on body and not margin on #pageWrapper? Some browsers will collapse the bottom margin, or double the top one. You'll notice I don't use margin a whole lot for those reasons... All you need to do is redraw that one image file: http://www.cutcodedown.com/for_others/2kungfu4u/images/mainMenu.png If you want to change it's dimensions you'll want to adjust the width and height of "#mainMenu a" - "#mainMenu span" should be twice the width of "#mainMenu a", and the negative 'left' value on the span should be set to the width of the anchor. Dealing with the height is a bit trickier. It's best to keep all your buttons the same height for simplicity - any top/bottom padding is applied to #mainMenu itself instead of on the button... this is why that same image is also applied to ul#mainMenu. If you look at the background-position applied for each button, you'll see that the first button's negative height offset is equal to the top padding, the second one is that top padding plus the button height, and so on and so forth down the line. change the height of the buttons and padding, you'll need to redo all those numbers. (If you don't want to add it up by hand/in your head, a simple spreadsheet can make it easier) That's kind of tricky and problematic... First, you have the problem of lining up the corners. Such an effect on the bottom-left for example would not 'line up' your edge images if the height of the page changes - and fixing the height of the actual content area is generally a REALLY bad idea. As such if I were to try to implement that type of image effect I would apply it only to the sides and have non-transparent header/footer edge where they meet. Transparency to the desktop can also be problematic as the first thing most artists will dive for is alpha transparency .png - the problem is the filesizes for that approach are often completely nutters, you can't get it to work right in IE6, you have do strip out the GAMA line from the .png so IE color-matches... The list goes on and on. If you are going with a solid background, I would 'pre-composite' the image on a test page, and NOT use transparency. If you are going to have a tiled image background (like the one you are using) I'd see if I could sneak by with a palettized image using what's called 'close enough aliasing' for the transparency, or try to line up the two background patterns with compositing. Since yours is a fixed width layout that's actually fairly simple, just set the body background to align "top center". It really would depend on the images involved. There are a lot of visual effects I will not implement on a website because of absurd filesizes, cross-browser issues, and a host of other problems the people who start out designing their layouts in Photoshop don't even think about. It's why my approach to building a site flips that around 180 degrees. I write my text content (or a sample), then markup the that content semantically in HTML with no real concern for the final appearance. Then I create the layout in CSS, then I go back and add any presentational hooks (like the empty spans, nested border divs) to it... Then and only then do I start up the paint program to hang images on the layout.
Well, the background isn't final, I plan on it being a composite of several images done in that style, so it shouldn't tile. Here is a good example of what I am talking about: hasanminhaj.com/bio/