placement of div element

[luoifong]

I have the code that places a "tagline" below the global navigation links. However, the tagline is being positioned (centered) relative to the "wrapper1" tag instead of the "globalNav" tag. This is happening in NS7 and Mozilla 1.2.1. However in IE6 and Opera 6.05 it is being centered relative to the "globalNav" element. How can I have it centered in all browsers relative to the "globalNav" element, i.e. how can I fix it in NS7 and Mozilla (or is it acting correctly in these browsers?)

css code
----------------------------
body {
text-align: center;
min-width: 760px;
margin: 0;
padding: 0;
}

div#content {
width: 100%;
height: 85px;
background-color: #333366;
margin: 0;
padding: 0;
}

div#content div#wrapper1 {
position: relative;
text-align: left;
width: 760px;
margin-left: auto;
margin-right: auto;
background-color: #333366;
color: #ffffff;
}

div#wrapper1 #globalNav {
height: 85px;
margin: 0;
padding: 0;
text-align: center;
background-color: transparent;
background-image: url(/images/global/global_header_background.gif);
background-position: right;
background-repeat: no-repeat;
}

#globalNav ul {
background-color: transparent;
text-align: left;
margin: 0;
padding: 0;
}

#globalNav li {
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

ul li.globalNavText {
float:top;
}

#globalNav li:first-child {
border: none;
}

#globalNav #tagline {
font: bold 8pt/18pt Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: transparent;
position: relative;
text-align: center;
vertical-align: bottom;
margin: 0;
padding: 0;
}
-----------------------------------

html body code
-----------------------------------

<div id="content">
<div id="wrapper1">

<a href="/" class="logoLink"><img src="/images/global/logo.gif" width="125" height="85" alt="Home" border="0" align="left" /></a>
<div id="globalNav">
<ul>
<li><img src="/images/global/divider_header.gif" alt="" border="0" /></li>
<li><a href="/link1/" title="link1" class="headerLinks" />LINK 1</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link2/" title="link2" class="headerLinks" />LINK 2</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link3/" title="Link 3" class="headerLinks" />LINK 3</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link4/" title="Link 4" class="headerLinks" />LINK 4</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link5/" title="Link 5" class="headerLinks" />LINK 5</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link6/" title="Link 6" class="headerLinks" />LINK 6</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link7/" title="Link 7" class="headerLinks" />LINK 7</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
</ul>
<div id="tagline">This is the tagline</div>
</div>

</div>
</div>

---------------------------------------

[DrDoc]

Welcome to Webmaster World!

One thing you should remember is that position:relative by itself means absolutely nothing. You need to specify an offset (top/left/bottom/right). Right now you're saying "position this element, but without moving it" ;)

Center aligned text (text-align:center) is not supposed to move elements, just text. However, IE gets that wrong (possibly also Opera 6.05).

You may have to rethink your style sheet.

[DrDoc]

You also might want to take a look at this thread:
[webmasterworld.com...]

[Reflection]

First float:top; doesnt mean anything, you can only float left , right or none.

You probably also want to get rid of text-align:center; in your body.

Now the reason the text is off to the right a bit instead of centered is because of your logo. If you remove the text-align:center; from the tagline and also give that div a border you will see whats going on. Because the img is essentially floated to the left(your using the deprecated align) the block level tagline div stretches behind the floated img but the inline text of the div does not.

For a better explanation than I can give check this out: *ttp://www.positioniseverything.net/articles/float-theory.html

[luoifong]

well shoot...I thought I was making progress! I suppose I am, but obviously still have a lot to learn. Thanks for the quick replies. I'll read those threads/articles and try to get a better grasp of this.

I'll probably be back!

[Reflection]

Actually Ive had this problem before except I didnt know what was causing, but now I do so Im gonna try and find a solution.

[Reflection]

One thing you should remember is that position:relative by itself means absolutely nothing

This is only partially true. If you want to position something absolutely within a container, the container must be positioned.

#container{position:relative;}
#posAbsolute{position:absolute; left:0; top:10;}

<div id="container">
<div id="posAbsolute"> </div>
</div>

If container wasnt positioned the posAbsolute would be positioned absolutely to the next containing block, the default containing block is the <html> element.

Also in order to apply a z-index to an element it must be positioned, so setting position:relative; allows you to use z-index.

Anyway I think I found a solution to the problem...

First thing to do is place the logo inside the globalNav div(This is required for the solution to work in IE). Second define an id or us an inline style decleration to float the image left and also set position:relative; with a z-index of 1.

Next in the tagline position it absolutely with left:0; give it a width of 100% and a z-index of 0 so it will not overlap the logo.

That should take care of it. Works and looks the same in IE6 and Mozilla.

[luoifong]

ok, I'm working through that article over at positioniseverything.net. I'm still trying to understand the theory here, so forgive me if I'm a little too quick in responding...

Reflection, your solution kind of works in that the tagline is located in the same location across the major browsers. However, it is still centering the tagline relative to the combined image and globalNav links next to each other. I want the tagline centered relative to only the globalNav links. In other words, the tagline text is too far to the left. Using your solution I can change the "left" value of the tagline to a high enough value so that it looks centered with the globalNav block. For some reason though that doesn't seem like the best way to solve this.

I hope I'm making sense. I appreciate any further insight/comments you have. In the meantime I'll go finish that article!

btw, when I remove the text-align: center from the body tag, in IE it moves the logo/links/tagline all the way to the left of the screen. That's why I put the text-align: center in the body tag as it seemed to fix that problem (I got this way of doing it from the Frontpage css-discuss Wiki at [css-discuss.incutio.com)...]

[DrDoc]

This is only partially true. If you want to position something absolutely within a container, the container must be positioned.

True... But I meant as far as moving it ;)

[Reflection]

Ok try this then..

First put your ul inside the tagline div.

Change the left coordinate of tagline to approx. 125px(the width of your image) and the width to about 635px(the width of the globalNav minus the width of the image). You can also remove the z-index stuff from earlier as now the tagline div no longer crosses over the img.

This will result in your list of links and the tagline being centered in the space available on the right side of the image. Is that what you want or are you wanting the links to be left aligned beside the image with the tagline centered relative to the width of the list of links? If so change the position absolute stuff I gave you earlier and just float the tagline div left, making sure that the ul remains inside the tagline div. That should take care of it, if that makes sense :).

Just to make sure its clear here it is:

#globalNav #tagline {
text-align:center;
float:left;
}
img#homelogo{
float:left;
}

<div id="globalNav"><a href="/"><img src="" width="125" height="85" alt="Home" id="homelogo" /></a>
<div id="tagline">
<ul>
...
</ul>
This is the tagline
</div>
</div>

[luoifong]

Reflection, both your suggestions make sense. Thanks so much for taking the time to help me out. Both suggestions seem to work okay in IE6, NS7 and Mozilla, but neither work in Opera 6.05.

When I follow your first suggestion (leave the absolute positioning...change the left coordinate and width of the tagline), in Opera the globalNav links are not pushed up against the top of the window.

Your second suggestion is what I am really looking for. However in Opera, for some reason there is a line break right after the divider_header.gif after "Link 3." In other words links 1-3 are on one line, links 4-7 are on the next line, and the tagline is on the 3rd line. They all align to the left against the logo. In the other browsers it looks perfect...I'm not sure why it is acting the way it is. I'll experiment with it and see if I can figure out why it is acting that way in Opera.

Below is the code I'm using now..

css code
--------------------------------
body {
min-width: 760px;
margin: 0;
padding: 0;
text-align: center;
}

div#content {
width: 100%;
height: 85px;
background-color: #333366;
margin: 0;
padding: 0;
}

div#content div#wrapper1 {
text-align: left;
width: 760px;
margin-left: auto;
margin-right: auto;
background-color: #333366;
color: #ffffff;
}

#homeLogo {
float: left;
}

div#wrapper1 #globalNav {
height: 85px;
margin: 0;
padding: 0;
text-align: center;
background-color: transparent;
background-image: url(/images/global/global_header_background.gif);
background-position: right;
background-repeat: no-repeat;
border-width: 5px;
border-color: #3333cc;
}

#globalNav ul {
background-color: transparent;
text-align: left;
margin: 0;
padding: 0;
}

#globalNav li {
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}

#globalNav li:first-child {
border: none;
}

#globalNav #tagline {
font: bold 8pt/18pt Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: transparent;
margin: 0;
padding: 0;
text-align: center;
float: left;
}

---------------------------------------

html body code
--------------------------------------

<div id="content">
<div id="wrapper1">

<div id="globalNav">
<a href="/" class="logoLink"><img src="/images/global/logo.gif" width="125" height="85" alt="Home" border="0" id="homeLogo" /></a>
<div id="tagline">
<ul>
<li><img src="/images/global/divider_header.gif" alt="" border="0" /></li>
<li><a href="/link1/" title="Link 1" class="headerLinks" />LINK 1</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link2/" title="Link 2" class="headerLinks" />LINK 2</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link3/" title="Link 3" class="headerLinks" />LINK 3</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link4/" title="Link 4" class="headerLinks" />LINK 4</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link5/" title="Link 5" class="headerLinks" />LINK 5</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link6/" title="Link 6" class="headerLinks" />LINK 6</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
<li><a href="/link7/" title="Link 7" class="headerLinks" />LINK 7</a></li>
<li><img src="/images/global/divider_header.gif" alt="" /></li>
</ul>
This is the tagline
</div>
</div>

</div>
</div>

[luoifong]

ok, it was the "float: left" in the #tagline that was causing the problems in Opera. I removed that and it works fine.

It's beginning to make some sense to me (I think). I'm still waiting for it all to come together and click for me. But I'm getting there!

Thanks for the help!

Shun-Luoi

[Reflection]

No prob glad you got it to work.