CSS Problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

mar0364 -> CSS Problem (6/3/2004 9:30:01)

What am I doing wrong here? I have 2 lists. The first list which is "dsiplay: inline;" is overriding the 2nd which should not. 

#navcontainer ul{
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	background-color: #036;
	color: #FFF;
	width: 100%;
	font: normal 90% arial, helvetica, sans-serif;
	text-align: center;
	}

li { 
	display: inline; 
	}

li a{
	text-decoration: none;
	background-color: #036;
	color: #FFF;
	padding: .2em 1em;
	border-right: 1px solid #fff;
	}

li a:hover{
	background-color: #369;
	color: #fff;
	}
	
ul.list {
	font-family:"Courier New",Courier;
    font-size:75%;
    }
li.list{
 	list-style-image: url(images/intranet_bullet.gif);
 	display: vertical;
 	}


Thanks!
Rich



Giomanach -> RE: CSS Problem (6/3/2004 10:20:05)

1:

quote:

font-family:"Courier New",Courier;

Remove the ""

2. Are you defining a class within the lists? I only see one list set-up with the CSS given.

Dan



mar0364 -> RE: CSS Problem (6/3/2004 11:09:04)

Just getting my feet wet with the CSS. Will you please explain your question?

I thought I was defining a class like this: 
ul.list {
	font-family:"Courier New",Courier;
    font-size:75%;
    }
li.list{
 	list-style-image: url(images/intranet_bullet.gif);
 	display: vertical;
 	}


Thanks!
Rich



Giomanach -> RE: CSS Problem (6/3/2004 11:35:17)

Rich

This:

quote:

li {
display: inline;
}

li a{
text-decoration: none;
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover{
background-color: #369;
color: #fff;
}


Defines the style for the standard ul and li tags, nothing else. So everytime you create an unordered list, they will appear as you have set them. Now if I understand correctly, you are saying you have two lists, yes?

The second one is defined by:

quote:

ul.list {
font-family:"Courier New",Courier;
font-size:75%;
}
li.list{
list-style-image: url(images/intranet_bullet.gif);
display: vertical;
}


In your html coding you will have to do:

<ul>
<li class="list">Link</li>
.....Other List Items......
</ul>

You can't define the style like you have done, plus, you never use Quotation marks in CSS, I'll re-write that part of the Stylesheet for you, then you can see the difference, and how you should do things.

quote:

.list ul{
font-family: Courier New, Courier;
font-size:75%;
}

.list ul li{
list-style-image: url(images/intranet_bullet.gif);
display: block;
}


You need to define the class on the individual List Items within the HTML doc too.

Any clearer?

Dan



c1sissy -> RE: CSS Problem (6/3/2004 11:48:13)

quote:

ORIGINAL: Giomanach

1:

quote:

font-family:"Courier New",Courier;

Remove the ""

2. Are you defining a class within the lists? I only see one list set-up with the CSS given.

Dan

Dan, any font family that has more then one word in the name requires that it is in double quotes.

http://www.w3.org/TR/REC-CSS2/fonts.html#font-family-prop

quote:

{ font-family: "new century schoolbook", serif }

quote:

Font family names containing whitespace should be quoted



c1sissy -> RE: CSS Problem (6/3/2004 11:50:45)

mar0364

You are saying that you have two lists, is one for navigation and the other one for something else? 

#navcontainer ul{
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	background-color: #036;
	color: #FFF;
	width: 100%;
	font: normal 90% arial, helvetica, sans-serif;
	text-align: center;
	}

li { 
	display: inline; 
	}

li a{
	text-decoration: none;
	background-color: #036;
	color: #FFF;
	padding: .2em 1em;
	border-right: 1px solid #fff;
	}

li a:hover{
	background-color: #369;
	color: #fff;
	}


I believe could be set like this, you would be doing contextual selectors or decendant selectors. 
#navcontainer ul{
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	background-color: #036;
	color: #FFF;
	width: 100%;
	font: normal 90% arial, helvetica, sans-serif;
	text-align: center;
	}

#navcontainer  li { 
	display: inline; 
	}

#navcontainer li a{
	text-decoration: none;
	background-color: #036;
	color: #FFF;
	padding: .2em 1em;
	border-right: 1px solid #fff;
	}

#navcontainer li a:hover{
	background-color: #369;
	color: #fff;
	}


What you are saying is that the list, etc.. inside of the id of nav container is going to take on the styles that you are giving to them. Then when you do your normal list, you should be able to set it up ok.

I'll look for some tutorials on selectors for you. I know I have some bookmarked, If i don't get it up for you today, I'll have it for you tomorrow.



mar0364 -> RE: CSS Problem (6/3/2004 12:01:13)

Still not working. This is how I call it on the page: 
<ul class="list">
<li class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li class="list">Aenean venenatis eleifend dolor.
</li>
<li class="list">Nam consequat ipsum sit amet nulla.
</li>
<li class="list">Morbi vestibulum iaculis risus.
</li>
<li class="list">Donec ac erat eu purus laoreet consectetuer.
</li>
</ul>


This is what is in the style sheet: 
.list ul{ 
	font-family: "Courier New", Courier; 
	font-size:75%; 
	} 

.list ul li{ 
	list-style-image: url(images/intranet_bullet.gif); 
	display: block; 
	}


Thanks!
Rich



Giomanach -> RE: CSS Problem (6/3/2004 12:15:26)

Remove the Quotation marks from here:

quote:

.list ul{
font-family: "Courier New", Courier;
font-size:75%;
}


Remove the class from here:

quote:

<ul class="list">


And Use Debs CSS for it

Dan



c1sissy -> RE: CSS Problem (6/3/2004 12:17:13)

here is a tutorial for you to read.
http://css.maxdesign.com.au/listutorial/index.htm
There are 4 different tutorials on here that might help you out.

try this to see if it works for you.

.list ul{
font-family: "Courier New", Courier;
font-size:75%;
}

.list ul {
display: block;
}
.list li {
list-style-image: url(images/intranet_bullet.gif);
}

also try putting this into a div.



mar0364 -> RE: CSS Problem (6/3/2004 13:56:28)

This works. 
#list ul{ 
	font-family:"Courier New",Courier;
	font-size:75%;
	color:#000000;
	} 
li.straight { 
	display: block; 
	} 
li { 
	list-style-image: url(images/intranet_bullet.gif); 
	} 

<div id="list">
<ul id="lislist">
<li class="straight">
Onsite This Week!
</li>
<li class="straight">
Onsite This Week!
</li>

</ul>
</div>


Thanks for the help!
Rich



c1sissy -> RE: CSS Problem (6/3/2004 15:52:21)

No problem Rich, I just hope that I was a help, lol.

Any problems please don't hesitate to come back in here. Also take a look at the css tips in here as well. Lots of information in there to view.

And, don't forget, when you style your fonts make sure that you put " " around ones that have more then one word. "Times New Roman".



mar0364 -> RE: CSS Problem (6/3/2004 16:33:35)

Thanks I will!

yea I put "" in because the w3c validator told me I should. They are the w3c they must be right.

LOL
Appreciate the help!



c1sissy -> RE: CSS Problem (6/3/2004 16:49:19)

quote:

ORIGINAL: mar0364

yea I put "" in because the w3c validator told me I should. They are the w3c they must be right.


You just brought up another good point, Make sure you validate. I found that the validator was a great learning tool.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625