1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

border properties - CSS

Discussion in 'Web Design & Development' started by vance_iat, Feb 15, 2007.

Thread Status:
Not open for further replies.
  1. vance_iat

    vance_iat Thread Starter

    Joined:
    Apr 17, 2006
    Messages:
    78
    I'm trying to shorten the width of the border-bottom for h3 which is "Welcome." I'd like it lined up right under the word "Welcome." Also how can I create a border on the right side that goes all the way down similar to Simplebits.com? What I tried to do was create a list class with border-left property. But I'd like to make the line go down longer wihout having to add links.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #header {
    position:absolute;
    width:538px;
    height:185px;
    z-index:1;
    left: 12px;
    }
    #sidebar {
    position:absolute;
    width:213px;
    height:157px;
    z-index:2;
    left: 592px;
    top: 134px;
    padding-left: 20px;
    padding-top: 20px;
    }
    #main {
    position:absolute;
    width:556px;
    height:200px;
    z-index:3;
    left: 12px;
    top: 200px;
    text-align: left;
    padding: 10px;
    }
    a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    list-style-type: none;
    color: #660000;
    }
    a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: italic;
    color: #999999;
    }
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 40px;
    color: #333333;
    }
    li {
    list-style-type: none;
    display: block;
    border-left: 1px solid gray;

    }
    li.footer{
    display: inline;
    }

    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    color: #660000;
    padding-left: 20px;
    border-bottom: 1px solid gray;
    padding-bottom: 6px;
    }
    body {
    background-color: #FFFFFF;
    }
    #footer {
    position:absolute;
    width:726px;
    height:72px;
    z-index:4;
    left: 13px;
    top: 500px;
    padding: 10px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="header">
    </div>
    <div id="main">
    <h1>Welcome</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis massa nisi, ultrices eget, pulvinar ut, porttitor in, sem. Maecenas id dolor eget ante tempor lobortis. Praesent varius nisl sed libero. Nam massa diam, commodo vitae, laoreet vitae, mattis at, ligula. Etiam pharetra. Mauris aliquam. Morbi convallis. Donec euismod. Phasellus malesuada scelerisque sapien. Etiam rhoncus viverra nulla. Aenean posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu magna. Duis nisi turpis, tempor sit amet, hendrerit et, volutpat vitae, pede. Praesent lacus. In felis.
    <p>Morbi sit amet metus. Curabitur a lorem. Maecenas leo. Aliquam mollis egestas turpis. Nullam arcu purus, laoreet in, pellentesque non, venenatis vel, arcu. Maecenas ut diam et erat interdum rutrum. Praesent massa. Proin quam nulla, semper et, tincidunt quis, facilisis vitae, lectus. Integer sit amet mauris a turpis accumsan mollis. Pellentesque fringilla posuere mauris. Nullam pellentesque consequat tellus. </p>
    </div>
    <div id="sidebar">
    <li><a href="link1">Link1</a></li>
    <li><a href="link2">Link2</a></li>
    <li><a href="link3">Link3</a></li>
    <li><a href="link4">Link4</a></li>

    </div>
    <div id="footer">
    2007 </div>
    </body>
    </html>
     
  2. MMJ

    MMJ Guest

    Joined:
    Oct 15, 2006
    Messages:
    3,625
    Remove
    padding-bottom: 6px;

    add

    padding-left: 5px;
    border-right: thin solid #dbd5c5;
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - border properties
  1. peterinwa
    Replies:
    2
    Views:
    245
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/544423

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice