Callum Norris
Reputation: 51
HTML Unordered List not working
So I've been creating a webpage and tried to use an unordered list but it doesn't work and just appears with a grey background as a single string.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
<meta charset="utf-8">
<link rel="stylesheet" href="project file 1.css">
<link rel="stylesheet" href="style.css">
<title>My Project
</title>
</head>
<body>
<div id="wrapper">
<div id="nav">
<nav>
<ul>
<li>
<a href="project.html">Home Page
</a>
</li>
<li>
<a href="projectpage.html">Project Page
</a>
</li>
<li>
<a href="cvpage.html">CV page
</a>
</li>
<li>
<a href="contactpage.html">Contact Me
</a>
</li>
</ul>
</nav>
<h1>
</h1>
</div>
<header>
<h1>
<U> Home
<span style="color:red">Page
</span>
</U>
</h1>
</header>
<!--navigation bar -->
<div class="box one">
<h2>
<U>Hobbies
</U>
</h2>
<p>These are just a few of hobbies but these are the ones that take up the most time
</p>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Cycling</li>
<li>Gaming</li>
</ul>
</div>
<!--profile -->
<div class="box two">
<h2>
<U>Photo Of Me
</U>
</h2>
<p>Please don't be mean
</p>
<img src="ProfilePic.jpg" alt="Profile pic" width="300" height="300">
<p>I know what a beautiful man ;)
</p>
</div>
<div class="box three">
<!-- Jobs table -->
<h2>
<u>Table Of My Current/ Previous Jobs
</U>
</h2>
<table>
<tr>
<th>company
</th>
<th>Job Title
</th>
<th>length of time there
</th>
</tr>
<tr>
<td>Network Research
</td>
<td>Telemarketer
</td>
<td>2 Months
</td>
</tr>
<tr>
<td>David MacBeth Moir
</td>
<td>Kitchen Associate
</td>
<td>3 months
</td>
</tr>
<tr>
<td>Justice Mill
</td>
<td>Kitchen Associate
</td>
<td>1 year to present
</td>
</tr>
</table>
<!-- spoons para-->
<h3>
<U>Why I Stay at Spoons
</U>
</h3>
<p>Cause its good patter and the people there as a good laugh but he job its self is pretty rubbish
</p>
</div>
<div class="box four">
<h2>
<U>Questions?
</U>
</h2>
<p>Please feel free to ask any questions if you need help understanding anything for example:
</p>
<ul>
<li>Information given didnt make sense
</li>
<li>Further questions on the information on the page
</li>
<li>The layout was confusing
</li>
<li>ect...
</li>
</ul>
<form>
<fieldset>
<legend>Please leave a comment...
</legend>
<label for="name">Name:
</label>
<input type="text" name="name" value="" />
<label for="email">Email
</label>
<input type="text" name="email" value="" />
<label for="comments">Comments
</label>
<textarea name="comments" cols="45" rows="5">
</textarea>
<input type="submit" value="submit" />
</fieldset>
</form>
</div>
</div>
<div class="box5">
</div>
<div class="box6">
</div>
</body>
</html>I have tried to create unordered lists in boxes 1 and 4 but they don't display correctly, main CSS spreadsheet is as follows:
h1 {
color:black;
}
h2 {
text-align:center;
}
p {
margin-top:10px;
}
*{
margin:0;
padding:0;
}
body {
background-color: white;
}
form {
padding-top:120px;
}
img {
margin-left:10px;
margin-top:6px;
border: 3px solid grey;
}
h3 {
margin-left:30px;
margin-right:30px;
margin-top:10px;
}
h4 {
margin-right:30px;
margin-top:40px;
}
iframe {
margin-left:150px;
margin-top:40px;
}
#wrapper{
width:1000px;
height:1350px;
margin:auto;
background:#white;
}
#nav{
width:1000px;
height:50px;
background:grey;
}
.box{
width:400px;
height:400px;
float:left;
background:#ff0;
margin: 65px 0 0 65px ;
border:5px solid grey;
}
.box2 {
width: 400px;
height:900px;
float:left;
background:#ff0;
margin:65px 0 0 65px;
border:5px solid grey;
}
.box3 {
width:400px;
height:400px;
float:right;
background:#ff0;
margin-right:65px;
margin-top:65px;
border:5px solid grey;
}
.box4 {
width:865px;
height:400px;
background:#ff0;
margin-left:65px;
margin-top:540px;
border:5px solid grey;
}
.box5 {
width:auto;
height:150px;
background:white;
}
.box6 {
width:auto;
height:60px;
background:#3c3c3c;
}
.box7 {
width:auto;
height:1100px;
background:white;
}
.one p{
color:red;
}
.two p{
color:purple;
}
.three p{
color:green;
}
.four p{
color:red;
}
I cannot understand why the unordered list isn't working and I've checked it with a couple friends who have coded HTML before and they can't offer me any help. I thought that it could perhaps have been the div that goes around the list but I can't see anything that would mess with the actual list. any help would be greatly appreciated.
Upvotes: 0
Views: 4954
Answers (1)
Zvezdas1989
Reputation: 1465
You used:
li {
float: left;
}
Basically you can't float li items if you want them to work properly. Target your li items which you want to float through classes, id-s, or html tags, but not directly.
Upvotes: 1