SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Jun 20, 2005, 05:22 #1
- Join Date
- Sep 2004
- Location
- uk
- Posts
- 240
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how to position text exactly within nav...
Hi,
i have created a navigation for a photography site in a list style.
Here is the code which i've pared down for the example.
Code:<style type="text/css"> * {padding:0;margin:0;} html,body{ margin:0; padding:0} body { padding:20px 0; margin:0; background-image: url(images/bgd.gif); text-align:center; } #outer{ width:789px; color: #000; margin-left:auto; margin-right:auto; text-align:left; position:relative; } #right{ float:right; width:197px; padding: 16px 0 0 0; } ******************************************************************/ #nav{ margin: 30px 0 30px 0; border-top: 1px solid #999; padding-top: 50px; } #nav ul { list-style:none; margin:0 1px; } * html #nav ul{margin:0;width:100%;} #nav li{ border-top:1px solid #000; border-bottom:1px solid #000; line-height:40px; margin-bottom: 6px; background: #000; } #nav li a{ width:100%; display:block; line-height:40px; text-decoration:none; color: #999; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:70%; color: #999; } #nav li a:hover{ background-color:#454545; } /********************** nav thumbs ************************/ #nav .thumb1{ background: url(images/reportage_tn.jpg) no-repeat right; } #nav .thumb2{ background: url(images/fashion_tn.jpg) no-repeat right; } #nav .thumb3{ background: url(images/port_tn.jpg) no-repeat right; } #nav .thumb4{ background: url(images/wed_tn.jpg) no-repeat right; } #nav .thumb5{ background: url(images/arch_tn.jpg) no-repeat right; } #nav .thumb6{ background: url(images/edu_tn.jpg) no-repeat right; } </style> </head> <body> <div id="outer"> <div id="right"> <div id="nav"> <ul> <li><a href="#" class="thumb1">REPORTAGE</a></li> <li><a href="#" class="thumb2">FASHION</a></li> <li><a href="#" class="thumb3">PORTRAITURE</a></li> <li><a href="#" class="thumb4">WEDDINGS</a></li> <li><a href="#" class="thumb5">ARCHITECTURE</a></li> <li><a href="#" class="thumb6">EDUCATION</a></li> </ul> </div> </div> </div> </body> </html>
hope someone can give me some pointers..
thanks
janice
-
Jun 20, 2005, 05:51 #2
- Join Date
- Jan 2004
- Location
- Melbourne, Australia
- Posts
- 7,305
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Get rid of the line-height, then give the a top padding to push the text down.
-
Jun 20, 2005, 06:03 #3
- Join Date
- Sep 2004
- Location
- uk
- Posts
- 240
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
great.
thank you.
-
Jun 20, 2005, 06:09 #4
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
aha Egor beat me to it
give li Tag a min height 1%
give borders, color, pading etc only to the a Tags
use a padding box to align the text
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345 </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * {padding:0;margin:0;} html,body{ margin:0; padding:0} body { padding:20px 0; margin:0; background: url(images/bgd.gif) #ffffcc; text-align:center; } #outer{ width:789px; color: #000; margin-left:auto; margin-right:auto; text-align:left; position:relative; } #right{ float:right; width:197px; padding: 16px 0 0 0; } /* **************************************************************** */ #nav{ margin: 30px 0 30px 0; border-top: 1px solid #999; padding-top: 50px; } #nav ul { list-style:none; margin:0 0px; } * html #nav ul{margin:0;width:100%;} #nav li{ height:1%; /*border-top:1px solid #000; border-bottom:1px solid #000; line-height:40px;*/ margin-bottom: 6px; } #nav li a{ border:1px solid #ff0000; width:100%; display:block; /*line-height:40px;*/ text-decoration:none; color: #999; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:70%; padding:15px 0px 2px 2px; } #nav li a:hover{ background-color:#454545; } /********************** nav thumbs ************************/ #nav .thumb1{ background:#000000 url(images/reportage_tn.jpg) no-repeat right; } #nav .thumb2{ background:#000000 url(images/fashion_tn.jpg) no-repeat right; } #nav .thumb3{ background:#000000 url(images/port_tn.jpg) no-repeat right; } #nav .thumb4{ background:#000000 url(images/wed_tn.jpg) no-repeat right; } #nav .thumb5{ background:#000000 url(images/arch_tn.jpg) no-repeat right; } #nav .thumb6{ background:#000000 url(images/edu_tn.jpg) no-repeat right; } </style> </head> <body> <div id="outer"> <div id="right"> <div id="nav"> <ul> <li><a href="##" class="thumb1">REPORTAGE</a></li> <li><a href="##" class="thumb2">FASHION</a></li> <li><a href="##" class="thumb3">PORTRAITURE</a></li> <li><a href="##" class="thumb4">WEDDINGS</a></li> <li><a href="##" class="thumb5">ARCHITECTURE</a></li> <li><a href="##" class="thumb6">EDUCATION</a></li> </ul> </div> </div> </div> </body> </html>
Bookmarks