SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot cooljeba's Avatar
    Join Date
    Feb 2005
    Location
    Bangalore, India
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Doubt reducing height of div

    Hi,

    I have just started learning CSS and was trying to mock the gmail layout. Here is the html and the css code which I wrote:


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <head>
    	<title>Gmail : Mail from Google</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="header" >
    		<img src="img/logo.gif" alt="Google Mail" />
    			<div id="container-side">
    				<h3> Welcome to Gmail</h3>
    			</div>
    	</div>
    	
    </div>
    </body>
    </html>

    CSS - style.css

    HTML Code:
    #container {
     background-color: #ffffff;
     font-family: Georgia, times-new-roman;
     color:black;
     text-align:center;
     padding:0;
     margin:0;
     margin-right: 50px;
    }
    #header {
    	
    	text-align:left;
    }
    #container-side
    {
    
    	background-color:#c3d9ff;	
    	padding-right: 30em;
    	-moz-border-radius: 0.5em;
    	float:right;
    	padding-right: 54em;
    	-webkit-border-radius: 5px; 
    
    }
    What I got:
    http://img199.imageshack.us/img199/6398/gmailmock.png


    Real Gmail :

    http://img525.imageshack.us/img525/1687/realgmail.png

    as it is clearly visible that the gmail one is much smaller I mean the height..

    How do i achieve this.. I know it is pretty simple..

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems you got the default margin/padding blues: zero them out:

    Code CSS:
    * {margin:0; padding:0;}

    then adjust to your liking with setting the appropriate padding top and bottom on #container-side

    Does this help?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, as Luki alluded to, your <h3> has a default top/bottom margin and as such it is stretching the blue box out. Setting the <h3> margin to 0 will do the trick (or you could use a reset as he posted)
    Code:
    h3{margin:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just nipp it in the b*** and prevent some future problems with a reset
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The reset would be preferable but I felt the need to explain what exactly was going on instead of him just using a reset and being done with it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot cooljeba's Avatar
    Join Date
    Feb 2005
    Location
    Bangalore, India
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup.. that did the trick

    Thanks Luki_be
    thanks RyanReese for explaining the reason :-)

    Lessons learned:

    Always reset the padding and margins.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes . If you are going to use forms then I recommend you don't use the *{margin:0;padding:0;} way, but rather use a minimalized version of Eric Meyers reset
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    The reset would be preferable but I felt the need to explain what exactly was going on instead of him just using a reset and being done with it .
    Lol, that wasn't why i replied buddy, just wanted to add that the reset will prevent future problems since you already explained the H problem
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Lol, that wasn't why i replied buddy, just wanted to add that the reset will prevent future problems since you already explained the H problem
    You replied first
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correction: my reply after yours lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •