SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation Bar (Browser Compatibility)

    My coding is working as i wish in Firefox and Internet Explorer. But in Safari, Chrome and Opera the is a small break at the end of the list next to the misc tab. Here is the link and i will provide the code soon. bb24 Arcade

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi nih205. Welcome to SitePoint.

    I'm not sure the page is working, or I can't see what you are referring to. I get a page that says:

    nlh205's computer is offline

  3. #3
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (FWIW, the page was visible earlier, so there must be some sort of temporary problem.)

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page is now working. Im sorry for that.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code.

    style.css:
    Code CSS:
    html
    {
    	border:0px;
    	margin:0px;
    	outline:0px;
    	padding:0px;
    }
     
    body
    {
    	background-image:url(images/back.jpg);
    	background-repeat:repeat;
    	background-position:right top;
    	color:#000;
    	font:Arial Black, Gadget, sans-serif;
    }
     
    a
    {
    	color:#000;
    }
     
    #wrap
    {
    	position:relative;
    	text-align:center;	
    	width:750px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:0px;
    	border:0px;
    	outline:0px;
    	padding:0px;
    }
     
    #top
    {
    	text-align:center;
    	background:#000;
    	width:100%;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:75px;
    	margin-bottom:10px;
    }
     
    #top div
    {
    	text-align:center;
    	background:#F60;
    	width:100%;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:75px;
    	vertical-align:middle;
    }
     
    #top_content
    {
    	color:#000;
    	text-shadow:0px 2px 3px #222;
    	font:56px Verdana, Geneva, sans-serif;
    }
     
    #bottom
    {
    	text-align:center;
    	background:#000;
    	width:100%;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:650px;
    	margin-top:10px;
    }
     
    #menu
    {
    	text-align:center;
    	display:block;
    	width:100%;
    	height:32px;
    	position:relative;
    	top:20px;
    }
     
    #nav
    {
    	width:100%;
    	float:left;
    	text-align:center;
    	margin-bottom:3em;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:0px;
    	padding:0px;
    	list-style:none;
    	background-color:#F60;
    }
     
    #nav li
    {
    	float:left;
    	width:93.75px;
    	display:block;
    }
     
    #nav li a
    {
    	display:block;
    	padding:8px 15px;
    	text-decoration:none;
    	font-weight:bold;
    }
     
    #nav li a:hover
    {
    	background-color:#F90;
    }

    index.php:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>bb24 Arcade</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="javascript" type="text/javascript" src="javascript.js"></script>
    </head>
    <body>
    <div id="wrap">
    <div id="top">
    	<div>
    		<div id="top_content"><strong>bb24 Arcade</strong></div>
    	</div>
    </div>
    <div id="bottom">
    	<div id="menu">
        <ul id="nav">
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Adventure</a></li>
    	<li><a href="#">Arcade</a></li>
    	<li><a href="#">Puzzle</a></li>
    	<li><a href="#">Shooting</a></li>
        <li><a href="#">Sports</a></li>
    	<li><a href="#">Strategy</a></li>
    	<li><a href="#">Misc</a></li>
        </ul>
        </div>
    content
    </div>
    </div>
    </body>
    </html>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This came up in a recent post, but I've lost the link. Anyhow, if you are willing to remove the fixed widths from each LI, you could unfloat the last LI, give it a class of, say, "last", and then set it to:

    Code:
    #nav li.last
    {
        float:none;
        overflow:hidden;
        zoom:1.0;
    }
    Then alter the left/right padding on the <a>:

    Code:
    #nav li a
    {
    	display:block;
    	padding:8px 20px;
    	text-decoration:none;
    	font-weight:bold;
    }
    and remove the widths on the LIs:

    Code:
    #nav li
    {
    	float:left;
    	width:93.75px; /* remove */
    	display:block;
    }

    Example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>bb24 Arcade</title>
    <style>
    html
    {
    	border:0px;
    	margin:0px;
    	outline:0px;
    	padding:0px;
    }
    
    body
    {
    	background-image:url(images/back.jpg);
    	background-repeat:repeat;
    	background-position:right top;
    	color:#000;
    	font:Arial Black, Gadget, sans-serif;
    }
    
    a
    {
    	color:#000;
    }
    
    #wrap
    {
    	position:relative;
    	text-align:center;	
    	width:750px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:0px;
    	border:0px;
    	outline:0px;
    	padding:0px;
    }
    
    #top
    {
    	text-align:center;
    	background:#000;
    	width:100%;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:75px;
    	margin-bottom:10px;
    }
    
    #top div
    {
    	text-align:center;
    	background:#F60;
    	width:100%;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:75px;
    	vertical-align:middle;
    }
    
    #top_content
    {
    	color:#000;
    	text-shadow:0px 2px 3px #222;
    	font:56px Verdana, Geneva, sans-serif;
    }
    
    #bottom
    {
    	text-align:center;
    	background:#000;
    	width:100%;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	border-radius:8px;
    	height:650px;
    	margin-top:10px;
    }
    
    #menu
    {
    	text-align:center;
    	display:block;
    	width:100%;
    	height:32px;
    	position:relative;
    	top:20px;
    }
    
    #nav
    {
    	width:100%;
    	float:left;
    	text-align:center;
    	margin-bottom:3em;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:0px;
    	padding:0px;
    	list-style:none;
    	background-color:#F60;
    }
    
    #nav li
    {
    	float:left;
    	display:block;
    }
    
    #nav li a
    {
    	display:block;
    	padding:8px 20px;
    	text-decoration:none;
    	font-weight:bold;
    }
    
    #nav li a:hover
    {
    	background-color:#F90;
    }
    
    #nav li.last
    {
        float:none;
        overflow:hidden;
        zoom:1.0;
    }
    
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="top">
    	<div>
    		<div id="top_content"><strong>bb24 Arcade</strong></div>
    
    	</div>
    </div>
    <div id="bottom">
    	<div id="menu">
        <ul id="nav">
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Adventure</a></li>
    	<li><a href="#">Arcade</a></li>
    
    	<li><a href="#">Puzzle</a></li>
    	<li><a href="#">Shooting</a></li>
        <li><a href="#">Sports</a></li>
    	<li><a href="#">Strategy</a></li>
    	<li class="last"><a href="#">Misc</a></li>
        </ul>
    
        </div>
    content
    </div>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks greatly. Your suggestion worked great. I was fiddling with that for a while and im still kind of new to the div and css layouts and css in general so your help was appreciated.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nlh205 View Post
    Thanks greatly. Your suggestion worked great. I was fiddling with that for a while and im still kind of new to the div and css layouts and css in general so your help was appreciated.
    You're welcome. That solution of unfloating the last LI was a trick posted by Paul O'Brien (our resident guru) just a week or so ago. It was fun to give it a go.


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
  •