...

View Full Version : "Different CSS"



CaptainB
09-27-2007, 05:55 PM
Hi!

See, I have a question.

I have a "main" css file for my site layout. However on some pages I want to have some custom tables made with divs. Would the best thing be to put the css for the tables in the main css file, or should I put it in a seperate?

Cons and pros?

vtjustinb
09-27-2007, 06:03 PM
It really depends. More than likely the amount of CSS you'll need for the tables is nominal, and once the client's browser downloads the CSS file once it's cached so page load isn't really an issue. Centrally-locating all of your styles also has the advantage of only needing to maintain one file, which is nice.

There's nothing wrong with conditionally-including a CSS file with certain styles, but for me the overhead of maintaining a bunch of separate files is inconvenient. Honestly about the only time I have separate CSS files is for print stylesheets, or IE6/7-specific rules that I don't want muddying or invalidating my main files.

I know there are plenty of people who break out their stylesheets into semantic units--layout, typography, graphics, etc. The advantage of that is being able to edit the presentation without editing the structure, but again it's kind of a pain to hunt styles down and remember which sheet they're in.

In short, I don't think there's a best practice. Use whatever makes the most sense to you organizationally, as you'll probably not incur a huge page-load hit by putting all the styles in one file anyway.

_Aerospace_Eng_
09-27-2007, 06:04 PM
I would put the css in the main css file though why are you trying to recreate a table with divs? Are you in the thought process that tables shouldn't be used for anything? If thats the case then you are mistaken. Tables should and can be used when you will be displaying tabular data.

CaptainB
09-27-2007, 06:19 PM
Thanks for your answears guys!

I think I'll go on and use 1 file then. Makes most scence to me. I just wanted to know if there was something I wasn't aware of :)

@ Aero: Well, tables and tables... Kinda hard to explain, but it's for laying out a page with walpapers. can be seen here: (NOT finished, ONÆLY for testing purposes!) http://www.xflightx.port10.com/NEW/test.html

and the CSS is just this:


.linje { width:696px;
height:220px;
float:left;
padding-left:30px;
}

.field { width:150px;
margin-bottom:10px;
margin-left:5px;
float:left;
}

.text { width:150px;
float:left;
text-align:center;
}

CaptainB
09-27-2007, 06:32 PM
Oh, now a little question more.
I see that my footer gets floated to the left. How would I clear the floats? Just add: float:clear both; to the footer div or?

_Aerospace_Eng_
09-27-2007, 06:42 PM
I think your footer is like that because you have one to many closing </div> tags. Learn to use the validator. It catches simple mistakes such as this one. I really don't recommend this

<div id="main">
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>

<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>

<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>

<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>
<div class="field"><img src="test.gif" width="150" height="95" border="0" alt="" /><div class="text">1280 x 800<br/>1024 x 768<br/>800 x 600</div></div>

</div>
It makes your code a little bloated and its not semantic. Use an ordered or unordered list instead. You my friend have a case of divitis (http://csscreator.com/?q=divitis).

CaptainB
09-27-2007, 08:36 PM
Thanks for your link, Aerospace.

However I can't seem to make it work.

Here's what I got:

CSS:

ul#linjer li { width:696px;
height:96px;
float:left;
list-style:none;
}

ul#field { width:150px;
margin-bottom:10px;
margin-left:5px;
float:left;
list-style:none;
}

ul#text { width:150px;
float:left;
text-align:center;
list-style:none;
}



HTML:

<ul>
<li id="linjer">
<li id="field"><img src="test.gif" width="150" height="95" border="0" alt="" />
<li id="text">1280 x 800<br/>1024 x 768<br/>800 x 600</li></li>
</li>
</ul>

The things show, but they won't line up as with the before code. Also, my footer is still out of place. I know that the validator won't validate the above code, I'm just asking for a little help to get it right. I havn't worked with Lists for a loong time, and have never styled em' before.

I appriciate it!

vtjustinb
09-27-2007, 08:39 PM
CSS:

ul#linjer li { width:696px;
height:96px;
float:left;
list-style:none;
}

ul#field { width:150px;
margin-bottom:10px;
margin-left:5px;
float:left;
list-style:none;
}

ul#text { width:150px;
float:left;
text-align:center;
list-style:none;
}



HTML:

<ul>
<li id="linjer">
<li id="field"><img src="test.gif" width="150" height="95" border="0" alt="" />
<li id="text">1280 x 800<br/>1024 x 768<br/>800 x 600</li></li>
</li>
</ul>


Your selector says "ul#text" (ul with an id of "text") but you placed those ids on <li>s instead so the styles aren't being applied. Also, by definition id's should be unique on a page, so you'll likely want to use classes instead since this is a repeated element in your page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum