This is my HTML
@charset "utf-8";
/* CSS Document */
* { margin:0;padding:0; border:0;} /* removes default browser styling */
/*html{
height: 100%;
margin: 0;
padding: 0;
}*/
#container{
width: 1366px;
height: 768px;
margin: 0 auto;
}
header{
width: 25%;
height: 10%;
float: left;
background-color: red;
}
/*navigation*/
nav{height: 10%;; background-color: lightblue;}
nav ul{
margin: 0px;
padding: 0px;
overflow: hidden;
}
nav li {
float:left;
list-style-type: none;
}
nav li a {
display:block;
background-color:black;
text-align:center;
padding: 30px 40px;
text-decoration: none;
}
nav li a:hover {
background-color:#CF3B3D;
}
/*All content*/
#content{
height:20%;
width:100%;
background-color: yellow;
clear:both;
}
section{
clear:both;
height:40%;
width:50%;
float:left;
background-color: green;
}
aside{
clear:both;
height:40%;
width:50%;
float:right;
background-color: purple;
}
/*Footer*/
footer{
clear:both;
background-color: brown;
}
And this is my HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="container">
<header>Header </header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="fire.html">Fire Performance</a></li>
<li><a href="useful.html">Useful Links</a></li>
</ul>
</nav>
<!-- TemplateBeginEditable name="Main" -->
<div id="content">Content
<h1>Heading 1</h1>
<p>The quick brown fox jumps over the lazy dog ; </p>
<h2>Heading 2</h2>
<p>Usu an velit commune comprehensam, omnesque constituam cum at. Eum malis omittantur et, has decore rationibus ut. Iusto soluta appellantur te qui, eu nec commune imperdiet. At ornatus intellegat theophrastus eam, nihil feugait sed ex. Tritani scribentur persequeris an his, ius rebum deterruisset in. Solum etiam numquam cu vim, ne vis quas impetus nostrum, an eum justo timeam oporteat.
Eos nibh aliquip ne, quidam oportere volutpat ei vim, est ex molestie platonem. At paulo noluisse urbanitas vix, ea quo liber facilisis. At cum invidunt comprehensam, error nihil interpretaris nam id. Eruditi invidunt theophrastus ut mei.</p>
</div>
<section> section
</section>
<aside>Sidebar
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li> </aside>
</div>
<!-- TemplateEndEditable -->
<footer>Footer </footer>
</body>
</html>
While trying to style my website I've hit a wall, my section element and div aren't showing, my header,aside, footer and nav are all working but I can't work out what's causing the issue and have tried narrowing it down to no avail.
Aucun commentaire:
Enregistrer un commentaire