Don’t worry about those, they will have content specific to their size, always. I probably have a choice, but I’ll be controlling the content to where when it hits a certain character length it stops it short with ‘…’
No need to worry on that
I feel like a moron for leaving that there, I removed it earlier then ctrl+z back a bit to change something and forgot to delete it again lol
It broke IE though.
Actually it’s pretty screwed up in FF too, I haven’t had much time to look at it but it seems the code is way different than what I started with. Gonna have to clean this up, I got some time now though.
I must have had something weird, but you went and changed my layout on me. I had the CONTENT div inside the holder and then the home_1 and home_2 inside the content for a reason. On other pages, the home_1 and home_2 will not even be there, it will just be content inside the “content” div, which should show as the black area. The special images and whatnot are home page only, which will be controlled by php, I’m just trying to get it layed out correctly. Also if you look carefully at the top of that content section, it’s dropped down like 11-12 pixels in Firefox. IE seems to be either dropped by 1 px or it’s a mistake I made with the image (quite possible).
It will be black without those elements exactly as you requested.There’s no need to do anything.
The Content element was a wasted element which I moved down the html because you said that you wanted content outside of the black section and on the body background - which is what it does.
Also if you look carefully at the top of that content section, it’s dropped down like 11-12 pixels in Firefox. IE seems to be either dropped by 1 px or it’s a mistake I made with the image (quite possible).
I can’t see any difference between ie7 and firefox.
You aren’t supporting IE6 (I assume) and that will look different because IE6 doesn’t understand png transparency so the transparent part of the images will display as a light blue solid color.
and it still behave correctly, but the “test” div I made just to check, was still in the black column background instead of on top of the solid background.
edit:
Oh and I took a little SS so you could see what I mean by it being aligned down a bit in FF:
Compare that spot to IE, IE isn’t shifted down like it is in FF.
You seem to have removed 2 1/2 elements which would be invalid (i.e. the last closing div after the breaks in your code above) and therefore not closing the parent and letting it bleed into other elements.
The gap in your picture is because you haven’t yet addressed the default margins of the elements you are using. The p element has a margin-top in most browsers but not in IE less than 8 hence the difference.
It’s your job to control all the margins and padding of all the elements you use (e.g. html,body,form,p,ul,ol,dl,h1,h2,hn… etc.).
If you remove the top margin form the p element and set a consistent bottom margin then the gap will disappear.
Oh okay I see what you mean by removing the div tag, that was my bad. So it makes a little more sense now, anything inside the main_content_holder is going to show in the black area, then any div put after that will continue down in order. What is causing the other divs to repeat down directly below the top div instead of screwing up and being placed somewhere randomly? I don’t see anything controlling it’s placement.
Because the elements are back in the flow of the document now and will just follow on logically. They all sit inside #main-container and therefore will align their left edge within #main-container as required.
Allowing a page to flow logically is the best way to code as you have to do nothing if you want another div to follow logically in sequence. If you absolutely position elements then you have to absolutely position everything from then on because they are removed from the flow.
Elements in the normal flow can be shifter with margins or aligned horizontally with floating and still retain the flow of the document and let content fill up without needing to do anything special.
It was working by illusion because of the background images I was using on the home page. I’ve noticed it replaces what I have as my “mainbg” which defeats the purpose of me wanting to start half way down the page. www.berryequipment.net/orsca/ click race schedule and you’ll see what I mean.
I’m not sure what you are getting at but if I understand correctly then you just need to do the same as you did on the home page.
Create the top part of the image and place it in a div just like you did with home_content1. The top part will match the top part of the background you wanted and as the div extends the repeating background underneath takes over.
You already know you can’t start a repeat half way down the page and the only way is to repeat all the way and then just cover up the top part with another image as we already did for the home page. This new background can be used on all other pages unless you want different graphics like the home page.
The only problem I have with it now (I did the background fix) is when on a small resolution or restored down, the nav and content area is going to shift since everything is relative now, it isn’t stuck in place.
Again I’m not quite sure what you are getting at as everything moves together until you get to a minimum width of course and then something’s got to give.
You should set a min-width on the container so that when it’s as small as it can get a scrollbar will appear rather than your right column sliding under the layout. (min-width doesn’t work in IE6 but is fine in IE7 and upwards.)
Well it worked when they were absolutely positioned, there must be something that can be done to make it work correctly. I’ll have to revisit this at a later time or something.
