Using more than one CSS stylesheet

[iphitus]

Yup, you just need to add some spacing to them before the mouseover effect happens, or if you cant be bothered reading the spec to work that out, just add the mouse over border to them too -- except make it white, its simple and saves a little time workin out the spacing

[tyme]

wow...that makes total sense...lol.

[Darkelve]

all i needed was:

 

display: block;

 

to do the full-width lining.  i've done a decent amount of modifying of my css, not a whole lot but a good bit.

 

now if only i could get rid of that shifting that occurs when you go over a link....i think it has to do w/padding or one of the other options but i can't figure it out :(

That could the ticket. With this you are stating a particular element should be treated as a block element, rather than inline. Through this you can use the entire available width.

 

With 'shifting', you mean that when you hover a certain link, it pushes the link below down a bit? I visited your page with Mozilla Firefox and IE6 and Opera, but everything seems to work fine. Guess you already solved it.

Edited March 13, 2004 by Darkelve

[iphitus]

Yup, he followed my suggestion to fix it after i explained it a bit more :)

[paul]

tyme: you're right ... use display: block and the css will "stretch" to the width of the block

if you take a look at my menu at loudas.com you can hover over the menu on the very far left, and still get the HREF ... coz I use display : block

 

if you want different links then you will either need to use classes, or directly access you code

 

example:

make your classes a:hover.left_menu or name your div's

<div name="menu" ... then use div#menu a:hover { in your css

 

you can load more than one style sheet for the sake of tidiness.

but you may have to use media="" .. I use it because I have a print css... try doing a print preview of loudas.com ... it strips out all the uncool display stuff, so it prints out nicely :)

 

example:

    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
   <link rel="stylesheet" type="text/css" href="css/menu.css" media="screen"/>
   <link rel="stylesheet" type="text/css" href="css/print.css" media="print"/>

I also have other CSS that loads during the navigation of the site

example:

<? if($PHP_SELF="ig.php") { echo "<link rel=\"style ....

 

then of you can always use embeded css

<a href="#" style="color: ccc; etc etc ....

but that defeats the purpose of using css really ... but I have found a need for it occasionally. It really good for combining css and js

<a href="#" style=..." onmouseover="this.style('...') ...

 

 

hope this helps

[tyme]

thanks paul :) i actually figured out the display: block thing from your code (hope you don't mind :) ). that's how i learn most of the coding i know, but looking at others and seeing how it works. hence my title, "code junkie" :D

[Darkelve]

Here's a nice CSS tutorial for those of us that have too much time on our hand... ;)

 

http://www.westciv.com/style_master/hands_...l_sm/index.html

 

 

Note: the way Stylemaster and Layout-master are built, is something I think Nvu should address as well. But I guess it'll "just" work with inline styles... bummer.

Edited March 14, 2004 by Darkelve