PDA

View Full Version : Working with CSS styles


gigiloumill
01-28-2010, 11:41 AM
Guys,

When creating a CSS style I've noticed that some of the entries begin with a period (.), some begin with a pound (#) symbol, and some do not begin with one at all.

can someone please explain the methodology?

Thanks ...

DWcourse
01-28-2010, 12:56 PM
class rules begin with a period and can be applied to any html object:
<p class="style1">
<h1 class="style1"> (The style rule .style1 will apply to both the p and the h3 tags. Notice you don't use the period when applying the style rule)

id rules begin with a # and apply to a specific, named html object:
<p id="intro"> (The #intro style will apply only to this item. You shouldn't apply the same id to more than one object per page)

tag rules apply to all instances of the html object in your page. So a rule with the name "p" would apply to all paragraphs and the style rule "h3" would apply to all third level headings.

gigiloumill
01-28-2010, 01:12 PM
Thank you very much...

gentleone
01-28-2010, 02:15 PM
An ID name (#) is unique and can therefor only used once on a page. A class name (.) can be used more then one time on a page.

gigiloumill
01-28-2010, 02:19 PM
So, I can name all the classes the same?

domedia
01-28-2010, 02:27 PM
So, I can name all the classes the same?
If that's what you want, yes 8)

gigiloumill
01-28-2010, 02:36 PM
Thanks D. One more question: I'm trying to include a CSS lay out on a pagination script. I have an image floating to the left and the text to the right. My problem is I can't seem to get the text to display on the top-right of the image. Right now is displaying to the right of the image with the correct spacing but the text starts at the center and then it wraps around the image. I would like for the text to align on the to-right. Do you have any suggestions?

domedia
01-28-2010, 03:12 PM
yes, always post a link to the page in question :)

Without it your question becomes more of a theoretical one, and the answer is limited to advising you to look closer at alignment or margins that you've overlooked.

gentleone
01-28-2010, 05:43 PM
I would like for the text to align on the to-right. Do you have any suggestions?
You can do it like this!

html:
<p><img src="image.jpg" class="wrap" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

css:
.wrap {float:left;margin-right:10px}

You don't need to float your text to the right... this goes automaticaly.

gentleone
01-28-2010, 05:53 PM
Oh... I was to quick with my answer what even wasn't the answer to your question :)

I think your answer lies in the CSS property, vertical-align. Here is a little tutorial what you all can do with it.
http://www.maxdesign.com.au/2008/10/05/vertical-align/

gigiloumill
01-29-2010, 01:08 AM
That was a good tut however, I can't find for the life of me how to do this...lol

edbr
01-29-2010, 01:28 AM
im lost, what do you want to do?

gigiloumill
01-29-2010, 01:47 AM
I have a pagination script displaying info from a db. Each field has an image and text displaying. I would like for the text to display to the right of the image. Right now is doing that, however, I can not get text to display on the top-right of the image. The text displays on the center-right of the image and I have to be careful with how many words to display because I don't want the text to wrap around. Any suggestions? Thanks.

edbr
01-29-2010, 04:45 AM
ah ok I usually return data in a containing div then
if you float your image left, something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.container{ position:relative; width:500px; border:1px solid #ccc;}
.image{ float:left; position:relative; width: 60px; height: 60px; border:1px solid #ccc;}

-->
</style></head>

<body >

<div class="container">
<div class="image"></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<!-- end #container --></div>
</body>
</html>

gigiloumill
01-29-2010, 04:53 PM
Thanks E. I have to fields being parsed right now. One is for the image and the other one for text. With the pagination script I'm echoing both, I included the CSS to float image and align text and I still can't get text to align on the top-right of the image...This is frustrating...lol

edbr
01-30-2010, 12:07 AM
then it has to be your css if you echo into classes like i gave, it should display correctly