#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0

    Question Height and disappearing text line


    Hi there,

    I know how to decrease the height of the red box. However, when I do so the following text line will disappear: At your Fingertips

    What can I do to bring this text line up while decreasing the height? Will appreciate your help. Thank you



    Here is the CSS.

    body {
    background-color: #333;
    }

    a:link, a:visited { color: #333; text-decoration: none;}
    a:active, a:hover { color: #333; text-decoration: none;}


    #top{
    background-color: #B30000;
    width: 795px;
    height: 249px;
    padding-top: 5px;
    padding-left: 5px;
    float: right;
    font-weight: normal;
    color: #FFF;
    font-size: 47px;
    font-family: Times New Roman;
    }

    #title-area {
    width: 795px;
    margin: 0 auto -25px;
    }

    .links
    {
    text-align:right;
    font-size: 14px;
    padding-right: 10px;
    }

    .fingertips{
    text-align:right;
    font-size: 30px;
    padding-right: 20px;
    }

    .new
    {
    text-align:left;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    padding-right: 20px;
    }

    #contentwrapper{
    float: left;
    width: 795px;
    }

    #center{
    margin:auto;
    width:100%;
    background-color:#333;
    padding-top:10px;
    padding-bottom: 20px;
    font-weight: normal;
    font-size: 13px;
    color: #FFF;
    font-family: Times New Roman;
    }

    #footer{
    background: #333;
    color: #FFF;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    #footer a{
    color: #FFF;
    font-weight: normal;
    font-size: 10px;
    font-family: Tahoma;
    }

    And here is the HTML:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <link href="css/home_styles.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

    <div id="title-area" >
    <div id="top"><p class="links"> Home l Profiles l Contact</p>World Designs International<br>Websites and Catalogs</br><p class="new">"Committed to an Excellent Services"</p><p class="fingertips">At your Fingertips</p> </div>

    <div id="contentwrapper">

    <div id="center">
    <p>Welcome,</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>


    <div><img border="0" src="images/12.jpg">
    </div>

    <div id="footer"><a href=""> 2013 Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></div>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    309
    Rep Power
    162
    I believe what is getting you is the default margin of the <p> element. If you add..

    Code:
    p {
    margin:0;
    }
    ..to your stylesheet, it will be a lot easier for you to get all the heights right without losing anything and wondering why. Without anything having a default margin/padding, you can work out for yourself a lot easier if something fits.

    combined margins/paddings top/bottom + heights of all elements inside a box = total height the box needs to have.
    combined margins/paddings left/right + widths of all elements inside a box = total width the box needs to have.

    At first when you make the change it will seem like a big difference, but it's all space that's being eaten without you knowing about it. From there you can set everything the way you want it.

    If you'd rather just have a quick-fix, you can add a margin-top:0; to the fingertips p, but it'll only go so far.
    Last edited by LDHosting; June 11th, 2013 at 06:41 PM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Thank you so much. It worked beautifully.

IMN logo majestic logo threadwatch logo seochat tools logo