-
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
-
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.
-
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!
-
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
-
By anonymous in forum VB Classic
Replies: 1
Last Post: 09-29-2004, 11:40 PM
-
By serge calderara in forum .NET
Replies: 0
Last Post: 04-19-2004, 02:01 AM
-
By anonymous in forum VB Classic
Replies: 9
Last Post: 10-23-2002, 11:46 PM
-
By anonymous in forum VB Classic
Replies: 1
Last Post: 09-29-2002, 02:22 PM
-
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
-
Forum Rules
|
Development Centers
-- Android Development Center
-- Cloud Development Project Center
-- HTML5 Development Center
-- Windows Mobile Development Center
|