Hallo zusammen,
stehe heute vor folgemden Problem:
Ich möchte die beiden pinkenen Boxen (Sanitär und Heizung) nebeneinander statt untereinander stehen haben. Wäre super wenn mir jemand weiterhelfen könnte.
Danke Euch.
stehe heute vor folgemden Problem:
Ich möchte die beiden pinkenen Boxen (Sanitär und Heizung) nebeneinander statt untereinander stehen haben. Wäre super wenn mir jemand weiterhelfen könnte.
Danke Euch.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="demo2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="holder">
<div id="header">
<h1 class="callout">Test</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">eins</a></li>
<li><a href="#">zwei</a></li>
<li><a href="#">drei</a></li>
<li><a href="#">vier</a></li>
<li><a href="#">fünf</a></li>
<li><a href="#">sechs</a></li>
<li><a href="#">sieben</a></li>
<li><a href="#">acht</a></li>
</ul>
</div>
<div id="content">
<div id="bilder">
<h2 class="callout2">Sanitär</h2>
</div>
<div id="bilder2">
<h2 class="callout2">Heizung</h2>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. <br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.At vero eos et accusam et justo duo dolores et ea rebum. </p>
</div>
<div class="brclear"></div>
<div id="footer">
<p>© 2012 Test</p>
</div>
</div>
</body>
</html>
Code:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #ADA189;
margin: 0px;
padding; 0px;
}
#holder {
width: 1240px;
background: #FFF;
margin: 0 auto 0 auto;
}
#header {
background: #333333;
}
#bilder {;
width: 250px;
background: #F3C;
color:#000;
}
#bilder2 {
width: 250px;
background: #F3C;
color:#000;
}
.callout2 {
font: "MS Serif", "New York", serif;
color: #000;
text-align: center;
}
#nav {
width: 140px;
float: left;
padding: 50px 10px;
}
#content {
margin: 0 0 0 165px;
padding: 15px;
border-left: 1px solid #877D6C;
}
#footer {
padding: 5px;
border-top: 1px solid #877D6C;
font-size: 80%;
color: #000;
text-align:center;
}
.callout {
font: bold 130% Georgia, "Times New Roman", Times, serif;
color: #FFF;
margin: 0;
padding: 20px 10px;
text-align:center;
}
.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0px;
}
p {
font-site: 80%;
}
#content p {
line-height: 130%;
}
#nav ul {
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 80%;
border: 1px solid #000000;
}
#nav ul li {
padding: 0;
margin: 0;
}
#nav ul li a{
background-color: #333333;
border-bottom: 1px solid #000000;
color: #FFF;
display: block;
padding: 4px 0 6px 4px;
text-decoration: none;
height: 1%;
}
#nav a:hover, #nav a:focus {
background-color: #003366;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
