problems with css 2 different text links
hi
I am having problems with css, the problem i am having is that on the bottom of my web page css "urbansamll" i want the text to be sans, small, no decoration
on the navigation buttons (urbanlarge) i want century gothic, large, bold etc the trouble is when i create links and set them to urbansmall its all ok but as soon as i create the links for the left navigation urbanlarge all the links on the page go to the large type font
how do i have 2 seperate css on the same page tried acouple of tutorials but they dont seem to be working
thanks for any help
kazimmerman posted this at 13:58 — 28th December 2008.
He has: 698 posts
Joined: Jul 2005
It's hard to see what you're doing wrong without a link or at least the CSS and HTML files you are working with, but, if I understand your problem, you would simply need to create different CSS classes for your different types of links.
a.linkStyleOne {font-family: ...
font-size: ...
...
}
a.linkStyleTwo {
font-family: ...
font-size: ...
}
And you would probably want to style the :hover element for each as well. Additionally, you can avoid classes altogether by identifying the links directly by their container (is there an official name for that kind of construct?), like this:
div1 a {font-family: ...
font-size: ...
}
div2 ul li a {
font-family: ...
font-size: ...
}
Again, if this doesn't help please post a link to the page you're having trouble with or supply the CSS and HTML behind it so we can work a little more closely with it.
Kurtis
urbanrays posted this at 14:43 — 28th December 2008.
They have: 3 posts
Joined: Dec 2008
hi
I have created 2 classes 1 called urbansmall the other urbanlarge this is the script in the head
this is urbansmall css
.urbansmall {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
text-decoration: none;
}
a.urbansmall:link {
font-family: "Century Gothic";
font-size: small;
color: #FFFFFF;
text-decoration: none;
}
a.urbansmall:visited {
font-family: "Century Gothic";
font-size: small;
color: #FFFFFF;
text-decoration: none;
}
a.urbansmall:hover {
font-family: "Century Gothic";
font-size: small;
color: #CEA974;
text-decoration: none;
}
a.urbansmall:active {
font-family: "Century Gothic";
font-size: small;
color: #FFFFFF;
text-decoration: none;
}
this is urbanlarge
.urbanlarge {
font-family: "Century Gothic";
font-size: large;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.urbanlarge:link {
font-family: "Century Gothic";
font-size: x-large;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.urbanlarge:visited {
font-family: "Century Gothic";
font-size: large;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.urbanlarge:hover {
font-family: "Century Gothic";
font-size: large;
font-weight: bold;
color: #EBC284;
text-decoration: none;
}
a.urbanlarge:active {
font-family: "Century Gothic";
font-size: large;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
before i just had 2 css with no classnames in front of them
and when i place
a.urbansmall:hover etc
a.urbanlarge:hover etc
the 2 texts have now changed but as soon as i write the link in the urbanlarge goes blue with an underline
urbanrays posted this at 15:42 — 28th December 2008.
They have: 3 posts
Joined: Dec 2008
thanks for your help kazimmerman i have finally sorted it, it was me being an arse and not paying attention, as usual
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.