SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: inline?

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,642
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    inline?

    I cant figure out why the menu at the bottom of
    http://fixmysite.us/coronadoshores/recreation/
    seems not to align
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Technically it IS aligning. , but since your span has TWO LINES .. it's causing the offset you are seeing. your inline block is TWICE as high as the other single line blocks.

    Incidentally, you dont need the div around the UL.


    Try this code on for size:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    				.nav {  padding:0; margin:0; background: #eee; overflow:  hidden}
    				.nav li { float:left; margin:0; list-style:none; border-right:  2px groove #fff;-webkit-transform: skew(15deg,0);   position: relative}
    				.nav a {display:block; padding:0; text-decoration:none; padding: .5em 1em ;-webkit-transform: skew(-15deg,0); background:}
    				.nav li:hover { background: red}
    				.nav li:first-child:hover:before { content:""; background: red; top:0; bottom:0; width:50%; position: absolute;-webkit-transform: skew(-15deg,0)}
    
    .circlemenu{
    width: 100%;
    overflow:hidden;
    }
    
    .circlemenu  {
    margin: 0;
    padding: 0;
    font: bold 14px Verdana;
    list-style-type: none;
    text-align: center; /* "left", "center", or "right" align menu */
    }
    
    .circlemenu li{
    display: inline;
    margin: 0;
    vertical-align: middle;
    }
    
    .circlemenu li a{
    display:inline-block;
    text-align:center;
    text-decoration: none;
    color: white;
    background:#b72d23;
    margin: 0;
    width:100px;
    height:100px;
    border-radius: 400px; /*really large border radius to create round borders*/
    -moz-border-radius: 400px;
    -webkit-border-radius: 400px;
    vertical-align: middle; 
    }
    
    .circlemenu a span{display:inline-block;  vertical-align: middle; }
    .circlemenu a:after{ content:""; display:inline-block; width:0; height:100%; vertical-align: middle;   }
    
    .circlemenu li a:visited{
    color: white;
    }
    
    .circlemenu a:hover{
    background: #a71b15;
    }
    		</style>
    	</head>
    	<body>
            <ul class="circlemenu"> 
              <li><a href="beachclub.php">Beach Club</a></li> 
              <li><a href="pools.php">Pools</a></li> 
              <li><a href="healthclub.php">Health Club</a></li> 
              <li><a href="tennis.php">Tennis</a></li> 
              <li><a href="roeder.php"><span>Roeder Pavilion</span></a></li> 
            </ul>		
    	 </body>
    </html>
    If you want to be consistent you can wrap the text in all the links in a span, but it is not necessary


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
  •