SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. Jun 20, 2005, 05:22 #1
    janice
    janice is offline
    SitePoint Addict
    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>
    At the moment the text in the navigation is displayed in the middle-left, but i would like it to sit at the bottom-left of the link.

    hope someone can give me some pointers..
    thanks

    janice
  2. Jun 20, 2005, 05:51 #2
    Egor
    Egor is offline
    Non-Member Egor's Avatar
    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.
  3. Jun 20, 2005, 06:03 #3
    janice
    janice is offline
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great.
    thank you.
  4. Jun 20, 2005, 06:09 #4
    all4nerds
    all4nerds is offline
    Non-Member
    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>

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules