CSS - Confused On Basic Setup Of The Page

I'm creating a website in html/css, and I hope this is the correct forum for this issue. I'm not expecting anyone to explain exactly how to do this, but maybe just a point in the right direction as I haven't been able to search for this correctly.

Essentially I currently have a list of news items on the front page of my site. I want there to be a small indicator beneath each of these news items that says "comments (#)" where # is number of user comments about that news item. If this is clicked it would take the reader to a different page with the full news article and below it a list of the comments. It seems like some kind of wordpress implementation might work here but I have no idea where to look for something like this.

Sorry if that was a little hard to understand, but I can't post urls yet to help explain. Thanks in advance!

I'm confused about why IE is rendering this correctly and FF is not. the main wrapper for the content isn't stretching with the image floating on the right. I know I'm missing something but I can't see what. I just started building this so there will be some styling missing but I wanted to at least get the basic elements working first.

Can someone please help me see what I'm missing here?

link

Thanks,

Brad

Hey,

Ok I have a external CSS file and in their I have

Code:

TD { background-color:#FFFFFF; font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal; }

The project has been handed to me to finish off / make changes to and the origonal person just gave all TDs a white bg which is fine but now the site is being changed to have a bit of graphics on the header and footer.

With all TD's having the above code it blocks the background image from showing.

Is their away I can keep it set for al TDs to have the white background but sort of exclude some TD's?

I have tried doing a

Code:

TD.footer  {font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal;}

which I thought would cancel out the background color of the TD code above but it has not worked.

I dont want to rename the first code I pasted because I would have to go through and change each and every single TD to have the class.. and thats over 30 pages of changes I would have to do..

Any help is greatly appreciated..

Thank you in advance

I am very confused how best to define my style sheet for a given goal. Here is what I need to do:

I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc).

I just don't know how to proceed. It seems that I would do something like

Code:

TD.centered {
text-align: center;
}


TD.left{
text-align: left;
}

But then I don't know how to define the link colors. Would I have to do something like

Code:

.centered a:link {
color: #000000;
}

Isn't there a way I can create one selector that contains everything without having to have all these separate entries?

Any help is vastly appreciated!

Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag?

thanks,

brian

This is driving me insane.

What is happening here? The green <div> should be the same width as the table - and that width should be 830px.

It looks like IE is stretching the table wider than it should be... but if so then why?

When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random.

PHP Code:
// containg div
<div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;">

// table
<table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;">

// pink div
<div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;">&nbsp;</div>

// green div
<div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;">

// red div
 <div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;">

// blue div
<div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;"> 





Internet Explorer:


Firefox:


Thanks,

ok

I have been reading how we shouldnt use px as they dont scale well or whatever.. but I have just tested px in my css and when I resize the size the text scales pretty much the same a with ems or %..

but what doesnt happen is if I resize the browser window itself, the text doesn't scale up or down... with any of the units? is this the standard behaviour?

because what I am thinking should happen is that if I reduce the size of browser, the font size should get relatively smaller and vice versa.

Hi, i am in the middle of designing a website and i need to create an area to insert a YouTube video...

All the videos on YouTube seem to be 640px X 385px HOWEVER the give you an embed option of 640px X 480px

This is a bit confusing... what size space should i allow for, thanks in advance for your help...

I had always thought that 3-digit hex codes were equivalent to the 6-digit code that you'd get from doubling each digit. So #FFF would be equal to #FFFFFF, etc.

However, in Photoshop, that doesn't seem to be the case. For example, #555 gives a dark blue, but #555555 gives a dark gray.

Is there a difference in what this means in different contexts? It seems there is a difference between CSS and graphics software?

Hello...I have a simple layout that I cannot get right. I have a (in looks) two column layout.

In the content area, the first div defines the header image for the left content column. The second div defines the right help column. The third div defines the left content column.

What I would like is, for the left content column to move up under the header image for that column.

I'm pretty sure it's a float issue.

Here is a link to the page:

http://www.rustbug.com/mmtest/two_thirds_template.html

Hi,

I have three <div>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
     <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
     <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
     <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
    
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?

Hi Everyone,

I am quite new to CSS, and I am working on my University Final Year Project.

I currently have just 4 errors, when I validate my page: URL

My CSS page can be found he URL

Can anyone please tell me you I get these errors, the code looks correct to me. Also, do you know any Frontpage/Dreamweaver type programs, which u can directly edit text etc, while keeping to the W3 Standards.

Regards

Alex

Hi,

suppose I have a class declared in a css file
Code:

.myname  {.......}

that css file I include in my page.
Now if I want to over write that class in my page I do somwething like following in my page


Code:

<style>
.myname  {different stuff}
</style>

is it ok to do something like this, or delcaring class twice may cause problem?

Hi guys, just dropping a line because I am having the darndest time trying to get this page:

http://www.againsttheline.com/college_football_links/

to look the way I want it to with the CSS the script developer included.

I have never personally used CSS myself, so I'm at a bit of a loss, but I have gone into the CSS file, changed what I though to be correct, but can never get the right results. I would like the categories in the middle of the page to be larger without changing the size of the rest of the links on the page. However, when I change "CatHeaderText" size it has no effect. If I change body text size it has no effect. The only thing that works when I change the font size is the a:link thing from xx-small but then that changes every link on the page and not just the category links in the middle.

Can anyone offer any ideas of how I can make this work?

Thanks,

John


Below is the full CSS

<style>
.bodytext {
font-family: verdana,arial,ms sans serif;
font-size: 10pt;
color: #000000;
}
a:link, a:visited, a:active {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
color: #70191B;
text-decoration: none;
}
a:hover {
font-family: verdana,arial,ms sans serif;
text-decoration: underline;
color: #800000;
}
.dotted {
border: 1px dotted #000000;
}
.catheadertext {
font-family: verdana,arial,ms sans serif;
font-size: l2pt;
font-weight: bold;
color: #000000;
}
.button {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
border-color: #909090;
background-color: #404040;
color: #FFFFFF;
}
.formtext {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
}
.poplisttext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 7pt;
}
.revheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
background-color: #5A636E;
}
.topborder {
border-top: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.bottomborder {
border-bottom: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.description {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
padding-left:20px;
}
.adminheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
}
.admintable {
background-color: #000000;
}
.adminmain {
background-color: #FFFFFF;
}
.subcatheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 9pt;
color: #800000;
}
</style>

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.

I have a CSS call for all p, like this

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}

now I want headings to be ital, so I add

p.ital {
font-style: italic;
}

and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold

p.italBold {
font-weight: bold;
}

That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this?

Thanks for your help

CJB