Reusable CSS objects?

@LeeUJan 08.2007 — #CSS is not a coding language so there are no "objects". However, you could just put your navbar code in one include file and just pull it into each file.

@ray326Jan 09.2007 — #The normal way to do that is server side includes, either using server facilities or through programming techniques.

@mudeltaJan 09.2007 — #Hi everyone,

Is there anyway to simply lump all this code in an external file (a reusable 'nav-bar' object) and reference it from the HTML? [/QUOTE]

When i read your post, i think you use some inline css, like

[CODE]
 <div style="your ccs here"></div>
 [/CODE]

Is that correct?

there are two other ways to use css:

1) put all the css in the header:

[CODE]
 <head>
 <style type="text/css">
 here your css
 </style>
 </head>
 
 [/CODE]

2) use an external stylesheet

then you put alink in the head like this:

[CODE]
 <head>
 <link href="main.css" rel="stylesheet" type="text/css" />
 </head>
 [/CODE]

and the file main.css contains all the css

i don't know how you make your menu, but when you give the outerelement of the menu an id, you can access all the elements inside using css selectors, and put all of them in an external style sheet.

let's say you use an unorded list to make your menu:

<i>
 </i>&lt;ul id="menu"&gt;
 &lt;li&gt;&lt;a href=""&gt;menuItem1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;menuItem2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;menuItem3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;menuItem4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

by giving the menu an id, you can put all the layout code in an external stylesheet. That way your (x)html stays clean.

And there's no problem for the mouseovers:

using unobtrusive javascript and the dom, you can attach mouseovers (or anything else) to your links.

[edit]

you should take a look at this site:

http://www.w3schools.com/css/default.asp

[/edit]

Reusable CSS objects?

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Reusable CSS objects?

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴