Justify navbar (cross-browser problem)

Flynn · 18-12-2012 4:22pm #1

Hey 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)

Thanks

18-12-2012 4:58pm

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

Flynn · 18-12-2012 6:08pm

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?

18-12-2012 6:19pm

Flynn wrote: »

When using an include i think it just reposts the html when in fact it is sourcing it from another page.

That's what an include is supposed to do, it just copies the source directly. So where you have:
[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 browser

Flynn · 19-12-2012 11:04am

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">

<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>


DO I SNIP ABOVE HERE

<script language="JavaScript1.2" type="text/javascript">

</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">

<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?

19-12-2012 11:41am

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]

Flynn · 19-12-2012 12:12pm

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?

Flynn · 19-12-2012 12:39pm

Actually that was easier than i thought... http://www.ronancuanflynn.com/structure.php

Justify navbar (cross-browser problem)

Comments