Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts

    CSS Image Float, Text Padding

    Hey,

    I'm having issues with this page.

    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.
    Code:
    @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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    When you enclose your header image in paragraph tags, it keeps the default paragraph margin.

    Try it like this instead -
    Code:
    <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 -->
    
    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    enderwiggin7 (04-16-2010)

  • #3
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    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…

  • #4
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    nm - all fixed. Thanks!

  • #5
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Okay, similar problem on this page. 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!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It looks like you add 15px padding on top of the body here in index.css (highlighted in red)
    Code:
    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
    Code:
    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;
    }
    Last edited by Excavator; 04-16-2010 at 07:45 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    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. 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?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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

    That padding: 0 20px; will work the same as this:
    Code:
    .body_text {
    padding-top: 0;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 20px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    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.

    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.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Last edited by Excavator; 04-27-2010 at 02:24 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    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…):


    Code:
    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;
    }

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You need to fix your CSS, body_text should be .body_text, then you'll see the padding being applied.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    enderwiggin7 (05-01-2010)

  • #15
    Regular Coder enderwiggin7's Avatar
    Join Date
    Jun 2009
    Posts
    131
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Oh perfect! Thank you -- I'm so glad to have that taken care of. It was so ugly without that space.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •