SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    narrowing the height gap between title and writer

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layOut015</title>
    <style type="text/css">
    *{margin:0;padding:0;color:gray}
    
    
    .overflowHidden{overflow:hidden}
    
    .bdr2{border:2px}
    .b-r15{border-radius:15px}
    
    .solid{border-style:solid}
    .bdColorGray{border-color:gray}
    .bgColorSilver{background:silver}
    .bgColorLavender{background:lavender}
    
    .colorWhite{color:white}
    .floatL{float:left}
    .floatR{float:right}
    
    .alignLeft{text-align:left}
    .alignCenter{text-align:center}
    
    .pdg5{padding:5px}
    
    .fEm05{font-size:0.5em}
    .fEm2{font-size:2em}
    
    .fEm3{font-size:3em}
    .fEm4{font-size:4em}
    .fEm5{font-size:5em}
    
    .inlineBlock{display:inline-block}
    .clearBoth {clear:both}
    
    .hite5{height:5px}
    .hite10{height:10px}
    
    
    </style>
    </head>
    <body class="pdg5">
    
    
    <div>
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">guest</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">subDomain</div>
    </div>
    
    
    <div class="clearBoth hite5"></div>
    
    <div class="alignCenter">
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">logIn</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">dot.kr</div>
      <div class="fEm5  bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">search</div>
    </div>
    
    <div class="clearBoth hite5"></div>
    
    
    <div class="fEm3 bdr2 b-r15 bdColorGray pdg5 solid alignCenter">
    <div class="alignLeft inlineBlock">navigator > grandPom > pom 123456 7890 5555 9999 88888</div>
    </div>
    
    
    <div class="clearBoth hite5"></div>
    
    <div class="alignCenter">
      <div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">rMenu</div>
      <div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">lMenu</div>
    
     
    <div>
      <div class="fEm3  bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">title of contents</div>
      <div class="clearBoth"></div>
      <div class="fEm2  bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">writer</div>
    
      </div>
    
    
    </div>
    
    <div class="clearBoth hite10"></div>
    
    
    <div class="bgColorLavender">contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents
    contents contents contents contents</div>
    
    <div class="clearBoth hite10"></div>
    
    
    <div class="alignCenter">
    <div class="fEm2  bdr2 b-r15 bdColorGray pdg5 solid inlineBlock">footer footer footer footer footer</div>
    </div>
    
    </body>
    </html>
    I have the code above at http://dot.kr/x-test/layOut/015.php.

    I think that the height gap between "title of contents AND writer" is too big.
    So I like to make it narrower.

    The bottom line of the text box "writer" should be same as the bottom line fo the text box "lMenu" AND "rMenu".

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    359
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The "clearBoth" div is causing it to clear the bottom of the lMenu and rMenu boxes. I'm out of practice with CSS so removing that div doesn't fix the problem, just wraps 'writer' onto the same line as 'title of contents'.
    http://www.firenza.net - my homage to a car from the 1970s

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    The bottom line of the text box "writer" should be same as the bottom line fo the text box "lMenu" AND "rMenu".
    If you remove the clear:both as mentioned above then "writer" will rise up as far as it can. Is that not what you meant?

  4. #4
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Is that not what you meant?
    Yes, that's what I meant. Thank you Paul O'B as always and droopsnoot.


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
  •