Log In · Register

 
navbar misbehaving...
Maccabee
post Jan 31 2009, 02:30 PM
Post #1


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
Im making a site for someone and the nav is currently a image map but i dont like using image maps.
So im trying to make it from just css and an image but it aint working!
Heres what its supposed to look like:


And here is the code im trying to change it too.
CODE
<style type="text/css">
#nav{
width:800px;
height:100px;
background-image:url(http://www.amelia.wefuze.com/designimages/blank_bar.png);
background-repeat:no-repeat;
padding-top:29px;
word-spacing:30px;
text-align:center;
}

a.nav:link, a.nav:active, a.nav:visited{
font-family:sans-serif;
color:#6F6F6F;
text-decoration:none;
font-size:24px;
padding-bottom:10px;


}

a.nav:hover{
color:#5e5e5e;
}

.divider{
padding-bottom:-10px;

}
</style>

<div id="nav">
<a class="nav" href="index.php">home</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="literary/">literary</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="art/">art</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="performance/">performance</a> <img class="divider"

src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="contact/">contact</a>
</div>


You can put the code in here to see it:
html editor

So you see whats happening?! The dividers are images but when i put them in the links moved down. So im trying to get the dividers to stay where they are but move up the links up to the center!?!
 
 
 Start new topic
Replies (1 - 9)
Mikeplyts
post Jan 31 2009, 03:14 PM
Post #2


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
Ok, so I know it's a bit much but I got about the same result you wanted in the image.

CODE
<style type="text/css">
#nav{
position:absolute;
width:800px;
height:100px;
background-image: url(http://www.amelia.wefuze.com/designimages/blank_bar.png);
word-spacing:70px;
text-align:center;
padding:35px;
margin-top:0px;
margin-left:0px;
}

a.nav:link, a.nav:active, a.nav:visited{
font-family:sans-serif;
color:#6F6F6F;
text-decoration:none;
font-size:24px;
}

a.nav:hover{
color:#5e5e5e;
}

#dividers{
position: absolute;
width: 800px;
height: 100px;
padding-top:30px;
margin-top:0px;
}
</style>
<body>
<div id="nav">
<a class="nav" href="index.php">home</a>
<a class="nav" href="literary/">literary</a>
<a class="nav" href="art/">art</a>
<a class="nav" href="performance/">performance</a>
<a class="nav" href="contact/">contact</a>
</div>

<div id="dividers">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0">
</div>


Try it out in your HTML editor. biggrin.gif
 
Maccabee
post Jan 31 2009, 03:18 PM
Post #3


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
hmm...
Well unfortunately it only works on ie:(
not firefox.
Its a little unorthodox but it does work.
But i think id rather use an image map than that method cause the reason im trying to make it code not an imagemap is so i can easily add a link.

Thanks though:)
 
Mikeplyts
post Jan 31 2009, 03:20 PM
Post #4


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
No prob. Glad I at least tried. _smile.gif
 
synatribe
post Jan 31 2009, 03:28 PM
Post #5


AIDS at RAVES.
******

Group: Official Designer
Posts: 2,386
Joined: Dec 2007
Member No: 598,878
your using padding instead of margins
here try this code
CODE
<style type="text/css">
#nav{
width:800px;
height:100px;
background-image:url(http://www.amelia.wefuze.com/designimages/blank_bar.png);
background-repeat:no-repeat;
padding-top:29px;
word-spacing:30px;
text-align:center;
}

a.nav:link, a.nav:active, a.nav:visited{
font-family:sans-serif;
color:#6F6F6F;
text-decoration:none;
font-size:24px;
margin-top:-10px;


}

a.nav:hover{
color:#5e5e5e;
}

.divider{
margin-bottom:-15px;

}
</style>

<div id="nav">
<a class="nav" href="index.php">home</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="literary/">literary</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="art/">art</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="performance/">performance</a> <img class="divider"

src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="contact/">contact</a>
</div>
 
Mikeplyts
post Jan 31 2009, 03:37 PM
Post #6


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
^That works way better than mine. _smile.gif
 
Maccabee
post Jan 31 2009, 03:49 PM
Post #7


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382
omg.gif

It worked?!
Its really weird though cause i totally thought i tried that?
I tried so many diffirent variables!
Thanks kevin biggrin.gif

Edit:
Topic can be closed:))))
 
synatribe
post Jan 31 2009, 04:50 PM
Post #8


AIDS at RAVES.
******

Group: Official Designer
Posts: 2,386
Joined: Dec 2007
Member No: 598,878
no prob :]
 
fixtatik
post Jan 31 2009, 05:08 PM
Post #9


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
just quickly before this is closed...
using so many margins and padding is a little "risky," as some browsers read them differently than others. the easiest way to do it, using your original code, is to change this:
CODE
.divider { padding-bottom:-10px; }

to this:
CODE
.divider { vertical-align:middle; }
 
manny-the-dino
post Jan 31 2009, 05:27 PM
Post #10


Senior Member
*******

Group: Administrator
Posts: 8,629
Joined: Jan 2007
Member No: 498,468
Guys, use codeboxes & thumb large images! lol.

K Topic Closed & Moved
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic