|
| |
|
|
mar0364
Posts: 3159
Joined: 4/5/2002
From: Florida, US
Status: offline
 |
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
Posts: 6115
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 3159
Joined: 4/5/2002
From: Florida, US
Status: offline
|
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
Posts: 6115
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
< Message edited by c1sissy -- 6/3/2004 11:54:43 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
mar0364
Posts: 3159
Joined: 4/5/2002
From: Florida, US
Status: offline
|
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
Posts: 6115
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
< Message edited by c1sissy -- 6/3/2004 12:19:28 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
mar0364
Posts: 3159
Joined: 4/5/2002
From: Florida, US
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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".
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
mar0364
Posts: 3159
Joined: 4/5/2002
From: Florida, US
Status: offline
|
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
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
