Topic: Suggestions to clean up this CSS (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=31190" title="Pages that link to Topic: Suggestions to clean up this CSS (Page 1 of 1)" rel="nofollow" >Topic: Suggestions to clean up this CSS <span class="small">(Page 1 of 1)</span>\

 
Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

posted posted 07-30-2009 23:35

I am reworking a site over the past couple weeks, and wanted to get some input on cleaning up the code. It's really a mess right now but for some reason my paragraphs on the 1st column aren't reflecting margins or padding correctly. Plus I know I've butchered it waaay to much.

http://beta.upsidedown21.org/index.php

Then I did a 2 column version for posts.

http://beta.upsidedown21.org/index2.php

Thanks...

DavidJCobb
Nervous Wreck (II) Inmate

From: United States
Insane since: Mar 2009

posted posted 07-31-2009 18:11

For index.php, you have side margins on #columnA>div.box. The margin-left on that element is increasing the margin on the side, so if you want that margin to match up with that of #columnC, then remove margin-left from #columnA>div.box. The margin-right on #columnA>div.box, however, is what's keeping #columnB in the right spot, so THAT margin-right should actually be added to #columnA and removed from #columnA>div.box, in my opinion.

I base this advice on the fact that you opted NOT to put side margins on #columnC>div.box.

EDIT: Some additional suggestions after going through your CSS in Firebug:

  • You could try using a grouped selector on all the columns in order to avoid repeating some of your style rules. Example: #threecolumn #columnA,#threecolumn #columnB,#threecolumn #columnC{float:left;color:#333;padding:0px;display:inline;}
  • Assuming that you don't need to support pre-IE7 browsers, you can use child selectors in place of some descendant selectors. E.x. "#navigation>ul" rather than "#navigation ul". Child selectors are more efficient than descendant selectors, as browsers don't need to check as many elements to apply them.



----------------------


(Edited by DavidJCobb on 07-31-2009 18:17)

(Edited by DavidJCobb on 07-31-2009 18:18)

Radical Rob
Paranoid (IV) Inmate

From: Lost Angeles Kalifornia, via Hawaii....
Insane since: Jun 2001

posted posted 08-03-2009 09:29

Ok this is another problem I'm having and it's not working right. I'm going crazy trying to figure this one out...

I need to have an image either float to the left, right, or center. Here is the CSS to make it float left.

.leftimg {
float: left;
margin-right: 15px;
border:none;
margin-left: 30px;
}

.caption {
color: #4E99CA;
font-size: 11px;
text-align: center;
line-height: 15px;
}

Then the html would look like this:

<div class="leftimg"><img src="image.jpg" width="250" /><div class="caption">This is a caption</div></div>

But for some reason the text isn't wrapping correctly. It makes the picture box extend way past the width of the image creating ugly white space.

Google is not helping in any way with this either.... grrr....

smathis
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Aug 2009

posted posted 08-31-2009 23:32

You need to set a width for your caption field as it will not inherit the 250px value specified in the image.

Taeo920
Obsessive-Compulsive (I) Inmate

From:
Insane since: Nov 2009

posted posted 11-29-2009 03:51

Actually, the floated div itself needs to have a width specified. Any time you float an element you need to specify a width for it.

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 11-30-2009 18:32
quote:

Taeo920 said

Any time you float an element you need to specify a width for it.



no you don't

As for the caption stuff, see if this stuff helps. This guy has it going on ;-)

Later,

C:\



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu