SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Div Height problems

    On my site http://www.n-wired.com/

    the news boxes wont stay the same size all around.

    Heres the code to the news divs:
    Code:
    <div id="newsdiv" width="395">
    <div id="newsbg">
    <b><span class="newstitle">
    <a href="{LINK}" id="newstitle">&nbsp;&nbsp;{TITLE}</a></span></b>
    <div class="latestbox">
    {AUTHORNAME} &nbsp; {ARTICLEDATE}<br /><br />
    <span class="articlebody">{DESCRIPTION}</span>
    <b><a id="newsmore" href="{LINK}">More &raquo;</a></b>
    </div>
    </div>
    </div>
    <br />
    <br />
    Heres the CSS:
    Code:
    #newsbg{
    height: 15px;
    background-image:url(/images/indexv2_newsbg.gif);
    font-size:9px;
    color:#23467A;
    width: 395px;
    
    }
    
    #newsdiv{
    width: 395px;
    height: 76px;
    }
    Thanks any help appreciated.

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude you're repeating id's.
    They are supposed to be unique identifiers.
    Use classes if there are to be multiples.
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  3. #3
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed it to classes they still arent the size i want them to

  4. #4
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In what way are they different?

    Is it just that margin difference?
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  5. #5
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They arent all 76px in height theyre all different heights

  6. #6
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Height is supposed to be fluid to expand to content.

    You can fix the height but what do you want to happen when the content is larger than the area you've allowed for. E.G. set font-size to largest.

    I'd advise allowing the div's to set their own height.
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  7. #7
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this.

    It's the same design - ish, but allows variable font-sizes and is fluid in height.

    <style>
    body {background:#E7E7E7; font:75% verdana,sans-serif}
    div,h2,p {margin:0; padding:0; border:0}
    a {font-weight:bold; color:#036; text-decoration:none}
    div.newsbox {width:395px; border-bottom:2px solid #bbb; margin-bottom:10px}
    div.newsbox h2 {padding:2px 5px; font-size:85%; width:395px; background:url(http://www.n-wired.com/images/indexv2_newsbg.gif) #bbb top no-repeat}
    div.newsbox h2 a {}
    div.newsbox p {padding:2px 5px 5px 5px; font-size:85%; width:395px; background:#ddd; border-right:2px solid #bbb; border-left:2px solid #bbb}
    div.newsbox p.author {padding:2px 5px}
    div.newsbox p.author span {color:#036}
    div.newsbox p a {}
    </style>

    <div class="newsbox">
    <h2><a href="#">Title goes in here and in more link</a></h2>
    <p class="author">Authors name <span>Item date</span></p>
    <p>
    blurb hkjsdfhk kjshdksjdhfksjdhf sjdh fsdkjh sjhsd hs djhsdjh ksjdh ksjdhfs jh
    <a href="#" title="Title goes in here and in more link">More...</a>
    </p>
    </div>

    hope it helps
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>


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
  •