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…
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.
[B]#header[/B] {
height:60px;
width:540px;
[COLOR=Blue]margin:-17px 0 17px 222px;[/COLOR]
background:url(images/header.gif) top left no-repeat;
}
[B]#page_word[/B] {
[COLOR=Blue]float:left;[/COLOR]
width:63px;
height:66px;
[COLOR=Blue] margin:-3px 0 -3px 33px;[/COLOR]
background: url(images/word1.gif) top left no-repeat;
[COLOR=Blue]display:inline;/*ie6 dbl margin bug*/[/COLOR]
}
Now nest it in the header in your html
<div id="page_content">
[B]<div id="header">[/B]
[COLOR=Blue]<div id="page_word"></div>[/COLOR]
<div id="sitebranding"><h1>Testing</h1></div>
<div id="tagline"><p>more and more testing..</p></div>
[B]</div>[/B] <!-- end of header div -->
Do the same technique (float & margin) with the other AP div #real_content
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.
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.
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.
#real_content {
float:right;
width:650px;
[COLOR=Blue]margin:150px -100px 0 0;[/COLOR]
position:relative;/*IE6 needs this when shifting outside of parent*/
}
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.
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)
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.
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?
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.
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.
<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 -->
[COLOR=Red]<!--<div class="clear_it"></div> not needed-->[/COLOR]
<div id="horiz_pipe"></div>
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…
