CSS - Advanced Complex Floating

Does anybody know of a 3 column layout that does not use absolute positioning and uses X/HTML code like the following? I've found one where the left two columns are contained in an extra <div> (here), but I kind of need the opposite.

Code:

<div id="left">
</div>
<div id="container">
  <div id="main">
  </div>
  <div id="sidebar">
  </div>
</div>

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 want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with:

#EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno

But that styles the combinedno element...

Any ideas?






Code:

<div id="EditMedHistoryDisplay">
	<div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> 		<div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>
	
	<div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>

	<div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>


	<div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div>
	</div>
</div>

Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format:

Code:

<ul>
  <li>shirts</li>
  <li>jackets
    <ul>
      <li>casual jackets</li>
      <li>formal jackets</li>
    </ul>
  </li>
  <li>suits</li>
</ul>

And I would like to render it something like:

Code:

shirts jackets > casual jackets formal jackets suits

All the text needs to be floated left so it will wrap to the next line.

I'm able to float the top level list items correctly i.e. "shirts jackets suits" using:

Code:

<ul id="menu">
	<li>shirts</li>
	<li>jackets</li>
	<li>suits</li>
</ul>

#menu, #menu ul {
	list-style:none;
}

#menu li {
	float: left;
	width:5em;
}

the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like:

Code:

shirts        jackets        suits
                  casual jackets
                  formal jackets

Maybe this just isn't possible but if anyone could help me I'd sure appreciate it!

Thanks!

Toby

My first time posting a thread, any help is greatly appreciated.

After inserting an id to the body tag in order to achieve an active page in my image sprite navbar, all of my center aligned content becomes left aligned.

Here is the associated css for one link:
Code:

body {
	margin: 0;
	text-align: center;
	background-color: #000;
}

#wrapper {
	margin: 50px auto 0px auto;
	text-align: left;
	width: 900px;
} 

.........

#navbar {  
	padding: 0;  
	margin: 0;  
	list-style: none; 
	width: 900px;  
	height: 50px;  
	overflow: hidden;  
} 

#navbar li {  
	float: left;  
}

#navbar a { 
	display: block;
	background-image: url(images/main-navbar.gif);
	padding-top: 50px;
	text-decoration: none;
}

#home {
	width: 182px;
}
#home:hover {
	background-position: 0px -50px;
}
#home:active {
	background-position: 0px 0px;
}
#home li.home a {
	background-position: 0px -50px;
}

..........

And the html:
Code:

<body id="home">

<!-- Begin Wrapper -->
<div id="wrapper">
	
    <!-- Begin Top Navbar -->
	<div id="topnavbar">
    	<ul id="navbar">
    		<li class="home"><a id="home">Home</a></li>
    		<li><a id="events" href="events.html">Events</a></li>
    		<li><a id="menu" href="menu.html">Menu</a></li>
    		<li><a id="photos" href="photos.html">Photos</a></li>
            <li><a id="contact" href="contact.html">Contact</a></li>
   		</ul>
</div>
    <!-- End Top Navbar -->
.....................................
</div>
<!-- End Wrapper -->

</body>

Navigation bar works perfect but wrapper is not center aligned as it was previously.

This is driving me crazy and I'm running out of time! Please Help.

-Thanks

I'm a designer first and foremost who is now working on learning CSS based layouts. In the past, I've always handed my PSD file off to a coder who generates the HTML/CSS. I'd like to learn how to do that portion myself.

I know my way around the basics of CSS based layouts in setting up a standard 2 column layouts using floats and also 3 column layouts using absolute positioning for the left and right columns. The video tutorials from Chris at CSS-Tricks dot com were fantastic in getting me jump started by the way. Highly recommended.

I'm now looking at how to draw up the framework for a more complicated layout in CSS rather than reverting back to old table based HTML but I'm stumped.

Here is an image of the layout in question sans logo and content:

codedpreview dot com/?view=5361

As you can see, in the body there are three columns, one spanning 50%, two spanning 25% and each column has 1 or 2 rows of section containers. This layout would be a no brainer using nested HTML tables. I'm confused on how to set up these rows within the columns using CSS. Would you essentially do the same and nest div tags within the three columns?

Does anyone have any good tutorials or resources I could review in regards to setting up the body portion of this layout in particular?

Thanks so much for your time and help!

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!

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

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

I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document.

In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3">
For each new paragraph the class p is incremented by 1.
However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet.

Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission?
Can anybody explain to me how this affects those paragraphs?

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

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 Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance