CSS - Floatly Confused!...need Container To Move Up.

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,

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

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.

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?

Hi,

I've been stuck for days now just trying to setup how I want to layout my page.

What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content.

Here is my latest attempt to do this;

Code:

html, body {

 margin: 0;
 color: black;
 width: 100%;
 height: 100%;
 margin-left: auto;
 margin-right: auto;
 padding: 0;
 text-align: center;
 
}

div#frameBG {
    
   top:0; 
   left:0; 
   z-index: 1;
   
 }

div#wrapper {
   
   margin: 0 auto;
   width: 900px;
   text-align: left;
   z-index: 2;
}

div#logo {
   
   position: relative;
   top: -760px;
   border: 0;
   padding: 0;

 }

 div#leftCol {

   width: 150px;
   position: relative;
   top: -580px;
   left: 0px;
   border: 2px;
   padding: 10px;
   background-color: #CCCC00;
   text-align: center;
 }

Code:

<HTML>
 <HEAD>
   <link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>

<BODY>

 <DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV> 
 
  <DIV id="wrapper">
   
   <DIV id="logo"><img src="images/header_01.jpg"></DIV>

   <DIV id="leftCol">    

     <DIV>   ...bunch of stuff here </DIV>
     <DIV>   ...bunch of stuff here </DIV>
     <DIV>   ...bunch of stuff here </DIV>

   </DIV>

  </DIV>
 </BODY>
</HTML> 

Using that I can at least get the content in the wrapper to appear over the background, but....

I get extra white space below and to the left of the background as I add more content.

...and, having to use -580px to position my stuff where I want it doesn't make sense for this.

Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching.

Any help here????

On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8

I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated.

I'm trying to make a menu using only css basically when you hover over an li element if there is another level below it a div is moved into place to reveal the links. It is working for the top level, but I can't figure out why it won't display/work for the 3rd tier. Both the css and the html validated, a link and the code is below. Thanks for any advice.

edit: I can't actually post the link but I will PM it to anyone who wants to see it halfway working.

HTML:
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"edit:no links">
<html>
<head>
<title>Test Page for drop menu</title>
edit:there would be an include for the css here but I can't post anything resembling a link
</head>

<body>
<div id="menuHolder">
<ul>
<li><a href="#url">Advising Network</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Adivsor PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
</ul>
</div>
</li>
<li><a href="#url">Form Bank</a></li>
<li><a href="#url">Timeline</a></li>
<li><a href="#url">Videos</a></li>
<li><a href="#url">Contact</a></li>
</ul>
</div>
</li>
<li><a href="#url">Career Investigations</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Alumni</a></li>
<li><a href="#url">Parents and Family Members</a></li>
<li><a href="#url">Employers</a></li>
<li><a href="#url">eRecruiting</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#url">Campus Life</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student and University Life</a></li>
<li><a href="#url">Student Activities</a></li>
<li><a href="#url">Commuter Services</a></li>
<li><a href="#url">Community Service Learning</a></li>
<li><a href="#url">USM Partnership with STRIVE U</a></li>
<li><a href="#url">USM Calendar of Events</a></li>
</ul>
</div>
</li>
<li><a href="#url">Scholarships and Finances</a></li>
<li><a href="#url">Academic Success</a>
<div class="subHolder">
<ul>
<li><a href="#url">Academic Strategies</a></li>
<li><a href="#url">Courses</a></li>
<li><a href="#url">Additoinal Support Resources</a></li>
</ul>
</div>
</li>
<li><a href="#url">Major Discovery</a>
<div class="subHolder">
<ul>
<li><a href="#url">Being Undeclared</a></li>
<li><a href="#url">GO Program</a></li>
<li><a href="#url">Aspirations - Early Study</a></li>
<li><a href="#url">Choosing Your Major</a></li>
<li><a href="#url">FAQ</a></li>
</ul>
</div>
</li>
<li><a href="#url">Orientation</a></li>
</ul>
</div>
</body>

</html>



CSS
-------------------
a {text-decoration:none; color:#ffffff;}

#menuHolder {height:60px; background:#0072ad; position:relative; text-align:center; width:1000px; font-size:16px; margin:0px;}

#menuHolder ul {list-style:none;}
#menuHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.subHolder {position:absolute; left:0px; top:200px; overflow:hidden; font-size:14px; background:#0083ad;}

#menuHolder ul li:hover .subHolder {left:0px; top:60px; width:1000px; text-align:center; height:60px;}
#menuHolder ul li:hover {background:#0083ad;}

/* sub menu */
.subHolder ul {list-style:none;}
.subHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.bottom {position:absolute; left:0px; top:500px; overflow:hidden; font-size:12px; background:#0094ad;}

.subHolder ul li:hover .bottom {left:0px; top:120px; width:1000px; height:60px; text-align:center; line-height:60px;}
.subHolder ul li:hover {background:#0094ad;}

/*bottom level*/
.bottom ul {list-style:none;}
.bottom ul li {float:left; padding:0px 10px 0px 10px;}

http://members.cox.net/sherry72/index.html


that is my website. I have a stats box to the right but i want it exactly to the right of my content box. It is underneath right now. How do i change the css to make it like i want it?

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

Hi,

I am looking to move my nav bar into the center

www.leehughes.co.uk

Am not sure how to do this, am worried about messing up the IE hacks..

Code:

ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #646060;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
}
#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:#transparent;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#FFF;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#003366;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

Thanks

Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle.


I have it floated to the right, but I can't seem to make it move up vertically.

Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size.

this is where the img is now, see how it is not lined up?
URL

this is where it is supposed to go.
URL


my code is this

Code:

<div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div>

and I have it next to the code for the chart.


Help!

sorry I posted it again by mistake..

please delete