homepage Welcome to WebmasterWorld Guest from 54.226.43.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Need some help
paff3




msg:1218770
 11:02 pm on Apr 29, 2003 (gmt 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>

 

DCElliott




msg:1218771
 11:13 pm on Apr 29, 2003 (gmt 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

madcat




msg:1218772
 11:19 pm on Apr 29, 2003 (gmt 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!

paff3




msg:1218773
 5:53 am on Apr 30, 2003 (gmt 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>

papabaer




msg:1218774
 10:35 am on Apr 30, 2003 (gmt 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.

grahamstewart




msg:1218775
 10:47 am on Apr 30, 2003 (gmt 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?

WibbleWobble




msg:1218776
 11:16 am on Apr 30, 2003 (gmt 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.

BlobFisk




msg:1218777
 11:20 am on Apr 30, 2003 (gmt 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!

grahamstewart




msg:1218778
 11:46 am on Apr 30, 2003 (gmt 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.

paff3




msg:1218779
 11:51 am on Apr 30, 2003 (gmt 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.

grahamstewart




msg:1218780
 12:08 pm on Apr 30, 2003 (gmt 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;
}

paff3




msg:1218781
 7:13 pm on May 6, 2003 (gmt 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?

grahamstewart




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

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

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