SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Newfoundland, Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tagline background/border issue

    Hey guys

    So I'm creating my first real website for someone else, following along with the Build Your Own Website The Right Way book, but modifying the code to suit my needs. Figured I'd learn better that way than following along with Ian's code word-for-word.

    Anyway, my tagline is doing something weird... the border and background are stretched vertically further than the book's, but I can't figure out why. I even tried removing all relevant code and entering it straight from the book, but it's not working.

    I've attached a snapshot of the issue, and here's an except from my HTML/CSS:

    <div id="header">
    <div id="sitebranding">
    <h1>CASARA YDF</h1>
    </div> <!-- end of sitebranding div -->
    <div id="tagline">
    <h3>Civil Air Search And Rescue Association</h3>
    </div> <!-- end of tagline div -->
    </div> <!-- end of header div -->

    #tagline {
    font-style: italic;
    font-family: Georgia, Times, serif;
    background-color: #bed8f3;
    border-top: 3px solid #7da5d8;
    border-bottom: 3px solid #7da5d8;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    }

    Any info would be helpful. Thank, guys!
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Have you removed the margins associated with elements? <h3> for example, has default margins set on it.

    Try adding h3{margin:0;}

    The attachment is still pending approval so this is acomplete shot in the dark.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Newfoundland, Canada
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, exactly what I was looking for.

    I had considered the default margins, so tried adding a <p> element instead of <h3>, but that didn't change anything. I didn't think to remove the margin.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    <p> elements also come with default margins .

    It's best to use a reset of some kind to make hte playing field even.

    *{margin:0;padding:0;}

    You're welcome!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Why is that a H3 (being immediately after a H1 means it should be a H2, NOT that it appears to be a HEADING/start of a new content section?!?)

    I'd have to see more of the site, but from your little picture you've got two or THREE times more markup than needed there... and the painfully bloated CSS isn't helping matters either.

    I mean really, for what I'm seeing you shouldn't need more markup than:

    Code:
    <h1>
    	CASARA YDF
    	<small><span> - </span>Civil Air Search And Rescue Association</small>
    </h1>
    No classes or DIV needed with H1 being a perfectly good block level element that should be a UNIQUE on your page, no separate heading since it appears to all be ONE heading, small being for de-emphasis and the span being for CSS off users.

    Just like the CSS...

    Code:
    h1 {
    	font:bold 140%/150% georgia,times,serif;
    	color:#FFF:
    	background:#008;
    }
    
    h1 span {
    	display:none; /* hyphen is in there for non screen.css users */
    }
    
    h1 small {
    	display:block;
    	padding:2em 0 2em 8px;
    	font:italic 140%/120% georgia,times,serif;
    	color:#000;
    	background:#BDF;
    	border:solid #7AD;
    	border-width:3px 0;
    }
    Guessing a bit on the latter because again, snippets are cute, but we REALLY can't weigh in with anything more than that without a better idea of the rest of your code -- but from what you posted you are WAY over-thinking the number of DIV and elements needed for your layout. There are perfectly good semantic tags, use them properly BEFORE diving for extra wrappers.

    -- edit -- also, your placing the comments AFTER the tag close could result in them ending up between sibling elements, which is why I suggest putting them BEFORE the closing tag so as to avoid SEVERAL IE and FF rendering bugs, including 'disappearing content' and 'double render'. Admittedly, those usually only crop up once floats are involved, but it's worth the simple change to commenting style to avoid them in the first place. Likewise </div> is the end of a div? REALLY? Never would have guessed. Avoid stating the obvious in your comments.


Tags for this Thread

Bookmarks

Posting Permissions

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