homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problem with CSS specificity
R8kit



 
Msg#: 4369437 posted 6:42 am on Oct 1, 2011 (gmt 0)

Hey everyone,

I am new to CSS and I am having trouble with CSS specificity.

I used the code:
img {
display: block;
margin-left: auto;
margin-right: auto;
}

To center all my images on my website, but I forgot that the
logo should be margin-left: 0px;

I tried to give the logo a div id and make it go to the left
but it is not working.

Can anyone help me put my logo on the left of my pages without
having to edit my entire website?

Thanks in advance.

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4369437 posted 9:05 am on Oct 1, 2011 (gmt 0)

Hi there R8kit,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.pubcon.com/exhibitor/gfx/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>two centered one left</title>

<style type="text/css">
img {
display:block;
margin:auto;
}
#logo {
margin-left:0;
}
</style>

</head>
<body>

<div>
<img src="website_magazine_logo.jpg" alt="">
<img src="readwriteweb_logo.jpg" alt="">
<img id="logo" src="raven_seo_logo.jpg" alt="">
</div>

</body>
</html>

birdbrain

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4369437 posted 9:34 pm on Oct 1, 2011 (gmt 0)

I've never understood this preference for id over class when the id isn't actually going to be used for something (like anchoring, or being called by a script). Isn't that that whole point of classes? Sure, it saves three bytes in the HTML, but let's not overdo it.

td {default behavior that you want your td to follow unless it gets instructions otherwise}
td.foo {instructions otherwise}
td.bar {other instructions still otherwise}
etc.

And, at that, you've only scratched the surface. If you have

table.foo td {stuff}
and
td.bar {other stuff, including some that's mutually exclusive with the previous stuff}

and your code has

<table class = "foo">
<tr>
<td class = "bar">

the td will generally follow the rules for "table.foo td" unless you explicitly say

table.foo td.bar {take that, cascading styles!}

R8kit



 
Msg#: 4369437 posted 10:58 pm on Oct 1, 2011 (gmt 0)

Thanks for the warm welcome and for the replies. The problem has been resolved. Now I understand CSS specificity so much better.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved