473,320 Members | 1,853 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Centering of horizonal UL and z-index problem?

Faz
Hi
I'm having some real trouble with a header I have created within a
container. I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the following
within the #header declaration:

margin-left: auto;
margin-right: auto;

The image above the list is easily centred using the 'text-align' property,
but this is not true of the UL, any ideas?

Secondly the drop down menu is appearing beneath other content within the
page, is this a z-index issue, or is it due to the list overlapping the div
it is in?

Here is an image displaying the problems:
http://www.aoti12.dsl.pipex.com/problem.jpg

#container: red border
#header: green border and blue background

Here is the CSS for the container and header/menu:

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

/*This contains the whole page*/
#container {
position:absolute;
width:100%;
border: 5px solid red; /* for testing purposes */
}

----------------------------------------------------------------------------
---------------
#header {
position:absolute; /* This means the element is positioned exactly upon the
page*/
width:100%; /* percentage of the page to be filled horizontaly */
left:0;
background-color:blue;
border: 3px solid green;
}

/* Unordered Lists, i.e. main buttons */
#header ul {
padding: 0;
margin: 0;
list-style:none;
}

/* List items, i.e. menu buttons */
#header li {
float: left;
position: relative;
width:120px; /* width of each 'button', should be > than largest text */
margin:-1px; /* so boxes don't overlap */
}

/* List item links, i.e. main buttons */
#header li a {
font-family: arial, helvetica, serif;
display: block;
text-decoration: none;
font-weight:bold;
color: #777;
background-image: url("../images/button2.gif");
background-repeat:repeat-x;
padding: 2px;
border: 0px solid #ccc; /* border around buttons, set to 0 */
border-width:0px 1px; /* place border only on left and right sides */
text-align:center;
font-size:11px;
}

/* Hover Styles for main item, i.e. main buttons when mouse-over */
#header ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}

/* Sub-menu unordered lists */
#header li ul {
display: none;
position: absolute;
margin:0px 1px; /* So sub menu aligns on left not right */
}

/* Sub Menu list item */
#header li ul li {
width: 119px; /* 1 pixel less than parent menu width, so that they match
up*/
}

/* Sub Menu links, i.e. sub-menu buttons when mouse-over */
#header li ul li a {
text-align:left;
font-weight:normal;
border: 0px solid #ccc;
border-width: 0px 1px 1px; /* top, sides, bottom */
background-image:none;
}

/* Hover Styles for sub-menu, i.e. sub-menu buttons when mouse-over */
#header li ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}

/* to override top and left in browsers other than IE, which will position
to the top right of the containing li, rather than bottom left */
#header li>ul {
top: auto;
left: auto;
}
/* lists nested under hovered list items, the magic that makes the menus
'pop' up*/
#header li:hover ul, #header li.over ul {
display: block;
}

#header #content {
clear: left;
}
----------------------------------------------------------------------------
---

any help greatly appreciated, i'm learngin CSS throught trial and error, i
have been 'trialing' this problem afr too long!
Thanks

Faz
Jul 20 '05 #1
9 6236
Faz wrote:
I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the
following within the #header declaration:

margin-left: auto; margin-right: auto;
Have you set a width for the ul that is less than the containing block's
width?
The image above the list is easily centred using the 'text-align'
property, but this is not true of the UL, any ideas?
<img> is inline, so text-align applies. <ul> is block level, and takes
up 100% of the containing block's width unless changes have been made to
it's default display properties.
Secondly the drop down menu is appearing beneath other content within
the page, is this a z-index issue, or is it due to the list
overlapping the div it is in?
I don't know. Can we have a url, please?

Here is the CSS for the container and header/menu:

#header { position:absolute; /* This means the element is positioned
exactly upon the page*/


/* it also means that #header is taken out of the normal flow of the
document */

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2
Faz

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:sc********************@bgtnsc04-news.ops.worldnet.att.net...
Faz wrote:
I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the
following within the #header declaration:

margin-left: auto; margin-right: auto;


Have you set a width for the ul that is less than the containing block's
width?
The image above the list is easily centred using the 'text-align'
property, but this is not true of the UL, any ideas?


<img> is inline, so text-align applies. <ul> is block level, and takes
up 100% of the containing block's width unless changes have been made to
it's default display properties.
Secondly the drop down menu is appearing beneath other content within
the page, is this a z-index issue, or is it due to the list
overlapping the div it is in?


I don't know. Can we have a url, please?

Here is the CSS for the container and header/menu:

#header { position:absolute; /* This means the element is positioned
exactly upon the page*/


/* it also means that #header is taken out of the normal flow of the
document */

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/


http://www.aoti12.dsl.pipex.com/bethel/!test.shtml

http://www.aoti12.dsl.pipex.com/bethel/css/main.css

Thanks for your help. The container is absolute with the left and right nav
bars and header, whilst the content is relative. I thought this was best to
use 'absolute' to position the elements around the edge of the page.

I still can not manage to centre the header within the container, where am I
going wrong?

Also the drop down lists disappear beneath the content below, why is this?

I have read up again upon positioning and overflow but have not found the
answer, or indeed I have missed it!

Thanks

Faz
Jul 20 '05 #3
Faz
Also the drop down lists disappear beneath the content below, why is this?

I appear to have fixed this by using a z-index value of 1 upon the header.
In Firefox 1.0PR the menu is fine and all sub-items selectable however in
IE6.0.2800 they disappear if you try to select a sub-item below the bottom
of the div.

http://dialspace.dial.pipex.com/prod/dialspace/town/pipexdsl/o/aoti12/bethel/!test.shtml

Any ideas?

Thanks

Faz
Jul 20 '05 #4
Faz wrote:
I appear to have fixed this by using a z-index value of 1 upon the
header. In Firefox 1.0PR the menu is fine and all sub-items
selectable however in IE6.0.2800 they disappear if you try to select
a sub-item below the bottom of the div.
It sounds like you're making things too complicated.
http://dialspace.dial.pipex.com/prod/dialspace/town/pipexdsl/o/aoti12/bethel/!test.shtml
I need to get ready for work -- my real job, bartending! -- so I don't
have time for a detailed look. (But you were right in posting a url.
Thanks!)
Any ideas?


As always, KISS. Lose the absolute positioning, at least while you're
still getting the hang of css. It sounds like you're fairly new to it.
Only with experience should you attempt absolute or fixed positioning.

I'll try to have a more detailed response tomorrow, time permitting.

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #5
> Faz wrote:
I appear to have fixed this by using a z-index value of 1 upon the
header. In Firefox 1.0PR the menu is fine and all sub-items
selectable however in IE6.0.2800 they disappear if you try to select
a sub-item below the bottom of the div.


I had this same problem yesterday. It can be due to a bug in how IE handles
z-index. There is a workaround. See:

http://www.aplus.co.yu/CSSdesign/z-pos/

Jul 20 '05 #6
Faz
As always, KISS. Lose the absolute positioning, at least while you're still getting the hang of css. It sounds like you're fairly new to it.
Only with experience should you attempt absolute or fixed positioning.


I thought the elements positioned around the edges of the page, i.e. left
and right navigation panes and header would be best suited to absolute
positioning? Especially since I am able to position the right one with
'right: 0;' instead of a negative value that relative positioning would
require?

The positioning seems to be working except the centring of the header which
I have so far struggled with.
I'll try to have a more detailed response tomorrow, time permitting.


That would be most helpful, thanks, I'll upload the most current stage I get
to with the page to the same address.

Faz
Jul 20 '05 #7
Faz
I had this same problem yesterday. It can be due to a bug in how IE handles z-index. There is a workaround. See:

http://www.aplus.co.yu/CSSdesign/z-pos/


Thanks, I checked the site yet am still somewhat confused. The sub menu does
indeed appear over the rest of the page pointing to a correct z-index, the
problem is when moving down the items the whole sub menu disappears as if
the mouse has left the active area.

http://www.aoti12.dsl.pipex.com/bethel/!test.shtml
Thanks

Faz
Jul 20 '05 #8
"Faz" <ao*****************@dsl.pipex.com> wrote in message
news:41***********************@news-text.dial.pipex.com...
I had this same problem yesterday. It can be due to a bug in how IE

handles
z-index. There is a workaround. See:

http://www.aplus.co.yu/CSSdesign/z-pos/


Thanks, I checked the site yet am still somewhat confused. The sub menu
does
indeed appear over the rest of the page pointing to a correct z-index, the
problem is when moving down the items the whole sub menu disappears as if
the mouse has left the active area.


Exactly the problem I had, which I was able to fix using the information at
the URL I cited. Focus on the solution, which is clearly depicted near the
end of the article.



Jul 20 '05 #9
Faz
> Exactly the problem I had, which I was able to fix using the information
at
the URL I cited. Focus on the solution, which is clearly depicted near the end of the article.


I appear to have 'found' the solution on
http://www.aplus.co.yu/CSSdesign/z-pos/index5.html

the sub-menu is required to appear as the first AP block with z-index:10

However when i try to implement this theory, i am still coming up with the
same issues in IE6. Any more pointers would be greatly appreciated. Below is
the page once again, z-index values have only been placed upon the sub menu
'ul' and the #header as the page seems to suggest to do.

http://www.aoti12.dsl.pipex.com/bethel/!test.shtml

Thanks

Faz
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
6
by: Franois de Dardel | last post by:
http://mapage.noos.fr/dardelf3/tintin/page3bits.html Can I center the series of thumbnails horizontally in the pages _and_ keep the "elastic arrangement" where the number of thumbnails adapts to...
2
by: Ryan W Sims | last post by:
I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...
3
by: yawnmoth | last post by:
I'm trying to center list elements in a webpage I'm working on, and setting margin-left to auto for ol (or ul) seems to prevent the number (or bullet) from displaying in IE6 (strict mode) and...
6
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...
6
by: Simon Wigzell | last post by:
I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a onresize="CenterIt();"...
13
by: Raffi | last post by:
Hi, We have an application that requires IE. We recently incorporated CSS scroll areas. The scroll fields are supposed to be centered. They are except for IE5 for the Mac. I have tried various...
3
by: Robert Latest | last post by:
Hello, me again. This time I'd like to align a DIV both horizontally and vertically centered within a larger DIV. The only alignment-relevant CSS property I could think of was text-align, and...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.