CSS - Css Question Regarding Nested Classes And Links. Beginner Help?

Hi,
beginner question. How do I achive this

Code:

<TABLE BORDER="1" CELLPADDING="5">

in my CSS?

Thank you for your help?

say if i have a css file such as

#title {text:indent= 1In;........}

.content{.......}

how do i refer to it in my html?

<p class = "title">welcome......</p>

similarly for the ID

<p id = content>welcome.....</p>

i have tried something along thesel ines but it dont work!

when i edit my CSS file and when i use classes, i use multiple ones. for example, for the top paragraph it a div right after my <h2>, i say
Code:

<p class='notopmargin aligncenter green'>Blah blah blah</p>

should i be making classes specific to this kind of paragraph? like
Code:

<p class='greencentertop'>Blah blah blah</p>

which way is better?

my thought is that i am using a bad habit, because it will be hard to use when i am coding a new paragraph unless i know exactly what i do every other time.

on the other hand, reusing classes makes the file smaller and the loadtime for my site will be faster.

thoughts, any1?

Hi All,

I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue.

Please look at my html and the css code below:

Code:

div class="node">
<div class="taxonomy"></div>        
<div class="content"> 		
<p>Photo Gallery Body Here</p> 
<div class="field field-type-filefield field-field-image">    
 <div class="field-items">             
<div class="field-item odd">                    
<a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1"  width="125" height="125" /></a>        </div>                         
</div> 
</div> 	
</div> 
</div>                                
</div>                             
</div>

Code:

.node .field .field-type-filefield .field-field-image .field-items .field-item .odd 
{ 	
border: 1px solid #fff; 	
width: 125px; 	
height: 125px; 	
margin-top: 35px; 	
margin-right: 28px; 	
float: left; 
}

The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site.

How do I target this specific class properly?

Thanks!

I am building a page that uses PHP and does a MySQL select to display content on the page. The page uses nested divs. I had not realised this at my design phase, but items that it displays below the side-menu do not display properly. I have tried using float:left but it doesn't seem to do the trick. Here is the page and code in question (view in internet explorer only):

http://tweedledee.dyc.edu/~tpx/test/tpx7c/index.php

PHP Code:
<div id="NewsOuter">
<div id="NewsTitle"><a href="viewArticle.php?id=4">News Test</a></div>
<div id="NewsInner"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg" align="left">this is the news and stuff</div> 





The above is the generated code for each item it pulls from the database. This should be a sufficient model to base it on. Here is the CSS code. Content is the name of the Div that the News sections and the menu sit inside. I left out the menu CSS, please inform me if it is also needed.

PHP Code:
#content {
        background:#eee;
           width:750px;
        border:1px solid #000;
        text-align:left;
        }
#Content #NewsOuter {
        display: block;
        float: left;
        height: 162px;
        width: 602px;
    }
#NewsTitle {
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        float:left;
}
#NewsTitle a {
        display: block;
        border:1px solid;
        background: #FFFFFF;
        color: #000000;
        height:20px;
        font-weight: bold;
        text-align:left;
        text-decoration: none;
        padding: 1px 10px;
    }

#NewsTitle a:hover {
        color: #999999;
        text-decoration: none;
}
#NewsInner {
        display: block;
        float: left;
        width: 600px;
        height: 102px;
        font-family: Arial;
        font-size: 10px;
        font-style: normal;
        margin-top: 0px;
        vertical-align: top;
}
#NewsBottom {
        display: block;
        float: left;
        width: 600px;
        height: 20px;
        padding: 1px 10px;
        Font-Family: Arial;
        Font-Size: 9px;
} 





Any idea what I can do to #NewsTitle to make it always align to the left? It SHOULD appear as it does next to the menu. Unfortunately the menu is also in a div so there is no hard edge along its left border for the div to stop.

And yes, I am attempting to build a CMS from the ground up. No pre-built CMS that I have tried meet my requirements. Boy is it hard/fun!

Ok. I have some javascript functions I want to happend whenever a button is pressed. Would it be easiest to use <div> tags to section off parts of a larger images as "special link areas" that really have nothing in them.

And when they are clicked, respond appropriately?
I hate using ImageMaps, and I'm hoping this is an alternative, if maybe easier solution...

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

Hi people,

critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black

<style type="text/css">
h3.Big Bird{color:yellow;}/*Class
Font#CookieM{color:blue;}/*Id*/
</style>

<h3 class="BigBird">Big Bird</h3>
<font Id="CookieM">Cookie Monster</Id>

Hope to hear from you soon.
kaz

heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg

main.css
.main-header-back {
background-repeat: no-repeat;
background-position: 793px 0px;
overflow: hidden;
}

index.php
.main-header-back {
background-image:url('/images/main/image.gif');
}

I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element.

ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out.

Thankyou All

is it possible to use two classes for one element.
I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them.

perhaps there is a form of superclass and subclass in css.

I cant seem to get my cellpadding working for tables, what do i have to input. I have tried:

.header {background:#2D759F; width:100%; cellpadding:5}

all the others work, jus the cellpadding which does not.

Hi,

This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code:

Code:

td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}

Any ideas? thanks in advance.

Hello,

I have 3 type of h2 headers on my web site:

1 - Post titles on a blog (Ex: <h2>New documents available for
download</h2>)

2 - Content section title (Ex: <h2>Contacts</h2>)

3 - Sidebar content section title (Ex: <h2>Publicity</h2>)

I am trying to build my CSS to style the 3 different headers but I am
having some problems. I could use:
h2.Post, h2.Content and h2.Sidebar

or:
h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar

or even:
h2 (for Post), h2.Content for content and then h2.Sidebar to change
Content class so it fits Sidebar.

So a section in sidebar would be:
<h2 class = "Content Sidebar">Publicity</h2>

Could someone help me in deciding how should I structure my classes?

Thank You,
Miguel