CSS - List Help + General Site Critique.

I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic:



I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server):

http://www.guymerritt.net/xdog2/

Any help - as always - would be greatly appreciated.

I am having what I can only imagine is a very common problem.
Firefox is working fine and IE is not.

I want the logo then the name image next to it in the header.

I am positioning with css as below:

Code:

<div id="header">
     <div class="logoholder">
         <img src="images/logo70.jpg"/>
         <img class="djembefola" src="images/djembefolaheader.jpg">
     </div>
</div>

and the css:
Code:

.logoholder {
    position:absolute;
    left : 20px;
    top : 0px;
    width:500px;
    height:70px;
}
#header img {
    float: left;
}
#header img.djembefola {
    float: none;
}

I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left.

Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary?

Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net

Thanks for your time and consideration!

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.

Hello,

I tried to make a page with a header, left column and right column, as shown in the screenshot. http://img292.imageshack.us/my.php?image=screengr2.jpg
You can see the code at the bottom. I used the faux-column technique to make the column colors extend to the bottom of the page.

Is this a good way to do it? and does this method give problems with different resolutions on different computer-monitors.

I used floats in this example to position the divs, is this a common solution or is absolute or relative positioning better?

My goal is to teach myself a way to easily and effectively divide a webpage, so that I have a basic method, also in larger and more complex websites.

I like to hear any tips/techniques to improve this.

I used the folowing code:
Code:

<html>
<body>
<div class="wrapper">
	<div class="header">
    		<br /><br /><br /><br /><br />
    	</div>
   	<div class="left">
		<img src="homer.jpg" />
	</div>
   	<div class="right">
    		<div class="nav">
			<a href="home.htm">home</a> <!-- menubar -->
		</div>
    		<div class="contents">
			This is the contents of the page
		</div>
     </div>
</div>
</body>
</html>

and the css code
Code:

body{
	background: url(fauxcolumn.jpg) 15% 0;
	margin: 0;
	padding: 0;
}

.header{
	background-color: green;
	float: left;
	width: 100%;
	margin: 0%;
	padding: 0%;
}

.left{
	background-color: purple;
	width: 15%;
	float: left;
	margin: 0%;
	padding: 0%;
	height: 100%;
}

.nav{
	background-color: blue;
	width: 85%;
	float: left;
	margin: 0%;
	padding: 0%;
}

.contents{
	float: left;
	width: 85%;
	margin: 0%;
	padding: 0%;
	background-color: red;
}

Thanks in advance.

I tweaked a style sheet (changed some margins, colors, etc.) and uploaded it to my server, but sometimes they just don't show up. I've deleted the old style sheet first, cleared my cache and tried different browsers - even restarted my computer. When I download the style sheet and look at it, it's the correct one but it just won't display my changes. It's almost like the server is referring to my old one.

Anyone else have this problem or know how I can fix it? I'm going a little crazy...

Seems like most people use unordered lists for menus.
Code:

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

Others use definition lists. They claim it is less buggy with IE.
Code:

<dl>
<dt>menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
</dl>

Any thoughts on whether unordered lists or definition lists are best?

Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag?
Code:

<ul>
<li><span>menu1</span></li>
<li><span>menu2</span></li>
<li><span>menu3</span></li>
</ul>

Thanks

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,
Code:

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>

</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>

<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,
Code:

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}

/* All Levels */
#nav li { text-align:left; }


#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}

/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }

#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}


#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}

/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }

/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }

/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }


#nav li ul { display:none; }
#nav li:hover ul{display: block; }


#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

Code:

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}

ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>



.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}


.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here


Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers.

You can view the actual htm at http://www.nald.ca/test/fora/test.htm
Main CSS: http://www.nald.ca/test/fora/test.css
CSS for NN4: http://www.nald.ca/test/fora/test.css

If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks

Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<style type="text/css">
ul.nav
	{margin:0;
	padding:0;
	display:block;
	width:100px;
	list-style-type:none;}
ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover
	{font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#CCCCCC;
	color:#666666;
	line-height:30px;
	width:100px;
	list-style-type:none;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
	padding-left:10px;}
	
ul.nav li.home_over, ul.nav li.home a:hover
	{color:#ffffff;
	background-color:#018E9F;}
ul.nav li.work_over, ul.nav li.work a:hover
	{color:#ffffff;
	background-color:#6F0141;}
ul.nav li.for_clients_over, ul.nav li.for_clients a:hover
	{color:#ffffff;
	background-color:#FF850D;}
ul.nav li.contact_over, ul.nav li.contact a:hover
	{color:#ffffff;
	background-color:#CCE82E;}
	
ul.subnav_home
	{position:absolute;
	top:8px;
	left:118px;
	margin:0;
	padding:0;
	display:block;
	width:100px;
	list-style-type:none;
	background-color:#FFFFFF;}
ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover
	{font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#fffffff;
	color:#aaaaaa;
	line-height:30px;
	width:100px;
	list-style-type:none;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
	padding-left:0px;}
ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over
	{color:#018e9f;}

</style>


<body>

<ul class="nav">
	<li class="home_over">home</a></li>
		<ul class="subnav_home">
		<li class="subnav_home_over">philosophy</li>
		<li><a href="process.htm">process</a></li>
		<li><a href="resume.htm">resume</a></li>
		</ul>
	<li class="work"><a href="index.htm">work</a></li>
	<li class="for_clients"><a href="index.htm">for_clients</a></li>
	<li class="contact"><a href="index.htm">contact</a></li>
</ul>


</body>
</html>

Please help me style lists. This is the on area I am having a really hard time understanding.

I have a menu list in my side bar and a standard list in the content section. I keep having problems because the styles seem to be conflicting with each other.

My site is

http://www.myslavelake.com/dir/budget-2009/

Code for the menu

Code:

<ul id="navlist">
<li><a href="#">Arctic Ice Centre </a></li>
<li><a href="#">Water Conservation </a></li>
<li><a href="#">Capital Priorities</a></li>
</ul>

Code:

#sidebar ol, ul, li {
	font-size: 1.0em;
	font-weight: 600;
	text-decoration: none;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	}

#navlist ol, ul {
	padding: 5px 0px 0px 0px;
}

The main list code

Code:

#content ul {
	margin-left: 0;
	list-style-type: square;
	/*text-indent: -1em;*/
	}
#content ul li {
	font-weight: normal;
	list-style-type: square;
	font-weight: normal;
	/*text-indent: -1em;*/
	}

I am happy with the menu but would like normal list for the content section. Right know bullets are not showing up in the content section.

Hi,

I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout?