SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align centre and add something on one side!

    I have 5 horizontal text buttons which I want to centre horizontally. I then want to add a sixth button to the right, say 25px away from the fifth but not effecting the centre point of the five buttons!

    Hope that makes sense!

    cheers
    monkey
    monkey - the rest is history

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,800
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I assume you mean the centering should be based in the width of the five buttons, as if the sixth didn't exist AND THEN then sixth should be offset by X pixels, to the right of the fifth button?

    if so this could be what you are looking for:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    
    <style type="text/css">
    	.nav a { display:block; padding:10px ; background: orange;}
    	.nav ul {  margin:0; padding:0;list-style:none; margin-left:50%; position:relative; float:left}
    	.nav ul li{float: left; position:relative; left:-50%}
    	.nav { background:silver;  width:100%; overflow:hidden}
    	.nav li.sixth {position:absolute;  float:none; left:50%; margin-left:25px}
    </style>
    </head>
    
    <body>
    
    
    <div class="nav">
    	<ul>
         	<li><a href="#">Button 1</a></li>
         	<li><a href="#">Button 2</a></li>
         	<li><a href="#">Button 3</a></li>
         	<li><a href="#">Button 4</a></li>
         	<li><a href="#">Button 5</a></li>
              <li class="sixth"><a href="#">Button 6</a></li>
    
         </ul>
    
    </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
  •