Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: "Different CSS"

  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    "Different CSS"

    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?

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • Users who have thanked vtjustinb for this post:

    CaptainB (09-27-2007)

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (09-27-2007)

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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:

    Code:
    .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;
    			}
    Last edited by CaptainB; 09-27-2007 at 06:23 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thanks for your link, Aerospace.

    However I can't seem to make it work.

    Here's what I got:

    CSS:
    Code:
    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:
    Code:
    <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!

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by CaptainB View Post
    CSS:
    Code:
    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:
    Code:
    <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.

  • Users who have thanked vtjustinb for this post:

    CaptainB (09-28-2007)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •