CSS - Basic And Quite Possibly Stupid Question

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

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

how do you set the width with CSS?

i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks.

I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed.

Here is the code:

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<style type="text/css">
body {
	font-family:arial;
	font-size:10pt;
}
h1 {
	text-align:center;
	margin:0;
	padding:0;
}
div.letter {
	page-break-after:always;
}
.from {
	text-align:center;
}
.to {
	font-style:normal;
	margin-top:30px;
}
.date {

}
.footer {
	position:absolute;
	bottom:0;
}
		</style>
		<!-- compliance patch for microsoft browsers -->
		<!--[if lt IE 7]>
		<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
		<div class="letter">
			<h1>Stanley Road Baptist Church</h1>
			<address class="from">
				Stanley Road, Morecambe, Lancashire, LA3 1UP
			</address>
			<address class="to">
				Joe Bloggs
			</address>
			<p class="date">
				Friday 27th August 2004
			</p>
			<p>
				Dear Joe,<br />
				Blah blah blah.
			</p>
			<p>
				Yours sincerely,
			</p>
			<p>
				Matt Fletcher
			</p>
			<div class="footer">
				The Footer In Question
			</div>
		</div>
		<div class="letter">
                 ...
		</div>
		<div class="letter">
                 ...
		</div>
	</body>
</html>

I can get it to stick to the bottom of only the first page, but it doesn't appear on any others.

Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else.

The pages is at: http://www.webputzer.com

The .css file looks like this:

Code:

/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/



body {
margin: 0;
padding: 0;  
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}


#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}

#wrapper4{

}


#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}


#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}	


#header-inner{
margin:0;
padding:0;
}


		
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}	

#content-inner{

}

#main {
width: 550px; 
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}


#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;

}


#footer-inner{
background: #f2f2f2;
height: 50px;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{ 
float:right;
}

#credit{
text-align:right;
padding: 0 15px;
}

#credit p{
margin:0;
color:#777;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}

/*  ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}

h1{
	font-size: 190%;
}
h2{
	font-size: 160%;
}
h3{
	font-size: 120%;
}
h4{
	font-size: 130%;
}
h5{
	font-size: 100%;
}
h6{
	font-size: 70%;
}


a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
	font-size: 90%;
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
}

td{
 vertical-align:top;
}



#tabs {
  float:left;
  width:100%;
  font-size:90%;
	background:#000;
  line-height:18px;
	
	border-top: 1px solid white;
}


    #tabs ul {
	  margin:0;
	  padding:4px 10px 0 10px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      padding:5px 15px 3px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }  
	
	


/* Headings */ 

form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}

#header h3{
margin:  0;
padding: 30px 0 0 10px;
}

#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}

#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;

}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}


.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #333;
}

.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}

.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}


.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}


.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}




/*  Comments   */

h3#comments, h3#postcomment{
	font-size: 100%;
	font-family:verdana, sans-serif;
}	

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
	padding: 0px 3px;
	margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}

ul#commentlist li{
	display: block;
	padding: 0;
	margin: 0 15px 5px 15px;
	font-size:90%;
	background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
	width:50px;
	float:left;
	padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/*  sidebar styles */


#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}



.menu{
padding:0;
font-size:90%;
}

.menu a{
font-weight: 100;
}

.menu a:hover{
text-decoration:none;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}

.menu ul li.widget ul{
	margin: 0;
	padding:0;
}

.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}



.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know...

Hey guys,

I am brand new to these forums, this seems like a good place to ask for help. So I am a novice web designer, I use AdobE Dreamweaver CS3. I have designed and coded some websites quite successfully, but now I keep running to the same problem. I have made my layout and turned it into different divs on Dreamweaver. This is in a very basic early stage. Next I want to add content, and I know how to do that, but every time I have done that and I add more content downward outside of the original "content" div's borders, the whole layout sometimes gets screwed up. Here is the address to the basic website that only looks to be alright: vivanidesign.com/newvivani/design.html. Then as I add content, to this particular page, it overflows, as shown in this website: vivanidesign.com/newvivani/designfail.html. How can I fix this? How can I make the background content image follow the text, so it will move down with it? Not just the content div, but the sidebar div also.

Any help would be really great, I've tried to find out the answer to this for a while!

Thanks!

I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example:

<head>
<title>right position</title>
<style type="text/css">
#maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;}
.left {font-size: 2em;}
.right {padding-left: 350px}
</style>
</head>
<body>

<div id="maindiv">
<span class="left">hello world</span>
<span class="right">hi there</span>
</div>

</body>

This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths.

Thanks in advance,

CSS Newbie!

Really basic question. I've created a CSS text class. How do I reference it to apply to a text sample?

I've been using this page as my guide:
http://www.htmlgoodies.com/beyond/css/article.php/3470231
But they only reference commands such as <I class="name"> and <U class="name">. I don't want to add any Italics or Underlines, so how do I only reference the class?

Hi all,
I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest?

I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix).

Thanks very much for any pointers.

I need the following with this simple example

1) Horizontal Tabs: the <dt> appears along the top in one horizontal line,
and when you click on the name, it'll display the <dd> content below. As you
click on other tabs, the content area will be replaced by the corresponding tab
content. If you click on a tab that's already opened, it'll close the display
of its content.

2) Vertial Tabs: the <dt> appears long the left side of the page, each tab
taking up one line. When you click on the name, the <dd> content will display
to the right of the tabs. Same as above, as you click on other tabs, the
content area will be replaced by the corresponding tab content.


[php]
<dl>
<dt>Tab 1</dt>
<dd>Content 1<br>Content 1<br>Content 1<br></dd>
<dt>Tab 2</dt>
<dd>Content 2<br>Content 2<br>Content 2<br></dd>
</dl>
[/php

hope someone can help

Good Day All,

I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all.

http://029c92a.netsolhost.com/abrasives/cutmetalm.html

Colin

Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com

My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.)

Hope a smartie here can help me out with this one. Thanks.

<edit>
IE7 also removes the bullets from my <ul>. Any ideas on that also?
</edit>

at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve.

what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message).

look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed.

now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue.

my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css.

i'll also post my code: Code:

<div style="border:#ff0000 solid 1px"><!-- full wrapper -->

 <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper -->

  <div><img alt="image" src="img.bmp"></div>

  <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper -->

   <div style="text-align:center">caption</div>

  </div><!-- end caption -->

  </div><!-- end float -->

 <div style="background-color:#0000ff"><!-- message area -->

   <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div>

 </div><!-- end message -->

</div><!-- end full wrapper -->

thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on.

-z

Hi,

Whats going on with my site in FF? It works fine in MAxthon.

http://www.wnv2.com/?wn=tutorials&type=photoshop
all the tutorials are messed up

==and==

www.wnv2.com

There is not bottom!!!

Thanks

I am trying to get the logo div to sit on top of the background div with the code before....all I can get the logo to do is sit directly BELOW the header....help! please!

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>golfpeg.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
BODY {
    background-color: #ffffff;
    margin: 0px;
    padding: 0px;
}
#headerBg {
    position: relative;
    top: 0px;
    left: 0px;
    background-image: url(/gfx/bg_files/header_bg.gif);
    width: 760px;
    height: 102px;
    z-index: 1;
}
#logo {
    position: relative;
    top: 0px;
    left: 0px;
    background-image: url(/gfx/primary_logo.gif);
    width: 225px;
    height: 102px;
    z-index: 2;
}
-->
</style>
</head>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
        <td width="760">
        
        <div id="headerBg"></div>
        
        <div id="logo"></div>
        
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
</body>
</html>