PDA

Click to See Complete Forum and Search --> : Positioning



jamesloacher
03-26-2007, 09:57 PM
I have made this menu with an <ul>. I have a problem though I can not get it to center in the page. I have tried using a <div> to center it and tried a table as well.


<style type="text/css">


body {
font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background-color: #FFF;
}


ul {
margin: 0;
padding: 0;
float: left;
width: 750px;
background: #666 url(images/bar.gif) repeat-x;
list-style: none;
text-transform: uppercase;

}

ul li {
float: left;

}


ul a {
padding: 0 2em;
line-height: 2.1em;
background: url(images/bar.gif) repeat-y left top;
text-decoration: none;
color: #000;
float: left;
display: block;

}


ul a:hover {
color: #FFF;
text-decoration: underline;
}



</style>
</head>

<body>
<div align="center">

<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Something</a></li>
<li><li><a href="#">Something</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something Else</a></li>
</ul>
</div>

</body>
</html>

jAQUAN
03-27-2007, 02:34 AM
Usually, you just need to add a width style
I would just style the div

add this style

.centerDiv{
width:200px;
margin:0 auto; /*center the div*/
}

then change this
<div align="center">
to this
<div class="centerDiv">

jamesloacher
03-27-2007, 04:15 PM
Awesome thanks. Worked like a charm.

jamesloacher
03-31-2007, 01:21 AM
I have broken my html somehow now. I have validated this code at w3c. But now everything goes to the left of my menu no matter what.If I put 10 pics the page will keep getting wider and wider.

Probably something with the css.

<style type="text/css">


body {
font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

background-color: #FFFFFF
}
a{color:#000000;}

ul {
margin: 0;
padding: 0;
float: left;
width:720px;
background: url(images/bar.gif) repeat-x bottom;
list-style: none;
text-transform: uppercase;

}

ul li {
float: left;

}


ul a {
padding: 0 2em;
line-height: 2.1em;
background: url(images/bar.gif) repeat-y left center;
text-decoration: none;
float: left;
display: block;

}


ul a:hover {
text-decoration: underline;
}

.bgImage {
background-color: #FFF;
background-image: url(images/fade.jpg);
background-repeat: repeat-x;
}
.centerDiv{
width:750px;
margin:0 auto;
}

</style>
</head>

<body>

<div class="centerDiv">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Something Else</a></li>
<li><a href="#">And something Else</a></li>
<li><a href="#">And something Else</a></li>
</ul>
<br/>
<br/>
</div>
<div align="center">
<table width="750">
<tr>
<td>ggggnjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjhb kjlubjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbb
</td>
</tr>
</table>
</div>
</body>
</html>


I can put this page online at a url if someone needs to see what I'm talking about.

1407
03-31-2007, 05:44 AM
you need to add to your .center, things like float, position, margin-left (or right).

my 1st reply in this topic explain exactly how to make a cell perfectly centered.

http://board.flashkit.com/board/showthread.php?t=724853

jamesloacher
03-31-2007, 03:48 PM
I tried adding some of the things you mention. It's likes it centers it but in the table it just ignores the <tr><td> etc. I've put this up at my site.

You can see the text does not wrap in the table cell like it should.

Figure I would save posting code seeing you can view source, and get a visual representation of the problem.

http://www.musiciansprophecies.net/flashkit/

Thanks

1407
04-01-2007, 03:16 AM
You already have the CenterDiv tag with 750px width, why a <table> ??

You also have two #CenterDiv but only one closing </div> tag.



One of the point of using CSS is not to have to use Tables...

jamesloacher
04-01-2007, 07:07 PM
This is for my college. We are required to use tables on this project. Other wise I would not be using them.

This is driving me nuts. Still not working :-(

I did fix the missing div tag.

1407
04-02-2007, 01:31 AM
Have to ? guess there's a reason for it, although it doesnt make sense to use both tables and CSS for the same page.

Might suggest onw thing though, if you absolutely have to use tables,

make one, with one row/col only, and put everything inside it, position will need to be relative instead of absolute, but that's about it.

jamesloacher
04-03-2007, 09:26 PM
I've decided to ditch using a css menu. I guess it's just to much trouble with using tables too. This is a beginning web design course. Starting at square one hence the use of tables. We are required to use CSS for elements on our page, (font color,size,etc) a css menu is probably a little to fancy for this course anyways.

I do appreciate all the help though. I learned a thing or two.