Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    I am trying to implement a menu that looks more or less like the one at http://sitekreator.com/stldesign/200...home_page.html
    It is a fairly simple one, but I have one problem that annyos me. I want to make the vertical borders exactly the size of the letters in the menu (as it is in the link) but I can't. Here is the code that I'm using:

    Code:
    <div class="navcontainer">
                <ul class="navlist">
                    <li><a href="#" class="active">HOME</a></li>
                    <li><a href="#">STLSTORE</a></li>
                    <li><a href="#">AUDIO-VIDEO-DOCS</a></li>
                    <li><a href="#">SPREAD THE WORD</a></li>
                    <li><a href="#">LETTERS & COMMENTARY</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
    </div>
    
    .navcontainer
    {
        margin-top:5px;
    }
    
    .navcontainer ul
    {
        padding:.2em 0;
        list-style-type:none;
        color:red;
        width:100%;
        font:bold 9pt arial, helvetica, sans-serif;
        text-align:center;
    }
    
    li 
    { 
        display:inline; 
    }
    
    li a
    {
        text-decoration:none;
        color:red;
        padding:.3em 1.7em;
        border-right:1px solid red;
    }
    
    li a.active
    {
        color:#fca;
        border-left:1px solid red;
    }
    
    li a:hover
    {
        color:#fca;
    }
    If anyone could help me, I would be grateful.

    Kindest regards,
    Valentin

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Show us your actual site.

    They're just using a "pipe" character |

    I can't figure out what you're trying to use (a border?)


  4. #3
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Oh, damn, I was trying to think of something with borders. I think that the | character would do the job, but just for reference here is what I have until now:

    Thank you for the help.

    Code:
    !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>
        <title>Task 1</title>
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
    </head>
    <body>
    <div class="container">
        <img src="logo.jpg" alt=""/>
            
            <div class="navcontainer">
                <ul class="navlist">
                    <li><a href="#" class="active">HOME</a></li>
                    <li><a href="#">STLSTORE</a></li>
                    <li><a href="#">AUDIO-VIDEO-DOCS</a></li>
                    <li><a href="#">SPREAD THE WORD</a></li>
                    <li><a href="#">LETTERS & COMMENTARY</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
            </div>
            
            <div class="content">
                <div class="right"><p class="title">News</p><p class="subTitle"><span class="bold">Submit a News Tip</span></p>
                <div class="oneNews"><p class="newsTitle">Bush Says Military Tsunami Aid Helps Foreign Image</p><p class="source">Source: <span class="bold">CNN</span></p><p class="source">Submitted: <span class="bold">2005-01-10</span></p></div>
                <div class="oneNews"><p class="newsTitle">White House Fought Curbs on Interogation</p><p class="source">Source: <span class="bold">Reuters</span></p><p class="source">Submitted: <span class="bold">2005-01-10</span></p></div>
                <div class="oneNews"><p class="newsTitle">Bush to Expand Tsunami Warning System- White House</p><p class="source">Source: <span class="bold">Reuters</span></p><p class="source">Submitted: <span class="bold">2005-01-06</span></p></div>
                <div class="oneNews"><p class="newsTitle">Decomcrat Gets Wash Governor Post; Challenge Looms</p><p class="source">Source: <span class="bold">Reuters</span></p><p class="source">Submitted: <span class="bold">2005-01-04</span></p></div>
                <div class="oneNews"><p class="newsTitle">US Plans Unprecedented Security for Bush Inaugural</p><p class="source">Source: <span class="bold">CNN</span></p><p class="source">Submitted: <span class="bold">2004-12-23</span></p></div>
                <div class="oneNews"><p class="newsTitle">Bush Paints Grim Outlook to Sell Social Security Plan</p><p class="source">Source: <span class="bold">Reuters</span></p><p class="source">Submitted: <span class="bold">2004-12-12</span></p></div>
                <div class="goto"><p class="pages">1 2 3 4 5 6 7 8 9 <span class="more"><span class="bold">More</span></span></p>
                <p class="gotoPages">Go to page <input type="text" /> of 79 <span class="go"><span class="bold">Go</span></span></p></div>
                </div>
                <div class="left"><p class="leftTitle">911 inconsistencies</p>
                    <ul class="left">
                        <li>Item One</li>
                        <li>Item Two</li>              
                    </ul>
                </div>
                <div class="center"><p class="title">Welcome</p> <p class="text">  text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text 
                                                                                   text text text text text text text text text text text text text</p>
                                                                    
                </div>
                <div class="footer">STOP THE LIE in 2004</div>
            </div>
            
    </div>
    </body>
    </html>
    Code:
    *
    {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    body
    {
        background:black;
    }
    img
    {
        width:100%;
        height:100px;
    }
    .container
    {
        margin:20px 42px 20px 42px;
        border:solid 3px white;
        border-top:none;
        background:white;
    }
    .content
    {
        border-top:solid 1px #dfdfdf;
        padding-top:15px;
        margin-top:10px;
    }
    .footer
    {
        background:#f0f0f0;
        text-align:center;
        font-weight:bold;
        margin-top:20px;
        clear:left;
        width:100%;
    }
    .left
    {
        float:left;
        width:20%;
        margin-bottom:10px;
        text-align:justify;
    }
    .center
    {
        border-right:solid 1px #dfdfdf;
        border-left:solid 1px #dfdfdf;
        text-align:justify;
        margin-bottom:10px;
        margin-left:20%;
        width:56%;
    }
    .right
    {
        float:right;
        width:24%;
        margin-bottom:10px;
        text-align:justify;
    }
    p.title
    {
        margin:0px 15px 0px 15px;
        font-size:20pt;
        border-bottom:solid 1px #dfdfdf;
    }
    p.text
    {
        padding:15px 15px 15px 15px;
    }
    p.leftTitle
    {
        text-transform:uppercase;
        font-weight:600; 
        font-size:9pt;
        border-bottom:solid 20px #cac9c9;
        border-right:solid 20px white;
        
    }
    p.subTitle
    {
        color:#2a75bb;
        border-bottom:solid 1px #dfdfdf;
        padding:5px 0px 5px 0px;
        margin:0px 15px 0px 15px;
    }
    p.newsTitle
    {
        color:#3779c4;
        text-align:left;
        font-size:11pt;
    }
    p.newsTitle:hover
    {
        text-decoration:underline;
        color:#f7bf52;
        cursor:pointer;
    }
    p.source
    {
        text-align:left;
        font-size:small;
    }
    p.pages
    {
        color:#3779c4;
        letter-spacing:0.15em;
    }
    p.gotoPages
    {
        margin-top:15px;
    }
    .goto
    {
        border-bottom:solid 1px #dfdfdf;
        padding:15px 0px 15px 0px;
        margin:0px 15px 0px 15px;
        font-size:11pt;
    }
    input
    {
        width:24px;
        height:14px;
        vertical-align:middle;
        border-bottom:solid 1px #dfdfdf;
        border-right:solid 1px #dfdfdf;
        border-top:solid 2px #6b6b6b;
        border-left:solid 2px #6b6b6b;
        margin:0px 5px 0px 5px;
    }
    span.more
    {
        color:#2a75bb;
        letter-spacing:normal;
    }
    span.go
    {
        color:#2a75bb;
        text-align:right;
    }
    .oneNews
    {
        border-bottom:solid 1px #dfdfdf;
        margin:0px 15px 0px 15px;
        padding:5px 0px 5px 0px;
        
    }
    span.bold
    {
        font-weight:bold;
    }
    ul.left
    {
        color:#3779c4;
        font-size:10pt;
        list-style-image:url('arrow.jpg');
    }
    .navcontainer
    {
        margin-top:5px;
    }
    .navcontainer ul
    {
        padding:.2em 0;
        list-style-type:none;
        color:red;
        width:100%;
        font:bold 9pt arial, helvetica, sans-serif;
        text-align:center;
    }
    li 
    { 
        display:inline; 
    }
     li a
    {
        text-decoration:none;
        color:red;
        padding:.3em 1.7em;
        border-right:1px solid red;
    }
     li a.active
    {
        color:#f7bf52;
        border-left:1px solid red;
    }
    li a:hover
    {
        color:#f7bf52;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:24 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com