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 online now   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 online now   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

Similar Threads
thread Thread Starter Forum Replies Last Post
Apple Menu (Grey Menu) / Finder Takes Too Long to Load (Last 24h) ArmCortexA8 OS X Mavericks (10.9) 0 Jul 21, 2013 08:36 AM
Is Anyone Skilled at Centering Screen Protectors? mackandproud iPhone Accessories 23 Mar 29, 2013 03:26 AM
iPhone: Need help manually centering lockscreen slider. 561427 Jailbreaks and iOS Hacks 0 Feb 6, 2013 07:14 PM
Some icons missing on Desktop Menu Bar, Safari Menu Bar and Finder Menu Bar chroniceater MacBook Air 7 Jan 14, 2013 11:50 AM
(null) menu items in iPhoto Share menu ezhilk OS X 1 Oct 7, 2012 08:24 AM

Forum Jump

All times are GMT -5. The time now is 01:36 AM.

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

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