horizontally aligning ul and li elements

netheo86

netheo86

netheo86

Associate
Joined
15 Dec 2007
Posts
78
Location
London
Currently having a go at designing my first website and am a bit stuck at the moment.
I've got a drop down menu which I can't get to horizontally align in the middle of my page, sauce:

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

my altered CSS:
Code: 
ul {
  font-family: arial, arial;
  font-size: 1em;
  margin: auto;
  padding: 0;
  list-style: none;
text-align: center;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  padding: 5px 15px 5px 15px;
  background: rgb(128,128,128);
  margin-left: 0px;
  white-space: nowrap;
}
ul li a:hover { background: rgba(128,128,128, 0.5); }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 0.6em;
}
li:hover a { background: rgba(128,128,128, 0.5)}
li:hover li a:hover { background: rgba(128,128,128, 0.25)}

and my HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>photography</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
      <ul>
        <li><a href="">home</a></li>
        <li><a href="">photography</a>
          <ul>
            <li><a href="">editorial</a></li>
            <li><a href="">commercial</a></li>
            <li><a href="">product</a></li>
          </ul>
        </li>
        <li><a href="">about</a> </li>
        <li><a href="">contact</a> </li>
      </ul>
      <br>
</body>
<html>

The issue seems to be caused by the float left element used to control the dropdown menu position in the CSS but even with a bit more help from google i'm struggling to get it to align correctly.
I've tried various revisions of a <div> container and using a defined width for the top-level <ul> element (this causes the dropdown menu to change its width too)but nothing works quite right

Hoping someone on here will be able to point me in the right direction :)
 
wrap the whole lot in two containers like this:
<div id="outer">
<div id="inner">
<ul>......</ul>
</div>
</div>

then css:
#outer{
width:900px;
margin:0 auto;
}

#inner{
width:900px;
float:left;
}

that will create a centred container, 900px wide. you can of course mess about the with the widths and move to percentages if you want a fluid width
 
hiya RickST

thanks for the advice, gave it a try but no luck. I've ended up using absolute position elements now as i was also having issues with z-index layered elements. Took a while to get my head around but the layout seems to be working ok now
 
You must log in or register to reply here.
Back
Top Bottom