PDA

View Full Version : Cool NavBar Implementation - Need some push!

ifocus
Sep-08-2007, 06:31 AM
I am trying to implement this NavBar but it messes the page format really bad when I try to implement it. Ideally, I would like a banner also but this NavBar could replace it altogether. Here is the code;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
/* with text */
#navcontainer {display:block; height:150px; min-height:150px; margin:0px;}#navcontainer ul {margin:0; padding:0; list-style-type:none;}
#navcontainer li {display:block; float:left; margin-right:0px; width:115px; border:1px solid #000;}
#navcontainer li.list1t {background:#000 url(http://Ifocus.smugmug.com/photos/192756990-O.jpg) no-repeat;}
#navcontainer li.list2t {background:#000 url(http://Ifocus.smugmug.com/photos/192757003-O.jpg) no-repeat;}
#navcontainer li.list3t {background:#000 url(http://Ifocus.smugmug.com/photos/192756974-O.jpg) no-repeat;}
#navcontainer li.list4t {background:#000 url(http://Ifocus.smugmug.com/photos/192756959-O.jpg) no-repeat;}
#navcontainer li.list5t {background:#000 url(http://Ifocus.smugmug.com/photos/192757026-O.jpg) no-repeat;}
#navcontainer a {display:block; width:150px; padding-top:135px; color:#000; text-decoration:none; text-align:center; text-transform:uppercase; color:#fff; font-size:0.8em; font-weight:bold;}
#navcontainer a#item1t {background:transparent url(http://Ifocus.smugmug.com/photos/192756993-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item2t {background:transparent url(http://Ifocus.smugmug.com/photos/192757015-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item3t {background:transparent url(http://Ifocus.smugmug.com/photos/192756985-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item4t {background:transparent url(http://Ifocus.smugmug.com/photos/192756963-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item5t {background:transparent url(http://Ifocus.smugmug.com/photos/192757040-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item1t:hover {background-position:top right; z-index:50; color:#fc0;}
#navcontainer a#item2t:hover {background-position:top right; z-index:50; color:#0c0;}
#navcontainer a#item3t:hover {background-position:top right; z-index:50; color:#f00;}
#navcontainer a#item4t:hover {background-position:top right; z-index:50; color:#0ff;}
#navcontainer a#item5t:hover {background-position:top right; z-index:50; color:#ff0;}
</style>
<title>magphoto menu 1</title>
</head>
<body
style="margin-left: 13px; width: 763px; margin-top: 0px; height: 180px;"
id="www-magphoto-ca">
<br>
<div id="navcontainer">
<ul style="margin-left: 0px; width: 860px;">
<li style="width: 150px; height: 150px;" class="list1t"><a
id="item1t" href="http://ifocus.smugmug.com/"
title="Item 1">Home</a></li>
<li style="width: 150px; height: 150px;" class="list2t"><a
id="item2t" href="http://ifocus.smugmug.com/gallery/3416441/"
title="Item 2">About
Me</a></li>
<li style="width: 150px; height: 150px;" class="list3t"><a
id="item3t" href="http://ifocus.smugmug.com/galleries"
title="Item 3">Galleries</a></li>
<li style="width: 150px; height: 150px;" class="list4t"><a
id="item4t" href="http://ifocus.smugmug.com/Life%20Postscript"
title="Item 4">Prints &amp; Gifts</a></li>
<li style="width: 150px; height: 150px;" class="list5t"><a
id="item5t" href="http://ifocus.smugmug.com/gallery/3111639"
title="Item 5">Guestbook</a></li>
</ul>
</div>
</body>
</html>

By the way, I am using Komposer (http://www.kompozer.net/) to do all this, this software is a blessing, free and easy to use. I recommend it. Anyway, anyone up to the challenge to make this work?

Jean-Yves
scwalter
Sep-08-2007, 01:13 PM
How are you adding it to your page? That code includes a bunch of stuff (head,body tags) that should not be added to your smugmug customization because they are already there.

Try taking this part and adding it to your CSS:

/* with text */
#navcontainer {display:block; height:150px; min-height:150px; margin:0px;}#navcontainer ul {margin:0; padding:0; list-style-type:none;}
#navcontainer li {display:block; float:left; margin-right:0px; width:115px; border:1px solid #000;}
#navcontainer li.list1t {background:#000 url(http://Ifocus.smugmug.com/photos/192756990-O.jpg) no-repeat;}
#navcontainer li.list2t {background:#000 url(http://Ifocus.smugmug.com/photos/192757003-O.jpg) no-repeat;}
#navcontainer li.list3t {background:#000 url(http://Ifocus.smugmug.com/photos/192756974-O.jpg) no-repeat;}
#navcontainer li.list4t {background:#000 url(http://Ifocus.smugmug.com/photos/192756959-O.jpg) no-repeat;}
#navcontainer li.list5t {background:#000 url(http://Ifocus.smugmug.com/photos/192757026-O.jpg) no-repeat;}
#navcontainer a {display:block; width:150px; padding-top:135px; color:#000; text-decoration:none; text-align:center; text-transform:uppercase; color:#fff; font-size:0.8em; font-weight:bold;}
#navcontainer a#item1t {background:transparent url(http://Ifocus.smugmug.com/photos/192756993-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item2t {background:transparent url(http://Ifocus.smugmug.com/photos/192757015-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item3t {background:transparent url(http://Ifocus.smugmug.com/photos/192756985-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item4t {background:transparent url(http://Ifocus.smugmug.com/photos/192756963-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item5t {background:transparent url(http://Ifocus.smugmug.com/photos/192757040-O.jpg) -150px -86px no-repeat;}
#navcontainer a#item1t:hover {background-position:top right; z-index:50; color:#fc0;}
#navcontainer a#item2t:hover {background-position:top right; z-index:50; color:#0c0;}
#navcontainer a#item3t:hover {background-position:top right; z-index:50; color:#f00;}
#navcontainer a#item4t:hover {background-position:top right; z-index:50; color:#0ff;}
#navcontainer a#item5t:hover {background-position:top right; z-index:50; color:#ff0;}


and add this part to your Header section

<div id="navcontainer">
<ul style="margin-left: 0px; width: 860px;">
<li style="width: 150px; height: 150px;" class="list1t"><a
id="item1t" href="http://ifocus.smugmug.com/"
title="Item 1">Home</a></li>
<li style="width: 150px; height: 150px;" class="list2t"><a
id="item2t" href="http://ifocus.smugmug.com/gallery/3416441/"
title="Item 2">About
Me</a></li>
<li style="width: 150px; height: 150px;" class="list3t"><a
id="item3t" href="http://ifocus.smugmug.com/galleries"
title="Item 3">Galleries</a></li>
<li style="width: 150px; height: 150px;" class="list4t"><a
id="item4t" href="http://ifocus.smugmug.com/Life%20Postscript"
title="Item 4">Prints &amp; Gifts</a></li>
<li style="width: 150px; height: 150px;" class="list5t"><a
id="item5t" href="http://ifocus.smugmug.com/gallery/3111639"
title="Item 5">Guestbook</a></li>
</ul>
ifocus
Sep-08-2007, 03:06 PM
Yes, I understand and I put the code as you suggested at the first place. To make sure, I tried it again and I got the same result. I attached 3 screen shots; 1 is the normal page, the 2 others represents the page after the new NavBar is installed ...ugly! Any ideas?

Normal screen (http://Ifocus.smugmug.com/photos/193189902-L.jpg)
New NvBar part 1 (http://Ifocus.smugmug.com/photos/193189946-L.jpg)
New NavBar part 2 (http://Ifocus.smugmug.com/photos/193189966-L.jpg)