...

View Full Version : CSS Image Float, Text Padding



enderwiggin7
04-16-2010, 07:09 PM
Hey,

I'm having issues with this page (http://www.theomgband.com/contact.html).

The header image is set via CSS to vertical align: top, but it won't go all the way to the top - see the white space above it? That shouldn't be there.

Also, The body text ought to all be padded at the same amount as the first line, but later lines won't pad, making it look like an indent.

I've learned a great deal about CSS over the past 8 months, but I'm still pretty new, so please feel free to critique and make suggestions on how to do this better. I am writing through Adobe Dreamweaver CS4.


@charset "UTF-8";
body,td,th {
color: #EAEEFF;
}
body {
background-color: #000000;
}
/* CSS Document */


body, a, a:hover, .body_text {
font-size: medium;
font-style: normal;
color: #000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
text-align: left;
vertical-align: middle;
line-height: 18px;
}
.header_img {
vertical-align: top;
}

Excavator
04-16-2010, 07:16 PM
When you enclose your header image in paragraph tags, it keeps the default paragraph margin.

Try it like this instead -

<div id="container">

<img src="images/navigation.jpg" alt="navigation" usemap="#Map" longdesc="header.jpg" width="776" border="0" height="155">
<map name="Map">
<area shape="rect" coords="149,122,232,145" href="about.html" target="_self" alt="about">
<area shape="rect" coords="243,123,327,146" href="shows.html" target="_self" alt="shows">
<area shape="rect" coords="340,123,433,147" href="photos.html" target="_self" alt="photos">
<area shape="rect" coords="439,124,527,146" href="videos.html" target="_self" alt="videos">
<area shape="rect" coords="532,123,634,147" href="contact.html" target="_self" alt="contact">
<area shape="rect" coords="323,23,460,56" href="index.html" target="_self" alt="home">
</map>
<!-- end #header -->

...

enderwiggin7
04-16-2010, 07:23 PM
Okay, great - thanks! That got me 90% of the way there. The paragraph tag was definitely messing things up.

Any paragraphs that wrap to a second line are not indenting properly still. Thoughts? I'll adjust the indent of my H1 now…

enderwiggin7
04-16-2010, 07:29 PM
nm - all fixed. Thanks!

enderwiggin7
04-16-2010, 07:39 PM
Okay, similar problem on this page (http://www.theomgband.com/about.html). The H1 and H2 have the proper padding, but the body text doesn't seem to be acting the same way as in contact.html. Is there another rule overriding it again? Is there any easy way to see what rules are cascading? That part really confuses me.

Thanks again!

Excavator
04-16-2010, 07:42 PM
It looks like you add 15px padding on top of the body here in index.css (highlighted in red)

body, a, a:hover, .body_text {
font-size: medium;
font-style: normal;
color: #000;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
text-align: left;
vertical-align: middle;
line-height: 18px;
margin: 0px;
}

and again in main.css


body, a, a:hover, .body_text {
font-size: medium;
font-style: normal;
color: #000;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
text-align: left;
vertical-align: middle;
line-height: 18px;
margin: 0px;
}

Excavator
04-16-2010, 07:48 PM
It looks like when more content is added that you're site will basically be a 2 column layout. You might benefit from adopting a proven 2 column layout now rather than waiting to fix problems later.

Have a look at this example - http://nopeople.com/CSS/simple_2-column/index.html

enderwiggin7
04-16-2010, 08:55 PM
I'm looking into the two-column idea now, but having difficulty applying it to my site, as I already have the site divided by divs.

I've removed all CSS from the html pages and formatted them more carefully in my css files. Thanks for noticing that!

The formatting still looks awful on this page (http://www.theomgband.com/about.html). All I really need is to let the body text's padding be free to work somehow - i'm not sure what's holding it back. Do you know?

Excavator
04-16-2010, 10:37 PM
On that about page,

Change <span class="body_text"> to <div class="body_text">
add to your CSS - .body_text {padding: 0 20px;}


You are using span like a div and that's not what it is for - html span tag (http://www.w3schools.com/tags/tag_span.asp?PHPSESSID=39db6f4f80d837ef0151afc0d1c36aa1)

That padding: 0 20px; will work the same as this:

.body_text {
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
}

Excavator
04-16-2010, 10:41 PM
Your list is not formed right either. You will get more control over it if you use the right format - your's is missing the ul beginning and end tags.

See lists here (http://www.w3schools.com/html/html_lists.asp).

enderwiggin7
04-26-2010, 11:09 PM
Okay - i've made a bunch of updates as per your suggestions. My h2 and lists are indenting correctly, but body text is still an issue. Link (http://theomgband.com/about.html).

I also deleted an obsolete reference to a css file intended only for the index.

What's left, holding me back from proper margins? Thanks.

Excavator
04-27-2010, 02:22 AM
Try putting that padding back in - .body_text {padding: 0 20px;}

Your text should probably be in paragraph tags too. See http://www.w3schools.com/css/css_syntax.asp

enderwiggin7
04-30-2010, 07:12 PM
Okay - i've added the paragraph tags (will upload after I get the margins fixed)

What do you mean in regards to putting padding back in? Padding is already in body_text (i'm confused…):



body_text {
font-size: medium;
font-style: normal;
color: #000;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
text-align: left;
vertical-align: middle;
line-height: 20px;
margin: 0px;
}

Excavator
05-01-2010, 05:05 PM
You need to fix your CSS, body_text should be .body_text, then you'll see the padding being applied.

enderwiggin7
05-01-2010, 05:39 PM
Oh perfect! Thank you -- I'm so glad to have that taken care of. It was so ugly without that space.

Excavator
05-01-2010, 05:52 PM
Oh perfect! Thank you -- I'm so glad to have that taken care of. It was so ugly without that space.

Since the CSS validator can't see that you lack the . on your class it can be difficult to find little mistakes like that. Using Firebug plugin for FireFox it was very easy to see that your padding and other styling was not being applied and just to a glance to see why.

Get firebug here (http://getfirebug.com/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum