CSS - Advanced Css Syntax Or Omission??? Need Clarification.

Ok here is my layout
http://codingcore.com/template.html


there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither

Thanks
Matt

I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported.

The layout is split up into 9 different panels that need to be positioned correctly.

Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div?

See attached file for layout.

P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS.

Hi!

1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers.

2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this?

Thanks

html code:

Code:

<div id="sidebar">
	<h2>South Winds Park Info</h2>
		<ul>
			<li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li>
			<li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li>
			<li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li>
			<li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li>
			<li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li>
		</ul>
		
	<h2>South Winds Resources</h2>
		<ul>
			<li><a href="calendar" title="Calendar">Calendar</a></li>
			<li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a>
				<ul>
					<li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li>
					<li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li>
					<li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li>
				</ul>
			</li>
			<li><a href="resources/special-events" title="Special Events">Special Events</a></li>
			<li><a href="resources/maintenance" title="Maintenance">Maintenance</a>
				<ul>
					<li><a href="resources/maintenance/fees" title="Fees">Fees</a></li>
					<li><a href="resources/maintenance/trash" title="Trash">Trash</a></li>
				</ul>
			</li>
			<li><a href="resources/faq" title="FAQ">FAQ</a></li>
		</ul>
</div>

CSS Code:

Code:

#sidebar ul{
	margin:10px 0 30px 0; padding: 0;
	text-align:right;
}
#sidebar li a, #nav li {
	display:block;
}
#sidebar li {
 list-style: none;
 position: relative;
}
#sidebar li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
	background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

/* Submenu */
.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}
#sidebar li ul {
 display: none;
 position: absolute;
 left: 100%;
 top: 0px;
 padding: 0; margin: 0;
 z-index:100;
}
#sidebar li:hover > ul {
 display: block;
}
#sidebar li ul li, #nav li ul li a {
 float: none;
  z-index:1000;
}
#sidebar li ul li {
 _display: inline; /* for IE6 */
}
#sidebar li ul li a {
 width: 150px;
 display: block;
	background-color:#2c9091;
	
}

This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

I have searched the internet for a solution:

using csshover.htc (doesn't work)

The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed.

The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index.

I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser.

What else could it be? Since the code should work. What else around this menu could be my problem?

Thank you so much for your help (ready to pull my hair out)

Hi all,

Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS.

Thanks for any help

Thus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books.

What would be a good "next step book" into advanced CSS coding or have I done it all?

I am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a
left column

and a right column

In the right column, I would like to split that into two equal columns, width-wise

and then underneath that I would like to have three equal columns under the top two which can span as far down as possible.

I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox.

the link to the test page is http://www.test.angrybrownman.com

and the css sheet would be www.test.angrybrownman.com/style_test.css

The css for the site (since I am not sure the link will link) is as follows:

#container
{
width:775px;
margin:0px auto;
background-color:transparent;
border:1px solid #424242;
line-height: 100%;
background-image:url(cont_bg.jpg);
background-repeat:repeat-y;

}

#top
{
padding:0px;
height:100px;
background-image:url(header.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#FFFFFF;

}

#main
{
padding:0px;
height:200px;
background-image:url(main.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#fff;

}

#mid_box
{
padding:0px;
height:200px;
background-color:transparent;
margin:0px 0px 0px 258px;
/*background-image:url(mid_spacer.jpg);
background-repeat:no-repeat;
background-position:top left;*/
}

#leftnav
{
float: left;
width: 259px;
margin-top:0px;
padding:0px;


}

#rightnav
{
float: right;
width: 150px;
margin-top:0px;
padding:0px;
background-color:transparent;
border-left:1px solid red;
/*border-right:1px solid green;*/
border-top:2px solid #003366;
}

#center
{
margin-left: 259px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 10px 0px;
background-color:#fff/*#649DD8*/;
border-top:2px solid #003366;
}

#leftbox {
width: 168px;
float: left;
background-color:transparent;

}

#rightbox {
width:167px;
float: right;
background-color:transparent;

}

#middle
{
margin-left: 169px;
margin-right:168px;
margin-top:0px;
padding:0px 0px 0px 0px;
background-color:transparent;
}
#left_top {
width: 250px;
float: left;
background-color:transparent;
}

#right_top {
width:250px;
float: right;
background-color:transparent;


}

I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much.

Thanks a million.

Jon

Firefox works, IE doesn't Help with CSS pls :-)


Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg

Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg

Here is that part of css i believe is affecting it:

Code:

div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}

div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}

div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}

div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}

div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}

div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}

==================

I have seen this code in some index files

Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use?

Code:

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->

Hi guys,
I have this:
Code:

<li style='background-image:url(../images/layout/listitem.png); background-position:0px " . $background . "px; height:23px;   background-repeat:no-repeat;'>

I want a hover effect, I found a w3c article
'http://www.w3.org/TR/css-style-attr'

But copying the syntax just does not work?

Any help?

I keep getting an error but only when I run the site in IE8:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Timestamp: Fri, 13 Mar 2009 16:59:31 UTC

Message: Syntax error
Line: 1
Char: 25
Code: 0

It keeps pointing to this line of code at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But if I don't use that the Divs and some CSS seem to break.

With or without that code it works great in FireFox. I have no idea what's going on with this.

Hello I would like to know the difference between:

*name
.name
#name

thanks

Hey everyone, the admins have implemented a new hack to the
forums, allowing you to post your code with nicely coloured text
rather than just the normal black or the old php stuff.

More details can be found he
http://forums.devshed.com/t279108/s.html

Html code:
[hig hlight=html4strict]your code here[ /highlight]

For example:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <title>Untitled Document</title>


 </head>


  


 <body>


 <h1 class="header_text">


     Nice One!


 </h1>


 <p id="main_content">


     <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur


     adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore


     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco


     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in


     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia


     deserunt mollit anim id est laborum.


 </p>


 </body>


 </html> 

The same goes for CSS highlighting:
[hig hlight=css]your code here[/high light]
css Code:
Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }

  

  


 /*Comments*/


 body


 {


     property:value;


 }


 body, div


 {


     property:value;


 } 

As you can see from the thread I linked, there are many many
other languages supported, but these three examples are more
likely to be used than any other in this particular forum...

Have fun with it, and please do use this feature, I'm sure it will
make things much easier for us to read/understand, rather than
just posting chunks of code.

Enjoy!

--Jon.

I have searched but can't find a clear answer to what I suspect this is a noob question.

please correct me if I am wrong.

element#id ({} - applies to the element with id

#id element {} - applies to all element that are in the block #id

element.class {} - applies to all element with .class

but what is .class element {} ?

tia,
Rand

I went back to the Definitive Guide and found this covered in section 2.5.2. Descendant Selectors

Ok, so I've done the w3schools.com tutorial on CSS and I still have some basic syntax questions.
In my wordpress style.css I see the following entry:

#featured-top .featuredpost img {
background: #FFFFFF;
margin: 0 0 5px 0;
padding: 4px;
border: 1px solid #DDDDDD;
}

Does this mean that these rules apply only to elements in this specific order? Like, in English, "rule applies to an img, that has a parent in the class featuredpost, that has a parent with id =
featured-top"? If so, does the featuredpost class have to be defined previously or is this considered the definition?

Second question, in the HTML I see this syntax:
<div id="wpsb" class="widget wpsb_opt_in">

I didn't think you could have spaces in a class name. Or does this mean that wpsb is in 2 classes? When I search style.css I don't see the "wbsb_opt_in" class anywhere.

Thanks

Hi all,

What does this mean?

H1 A:link { color:#fff }

- or -

.sectionhead H2 { font-size: 12px; }

I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question.

Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case.

I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions?

Thanks to anybody who takes the time to answer!

Laura S.