Newbie CSS problem with text/list formatting in Nav Bar

**Shannon61** · 03-06-2017, 12:33 AM

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>

<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

**geometry777** · 03-06-2017, 06:41 PM

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.

**Shannon61** · 03-07-2017, 08:54 PM

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!

**geometry777** · 03-08-2017, 02:00 AM

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.

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

Thread Tools

Display

Newbie CSS problem with text/list formatting in Nav Bar

Similar Threads

Formatting currency in a list box

LIst view formatting

Formatting a list to be more presentable

Text formatting

Formatting List Boxes--HELP!!!!

Posting Permissions