I am HTML programming newbie so I apologies if this question is too elementary.
I want to wrap the contents of an article around the table of contents. Here is my HTML web-page. That is I would like the table of contents to be on the left, and the article itself directly to start to the right of it. If possible, I would like to do this in a separate CSS file.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="content">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</body>
</html>
You should try using css Flexbox or css floats.
HTML:
<div class="container">
<div class="table-contents">
<h3>
Table of Contents
</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.</p>
</div>
</div>
CSS:
.container{
display: flex;
}
.table-contents, .content{
padding: 10px;
}
.table-contents{
flex: 1 0 auto;
width: 150px;
}
Here is a fiddle: http://jsfiddle.net/wkszuvLm/1/
Hope this helps.
body tag is already there wrapping around everything, you could use it as well as adding another div inside body to wrap everything else.
There are multiple ways to place elements within a container. Learn about using css display property set to grid or flex. Both come with their own subset of properties.
use link tag to use an external css file.
<link rel="stylesheet" type="text/css" href="css_file_url_here">
You can do it by putting those in two different div and then style them as required.
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
You can put the above in css file and call in your <head> tag or you can also use it as below:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
</style>
</head>
<body>
<div id="content">
<div class="divLeft">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
</div>
<div class="divRight">
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</div>
</body>
</html>
Related
I have included a snippet of my example attempt below.
It almost works apart from the fact that the 3rd paragraph does not follow on after the 2nd paragraph.
Update: I've found a solution. #Paul's last comment inspired me. :) I've posted my solution in the answers
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think you won't be able to get that working that way. Due to your absolute positioning the full width div doesn't occupy any space anymore and that's why the following paragraph and the absolute positioned paragraph are overlapping.
It does work, if you create three divs (the first and the last one with max-width and the middle one with full width.
#full-width {
width: 100%;
border: 3px solid #73AD21;
}
.max-width {
max-width: 300px;
margin: auto;
border: 3px solid #73AD21;
}
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
If you cannot do this, you need to add a fixed margin-top to the last div, which has the same number of pixels as the height of the second paragraph. Nevertheless that's a not a nice solution.
you can try this .if you give position absolute than for the third paragraph need to give margin-top to resolve overflow.
#full-width p{
position:relative;
width:100vw;
max-width:100%;
border: 3px solid #73AD21;
margin-left:0;
}
p{
max-width:300px;
border: 3px solid #73AD21;
margin:auto;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lsdxsorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think the answers provided will be useful to others.
However I do have the restriction that the nested element must inherit the max-width from the outer div otherwise it will add big complications to my code.
However, #Paul's last comment did inspire me to create this answer, which has solved my problem. :)
jQuery(document).ready(function($) {
var fill_size_required = $('#full-width').height()
$('#filler').css('height',fill_size_required);
});
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="filler"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I am developing a website where I create different graphics with D3.js
I have a main page called "index.html" where I have a piece of text for the introduction. I have a second page called "GenrePie.html" which has a pie chart.
I want to put the "GenrePie.html" page in my "index.html" page.
On several forums I found a way to do it but it doesn't work for me :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#includedPieContent").load("GenrePie.html");
});
</script>
this is my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
</div>
</body>
</html>
I would like to put my pie chart after the second paragraph
Thank you in advance
You can use embed or iframe whichever suits you,
I will recommend embed as its looks clean.
Quick Demo : https://jsfiddle.net/vikas_saini/kupb0Lh9/5/
<div>
<h1>SOME TEXT</h1>
<embed src="https://example.com/" style="width:500px; height: 300px;">
<iframe src="https://example.com/">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Your Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
<embed src="GenrePie.html" style="width:500px; height: 300px;">
</div>
</body>
</html>
Let me know if this did not work for you.
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
I have read countless posts on this topic however I am yet to find a solution that works. I simply want to have two divs side by side with the LHS div being the width of the FA char and the RHS div being the remainder.
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
Not sure what you're trying to do but you could use something like Flexbox which is in the JS fiddle here.
Alternatively you could do something like this:
HTML
<div class="helper">
<div class="text-info">FA</div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
CSS
.text-info, .text-muted {
float:left;
}
.helper {
clear:both;
}
If you want both of them to have different widths, you can simply set the widths of each (using %, px or whatever).
Set display:table-cell to your content and icon will give the desired output. Check below snippet.
.inline {
display: table-cell !important;
width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
<div class="text-muted inline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
I believe this is what you're going for :
.text-muted {
display: table-cell;
}
.text-info {
padding-right: 10px;
display: block;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
See also this Fiddle.
Hi I am trying to show my background image for the div called #container but it is not working why?
When I try to set the background color it works perfectly... I have tried to use
'/pics/coffey.jpg'
pics/coffey.jpg
"/pics/coffey.jpg"
"../pics/coffey.jpg"
But the picture is lying like this /css/pics/coffey.jpg
And my style file is in the css folder so it should work with /pics/coffey.jpg but it doesn't anyone help??
CSS:
#container {
width : 740px;
height:200px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
line-height: 1.7em;
background-repeat:no-repeat;
background-image: url("/pics/coffey.jpg");
}
#topbar {
height:20px;
width:740px;
float:right;
font-size:10px;
font-family:Verdana;
font-style:italic;
padding:0px;
background:#644C37;
}
HTML
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Lorem Ipsum</title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<div id="container">
<div id="topbar">
"Quisque sit amet justo"
</div>
<div id="menu">
Skip navigation
<ul>
<li class="active">hem</li>
<li>projekt</li>
<li>information</li>
<li>kontakt</li>
<li>hitta till oss</li>
</ul>
</div>
<div id="content">
<div id="maincontent">
<h1>Lorem Ipsum</h1>
<img src="pics/info.jpg" alt="Bubblande kaffe" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tincidunt volutpat nunc. Curabitur id dolor sed massa volutpat mollis. Duis lorem diam, vestibulum pharetra, consequat ac, semper ac, nibh. Integer vel pede ac purus aliquet nonummy. In hendrerit. Praesent posuere, tellus eget nonummy pellentesque, tellus eros bibendum erat, non hendrerit erat eros sed lorem. Sed pretium quam sed lacus. Maecenas turpis tellus, feugiat a, ultrices a, porta ac, nisi. Donec convallis neque. Nam lobortis nibh sit amet metus tincidunt faucibus. Sed nec leo. Aliquam mattis.</p>
</div>
<div id="subcontent">
<h1>Quisque</h1>
<p>Quisque sit amet justo. Maecenas eu nibh ut est tincidunt congue. Vivamus quis diam. Curabitur lobortis pede eu turpis. Nulla adipiscing. Phasellus risus arcu, malesuada eu, molestie et, cursus vel, nisl. Aliquam at est. Nullam nec lacus. Nulla vitae justo. Donec volutpat elit ut orci.</p>
<h2>Read more:</h2>
<ul>
<li>http://www.saadsa.fds</li>
<li>http://www.llsd.seafa/seas</li>
<li>http://consecyt.hg</li>
</ul>
</div>
<div id="bottomcontent">© Linnéuniversitetet, Institutionen för datavetenskap</div>
</div>
</div>
</body>
</html>
/css/pics/coffey.jpg
is the correct path
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></head>scipt?
<![endif]-->
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<style>
#container{
margin: auto;
width: 800px;
padding-top: 50px;
}
#menu ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
position: fixed;
background-color: blue;
top:0;
left:0;
right:0;
margin:0;
overflow:hidden;
}
#menu a
{
float:left;
text-decoration:none;
color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
}
#menu a:hover {color: blue;}
#menu li a {display:inline;}
</style>
<div id="menu">
<ul>
<li>Home</li><br>
<li>Categories</li><br>
<li>Admin Panel</li><br>
<li>Log Out</li><br>
</ul>
</div>
<h2></h2>
<div id="container">
<body>
<div id="header">
<h1> Welcome To My Own Personal Blog</h1>
</div>
<article>
<hr />
<h4><div id="date">10th<br>Oct</div></h4>
<h2>My Seventh Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=7'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">2nd<br>Oct</div></h4>
<h2>My Sixth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=6'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">01st<br>Oct</div></h4>
<h2>My Fifth Post! </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=5'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">18th<br>Sept</div></h4>
<h2>My Forth Post!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=4'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">14th<br>Sept</div></h4>
<h2>My Third Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=3'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">12th<br>Sept</div></h4>
<h2>My Second Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=2'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<a href='index.php?p=2'>Next</a></div>
</body>
</html>
I can't stop the menu from producing a staircase affect. The menu in a separate file works correctly.
Im thinking that something else is triggering it to do this. Thank you for your help. The idea is that the menu will look similar to the Facebook menu and be fixed to the top of the screen.
UPDATE
Fiddle of OP's code
The issue seems to result from erroneous <li style="list-style: none"><br></li> items between each <li>
Updated fiddle