How do i put my Navigation Bar on the left
Question
I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section. This is the Whole HTML Code.
<html>
<head>
<title>My Homepage</title>
</head>
<style>
#header{
width:800px;
height:200px;
background-color:yellow;
}
#footer{
width:800px;
height:100px;
background-color:red;
clear:both;
}
#nav{
width:200px;
height:400px;
background-color:pink;
float:left;
}
#con{
width:800px;
height:400px;
background-color:gray;
}
</style>
<body>
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section.
2 answers
solution1
0 2016-07-03 17:31:59
Your CSS will actually work perfectly if you move your nav markup up to be directly below your closing header div:
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
solution2
0 2016-07-03 17:36:04
Please refer the code to make it
#nav {
width: 100%;
height: auto;
background-color: pink;
float: left;
}
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50">
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg" alt="pup" height="50" width="50"></div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I put my header above my navigation bar?
How do I put my drop down menu in the navigation bar?
HOW do I left align my items in my navigation bar using vue material?
How do I position my navigation bar?
How do i center my navigation bar?
How do I center “my” navigation bar?
how can i put my navigation bar above header
How do I add an image to the left side of Navigation Menu Bar?
How do I add a Logo the the top left of the Navigation Bar?
How do I center my navigation bar on my website?
Related Tags