HTML div mit height 100prozent vom Body
Hallo,
ich habe ein Problem. mein selbst gebastelter HTML Code will nich so wie ich will.
ich mache html jetzt seit drei Wochen, und habe mir eine Seite gebastelt, die einen grauen Hintergrund hat, und darauf ein roten "<div id="all">" der wiederum den gesamten Inhalt beinhaltet.
mein Code sieht so aus:
Meine Style.css sieht so aus:
ich habe ein Problem. mein selbst gebastelter HTML Code will nich so wie ich will.
ich mache html jetzt seit drei Wochen, und habe mir eine Seite gebastelt, die einen grauen Hintergrund hat, und darauf ein roten "<div id="all">" der wiederum den gesamten Inhalt beinhaltet.
mein Code sieht so aus:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Webseitentitel - Home</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="All">
<div id="title"><b>✯Antons Website✯</b></div>
<h1 style="text-align:center;font-family:;color:#300000;"> Home </h1>
<div id="line"></div>
<p></p>
<div id="MainBorder">
<div id="main">
INHALT
</div>
<div id="main">
INHALT
</div>
</div>
<div id="leftsidemenu">
<p>
ein link.<br>
noch ein link.<br>
und noch einer<br>
der vierte link!<br>
noch einer.<br>
6.<br>
</p>
</div>
<div id="footer">
FOOTER TEXT
</div>
</div>
</body>
</html>
Meine Style.css sieht so aus:
html, body {
background-color: #333333;
padding: 10px;
height: 100%;
}
#All {
Width:800px;
margin:auto;
min-height:100%;
height:100%;
background-color:#b40000;
border-radius:40px;
padding:40px;
overflow: hidden !important;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#title {
color:#300000;
letter-spacing:20px;
font-size:50px;
text-align:center;
}
#main {
color:#300000;
font-size:18px;
width:560px;
font-size:14px;
border-radius:9px;
border:3px solid #BF3B19;
padding:10px;
background-color:#BF3B19;
float:left;
margin-right:9px;
margin-bottom:9px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#leftsidemenu {
width:165px;
height:300px;
padding:10px;
float:left;
background-color:#930000;
border-radius:9px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#MainBorder {
width:560px;
float:left;
margin-right:35px;
}
#footer {
color:#300000;
height:20px;
border:3px solid #BF3B19;
background-color:#BF3B19;
padding:2px;
border-radius:3px;
text-align:center;
position:absolute;
bottom:10px;
left:120px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
/* Lines */
#line {
border:1px solid #30000;
border-radius:2px
}
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 204419
Url: https://administrator.de/contentid/204419
Ausgedruckt am: 05.11.2024 um 14:11 Uhr
5 Kommentare
Neuester Kommentar
Hallo,
siehe mal bitte hier:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html
Damit sollte deine Frage beantwortet sein
Gruß,
Florian.
siehe mal bitte hier:
http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html
Damit sollte deine Frage beantwortet sein
Gruß,
Florian.