SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Hajduk's Avatar
    Join Date
    Nov 2004
    Location
    Behind you
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical align text

    I am messing around with my header at www.rodoslovlje.com/beliorao

    It seems I cant get the text to properly be aligned vertically. I tried using margins but it pushes everything down. The document almost completely validates but I think some other CSS parts are messing things up. Any tips on how to do this in this layout are more then welcome.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    First error is that you have defined a class of .texter but you have used an id in the html

    You should use semantic markup for your header which would really be an h1. You have a div with an id of hdr and then some break tags and then a nested div if .texter and then more break tags and then p tags.

    This what you have:
    Code:
    <div id="hdr"><img src="http://www.rodoslovlje.com/beliorao/images/shd_headcoa1.gif" alt="White Eagle"  /> 		       <div id="texter"><p>	  <br />Српско хералдичко друштво "Бели Орао"<br /></p></div>         </div>
    and it could be simplified to this.
    Code:
     <h1 id="hdr"><img src="http://www.rodoslovlje.com/beliorao/...d_headcoa1.gif" alt="White Eagle" />Српско хералдичко друштво "Бели Орао"</h1>
    CSSS:
    Code:
    #hdr {
     height:100px;
     background-image: url("http://www.rodoslovlje.com/beliorao/images/bckH1.gif");
     color: #333333;
     margin: 0;
     padding: 0;
     font-size:25px;
    line-height:100px;
    }
    The line-height:100px will ensure the text is central withn the 100px high div ( as long as you don't want the text to wrap etc)

    Hope that helps

  3. #3
    SitePoint Addict Hajduk's Avatar
    Join Date
    Nov 2004
    Location
    Behind you
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THnx Paul that helps. I didnt know that about the line-height. See those are nice interesting things, I learned something new. Thnx.

  4. #4
    SitePoint Addict Hajduk's Avatar
    Join Date
    Nov 2004
    Location
    Behind you
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have stumbled into another problem. When using FF the white background in the bodyblock is missing most likely due to the blocks I added. In IE I get a nice white space that pushes the content down. Are these one and the same or am I looking at something else?

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add overflow: hidden to #bodyblock which forces FF (and other non-IE browsers) to expand to contain the floats.

  6. #6
    SitePoint Addict Hajduk's Avatar
    Join Date
    Nov 2004
    Location
    Behind you
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx, so if the overflow is hidden it forces the FF and other browsers to expand. But what is causing the big white space in the content part? I am trying to go deeper into understanding CSS, I have 1 error left in the html but I fail to see what is causing that big whitespace. Is it the combining of different CSS elements or HTML that is causing this and how can I prevent this in the future when I design?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It's the 3 pixel jog in ie that is causing the content to drop because it won't fit in the allocated space because of the 3 pixels that ie adds to it. See the faq on floats for a long explanation on the 3 pixel jogs and on why you need to clear floats.

    The simple answer to the 3 pisel jog in a two column fixed width layout is just to float both columns and then there is no bug to get in the way.

    Code:
    #cont {
     width:495px;
     background:#ffffff;
     color: #333333;
     border:solid #000000; 
     border-width:0 0 0 1px;
     text-align:left;
     padding: 4px;
    float:right;
     }
    .right_left {
     float: left;
     width: 47%;
     padding: 2px;
     background: #ffffff url(http://www.clansunited.net/images/corner.gif) no-repeat bottom right;
     color: #000000;
    clear:left
    }
    (You also needed a clear:left on the above element also for another problem you had.)

    Thnx, so if the overflow is hidden it forces the FF and other browsers to expand
    When overflow hidden (or auto) is used it makes elements take account non-visible content (including floats) and stretches around them. However it's not widely supported so you may need other methods as well such as forcing "layout" in ie. In simple situations it works well though. read the faq for a complete run-down on this and other float behaviours and bugs.


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
  •