Hello, i am kinda new with css, but willing to do mine best, to practise and practise.
I want to modify an exicsting blog(skin and template).
But now i came across a problem. I made a sort of navigation menu in the footer with position and float with images.
When i look in Firefox it`s all normal i think, but when you view it in IE, you see mine box with navigation menu (lowest red border) is much bigger then in FF, but the links are working, and when i delete some of the links the border becomes smaller, maybe it has something to do with the <ul> and <li>.
Mine thoughts are, that li takes space under the navigation menu.
Here is mine website: <!-- m --><a class="postlink" href="http://www.picture-plaza.com/blog">http://www.picture-plaza.com/blog</a><!-- m -->
Some code
footer.inc
<div id="footernav">
<ul>
<li class="nav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/zeskamp.gif"></a></li>
<li class="nav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/turkije.gif"></a></li>
<li class="nav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/paaspop2005.gif"></a></li>
<li class="nav4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/bobred.gif"></a></li>
<li class="nav5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/carnaval.gif"></a></li>
<li class="nav6"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/feestteam.gif"></a></li>
<li class="nav7"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/loveparade.gif"></a></li>
</ul>
</div>
some css style;
#footer
{
height:16px;
border:1px red solid;
}
#footernav ul
{
margin: 0px;
padding: 0px;
}
#footernav li
{
list-style: none;
background: none;
}
.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited, .nav4 a:link, .nav4 a:visited, .nav5 a:link, .nav5 a:visited, .nav6 a:link, .nav6 a:visited, .nav7 a:link, .nav7 a:visited{
color: #4E4E4E;
width: 100px;
height: 16px;
padding: 0;
}
.nav1 a:link, .nav1 a:visited{
position: absolute;
top: 498px;
left: 0px;
}
.nav2 a:link, .nav2 a:visited{
position: absolute;
top: 498px;
left: 100px;
}
.nav3 a:link, .nav3 a:visited{
position: absolute;
top: 498px;
left: 200px;
}
.nav4 a:link, .nav4 a:visited{
position: absolute;
top: 498px;
left: 300px;
}
.nav5 a:link, .nav5 a:visited{
position: absolute;
top: 498px;
left: 400px;
}
.nav6 a:link, .nav6 a:visited{
position: absolute;
top: 498px;
left: 500px;
}
.nav7 a:link, .nav7 a:visited{
position: absolute;
top: 498px;
left: 600px;
}
/*THE LIST STYLES*/
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
li
{
padding: 0px;
margin: 0px;
}
img
{
border: 0;
}dont know why you used images for your nav.
i corrected the nav without the use of images.Thank you very much, i will try it out.
And what did you correct on mine css file, like to know what i didn`t what was wrong?
How would you use it without the images?Ow i corrected something in your css, i hope i did itgood.
You had some classes on the end .footernav ...... and some more.
It didn`t worked like i wanted,but i turned them into id.(#)
Have i done this correctly?yes youve changed them to id's correctly..
also youve got this
<LI class=nav1>
on your list items ..you dont need this change to <li>
A few other pointers:
use lowercase in all your tags.
when you declare a value always put it in quotes i.e.
<LI class="nav1">.
i started from scratch really for the nav. quite a lot to explain.
check out this and hopefully it will become clearer
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/Thanks">http://www.alistapart.com/articles/taminglists/Thanks</a><!-- m --> again, need to read it some more time to actually understand it all, but hey, i love to learn.
Next question, is it also possible to hover the images, because i heard/read somewhere that it is not so easy ????
What i want to do, is.... u see the navigation of mine website the black part(that are albums links i wanted it to be fot photo`s not the actually navigation) i wanted to put a black/white or grey image above it and when i hover min title or the image, i has to be a color image, and the font color below the image needs to be different.
This are 6 links and 6 grey images and 6 color images. Where do i have to start?
Do i need to make 6 new id and 12 or 18or 24 new classes ??im not quite sure what you want.
ive attached an image of what i think you mean (7 images?).
you want the image to change from a b/w to color when the link is rolled over?
and also the link text color to change?
am i right ?
let me know and i will put some thing together to give you an idea.yeah thats what i mean, but the image has to be side by side and bottom image by top text
ok a quick explaination.
ive placed the nav ( images and navigation ) in a div and floated the images and footernav to the left
this will prevent there from being any spaces between the footernav and the images in internet explorer.OK? you can see this in your htm file. ive made a nav.htm file with just the navigation in so you can see this.ok
dont ask me to explain the javascript. i would have to rewrite it and comment it for it to make sense to you.and i aint got time.
unless you know javascript?
is this what you wanted.Wow!!!
This is what is was looking for, didn`t it was that much to code it, many many thanks.
So this isn`t possible without the java??
Some people think to light about webdesign, i like it!!!!!
If there is anything i can do for you, just ask.anything?
i could do with a new car
almost everything, not that rich
Now i gonna try to fit everything in templates. Wish me good luckjust a question
Now i have 2 css files, but does this work like i did here
Won`t they collapse with each other, because i have 2 footer id`s and footernav ??
<meta name="generator" content="<%version%>" />
<meta name="description" content="<%blogsetting(desc)%>" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="-1" />
<link rel="bookmark" title="Nucleus" href=http://www.webdeveloper.com/forum/archive/index.php/"http://nucleuscms.org/" />
<link rel="alternate" type="application/rss+xml" title="RSS" href=http://www.webdeveloper.com/forum/archive/index.php/"xml-rss2.php" />
<link rel="top" title="Today" href=http://www.webdeveloper.com/forum/archive/index.php/"<%sitevar(url)%>" />
<link rel="up" href=http://www.webdeveloper.com/forum/archive/index.php/"<%todaylink%>" title="Today" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(pivot_template.css)%>" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(navstyles.css)%>" />
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(hoover.js)%>"></script>ive merged them into one css file for you.
note some changes in htm file too.
to your other question- can it be done without javascript.
pretty sure it cant . although you could do it with flash.
good luck
Ok thansk, but mine question was can it be done with 2 css files or do i have to make some modifactions in other files.
Because it works with 2 files, but don`t know if this the right thing to do?you should use just one css file.
it will work but will use extra bandwidth. load slower.Ok, so i learned again from you
Look at what i have done with navigation link thansk with you help.
<!-- m --><a class="postlink" href="http://www.picture-plaza.com/blog">http://www.picture-plaza.com/blog</a><!-- m -->
I was thinking, when i now hover over the text, the img change.
Is it also possible to change the image when i hover over the image itself ??i think the best way to do that would be to make large image buttons that include the photo. do you know what i mean?Yep i kno wwhat u mean 14 images with the text included in the images.
Will do try that, i think it more practical then it now is
I want to modify an exicsting blog(skin and template).
But now i came across a problem. I made a sort of navigation menu in the footer with position and float with images.
When i look in Firefox it`s all normal i think, but when you view it in IE, you see mine box with navigation menu (lowest red border) is much bigger then in FF, but the links are working, and when i delete some of the links the border becomes smaller, maybe it has something to do with the <ul> and <li>.
Mine thoughts are, that li takes space under the navigation menu.
Here is mine website: <!-- m --><a class="postlink" href="http://www.picture-plaza.com/blog">http://www.picture-plaza.com/blog</a><!-- m -->
Some code
footer.inc
<div id="footernav">
<ul>
<li class="nav1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/zeskamp.gif"></a></li>
<li class="nav2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/turkije.gif"></a></li>
<li class="nav3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/paaspop2005.gif"></a></li>
<li class="nav4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/bobred.gif"></a></li>
<li class="nav5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/carnaval.gif"></a></li>
<li class="nav6"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/feestteam.gif"></a></li>
<li class="nav7"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/?blogid=7"><img src="/blog/skins/qball/pics/loveparade.gif"></a></li>
</ul>
</div>
some css style;
#footer
{
height:16px;
border:1px red solid;
}
#footernav ul
{
margin: 0px;
padding: 0px;
}
#footernav li
{
list-style: none;
background: none;
}
.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited, .nav4 a:link, .nav4 a:visited, .nav5 a:link, .nav5 a:visited, .nav6 a:link, .nav6 a:visited, .nav7 a:link, .nav7 a:visited{
color: #4E4E4E;
width: 100px;
height: 16px;
padding: 0;
}
.nav1 a:link, .nav1 a:visited{
position: absolute;
top: 498px;
left: 0px;
}
.nav2 a:link, .nav2 a:visited{
position: absolute;
top: 498px;
left: 100px;
}
.nav3 a:link, .nav3 a:visited{
position: absolute;
top: 498px;
left: 200px;
}
.nav4 a:link, .nav4 a:visited{
position: absolute;
top: 498px;
left: 300px;
}
.nav5 a:link, .nav5 a:visited{
position: absolute;
top: 498px;
left: 400px;
}
.nav6 a:link, .nav6 a:visited{
position: absolute;
top: 498px;
left: 500px;
}
.nav7 a:link, .nav7 a:visited{
position: absolute;
top: 498px;
left: 600px;
}
/*THE LIST STYLES*/
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
li
{
padding: 0px;
margin: 0px;
}
img
{
border: 0;
}dont know why you used images for your nav.
i corrected the nav without the use of images.Thank you very much, i will try it out.
And what did you correct on mine css file, like to know what i didn`t what was wrong?
How would you use it without the images?Ow i corrected something in your css, i hope i did itgood.
You had some classes on the end .footernav ...... and some more.
It didn`t worked like i wanted,but i turned them into id.(#)
Have i done this correctly?yes youve changed them to id's correctly..
also youve got this
<LI class=nav1>
on your list items ..you dont need this change to <li>
A few other pointers:
use lowercase in all your tags.
when you declare a value always put it in quotes i.e.
<LI class="nav1">.
i started from scratch really for the nav. quite a lot to explain.
check out this and hopefully it will become clearer
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/Thanks">http://www.alistapart.com/articles/taminglists/Thanks</a><!-- m --> again, need to read it some more time to actually understand it all, but hey, i love to learn.
Next question, is it also possible to hover the images, because i heard/read somewhere that it is not so easy ????
What i want to do, is.... u see the navigation of mine website the black part(that are albums links i wanted it to be fot photo`s not the actually navigation) i wanted to put a black/white or grey image above it and when i hover min title or the image, i has to be a color image, and the font color below the image needs to be different.
This are 6 links and 6 grey images and 6 color images. Where do i have to start?
Do i need to make 6 new id and 12 or 18or 24 new classes ??im not quite sure what you want.
ive attached an image of what i think you mean (7 images?).
you want the image to change from a b/w to color when the link is rolled over?
and also the link text color to change?
am i right ?
let me know and i will put some thing together to give you an idea.yeah thats what i mean, but the image has to be side by side and bottom image by top text
ok a quick explaination.ive placed the nav ( images and navigation ) in a div and floated the images and footernav to the left
this will prevent there from being any spaces between the footernav and the images in internet explorer.OK? you can see this in your htm file. ive made a nav.htm file with just the navigation in so you can see this.ok
dont ask me to explain the javascript. i would have to rewrite it and comment it for it to make sense to you.and i aint got time.
unless you know javascript?
is this what you wanted.Wow!!!
This is what is was looking for, didn`t it was that much to code it, many many thanks.
So this isn`t possible without the java??
Some people think to light about webdesign, i like it!!!!!
If there is anything i can do for you, just ask.anything?
i could do with a new car
almost everything, not that rich Now i gonna try to fit everything in templates. Wish me good luckjust a question
Now i have 2 css files, but does this work like i did here
Won`t they collapse with each other, because i have 2 footer id`s and footernav ??
<meta name="generator" content="<%version%>" />
<meta name="description" content="<%blogsetting(desc)%>" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="-1" />
<link rel="bookmark" title="Nucleus" href=http://www.webdeveloper.com/forum/archive/index.php/"http://nucleuscms.org/" />
<link rel="alternate" type="application/rss+xml" title="RSS" href=http://www.webdeveloper.com/forum/archive/index.php/"xml-rss2.php" />
<link rel="top" title="Today" href=http://www.webdeveloper.com/forum/archive/index.php/"<%sitevar(url)%>" />
<link rel="up" href=http://www.webdeveloper.com/forum/archive/index.php/"<%todaylink%>" title="Today" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(pivot_template.css)%>" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(navstyles.css)%>" />
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"<%skinfile(hoover.js)%>"></script>ive merged them into one css file for you.
note some changes in htm file too.
to your other question- can it be done without javascript.
pretty sure it cant . although you could do it with flash.
good luck
Ok thansk, but mine question was can it be done with 2 css files or do i have to make some modifactions in other files.Because it works with 2 files, but don`t know if this the right thing to do?you should use just one css file.
it will work but will use extra bandwidth. load slower.Ok, so i learned again from you
Look at what i have done with navigation link thansk with you help.
<!-- m --><a class="postlink" href="http://www.picture-plaza.com/blog">http://www.picture-plaza.com/blog</a><!-- m -->
I was thinking, when i now hover over the text, the img change.
Is it also possible to change the image when i hover over the image itself ??i think the best way to do that would be to make large image buttons that include the photo. do you know what i mean?Yep i kno wwhat u mean 14 images with the text included in the images.
Will do try that, i think it more practical then it now is