Hallo Itschi Community,
ich habe gestern wieder ein wenig mit dem coden angefangen. Ich wollte ausprobieren ob ich es auch schaffe ein Design mit Divs zu coden. Nun habe ich folgendes Problem:
Ich habe in eine Div (Hintergrundbild: Footer) noch eine Div gemacht (Hintergrundbild: Button). Soweit so gut. Nun habe ich jedoch das Problem, dass ich mehrere dieser Buttons nebeneinander platzieren möchte - von links nach rechts. Leider funktioniert es bei mir nicht. Bei mir sind die Buttons immer untereinander.
Der Html Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div class="head" id="fontout"></div>
<div class="banner" id="fontout"></div>
<div class="content_top" id="fontout"></div>
<div class="content_middle" id="fontout"><br /><br /></div>
<div class="content_bottom" id="fontout">
<div class="leer"></div>
<div class="button" id="fontin"></div>
</div>
</body>
</html>
Der Css Code:
Code:
#head {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center
}
#fontout {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #865000;
line-height: 16px;
}
a:link {
font-style: normal;
font-weight: normal;
color: #72bb40;
text-decoration: underline;
}
a:active {
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
div {
margin: auto auto;
}
div.head {
background-image: url(images/head.PNG);
width: 499px;
height: 27px;
}
div.banner {
background-image: url(images/banner.PNG);
width: 499px;
height: 47px;
}
div.content_top {
background-image: url(images/content_top.PNG);
width: 499px;
height: 16px;
}
div.content_middle {
background-image: url(images/content_middle.PNG);
width: 499px;
height: auto;
text-valign: top;
}
div.content_bottom {
background-image: url(images/content_bottom.PNG);
width: 499px;
height: 77px;
}
.button {
background-image:url(images/button.PNG);
width: 47px;
height: 49px;
display: block;
}
.button:hover {
background-image:url(images/button_pushed.PNG);
width: 47px;
height: 49px;
display: block;
}
div.leer {
width: 499px;
height: 28px;
}
Wie kriege ich es hin, dass meine Divs nebeneinander und nicht übereinander erscheinen?
Gruß,
Milchi
Facebook
Twitter
Registrieren
Login
(X)HTML, JavaScript, Ajax
Forum
Mitglieder
Newsletter
Fotos
Geburtstage
