Hello, im trying to make this layout with css and html5.
The problem is that the 250 px section is overlapping the other sections. What should I position the layout to?
At the moment I am positioning everything to the "allt" div container.
Can someone please help me sort this out and show me the method on how to make this layout that Iv painted.
Thanks in advance and here is the html5 and css code:
Quote:
*{margin: 0px; padding: 0px;}
h1{font: bold 20px Tahoma;}
h4{font: bold 11px Tahoma;}
center{text-align:center;}
header, section, footer, aside, nav, article, hgroup{display:block;}
body{text-align:center; background:brown;}
article{background:white; padding:20px; margin-bottom: 15px;}
article footer{text-align:right;}
#allt{border:1px solid black; background:white; width:800px; margin:20px auto; text-align:left; position:relative;}
#right_header{height: 200px; width:600px; background:blue; border: 1px solid blue; position:absolute; top:0px; right:0px;}
#top_header{height: 200px; width:200px; border: 1px solid blue;}
#top_meny{background:white; height:40px; border:1px solid black;}
#top_meny li{display:inline-block; list-style:none; padding: 5px; font: bold 14px Tahoma;}
#main_section{float:left; width:550px; border:1px solid black;}
#side_news{width: 250px; background:white; border:1px solid black; position:absolute; top:240px; right:0px;}
#the_footer{clear:both; text-align:center; padding: 20px; border-top: 2px solid green;}
a{color:black;}
a:hover{color: aqua; text-decoration:underline;}
|
Quote:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>cowsnpigz</title>
<meta charset="utf-8" />
<meta name="author" content="Jens Danielsson">
<meta name="description" content="cows">
<meta name="keywords" content="pigs">
<meta name="generator" content="notepad++">
</head>
<body>
<div id="allt">
<header id="top_header">
Logga
</header>
<header id="right_header">
hora osv.
</header>
<nav id="top_meny">
<ul>
<li><a href="index.html" title="Main Page">Home</a></li>
<li><a href="photopage.html" title="cow">cows</a></li>
<li><a href="videopage.html" title="pig">pigs</a></li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Welcome!</h1>
<h4>cows</h4>
</hgroup>
</header>
<p>blablablablablablablalblablablblablablblbl mr freeman</p>.
<footer>
<p>pigs</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
COWS!
</aside>
<footer id="the_footer">
Copyright to all pigs
</footer>
</div>
</body>
</html>
|