PDA

View Full Version : Class issue


Blue_Vision
05-17-2010, 04:02 AM
.featured-ad {
background-color: #fff7fc;
width: 580px;
height: auto;
border: thin solid #b2b2b2;
float: left;
clear: left;
}

.featured-ad p {
text-align: center;
color: #2b2b2b;
font-size: 0.80em;
line-height: 1.4em;
margin-bottom: 10px;
margin-top: 30px;
}

.featured-ad img {
width: 125px;
height: 125px;
margin: 10px;
float: left;
border: thin solid #b2b2b2;
}


In html I reference this as <div class="featured-ad"> followed by the image, <p> text with </p>, and a </div>.

I used class because there is going to be several of these on one page. ATM there is just the one.

Problem is the image goes to the left inside my rectangle as predicted but the text to the right of it is not centered as I've instructed. It's left alligned. I can use a float right tag on the p property and it will go off to the right. So there is some control there but it won't center align.

If I switch the css to be a #featured-ad and change the div's to have id's then it works as predicted no problem. Is there an obvious reason why it won't do it as a class? Am I mis-understanding "classes" cause I just thought you were supposed to use them when you have multiple elements on the same page. Otherwise use a div id. Wrong?

Thanks!

DWcourse
05-17-2010, 02:59 PM
With the styles you posted

<div class="featured-ad">
<img src="" alt="" name="ad" width="32" height="32" id="ad" /><p>content</p>
</div>

Works for me.

Maybe you have a conflicting style. An id has more specificity than a class so it might be overwriting the conflicting style. Can you post your page somewhere?

Blue_Vision
05-18-2010, 07:37 PM
Ok, you were right and it was conflicting with a div id.

So if I have:

#pagetext p { text-align: justify; }

and

.ad p { text-align: center; }


then i can't call on the class inside that div to change it up?

Like:

<div id="pagetext">

<p>
bla bla bla
</p>


<div class="ad">

<p>
advertisement text bla bla
</p>

</div>


<p>
bla bla bla again
</p>

</div>

I actually have to close the "pagetext" div before calling on a class if they have conflicting properties?

So would the proper way to handle a page like this is to tern the "pagetext" div id into a class so that I can close the div and then reopen it again like this?

<div class="pagetext">

<p>
bla bla bla
</p>

</div>


<div class="ad">

<p>
advertisement text bla bla
</p>

</div>


<div class="pagetext">

<p>
bla bla bla again
</p>

</div>

????

Also, if you wouldn't mind me asking.... In your html clipping you put:

name="ad" and id="ad"

When I have nothing named "ad". What are you referencing and why are you referencing it like that? Instead of like this:

<div class="featured-ad">


<img src="images/ad.jpg" alt "" />

<p>

</p>

</div><!--featured-ad-->

I'm just making sure that the way I'm doing this is valid. I've never seen "name" and "id" in there like that so I'm curious.

Thanks guys! This forum always hosts the best responses!

DWcourse
05-18-2010, 08:36 PM
Try #pagetext .ad p

Blue_Vision
05-19-2010, 12:38 AM
right on, that did it.

Although I'm not too sure if this will make my css too bulky or not as I have:

#pagetext {properties}

#pagetext p {properties}

#pagetext .ad {properties}

#pagetext .ad p {properties}

#pagetext .ad img {properties}

#pagetext .ad2 {properties}

#pagetext .ad2 p {properties}

#pagetext .ad2 img {properties}


Would that be viewed as sloppy and overkill or is that cool? I've got 2 different background colors for the ad boxes which is why I have an ad and ad2. Maybe I should just leave the background color blank and call a style in the html individually so that I kill off 1 the need for ad2?

Anybody could answer this for me. I'm just trying to find out the methods viewed as "neat and tidy" but yet get what I need achieved.

DWcourse
05-19-2010, 02:45 AM
without actually seeing the actual properties you are applying it's hard to say if it's efficient. But, generally create as many styles as you need to do the job.