Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 27, 2012, 05:27 PM   #1
screensaver400
macrumors 6502a
 
Join Date: Jan 2005
Need Help Centering UL CSS menu

I've been trying to modify a CMS template to meet my needs and couldn't get it to work, so I decided to just start from scratch to figure it out... And I still can't get it to work. I want three links arranged on each side of a logo image (which descends lower than the navigation), with the whole thing centered on the page. I don't want to specify a width for the UL because of possible differences in how fonts are rendered.

I tried the text-align:center and display:inline method, but it doesn't seem to allow me to have my logo box in the middle. I tried splitting the navbar into two ULs (with the logo in a div), but couldn't make that work either.

My code is below. Thanks for any help:

Code:
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div {
		width:100%; 
		height:40px; 
		background-color:black;
		}
		ul {
		list-style: none; 
		margin:0; 
		padding: 0;
		}
		
		li {	
		margin: 0 10px; 
		float:left;
		}
		
		li a {
		color:white;
		}
	</style>
</head>
<body>
<div>
<ul>
    <li><a href="/1">Topic 1</a></li>
    <li><a href="/2">Topic 2</a></li>
    <li><a href="/3">Topic 3</a></li>
    <li style="width:150px; height:100px; background-color:blue;"><a href="/index.html"></a></li>
    <li><a href="/4">Topic 4</a></li>
    <li><a href="/5">Topic 5</a></li>
    <li><a href="/6">Topic 6</a></li>
</ul>
</div>
</body>
</html>
screensaver400 is offline   0 Reply With Quote
Old Dec 27, 2012, 06:57 PM   #2
manueld
macrumors 6502
 
Join Date: Jun 2009
try this:

Code:
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div {
		width:100%; 
		height:40px; 
		background-color:black;
                text-align:center;
		}
		ul {
                display: inline-block;
		list-style: none; 
		margin:0 auto; 
		padding: 0;
		}
		
		li {	
		margin: 0 10px; 
		float:left;
		}
		
		li a {
		color:white;
		}
	</style>
</head>
<body>
<div>
<ul>
    <li><a href="/1">Topic 1</a></li>
    <li><a href="/2">Topic 2</a></li>
    <li><a href="/3">Topic 3</a></li>
    <li style="width:150px; height:100px; background-color:blue;"><a href="/index.html"></a></li>
    <li><a href="/4">Topic 4</a></li>
    <li><a href="/5">Topic 5</a></li>
    <li><a href="/6">Topic 6</a></li>
</ul>
</div>
</body>
</html>
manueld is offline   0 Reply With Quote
Old Dec 27, 2012, 07:28 PM   #3
screensaver400
Thread Starter
macrumors 6502a
 
Join Date: Jan 2005
Well that was simple. Thanks!
screensaver400 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 03:06 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC