SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    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. #2
    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. #3
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great.
    thank you.

  4. #4
    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>


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
  •