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
Related
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
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>
I've stacked my divs to look like unfolded paper. I want to put text on each div, to split them into sections.
But the way I made my divs, the only visible parts are the borders. When I add text to the divs, the text appears above or below where it should show (because they're on the invisible divs).
Basically, my divs are invisible. My borders are visible. I need the text to appear on the borders. But to do that, I have to change the padding for each block of text. Is there a way to put text just on the borders? Or is there an easier way of getting the tilted divs?
I've tried rotateY but It only makes them shrink.
The catch -- I can only use HTML and CSS.
Here is a screenshot of how it currently appears:
CSS:
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
I would personally leave out the border option (it's a bit hacky) and go with something different (and probably easier). Here are a couple of options:
1) Using CSS3 3D Transforms
You tried this one but it didn't work. From what you say in the question, the issue that you found when using rotateY (it only shrank) seems to be because you didn't combine it with perspective. Once you do so (and play a little bit with the values so they adjust to what you are looking for), not only the div will skew but also its content making it look like it's in the same angle as the paper effect.
Here is an example (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
min-width:700px;
}
.slant {
margin:auto auto;
}
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
width:655px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg);
}
#slant3 {
width:668px;
height:225px;
background:#ddd;
transform: perspective(600px) rotateX(20deg) translateY(-33px);
}
#slant4 {
width:642px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg) translateY(-33px);
}
<div id="columnwrapper2">
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
2) Using SVG
Another option would be using SVG. This maybe an easier alternative if you don't want the text to skew with the paper folding effect (or one that doesn't require playing with the numbers). It will require you to know the exact height of each section though.
You could create an image in SVG (directly as image or as the code below), and place it in the background of #columnwrapper2, the rest of the content would go on top of the image.
See this demo (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
width:700px;
position:relative;
}
.slant {
margin:auto auto;
height:250px;
width:600px;
padding:50px auto;
z-index:2;
position:relative;
}
<div id="columnwrapper2">
<svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;">
<path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" />
<path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" />
<path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" />
<path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" />
</svg>
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
One advantage of SVG is that it is supported by most browsers (with the previous transform solution, you may find some issues with IE that will need tweaking).
<!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
I am new to the world of coding as well as CSS and am confused by the relationships each div tag has with its predecessor or parent. For example, my code is as below. A copy of the entire code is at the bottom of this question if that should make a difference.
Now if I were to zoom into just look at the container <div id="content">, is it safe to assume and say that its child <div id="innercontent"> is only affected by <div id="content">. The same principle would hold that <div id="content"> is affected by <div id="header">. Hence my CSS box model approach would be affected by each of the preceding div elements. Is that correct?
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
ENTIRE CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Example</title>
<base href="" />
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#wrapper {
/* background-image: url('images/bg-inner-page.gif'); */
background-color: #808080;
height: 200px;
}
#innerwrapper {
width: 960px;
overflow: auto;
}
#header {
}
#logo {
float: left;
margin-top: 20px;
margin-left: 50px;
background-color: gray;
}
#topnav {
float: left;
margin-top: 50px;
margin-left:30px;
color: #ffffff;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
clear: both;
}
#innercontent {
float: left;
margin-top: 100px;
margin-left: 225px;
margin-bottom: 20px;
width: 400px;
}
#rightcol {
float: left;
margin-top: 125px;
margin-left: 50px;
width: 200px;
}
#footer {
background-color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
</html>
HTML is strutured into what is known as the Document Object Model http://en.wikipedia.org/wiki/Document_Object_Model .
Child divs are affected only by its parent elements (or any grandparent further up). However, when you start floating elements around, as your example shows, you may find that elements outside of their container start to interfere.
On the screen this can cause chaos as the elements push each other around to align, however, the DOM will always remain structured, independent of any css.