PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Shop
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
DIVs mit CSS platzieren
Beitrag
<blockquote data-quote="dn3d_fanboy" data-source="post: 2408370" data-attributes="member: 547472"><p>Hallo,</p><p></p><p>ich möchte zwei DIVs hintereinander platzieren, wie in diesem Screenshot hier:</p><p> </p><p></p><p>Der Hintergrund ist 100% weit. Also habe ich Layer 1 mit margin:0 auto; zentriert und ihm den z-index: 25; zugewiesen.</p><p></p><p>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. </p><p>Aber wie bekomme ich es zentriert PLUS zusätzlicher Pixelangabe nach Links?</p><p></p><p>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.</p><p>Vielleicht habe ich gerade aber auch nur ein Brett vorm Kopp...</p><p></p><p>Hier noch das CSS:</p><p></p><p>[code=CSS]* {</p><p> padding: 0;</p><p> margin: 0;</p><p> border: none;</p><p> outline: none;</p><p> list-style: none;</p><p> border: none;</p><p>}</p><p></p><p>html, body {</p><p> min-width: 100%;</p><p> min-height: 100%;</p><p>}</p><p></p><p>body {font-size: 100%;</p><p> background: #eee url(images/bg.jpg) fixed;</p><p> -webkit-background-size: cover;</p><p> -moz-background-size: cover;</p><p> -o-background-size: cover;</p><p> background-size: cover;}</p><p> </p><p>/* --- Header --- */</p><p></p><p></p><p>/* --- Main Menu --- */</p><p></p><p></p><p></p><p>/* --- Startscreen --- */</p><p></p><p>.start-wrapper {margin: 0 auto;</p><p> width: 800px;</p><p> height: 800px;}</p><p></p><p>.logo-round {position: relative;</p><p> width: 300px;</p><p> height: 300px;</p><p> border-radius: 157px;</p><p> border: 7px solid #ffc600;</p><p> background: #282828; /* Old browsers */</p><p> background: -moz-linear-gradient(top, #282828 0%, #000000 100%); /* FF3.6+ */</p><p> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,#000000)); /* Chrome,Safari4+ */</p><p> background: -webkit-linear-gradient(top, #282828 0%,#000000 100%); /* Chrome10+,Safari5.1+ */</p><p> background: -o-linear-gradient(top, #282828 0%,#000000 100%); /* Opera 11.10+ */</p><p> background: -ms-linear-gradient(top, #282828 0%,#000000 100%); /* IE10+ */</p><p> background: linear-gradient(to bottom, #282828 0%,#000000 100%); /* W3C */</p><p> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000',GradientType=0 ); /* IE6-9 */</p><p> margin: 200px auto 0 auto;</p><p> -webkit-box-shadow: 0 8px 0 0 rgba(0,0,0,0.6);</p><p> box-shadow: 0 8px 0 0 rgba(0,0,0,0.6);</p><p> z-index: 25;</p><p> }</p><p> </p><p>.logo-round img {margin: 75px 0 0 3px;</p><p> width: 294px;</p><p> height: 120px;}</p><p> </p><p>.start-info-1 {position: relative;</p><p> width: 160px;</p><p> height: 160px;</p><p> border: 5px solid #5c5c5c;</p><p> border-radius: 85px;</p><p> margin: -370px 0 0 470px;</p><p> background: #dead03;</p><p> -webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,0.5);</p><p> box-shadow: 0 5px 0 0 rgba(0,0,0,0.5);</p><p> z-index: 20;</p><p> }</p><p> </p><p>.start-info-1 h2 {font-family: "Roboto Condensed", sans-serif;</p><p> font-weight: 400;</p><p> font-size: 32px;</p><p> color: rgba(255,255,255,0.45);</p><p> /*text-shadow: 1px 1px 0 rgba(255,255,255,0.2);*/</p><p> margin: 50px 0 0 15px;}</p><p> </p><p>.home {position: relative;</p><p> width: 100%;</p><p> height: 500px;</p><p> background: #e2af00;</p><p> margin: 0 0 30px 0;</p><p> padding: 15px 20px;</p><p> -webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,0.6);</p><p> box-shadow: 0 5px 0 0 rgba(0,0,0,0.6);</p><p> }[/code]</p><p></p><p>Und der HTML-Code:</p><p></p><p>[html]<body></p><p> <div class="start-wrapper"></p><p> <div class="logo-round"></p><p> <img src="images/logo.png" alt="Logo" /></p><p> </div></p><p> <div class="start-info-1"></p><p> <h2>Bla Bla</h2></p><p> </div></p><p> </div></p><p> <div class="home"></p><p> <h1>Home</h1></p><p> <p></p></p><p> </div></p><p></body>[/html]</p><p></p><p>Ich hoffe mir kann da jemand einen entscheidenden Tipp geben, ich stehe gerade echt auf dem Schlauch und komme nicht dahinter.</p><p></p><p>Besten Dank im Voraus.</p></blockquote><p></p>
[QUOTE="dn3d_fanboy, post: 2408370, member: 547472"] 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: [code=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); }[/code] 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>[/html] 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. [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Der grüne Frosch hüpft über die Hügel an den Bäumen vorbei in die Höhle. Bitte nenne das zweite Wort!
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
DIVs mit CSS platzieren
Oben