Newbie CSS problem with text/list formatting in Nav Bar


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 4 of 4

Thread: Newbie CSS problem with text/list formatting in Nav Bar

Hybrid View

  1. #1
    Join Date
    Mar 2017
    Posts
    2

    Newbie CSS problem with text/list formatting in Nav Bar

    Hello, I'm just learning CSS and have a problem with formatting I can't seem to figure out, and can't find the answer to via Google. Using external css I've made a simple horizontal Nav bar, and a vertical Nav bar using a (ul) of links. The top bar seems to work, but my problem, when run, the header text (h2) displays beneath the side Nav links, instead of at the top to the right of them. I suspect I'm one property off, but can't seem to find it. Any help appreciated ...

    My HTML code:

    <html>
    <head>
    <title>Page Title</title>
    <!-- attach CSS file to this page -->
    <link rel="stylesheet" href="TAPStyle.css">
    </head>

    <body>
    <ul id="topnav">
    <li><a href="Test1.html">Top 1</a></li>
    <li><a href="Test3.html">Top 2</a></li>
    <li><a href="Test4.html">Top 3</a></li>
    </ul>

    <h1>Page Banner</h1>

    <ul id="sidenav">
    <li><a href="Test1.html">Button 1</a></li>
    <li><a href="Test2.html">Button 2</a></li>
    <li><a href="Test3.html">Button 3</a></li>
    <li><a href="Test4.html">Button 4</a></li>
    </ul>

    <br>

    <h2>This is title bar for each section on page</h2>

    <p>This is body of text</p>

    <h2>This is title bar for each section on page</h2>

    <p>This is body of text</p>

    <br>


    <footer>
    <p>[Copyright 2017]</p>
    </footer>

    </body>
    </html>


    My CSS code (external file) ...
    --------------------------------------------------------

    ul#topnav {
    /*position: fixed; /*fixes position even on scroll/*
    list-style-type: none; /*removes default bullets from list items*/
    margin: 0; /*removes browser default settings*/
    padding: 0;
    background-color: dimgray; /*of each link*/
    }

    #topnav li {
    display: inline-block;
    }

    #topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #topnav li a:hover {
    background-color: purple;
    }

    ul#sidenav {
    list-style-type: none; /*removes default bullets from list items*/
    margin: 0; /*removes browser default settings*/
    padding: 0;
    }

    #sidenav li a {
    display: block;
    width: 240px;
    text-align: center;
    padding: 14px 16px;
    margin-top: 8px; /*Sets vertical space between link buttons*/
    color: white; /*font*/
    background-color: black;
    text-decoration: none;
    }

    #sidenav li a:hover {
    background-color: purple;
    }


    body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: white;
    margin-top: 0;
    margin-right: 16px;
    margin-bottom: 16px;
    margin-left: 16px;
    padding: 0;
    }


    h1 {
    color: #ffc;
    background-color: #900;
    font-size: 2em;
    text-shadow: 3px 2px black;
    margin: 0px;
    margin-bottom: 0;
    padding: 4px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.5em;
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
    border-bottom-color: #c00;

    }


    h2 {
    color: white;
    background-color: black;
    font-size: 1.5em;
    margin-left: 280px;
    padding: 2px;
    padding-left: 14px;
    }



    h3 {
    color: #999;
    font-size: 1.25em;
    margin-left: 280px;
    }


    p {
    line-height: 21px;
    margin-left: 280px;
    }

    ------------------------------------------
    Thanks,
    --Shannon

  2. #2
    Join Date
    Jan 2016
    Posts
    5
    You'll probably need divs to put your elements within because divs are positionable to pixel specifics on your page. I think right now the html is just rendering as recieved in html order. Stick your various htm elements in div tags and then you can position them as the containers of your various elements. Just a guess I am not a CSS expert but div experiments really helped me.

  3. #3
    Join Date
    Mar 2017
    Posts
    2
    Thanks for response, Geo!

    I think I got it figured out. It was indeed a flow issue. By 'floating' the sidebar list of links it allowed the body text to reset at the top of the page. If you're interested, here's where I added it:

    ul#sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 240px;
    float: left; /*This enables following text headers (h2) to be printed to the right of nav bar*/
    }

    Thanks for heads-up on Div, I think that will be my next area of study. Much appreciated!

  4. #4
    Join Date
    Jan 2016
    Posts
    5
    You're welcome. That's good, forgot about float but used to do it a little and had some fun with divs nested in other divs, it added to the layout control, but it gettign harder to recall the longer I was away from it.

Similar Threads

  1. Formatting currency in a list box
    By anonymous in forum VB Classic
    Replies: 1
    Last Post: 09-29-2004, 11:40 PM
  2. LIst view formatting
    By serge calderara in forum .NET
    Replies: 0
    Last Post: 04-19-2004, 02:01 AM
  3. Formatting a list to be more presentable
    By anonymous in forum VB Classic
    Replies: 9
    Last Post: 10-23-2002, 11:46 PM
  4. Text formatting
    By anonymous in forum VB Classic
    Replies: 1
    Last Post: 09-29-2002, 02:22 PM
  5. Formatting List Boxes--HELP!!!!
    By Bill C in forum VB Classic
    Replies: 3
    Last Post: 09-20-2000, 09:35 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center