Justify navbar (cross-browser problem)
-
18-12-2012 4:22pmHey guys i'm having trouble with a navbar. For something you would think to be so simple it's proving to be an awful headmelt! Does anyone have any experience with this.. In safari it works perfectly but not firefox. Running a mac so no IE but guessing its not working in that either? if anyone could confirm?
I used this method. Scroll down to #2. I could not get the other methods to work at all. (span)
Am i missing something?
CSS@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
}
#left {
background-color: rgba(0, 0, 0, 0.8);
width: 400px;
float: left;
height: 600px;
padding-right: 50px;
padding-left: 50px;
}
#right {
float: right;
}
#menu {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
color: #FFF;
text-align: center;
height: 120px;
width: 378px;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
padding-top: 97px;
}
#wrapper {
color: #FFF;
}
body.home a.home,
body.news a.news,
body.music a.music,
body.shows a.shows {
color: #F0F;
}
ul{
text-align:justify;
list-style: none; list-style-image: none; margin: 0; padding: 0;
}
ul:after{content:""; margin-left:100%;
}
li{display:inline;
}
a{display:inline-block;
}
#navbar {
margin-top: 0px;
width: 375px;
padding-left: 1px;
}
and the html<body>
<div class="navbar">
<ul>
<li><a class="home" href="index.php">HOME</a></li>
<li> <a class="news" href="news.php">NEWS</a></li>
<li><a class="music" href="music.php">MUSIC</a></li>
<li><a class="shows" href="shows.php">SHOWS</a></li>
</ul>
</div>
</div>
Here it is live
Is there any CSS i can add to make it work in IE & FF and possibly Chrome (havn't tried that either)
Thanks0
Comments
-
First thing I'd do is fix your HTML. You've got four "<html><head>" tag sets! And you're loading your css file in each of them, which can't be good. Use the W3C validator (http://validator.w3.org/) and get rid of most if not all the errors
Boardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, dark mode, and more). Now available through your browser's extension store.
Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/
Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce
0 -
Well i'm using includes would that be the reason?
I know the source code looks messy as hell but here is my code in Dreamweaver (codeview obviously)
index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ronan Cuan Flynn | Home</title>
<style type="text/css">
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<link href="CSS/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #F0F;
}
a:active {
text-decoration: none;
color: #F0F;
}
</style>
</head>
<body class="home">
<div id="wrapper">
<div id="left">
<div id="menu">
<div id="navbar"><?php include 'menu.php'; ?></div>
</div>
</div>
<div id="right"><?php include 'icons.php'; ?>
</div>
</div>
</body>
</html>
and my includes:
menu.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="CSS/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #F0F;
}
a:active {
text-decoration: none;
color: #F0F;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="home" href="index.php">HOME</a></li>
<li> <a class="news" href="news.php">NEWS</a></li>
<li><a class="music" href="music.php">MUSIC</a></li>
<li><a class="shows" href="shows.php">SHOWS</a></li>
</ul>
</div>
</div>
</body>
</html>
also icons php i wont post as its long but you get the jist..
When using an include i think it just reposts the html when in fact it is sourcing it from another page.
Anyone care to add?0 -
When using an include i think it just reposts the html when in fact it is sourcing it from another page.
[PHP]<div id="navbar"><?php include 'menu.php'; ?></div>[/PHP]
when the HTML is generated, that expands to:
[HTML]<div id="navbar">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
</html>
</div>[/HTML]
Which is totally invalid HTML and is going to cause havoc in the browser. Your menu.php should be more like this (and this should be all that is in your menu.php):<ul> <li><a class="home" href="index.php">HOME</a></li> <li> <a class="news" href="news.php">NEWS</a></li> <li><a class="music" href="music.php">MUSIC</a></li> <li><a class="shows" href="shows.php">SHOWS</a></li> </ul>
You should always check that what your PHP is outputting is what you expect it to be by checking the source of the rendered page in your browserBoardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, dark mode, and more). Now available through your browser's extension store.
Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/
Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce
0 -
Thanks for explaining that.
What about my icons.php.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iconbar.png</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Dec 12 11:30:10 GMT+0000 (GMT) 2012-->
DO I SNIP ABOVE HERE
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/icons/iconbar_r2_c2_s2.png','images/icons/iconbar_r2_c4_s2.png','images/icons/iconbar_r2_c6_s2.png')">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="300">
<!-- fwtable fwsrc="iconbar6.png" fwpage="Page 1" fwbase="iconbar.png" fwstyle="Dreamweaver" fwdocid = "841071811" fwnested="0" -->
<tr>
<td><img src="images/icons/spacer.gif" width="144" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="39" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="14" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="39" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="39" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="10" height="1" border="0" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img name="iconbar_r1_c1" src="images/icons/iconbar_r1_c1.png" width="300" height="5" border="0" id="iconbar_r1_c1" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="iconbar_r2_c1" src="images/icons/iconbar_r2_c1.png" width="144" height="45" border="0" id="iconbar_r2_c1" alt="" /></td>
<td><a href="http://www.facebook.com/ronancuanflynn" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('iconbar_r2_c2','','images/icons/iconbar_r2_c2_s2.png',1)"><img name="iconbar_r2_c2" src="images/icons/iconbar_r2_c2.png" width="39" height="40" border="0" id="iconbar_r2_c2" alt="Visit Ronan's Facebook " /></a></td>
<td rowspan="2"><img name="iconbar_r2_c3" src="images/icons/iconbar_r2_c3.png" width="14" height="45" border="0" id="iconbar_r2_c3" alt="" /></td>
<td><a href="http://youtube.com/user/ronancuanflynn" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('iconbar_r2_c4','','images/icons/iconbar_r2_c4_s2.png',1)"><img name="iconbar_r2_c4" src="images/icons/iconbar_r2_c4.png" width="39" height="40" border="0" id="iconbar_r2_c4" alt="Visit Ronan's You Tube Channel" /></a></td>
<td rowspan="2"><img name="iconbar_r2_c5" src="images/icons/iconbar_r2_c5.png" width="15" height="45" border="0" id="iconbar_r2_c5" alt="" /></td>
<td><a href="https://twitter.com/2flynn" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('iconbar_r2_c6','','images/icons/iconbar_r2_c6_s2.png',1)"><img name="iconbar_r2_c6" src="images/icons/iconbar_r2_c6.png" width="39" height="40" border="0" id="iconbar_r2_c6" alt="" /></a></td>
<td rowspan="2"><img name="iconbar_r2_c7" src="images/icons/iconbar_r2_c7.png" width="10" height="45" border="0" id="iconbar_r2_c7" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="1" height="40" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="iconbar_r3_c2" src="images/icons/iconbar_r3_c2.png" width="39" height="5" border="0" id="iconbar_r3_c2" alt="" /></td>
<td><img name="iconbar_r3_c4" src="images/icons/iconbar_r3_c4.png" width="39" height="5" border="0" id="iconbar_r3_c4" alt="" /></td>
<td><img name="iconbar_r3_c6" src="images/icons/iconbar_r3_c6.png" width="39" height="5" border="0" id="iconbar_r3_c6" alt="" /></td>
<td><img src="images/icons/spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
</table>
AND BELOW HERE
</body>
</html>
Though that still leaves in head & body?0 -
Nope, the basic layout of a HTML page is:
[HTML]<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>[/HTML]
When you load the page in the browser and look at the source, if it doesn't follow that structure (with exactly one each of DOCTYPE, html, head and body), you've made a significant mistake somewhere. The W3C validator I posted earlier will help you identify it.
I'm not sure you're going about structuring your includes the right way. From the looks of it, the only difference between, say, news.php and shows.php will be a small bit of content in the middle of one of your "left" or "right" divs. We'll say in this case the only insert is immediately after your "menu" div, within the "left" div. So you could have a "header.php" which contains everything up as far as the menu div, a "footer.php" which contains everything after your content, and then your news/shows/index.php become very simple.
For example:
header.php:
[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[Insert full header here]</head>
<body>
<div id="wrapper">
<div id="left">
<div id="menu">
<div id="navbar">
<ul>
<li><a class="home" href="index.php">HOME</a></li>
<li><a class="news" href="news.php">NEWS</a></li>
<li><a class="music" href="music.php">MUSIC</a></li>
<li><a class="shows" href="shows.php">SHOWS</a></li>
</ul>
</div>
</div>[/PHP]
footer.php
[PHP] </div> // this closes the "left" div
<div id="right">
...[icons html]...
</div>
</body>
</html>[/PHP]
And then news.php would be:
[PHP]<?php include 'header.php'; ?>
<div class="content">[Insert News Content Here]</div>
<?php include 'footer.php.php'; ?>[/PHP]
And shows.php would be:
[PHP]<?php include 'header.php'; ?>
<div class="content">[Insert Shows Content Here]</div>
<?php include 'footer.php.php'; ?>[/PHP]Boardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, dark mode, and more). Now available through your browser's extension store.
Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/
Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce
0 -
Advertisement
-
From the looks of it, the only difference between, say, news.php and shows.php will be a small bit of content in the middle of one of your "left" or "right" divs.
Yes you are exactly right. Truth is i'm sort of learning as i go and that was the method that came to me first so i went with it. Although yours does seem a hell of a lot tidier. Thanks for the help. I've spent so long getting to this stage i'm almost afraid to go messing with the whole structure as i don't want to mess it all up and create new problems for myself.
Thans i used the validator and got it down to one error. when i tried to fix that I created another 5! It's coming from the icons.php so i'll try and tidy tat up a bit.
Could i stick with the structure i have or would you suggest i change it and go with your method?0 -