Help with CSS

[JackPike]

In simple terms what is the difference between the Div ID , DIV Class and the Div Spam as I have just started to learn CSS and is driving me potty with positions which look good on all my browsers except IE

[Si...]

DIV is used to control blocks of HTML eg:

<div class="something">
<p>
 Paragraph 1!
</p>
<p>
 Paragraph 2!
</p>
</div>
<p>
Paragraph 3!
</p>

 

SPAN is used to control text elements (much like the depreciated FONT tag)

 

1st word <span style="color:#f00;">2ndWord</span> 3rd word

 

ID is only used once per page

Class can be used multiple times per page

[JackPike]

Cheers Si

I grasp the spam context but I get mixed up with the ID and Class tags and when to use them

[wanzelbin]

Cheers Si

I grasp the spam context but I get mixed up with the ID and Class tags and when to use them

 

The ID identifies an individual element - such as a particular div. You can then reference this id within a stylesheet, prepended with a hash, and set any attributes you want.

 

e.g.

 

#bodydvtxt {position: absolute; top: 10px; left: 10px; width: 510px; text-align: justify; }

 

Furthermore, the ID can be used within script to dynamically alter the elements properties.

 

e.g.

 

var o = document.getElementById("bodydvtxt");

o.visibility = "hidden";

 

(I'm not sure that's all syntactically correct, but you hopefully get the idea)

 

CLASS on the other hand is a way of defining a group of css attributes, and applying it to multiple elements that belong to that CLASS.

 

You can "define" the CLASS in your stylesheet as follows:

 

.myclass

{

background-color: red;

font-family: verdana, arial;

font-size: 8pt;

}

 

Then, any element that has its CLASS attribute set to "myclass" will inherit these attributes.

 

e.g.

 

<div class="myclass">

 

 

Hope that helps

 

 

David

[Emz]

CSS - such an awesome bit of kit. Defo worth learning!!

 

I love it, it's so great! The way you can dramatically change the whole look of your site by simply editing one sheet. A must for the larger sites. Imagine if you wanted to change the bg colour or font face, simply edit 2 lines in your css file instead of editing every page in your site! wicked!

 

If you look for some tuts, there are many online. I've mostly learned CSS by my usual method - "Messing About" / "Trial & Error" making mistakes sometimes is the best way to learn!

Edited November 16, 2006 by Emz

[Si...]

Then you get bloody errors which I can`t fix, such as this:

 

This is how its meant to look:

 

Click for screenshot

 

And this is the intermittent problem:

 

Click for screenshot

 

This is the css for the page

 

body{margin:0;background-color:#333;}a,a:active,a:visited{color:#000;text-decoration:none;}a:hover{color:#090;text-decoration:none;}#page {width: 700px;padding-bottom:5px;background-color:#CFC;margin: 0 auto;border-top: 8px #6C6 solid;border-bottom: 8px #6C6 solid;display:table;}#header h1 {font-size:32px;font-family:"Trebuchet MS", Verdana, SansSerif;color:#090;letter-spacing:-3px;padding-left: 10px;}.h1_emp {font-size:30px;color:#6C6;font-weight:bolder;letter-spacing:-2px;}#header_img{width:700px;height:248px;background-image:url(../images/home_img.jpg);}#left{width:480px;float:left;border-right: 1px #390 dashed;margin-top:5px;}.content {width: 460px;padding-left:10px;margin-top: 5px;font-size:12px;font-family:Arial, Helvetica, sans-serif;}.content h2 {font-size:24px;color:#090;font-family:Tahoma, Arial, Helvetica, sans-serif;}.content h3 {font-size:20px;color:#090;font-family:"Trebuchet MS", Verdana, SansSerif;text-align: center;font-weight: 900;}.content h4 {font-size:14px;color:#090;font-family:Arial, Helvetica, sans-serif;text-align: left;}.content p {color:#333;font-size:12px;font-family:Arial, Helvetica, sans-serif;}.content div {color:#333;font-size:12px;font-family:Arial, Helvetica, sans-serif;text-align: center;}.title_h4 {font-size:14px;color:#090;font-family: Arial, Helvetica, sans-serif;text-align: left;font-weight: bold;}#sidebar {float:left;margin: 5px 0 0 10px;width: 200px;}#sidebar .sidebar_item{margin-top: 5px;}#sidebar .sidebar_item h3{margin-bottom: 0;color:#090;font-size:15px;font-family:"Trebuchet MS", Verdana, SansSerif;}#sidebar .sidebar_item ul{padding: 0;margin: 0;}#sidebar .sidebar_item li{list-style-type:none;font-family:Verdana, Arial, Helvetica, sans-serif;color:#333;font-size:10px;padding-top: 6px;}#sidebar .sidebar_item li a{text-decoration:none;border-left: 1px #090 solid;color:#333;padding-left: 4px;display:block;width: 100%;}#sidebar .sidebar_item li a:hover{background-color:#6C6;color:#000;text-align:left;padding-right: 8px;width:98%;}#footer {background-color:#090;width: 700px;margin: 0 auto;}#footer p{margin:0;padding: 5px 16px;font-size:12px;color:#6C6;font-family:"Trebuchet MS", Verdana, SansSerif;font-weight:bolder;text-align: center;}#footer p a{color:#6C6;text-decoration:none;}#footer p a:hover{color:#FFF;}.thddr{color:#333;border:#090 1px solid;font-size:12px;font-family: Arial, Helvetica, sans-serif;text-align: center;}.thddr2{color:#333;border:#090 1px solid;font-size:12px;font-family: Arial, Helvetica, sans-serif;text-align: left;padding: 5px;}.thddr3{color:#333;border:#090 1px solid;font-size:12px;font-family: Arial, Helvetica, sans-serif;text-align: center;padding: 5px;}.thddr div {color:#333;font-size:12px;font-family:Arial, Helvetica, sans-serif;text-align: center;}.thddr a:hover {color:#090;font-size:12px;font-family:Arial, Helvetica, sans-serif;}.alinks {color:#000;font-size:10px;font-family:Arial, Helvetica, sans-serif;}.pagelink{background: #EEE;border: 1px solid #090;padding: 1px 3px 1px 3px;color:#000;} .pagecurrent{background: #EEE;border: 1px solid #090;padding: 1px 3px 1px 3px;color:#090;font-weight:bold;} .pagecurrent a:active,.pagecurrent a:visited,.pagecurrent a:link{text-decoration: none;color: #090;}.pagelink a:active,.pagelink a:visited,.pagelink a:link{text-decoration: none;color: #090;}.button{background-color:#EEE;border:1px solid #090;font-family:Verdana, Arial, Helvetica, sans-serif;color:#090;}.textfield{background-color:#EEE;border:1px solid #090;font-family:Verdana, Arial, Helvetica, sans-serif;color:#090;}.bgsolid{border:#090 1px solid;background-color:#090;padding: 1px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color:#EEE;}.thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 150;}.thumbnail span{ position: absolute;background-color: #EEE;padding: 5px;left: -500px;border: 2px solid #090;visibility: hidden;color: black;text-decoration: none;}.thumbnail span img{ border-width: 0;padding: 2px;}.thumbnail:hover span{ visibility: visible;top: -180px;left: -185px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Carp Fishing UK</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-language" content="EN" /><meta name="robots" content="index,follow" /><style type="text/css">@import "style.css";</style><script type="text/javascript" language="javascript" src="script.js"></script></head><body><div id="page">  <div id="header">    <h1><span class="h1_emp">Welcome to</span> Carp Fishing UK</h1>    <div id="header_img"> </div>  </div>  <div id="left">    <div class="content">      <!-- PAGE CONTENT GOES HERE -->    </div>  </div>  <div id="sidebar">    <div class="sidebar_item">      <h3>Site Navigation</h3>      <ul>        <li><a href="index.php?p=index">Home</a></li>        <li><a href="index.php?p=news">Angling News</a></li>        <li><a href="forum/index.php">Community Forums</a></li>        <li><a href="articles/index.php">Angling Articles</a></li>        <li><a href="reviews/index.php">Tackle Reviews</a></li>        <li><a href="venues/index.php">UK Venues</a></li>        <li><a href="world/index.php">Foreign Venues</a></li>        <li><a href="glossary/index.php">Angling Glossary</a></li>        <li><a href="shop/index.php">C*** Shop</a></li>        <li><a href="index.php?p=rigs">Rigs & End Tackle</a></li>        <li><a href="index.php?p=poetry">Angling Poetry</a></li>        <li><a href="index.php?p=events">Site & Angling Events</a></li>        <li><a href="index.php?p=art">Angling Art</a></li>        <li><a href="index.php?p=scenic">Scenic Gallery</a></li>        <li><a href="index.php?p=terms">Terms & Conditions</a></li>        <li><a href="index.php?p=privacy">Privacy Policy</a></li>        <li><a href="contact/index.php">Contact Carp Fishing UK</a></li>        <li><a href="links/index.php">Links Directory</a></li>      </ul>    </div>  </div></div><div id="footer">  <p><a href="http://www.carpfishinguk.net">Copyright © Carp Fishing UK 2002-2006</a></p></div></body>
</html>

 

I`ve tried "inline" and "right" for the sidebar with the same result.

 

The error only happens in Firefox and not IE though

 

I`ve added a short .wmv file of the problem (35 seconds 890KB)

 

Click here to view/download

[Angling]

Hi

 

I find this resource very helpgul

 

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

 

Have a good look at it and Enjoy!!

 

Have you seen the CSS zen garden (type that phrase into google if you have not) Just shows what can be done with pure CSS

[wanzelbin]

Then you get bloody errors which I can`t fix, such as this:

 

This is how its meant to look:

 

Click for screenshot

 

And this is the intermittent problem:

 

Click for screenshot

 

I`ve tried "inline" and "right" for the sidebar with the same result.

 

The error only happens in Firefox and not IE though

 

I`ve added a short .wmv file of the problem (35 seconds 890KB)

 

Click here to view/download

 

I had exactly the same problem when using float in Firefox. Gave up in the end and put the two divs in adjacent table cells.