Welcome to WebmasterWorld Guest from 54.162.21.214

Forum Moderators: not2easy

Message Too Old, No Replies

Need some help

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

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:41
votes: 0


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)

New User

10+ Year Member

joined:Jan 27, 2003
posts:28
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:41
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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)

Full Member

10+ Year Member

joined:Dec 13, 2002
posts:307
votes: 0


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)

Senior Member

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

joined:Feb 25, 2002
posts:3185
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:41
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:41
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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