Welcome to WebmasterWorld Guest from 54.145.176.120

Forum Moderators: not2easy

Message Too Old, No Replies

Need some help

   
11:02 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



Hi,

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>

11:13 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



If you are making a sandwich, we got the peanut butter, but not the jelly. ;)

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

11:19 pm on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

From what you've posted, it's not really easy to say for sure. That's all developing for the Web is really, trying to make your code simple and modular. Will be glad to help with any specific questions!
5:53 am on Apr 30, 2003 (gmt 0)

10+ Year Member



Hi,

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>

10:35 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I understand what you are asking...
Yes, you can use CSS to control image styles:

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.

10:47 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

11:16 am on Apr 30, 2003 (gmt 0)

10+ Year Member



One more.Is it better to use this <p class="thick">Text</p>
when i only want to make text <strong>

Only if you require a paragraph of bold text, otherwise its against the nature of the p tag. Use a strong (or b, if you're that way inclined) tag.
11:20 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



That is a completely new rule for me too - and one that has a whole plethora of advatages.

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!

11:46 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To bring this to the attention of other forum members who may have been likewise in the dark, and to avoid completely hijacking paff3's thread, I have created a new thread [webmasterworld.com] about it.
11:51 am on Apr 30, 2003 (gmt 0)

10+ Year Member



I think i have found the way to get the main content to the top.
Tell me if its correct

#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.

12:08 pm on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you do that then #main will be in the same place as #left and #right and appear on top of them.

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;
}
7:13 pm on May 6, 2003 (gmt 0)

10+ Year Member



I have one question.
Lets say that the text in the main column is very large.Then only this column would stretch.But i would like that all 3 columns stretch, so they are in equal size

How can i do that?

10:35 pm on May 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Its difficult - but see the100% Divs tutorial revisited [webmasterworld.com] for a partial solution.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month