Topic: navigation help... (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=21890" title="Pages that link to Topic: navigation help... (Page 1 of 1)" rel="nofollow" >Topic: navigation help... <span class="small">(Page 1 of 1)</span>\

 
templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

posted posted 05-21-2004 18:07

I'm trying to make a navigation with img hovers the problem is that my navigation is in a list so everythings shifted to one side thanks to the <li> element but that also means that the hover img also gets shifted... thats bad how do I fix this?? Also when you hover over it, it shifts the links several spaces below, anyone know how to fix this??

I'm new to CSS web designing if this was a table it would have been so much easier for me...
I posted the CSS as well...

code:
#nav {
width: 166px;
background-image: url(images/nav.gif);
margin: 0 0 0 4px;
}

#nav ul {
padding: 10px 0 0 0;
list-style: none;
font: 11px Verdana, Arial, Helvetica, sans-serif;
}

#nav a:hover {
background-image: url(images/hover.gif);
display: block;
}




Online Portfolio

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

posted posted 05-21-2004 18:52

you know, an url would help - for I don't even quite understand what your exact problem is.

Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

posted posted 05-21-2004 20:37

Not realy sure what you're asking, but this might help...

The <li> elements are shifted to the right, since that is the default browser behaviour is to add some left margin to the element. To avoid that add the following to the style sheet:

code:
#nav li {
margin: 0;
padding: 0;
}



_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

posted posted 05-22-2004 08:40

Yeah I got that fixed but I got some weird cross browser problems now. You see the site has three columns, the margin set for the right side column is 434px but the problem is that it looks ok in IE but is moved ahed a few pixels in Opera... should I be making sure the site aok in all browsers or if there is a way any of you guys know how to fix it, that would be much obliged.


Online Portfolio

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 05-22-2004 09:43

We're really not going to be able to help you out here without a link to the problem in action.

I mean, unless someone recognizes the problem just from the description and knows a workaround.


 

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

posted posted 05-23-2004 14:30

well... actually never mind I kinda fixed that although I would like to ask one thing... by default the html headings have several spaces below them... is there a way to minimize that space it's taking up most of the page??


Online Portfolio

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

posted posted 05-23-2004 15:00

like giving them margin-bottom:less px;?

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

posted posted 05-24-2004 08:41

Ok that fixes that but um... I hate saying this but I got another question!!
How do I set my footer to stay at the bottom??? because right now I've just set it there using <br /> tags!


Online Portfolio

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted posted 05-24-2004 10:12

Haha, now that is a tricky one especially if you want it to work in IE like this.

CSS 2 has a property for block elements called 'fixed', even though it's been around since 1997 it still has no support in IE. I would recommend you read through the pages on this site, I recently had to make a fixed footer, and I used the code from that site to do it.

Hope this helps, let us know how you get on.

Cheers,

Blaise

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

posted posted 05-25-2004 14:45

I'm not sure if this works in every browser or if it's just a fluke of my own beginning workings with CSS, but I've managed to get a footer for the back button on one of my pages, you're more than welcome to have a look at the source and hopefully it will help

The Page
http://www.dacryonic.net/subdomains/ixi/news/may_24.html

The CSS
http://www.dacryonic.net/subdomains/ixi/web.css

[edit] fixed links [/edit]

I'm not sure it works with opera, but so far so good in IE5+, FireFox 0.8? and Mozilla 1.6

I've found that when working with mozilla and firefox the positioning does get a little off. I'm still trying to get it all worked out myself because this is the first time I've even cared about what the page looks like in browsers other than IE.

[edit] forgot to mention, the div is called "back" in the css file [/edit]




...Of all the things I've lost, I miss my mind the most (ozzy osbourne)

(Edited by I X I on 05-25-2004 14:50)

(Edited by I X I on 05-25-2004 14:53)

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

posted posted 05-27-2004 09:05

well that worked I X I thanks alot but I just decided to make the footer more of a... sider or somehing like that I just moved to the side, looks better.


Online Portfolio

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

posted posted 05-28-2004 08:32

well, glad to know I could help.
even if you don't use it now, you never know when you'll want something at the bottom again




...Of all the things I've lost, I miss my mind the most (ozzy osbourne)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu