Forum Moderators: not2easy
I started to use CSS in my site and please tell me if i have done things correctly and can i make the code more simplier.
Thanks
<div id="up">Text</div>
<div id="left"><a href="index.htm">Home</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
<a href="link.php">Text</a><br>
</div>
<div id="main">
<h1>text</h1>
text texttexttexttexttexttexttexttexttexttexttexttexttexttex texttexttexttext texttexttexttext texttexttexttext
<p><img src="BLUE_LINE.gif" width="465" height="2"></p>
<p class="thick">Text</p>
<p class="thick2">Text</p>
<a href="link.php">Text</a> ¦ <a href="link.php">Text</a> ¦ <a href="link.php">Text</a> ¦ <a href="link.php">Text</a> ¦
<a href="link.php">Text </a> ¦ <p><a href="link.php">Text</a></p>
<img src="image.jpg" width="166" height="117" alt="image">
<img src="image.jpg" width="141" height="95" alt="image">
<img src="image.jpg" width="155" height="117" alt="image">
</div>/
<div id="right"><br><a href="banner"><IMG border="0" width="120" height="600" alt="banner"></a></br></div>
Could you be more focused in your question, please. If you have a section of CSS related to your question that is not working, please post it as well.
From the appearance of your ids, it appears you may be trying to do CSS positioning of a masthead (up), nav (left) and content area (main).
From a general perspective, though, you are on the right track, using ids for major page sections and classes for presentational features.
DE
I started to use CSS in my site and please tell me if i have done things correctly and can i make the code more simplier.
How can i get rid of
the width="166" height="117" alt="image after every image.Is it possible?
How can i make my main id to appear top for the searach engines.
One more.Is it better to use this <p class="thick">Text</p>
when i only want to make text <strong>
img {
border: 0;
}
img.px1418 {
width: 140px;
height 180px;
}
img.l {
float: left;
}
img.r {
float: right;
}
XXXXXXXXXXXXXXX
<body>
<div id="main">
<img src="thumb-1.jpg" class="px1418 l" alt="thumb one" />
<img src="thumb-2.jpg" class="px1418 r" alt="thumb two" />
<img src="thumb-3.jpg" class="px1418 l" alt="thumb three "/>
<img src="thumb-4.jpg" class="px1418 r" alt="thumb four "/>
</div>
The immediate advantages are only realized if you have a number of similarly sized images....
The alt attribute should ALWAYS be included--it is a crucial accessibility component.
You CAN style a paragraph to display BOLD text, but not, STRONG... <strong> is a STRUCTURAL element, not presentaional. See the W3C specs: [w3.org ] Strong serves a greater purpose than merely bolding text. It adds implied emphasis that carries additional weight.
class="px1418 r"
OMG... I've been using CSS for a good couple of years and I had no idea you could specify multiple classes for an element. Makes perfect sense of course and so very handy. :D
Just when I thought I was starting to become a CSS guru/know-it-all alongs come papabaer with a education in the basics. Thanks PB.
Right, I'm off to optimise a few stylesheets.
Any gotchas or browser problems with this approach before I start?
One more.Is it better to use this <p class="thick">Text</p>
when i only want to make text <strong>
Papabaer, I assume that this can also be used to apply both pseudo class rules and other styles to an element also? I can't think of a real life application for that off-hand though, just a question of curiosity!
#left {
position: absolute;
z-index: 2;
}
#main {
position: absolute;
z-index: 3;
}
#right {
position: absolute;
z-index: 1;
}
If i put it like that, will the main be first, left second and right third to appear.
To get #main above #left and #right you want to do something like this..
#main {
position: absolute;
top: 0;
left: 0;
height: 20px;
}
#left {
position: absolute;
top: 20px;
left: 0px;
}
#right {
position: absolute;
top: 20px;
right: 0px;
}
How can i do that?
