nicht angemeldet
links und rechts balken bündig an wrapper
hallo liebe leute,
ich bau gerade meine erste website und komm jetzt nicht mehr um ein aufgeschobenes problem drumrum.
die wesentlichen elemente sind:
header (grau)
footer (orange)
senkrechte balken bzw. shadow_left, shadow_right (grün)
so sieht es zur zeit aus:
[url=http://www.fotos-hochladen.net][img]http://img5.fotos-hochladen.net/uploads/balken1j5ayr3edq7.jpg[/img][/url]
die grünen balken (shadow_left und shadow_right) sollen aber bündig links und rechts am header bzw. footer anliegen. so wie hier:
[url=http://www.fotos-hochladen.net][img]http://img5.fotos-hochladen.net/uploads/balken2k1432ixful.jpg[/img][/url]
die css sieht so aus:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
margin-right:auto;
margin-left:auto;
width:1060px;
}
#shadow_left {
/* background-image:url(Slices/Bilder/PORTFOLIO_LAYOUT_2_03-03.jpg); */
background-repeat:repeat;
width: 50px;
min-height:100%;
float: left;
background-color:#0C0;
}
#shadow_right {
/* background-image:url(Slices/Bilder/PORTFOLIO_LAYOUT_2_05.jpg); */
background-repeat:repeat;
width: 50px;
min-height:100%;
float: right;
background-color:#0C0;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
und die html so:
</head>
<body>
<div id="shadow_left"> </div>
<div id="shadow_right"> </div>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
ich hab gar keine idee mehr wie man die beiden grünen-shadowbalken bündig an den wrapper bekommt.
ich würd mich freuen wenn einer von euch eine lösung parat hat.
vielen lieben dank schonmal.
-
Hallo,
ich würde das in etwa so aufbauen, in der Hoffnung dich richtig verstanden zu haben (Achtung, es ist kein wirkliches HTML5 mit <header> usw.. das solltest du aber selber hinbekommen. Auch verwende ich hier px was man eigentlich nicht mehr machen sollte.
* { box-sizing:border-box; } body { width:980px; height:100%; background-color:#efefef; margin:0 auto; border-left: 5px solid #F00; border-right: 5px solid #F00; } #header { width:100%; min-height:100px; background-color:#000000; } #contetn { width:100%; min-height:400px; background-color:#090; } #footer { width:100%; min-height:100px; background-color:#300; }<body> <div id="header"></div> <div id="contetn"></div> <div id="footer"></div> </body> -
Hallo,
du solltest auf die Divitis verzichten und HMTL5 / CSS3 verwenden.
Die beiden senkrechten Balken solltest du als Rahmen (border) erstellen. Das könnte dann so aussehen:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_11_18_joniversal_01_layout_gruener_rand.html
Gruss
MrMurphy