Hallo,
ich möchte zwei DIVs hintereinander platzieren, wie in diesem Screenshot hier:
Der Hintergrund ist 100% weit. Also habe ich Layer 1 mit margin:0 auto; zentriert und ihm den z-index: 25; zugewiesen.
Jetzt möchte ich Layer zwei dahinter platzieren, wie im Screenshot. Ich gebe ihm also einen niedrigeren Layer und verschiebe ihn mit negativem Margin nach oben.
Aber wie bekomme ich es zentriert PLUS zusätzlicher Pixelangabe nach Links?
Im Moment behelfe ich mir mit einem wrapper, den ich um die beiden DIVS herum habe, aber vielleicht gibt es ja auch eine einfachere Lösung.
Vielleicht habe ich gerade aber auch nur ein Brett vorm Kopp...
Hier noch das CSS:
Und der HTML-Code:
Ich hoffe mir kann da jemand einen entscheidenden Tipp geben, ich stehe gerade echt auf dem Schlauch und komme nicht dahinter.
Besten Dank im Voraus.
ich möchte zwei DIVs hintereinander platzieren, wie in diesem Screenshot hier:
Der Hintergrund ist 100% weit. Also habe ich Layer 1 mit margin:0 auto; zentriert und ihm den z-index: 25; zugewiesen.
Jetzt möchte ich Layer zwei dahinter platzieren, wie im Screenshot. Ich gebe ihm also einen niedrigeren Layer und verschiebe ihn mit negativem Margin nach oben.
Aber wie bekomme ich es zentriert PLUS zusätzlicher Pixelangabe nach Links?
Im Moment behelfe ich mir mit einem wrapper, den ich um die beiden DIVS herum habe, aber vielleicht gibt es ja auch eine einfachere Lösung.
Vielleicht habe ich gerade aber auch nur ein Brett vorm Kopp...
Hier noch das CSS:
CSS:
* {
padding: 0;
margin: 0;
border: none;
outline: none;
list-style: none;
border: none;
}
html, body {
min-width: 100%;
min-height: 100%;
}
body {font-size: 100%;
background: #eee url(images/bg.jpg) fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
/* --- Header --- */
/* --- Main Menu --- */
/* --- Startscreen --- */
.start-wrapper {margin: 0 auto;
width: 800px;
height: 800px;}
.logo-round {position: relative;
width: 300px;
height: 300px;
border-radius: 157px;
border: 7px solid #ffc600;
background: #282828; /* Old browsers */
background: -moz-linear-gradient(top, #282828 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #282828 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #282828 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #282828 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #282828 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
margin: 200px auto 0 auto;
-webkit-box-shadow: 0 8px 0 0 rgba(0,0,0,0.6);
box-shadow: 0 8px 0 0 rgba(0,0,0,0.6);
z-index: 25;
}
.logo-round img {margin: 75px 0 0 3px;
width: 294px;
height: 120px;}
.start-info-1 {position: relative;
width: 160px;
height: 160px;
border: 5px solid #5c5c5c;
border-radius: 85px;
margin: -370px 0 0 470px;
background: #dead03;
-webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 5px 0 0 rgba(0,0,0,0.5);
z-index: 20;
}
.start-info-1 h2 {font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-size: 32px;
color: rgba(255,255,255,0.45);
/*text-shadow: 1px 1px 0 rgba(255,255,255,0.2);*/
margin: 50px 0 0 15px;}
.home {position: relative;
width: 100%;
height: 500px;
background: #e2af00;
margin: 0 0 30px 0;
padding: 15px 20px;
-webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,0.6);
box-shadow: 0 5px 0 0 rgba(0,0,0,0.6);
}Und der HTML-Code:
HTML:
<body>
<div class="start-wrapper">
<div class="logo-round">
<img src="images/logo.png" alt="Logo" />
</div>
<div class="start-info-1">
<h2>Bla Bla</h2>
</div>
</div>
<div class="home">
<h1>Home</h1>
<p></p>
</div>
</body>Ich hoffe mir kann da jemand einen entscheidenden Tipp geben, ich stehe gerade echt auf dem Schlauch und komme nicht dahinter.
Besten Dank im Voraus.
