Frage stellen
ich möchte insgesamt 4 Boxen haben, 1 große links und 3 Boxen rechts untereinander mit ca. 10 Pixel Abstand.
Der Text in den Boxen sollte auch etwa 10 Pixel left und Top haben.
Habe es versucht, aber eigenartiger weise wird das gesamte Layot über den Bildschirm angepasst (1920x 1560) statt 1024 Pixel Breite.
Mein Versuch (ich bin ein Newbie)
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test mit Boxen</title>
<meta name="author" content="franky">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
body {
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
font-size: 100.01%;
background-color: #F0F0F0;
}
div#wrap {
background: #FFBF00 /*#006B97;*/
width: 1024px; height: 100%;
margin: 0 auto;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div#box_gr {
font-size:80%;
float: left;
width: 500px;
height: 600px;
padding-left: 10px;
border: 1px solid #8b4513;
background: #FFFF00; /* #E1EBF5; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
margin-top: 25px;
}
div#box_kl {
font-size:80%;
float:right;
width:340px;
height: 160px;
margin-left:2px;
border: 1px solid #8b4513;
background: #BFEFFF; /* #E1EBF5; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 25px;
padding-left: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box_gr">
<h1><p align="center"><b>Test1</b></p> </h1>
</div>
<div id="box_kl">
<p>
<h1><p align="center"><b>Test2</b></p> </h1>
</p>
</div>
<div id="box_kl">
<p>
<h1><p align="center"><b>Test3</b></p> </h1>
</p>
</div>
<div id="box_kl">
<p>
<h1><p align="center"><b>Test4</b></p> </h1>
</p>
</div>
</div>
<br style="clear:both">
</body>
</html>
Kann jemand helfen? wie man sieht stehen die Boxen rechts nebeneinander und auch in verkehrter Reihenfolge.
Danke
