Posted 2 years ago #
Hello! I'm redesigning my blog at the moment and need some help with a piece of coding.
My header is going to be this image:
http://i35.tinypic.com/2zjamvm.jpg
As you can see, there are four 'links' within the graphic;
Home, Contact, About Kirsty and Links. I want to use these as the mian navigation on the front page.
Doe anyone know how to make them into links. I know you have to make a clear 'button' over the top but I have no idea how to code it!
Anyone know?
Posted 2 years ago #
keyword will be: position: absolute;
In example:
<div id="nav">
<ul>
<li class="home"><a href="/">home</li>
<li class="contact"><a href="/contact">contact</li>
<li class="about"><a href="/about">about</li>
<li class="links"><a href="/links">links</li>
</ul>
</div> <!-- end nav -->and your css
#nav {
background: (your.picture.jpg) no-repeat;
position: relative;
}
#nav li {
text-indent: -9999px;
}
li.home {
position: absolute;
left: 10px;
top: 100px;
width: 25px;
}You need to experiment with the left/top/width parameters, and you'll probably need more css, but this gives you something to start with.
Peter
Posted 2 years ago #
where does the top section go? which file? or do you need to create a new one?
and thankyou!
Posted 2 years ago #
header.php is the normal place to put navigation bars in, but YMMV.
Peter
Posted 2 years ago #
in my header.php file all i have is a big gap and a bullet point and when i paste the code in all the background, header and everything dissapears.
Posted 2 years ago #
link to your site?
Peter
Posted 2 years ago #
http://www.bellefantaisie.net/test
i've put in the orignal header.php file so it's gone back to normal
Posted 2 years ago #
oke, most of the xhtml is already in place, now you just want to map the top menu on the graphics.
The only place to do that is in your stylesheet, so do not change anything to your xhtml anymore (except for creating another list item for home).
What I called '#nav li' is in your case '#menu li'
Peter
Posted 2 years ago #
yeh but the only thing is i don't want the words showing, i want it to look as if the graphics are the button? do you know what i mean? i want to get rid of those links at the top
Posted 2 years ago #
try first (with words) to position them. We can always make them 'invisible'.
Peter
Posted 2 years ago #
sorry to be so thick haha but this is all i have in my menu section in the stylesheet
#menu{
padding: 0;
white-space: nowrap;
margin: 20px 0 0 0;
width: 750px;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu li {
display: inline;
list-style-type: none;
margin: 0 10px 0 0;
}
#menu li a:link, #menu li a:visited {
text-decoration: none;
padding: 3px;
}
#menu li a:hover {
text-decoration: underline;i dont know how to make each one move?
i thought there was a way where you could just put invisible zones over the graphic and set it as a link
Posted 2 years ago #
Posted 2 years ago #
ah ok! haha i'm so thick. i've added that in to the #menu li section and all the links have gone on top of one another, how do assign the top and left adjustments to the different links?
Posted 2 years ago #
All those li's have their own class (page-item-2, page-item-3, etc)
example:
#menu li.page-item-2 {
top: 100px;
left: 10px;
}Peter
Posted 2 years ago #
it's just not working, i'm trying putting the page name in but they are just staying bullet pointed now. thanks for trying to help me anyway!
Posted 2 years ago #
change this
#menu li.page_id=2 {into this
#menu li.page-id-2 {(no underscores, no equal signs)
Peter
Posted 2 years ago #
i tried that, they haven't moved, still bullet pointed :/
Posted 2 years ago #
oooh i moved them! haha i used a code from my old layout! its like this:
#menu {
width: 800px;
height: 45px;
margin-left: 30px;
position: relative;
top: 405px;
}
#menu ul {
margin-left: 10px;
position: absolute;
bottom: -1px;
overflow: hidden;
height: 45px;
}
#menu ul li {
float: left;
margin-right: 3px;
padding-left: 3px;
font-weight: bold;
}
#menu ul li.current_page_item {
width: 122px;
height: 45px;
}
#menu ul li a {
width: 122px;
height: 45px;
background: url(images/nav_bg.jpg) no-repeat;
display: block;
text-decoration: none;
color: #333;
line-height: 45px;
text-align: center;
}
#menu ul li a:hover { color: #555; }
#menu ul li.current_page_item a { background: url(images/nav_bg.jpg) no-repeat; color: #ff0000; }but i dont know how i move them now!
Posted 2 years ago #
Hmmm, it must be because of that anchor link.
I'm going to experiment here (=my own system) a bit.
Peter
Posted 2 years ago #
hey take a look, i got them to go over the links! do i just make a blank image and put it there now?
Posted 2 years ago #
basically i have figured out how to get them over the right place i just need to get rid of the words in the links now
Posted 2 years ago #
A good method would be to cut the images from your background, and use them as background images for your list items.
Peter
Posted 2 years ago #
yeh thats kinda what i did! i just need to make a section (the 'belle fantaisie' part) of the header so i can make it the home link. don't spose you know how to do that :p
Posted 2 years ago #
same cutting technique :-)
Then insert the image (not as background, but in your xhtml), and surround it with an anchor link. You probably have to remove the border in css afterwards, but that's piece of cake.
Peter
This topic has been closed to new replies.
