G
Gelöschtes Mitglied 633957
Guest
Hallo ihr Webstyler,
zum Start des neuen Jahres, habe ich mir überlegt, ist es genau der richtige Zeitpunkt mit dem Coden der eigenen Website zu beginnen - und kaum bin ich ein paar Stunden dabei, stoße ich auch schon auf das erste Problem...
Durch das Nutzen von float:right; in dem #body_box, wächst das Cropper-Div (hellgrauer Hintergrund mit 1px Rahmen) nicht mit.
Ich vermute, ich denke irgendwie in die falsche Richtung, denn das Div-Element ist nun wirklich gut dokumentiert, aber ich bin nicht in der Lage eine Lösung zu finden - und ich habe gesucht; auch hier!
Hier sind meine entschlackten Dokumente:
So schaut die Ausgabe aus:
Über einen Lösungsvorschlag oder wenigsten einen Schubser in die richtige Richtung wäre ich sehr dankbar.
Was meine CSS-Skills anbelangt, so gibt es doch eindeutig, massive Defizite!
Ziel ist es, dass der hellgraue Hintergrund (mein so genannter Cropper-Div) alle enthaltenen Div's umschließt und somit die grüne Box nicht über den Rand hinaus läuft!
Greetz, Ty
Edit: Die Farben sind schlecht gewählt, fällt mir gerade auf! ROT ist super, GRÜN ist das Problem!
zum Start des neuen Jahres, habe ich mir überlegt, ist es genau der richtige Zeitpunkt mit dem Coden der eigenen Website zu beginnen - und kaum bin ich ein paar Stunden dabei, stoße ich auch schon auf das erste Problem...
Durch das Nutzen von float:right; in dem #body_box, wächst das Cropper-Div (hellgrauer Hintergrund mit 1px Rahmen) nicht mit.
Ich vermute, ich denke irgendwie in die falsche Richtung, denn das Div-Element ist nun wirklich gut dokumentiert, aber ich bin nicht in der Lage eine Lösung zu finden - und ich habe gesucht; auch hier!
Hier sind meine entschlackten Dokumente:
CSS:
/* Das Problemkind */
#body_box {
float:right;
width:100%;
max-width:240px;
padding:0px 5px 5px 5px;
background-color:green;
}
#body_content {
width:100%;
max-width:900px;
padding:0px 5px 5px 5px;
background-color:red;
}
/* Ende des Problemkindes */
#cropper {
margin:20px auto;
padding:0;
position:relative;
width:100%;
max-width:1140px;
border:1px solid #e5e8eb;
background-color: #e5e8eb;
}
* {
padding:0;
margin:0;
}
body {
background-color: #0b2946;
color:#2a2b2f;
display:block;
margin:0;
padding:0;
font-family:Lucida Console, Trebuchet MS, Helvetica, Verdana, Geneva , MS Sans-Serif, sans-serif;
font-size:16px;
line-height: 22px;
text-decoration: none;
}
img {
max-width:100%;
}
.slideshow {
width:100%;
max-width:1140px;
display:block;
position:relative;
margin:0px auto;
overflow:hidden;
}
div.navigate {
width:725px;
height:25px;
margin:10px auto;
text-decoration:none;
max-width:1140px;
}
hr.style_fade {
border:0;
height:1px;
background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="problemkind.css">
</head>
<body>
<div id="cropper">
<!-- Image Slider -->
<div class="slideshow">
Hier ist ein Image-Slider
</div>
<!-- Navigation -->
<div class="navigate">
Navigation wäre dann hier
</div>
<BR><BR>
<hr class="style_fade">
<BR>
<!-- HIER WIRD ES PROBLEMATISCH -->
<div id="body_box">
Hier<BR>soll doch bitte<BR>der Div-Container "cropper"<BR>mit diesem Div-Element<BR>auch <B>mitwachsen</B>!
</div>
<div id="body_content">
Inhalte der Website<BR>
Der eigentliche Body-Bereich!<BR><BR>
Das Cropper-Div-Element wächst mit!
</div>
</div> <!-- End cropper -->
</body>
</html>So schaut die Ausgabe aus:
Über einen Lösungsvorschlag oder wenigsten einen Schubser in die richtige Richtung wäre ich sehr dankbar.
Was meine CSS-Skills anbelangt, so gibt es doch eindeutig, massive Defizite!
Ziel ist es, dass der hellgraue Hintergrund (mein so genannter Cropper-Div) alle enthaltenen Div's umschließt und somit die grüne Box nicht über den Rand hinaus läuft!
Greetz, Ty
Edit: Die Farben sind schlecht gewählt, fällt mir gerade auf! ROT ist super, GRÜN ist das Problem!
