CSS - Utrymme
Hejsan alla!
Behöver lite hjälp angående CSS och "brytning". Ni kan se denna URL:
http://www.freecsstemplates.org/preview/vertebrate/
Först följer - "Homepage", "Products", "About", "Contacts" (Menyn) sedan en svart-ljus skugga som följer.
DÄREFTER
Kommer ett visst utrymme och sedan en "Container".
Hur gör jag detta utrymme eller brytning?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Hemsida</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>X</h1>
<ul id="menu" class="clearfix">
<li><a href="#">Meny1</a></li>
<li><a href="#">Meny2</a></li>
<li><a href="#">Meny3</a></li>
<li><a href="#">Meny4</a></li>
</ul>
</div>
<div class="X" id="sidebar">
<h3>X</h3>
<p>Text</p>
<ul class="clearfix">
<li><span class="date">Jan 1</span> <a href="#">Text</a></li>
<li><span class="date">Jan 2</span> <a href="#">Text</a></li>
<li><span class="date">Jan 3</span> <a href="#">Text</a></li>
<li><span class="date">Jan 4</span> <a href="#">Text</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {
margin-top: 60px;
padding: 0;
background: #101723;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#header h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
color: #4D4040;
text-align: center;
}
h1 {
font-size: 3.4em;
}
#container {
width: 600px;
padding: 45px;
background-color: #FFF;
margin: 0 auto;
border-radius: 8px;
}
#menu {
width: 45%;
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
}
#menu li {
list-style: none;
float: left;
padding: 0x;
}
#menu li a:link, #menu li a:visited{
text-decoration: none;
padding: 10px;
display: block;
}
#menu li a:hover {
text-decoration: none;
background-color: #362B2F;
color: #FFF;
}
#menu a {
height: 56px;
margin: 0px;
padding: 10px 30px 10px 30px;
line-height: 56px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: normal;
color: #262626;
border: none;
}
#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 45px 35px 45px 35px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
padding: 10px 0 10px 0;
border-top: solid 1px #D9D9D9;
}
#sidebar ul li.first {
border-top: 0;
padding-top: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE */
/* @end */
