CSS Frage zum Webseitenlayout

Col.Maybourne · 17. Mai 2013

Ich möchte eine Webseite erstellen mit folgendem Layout:

Wie man sieht, befinden sich zwei Buttons ebenenmäßig gesehen über dem Hintergrundbild. Die (Mausover-) Buttons sollen aber bei Änderung der Browserfenstergröße sich nicht in der Position ändern (relativ zum Hintergrundbild gesehen).
Die Frage ist nur welche Layout-Technik ich verwenden soll.

Über Tipps, Stichwörter und Anregungen würde ich mich sehr freuen!

Reglohln · 17. Mai 2013

Die Buttons sollten sich auch so verhalten, wie du es beschrieben hast, ohne, dass man etwas spezielles beachten muss.

Hast du denn schonmal versucht, das Layout zu erstellen? Wenn ja, dann poste das Beispiel doch mal (vllt. auch als Link, wo man das Problem sehen kann). So kann man viel besser helfen. Ansonsten lauffähigen Code posten.

Grüße

Gajel · 17. Mai 2013

An dem "Layout" ist absolut nix besonderes. Daher musst auch nicht wirklich irgend was beachten. Aber anhand deines bildes kann man natürlich auch nicht dein ganzes layout/vorhaben erahnen.

omaliesschen · 17. Mai 2013

Div um die Buttons. Position: absolute;bottom:0;text-align:center etc. evtl. mit margin den Seitenabstand regulieren. Padding verfälscht die Breite.

Das Elternelement des Buttonwrappers mit position:relative; deklarieren.

Bisumaruku · 17. Mai 2013

Code:

<html>
<body style="background:#000000;">

<div style="width:500px; position:absolute; left:50%; margin:200px 0px 0px -250px; background:#555555 url(bg.png); border:#000000 solid 1px; border-radius: 10px;">
	<div style="width:200px; height:50px; text-align:center; margin:100px 24px 10px 24px; background:#AAAAAA; border:#000000 solid 1px; border-radius:10px; float:left;">BUTTON 1</div>
	<div style="width:200px; height:50px; text-align:center; margin:100px 24px 10px 24px; background:#AAAAAA; border:#000000 solid 1px; border-radius:10px; float:left;">BUTTON 2</div>
</div>


</body>
</html>

Reglohln · 17. Mai 2013

Wenn er Buttons nutzt, könnte es auch durchaus ein Formular sein und man könnte sich das <div> ersparen. Semantik kann man hier noch nicht wirklich betrachten, weil sämtliche Infos fehlen.

Col.Maybourne · 17. Mai 2013

Hat sich dank Braumeister erledigt - soll wirklich nur eine ganz einfache Webseite sein, bei der die zwei Buttons als einfach Links dienen.

Vielen Dank nochmal an alle!

Bisumaruku · 17. Mai 2013

Kein Problem!

Reglohln · 17. Mai 2013

Das Markup ist aber alles andere als passend. Buttons werden mittels <div> generiert, obwohl es sich ja um Links handeln soll (ok - das sollte nur der Veranschaulichung dienen, aber dennoch). Dann braucht man die inneren <div>s garnicht.

@TE: Befasse dich ordentlich mit Markup, damit man nicht alles nur mit <div>s zupflastert.

Gajel · 17. Mai 2013

braumeister schrieb:

Code:

<html>
<body style="background:#000000;">

<div style="width:500px; position:absolute; left:50%; margin:200px 0px 0px -250px; background:#555555 url(bg.png); border:#000000 solid 1px; border-radius: 10px;">
	<div style="width:200px; height:50px; text-align:center; margin:100px 24px 10px 24px; background:#AAAAAA; border:#000000 solid 1px; border-radius:10px; float:left;">BUTTON 1</div>
	<div style="width:200px; height:50px; text-align:center; margin:100px 24px 10px 24px; background:#AAAAAA; border:#000000 solid 1px; border-radius:10px; float:left;">BUTTON 2</div>
</div>


</body>
</html>

Sorry aber das ist alles andere als gut, schön und semantisch.

omaliesschen · 17. Mai 2013

Code:

<style type="text/css">
.parent, .parentparent{position: relative;}

.parentparent, .buttonwrapper > button
{border-radius: 4px 4px 4px 4px;}

.buttonwrapper > button:hover, .parentparent
{border: 1px solid #000;}

.parentparent {
    background: none repeat scroll 0 0 #111111;
    box-shadow: 0 0 5px #FFFFFF, 0 0 3px #FFFFFF inset;
    height: 300px;
    margin: 0 auto 100px;
    padding: 10px 15px;
    width: 900px;
}
.parent {
    background: none repeat scroll 0 0 #222222;
    display: block;
    height: 280px;
    margin: 8px 0;
    width: 100%;
}
.buttonwrapper {
    bottom: 20px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.buttonwrapper > button {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #4F4F4F;
    font-weight: bold;
    padding: 10px 0;
    width: 190px;
}
.buttonwrapper > button:hover {
    box-shadow: 0 0 5px #aaa;
}

</style>

<html>
<body style="background:#000000;">

  <div class="parentparent">

    <div class="parent">

      <div class="buttonwrapper">

        <button type="button" style="float: left; margin-left: 250px;">button1</button>
        <button type="button" style="float: right; margin-right: 250px;">button2</button>

      </div>

    </div>  

  </div>   

</body>
</html>

Bisumaruku · 17. Mai 2013

Gajel schrieb:
Sorry aber das ist alles andere als gut, schön und semantisch.

Es ist ein Lösungsweg der ihm zeigen soll mit welchen Mitteln es gehen kann! Dein Kommentar ist eigentlich gar nix außer gemeckere, also pack dir mal an die eigene Nase.

Optimal arbeitet man mit class oder id und mit nem CSS im Header oder per externer Datei. Für die Info die er uns gegeben hat ist das die einfachste und schnellste Umsetzung.

Blackbenji · 17. Mai 2013

es ist also besser lieber etwas falsch und schnell zu machen als etwas richtig zu machen?

omaliesschen · 17. Mai 2013

@ Braumeister,

ich muss mich dem Vorredner anschließen. Die Zeilen sind weder nützlich noch akzeptabel.

Da antwortet man besser gar nicht als Neulinge mit solchen Beispielen auf den falschen Weg zu bringen.

Um deine Vorgabe auszubügeln hab ich meine eingestellt. Eigentlich wollte ich hierzu gar nix schreiben da HTML/CSS und so..

EDIT: Und auch mein Beispiel ist für den Zweck nicht optimal.

Reglohln · 17. Mai 2013

@oma: wobei ich aber auch Buttons ohne Formular ziemlich unnütz finde

Er will ja eig nur Links haben, also wirds wohl auf <a> hinauslaufen.

@braumeister: Und so lernen es die Anfänger halt auch gleich falsch. Klar ist das auch so machbar, aber schön ist anders und warum nicht gleich zeigen, wie man es vernünftig macht

Bisumaruku · 17. Mai 2013

Was ist an den Zeilen nicht nützlich?

Es erfüllt seinen Zweck für das was er haben wollte und ist NICHT falsch. Es geht immer besser, aber es ging nicht darum hier nen HowTo zu schreiben oder dem TE einen HTML/CSS Grundkurs zu verpassen. Er wollte ein Ergebnis was zu seinem Bild passt und das habe ich ihm netterweise geliefert. Und es ist auch noch halbwegs verständlich welches Style wozu gehört und was davon was genau macht.

Aber wenn ständig überall nur so Nörgeler wie ihr hier rumlaufen und man dann nix mehr sagen darf weil es nicht perfekt ist, dann kann man das Forum auch gleich dicht machen.

Weiterbilden muss er sich schon selber. Gibt genug Seiten mit Tutorials und Beispielen.

omaliesschen · 17. Mai 2013

Und auch mein Beispiel ist für den Zweck nicht optimal.

[...]

Reglohln · 18. Mai 2013

braumeister schrieb:
Es erfüllt seinen Zweck für das was er haben wollte und ist NICHT falsch.

Doch - es ist falsch. Natürlich interpretiert der Browser es als richtig und auch wird es standardkonform sein. Ändert aber nichts daran, dass die Semantik für den Allerwertesten ist.

Er wollte ein Ergebnis was zu seinem Bild passt und das habe ich ihm netterweise geliefert.

Woher weißt du, in welchem Zusammenhang er es nutzen will? DANACH richtig sich die Semantik. Zudem möchte er Links nutzen. Du hast die Buttons/Links garnicht im Code abgebildet, sondern nur ein "Bild" mit CSS/HTML gemalt, obwohl die Buttons/Links funktionabel sein müssen.

Weiterbilden muss er sich schon selber.

Richtig! Aber dann muss man es dem TE so sagen und nur allgemeine Hilfestellung geben und erklären, wo man die entsprechenden Infos findet. So geht er es von der ersten Sekunde falsch an, was später zu viel größeren Problemen führt.

Suche

CSS Frage zum Webseitenlayout

Col.Maybourne

Lt. Junior Grade

Reglohln

Captain

Gajel

Banned

omaliesschen

Gast

Bisumaruku

Lt. Commander

Reglohln

Captain

Col.Maybourne

Lt. Junior Grade

Bisumaruku

Lt. Commander

Reglohln

Captain

Gajel

Banned

omaliesschen

Gast

Bisumaruku

Lt. Commander

Blackbenji

Lieutenant

omaliesschen

Gast

Reglohln

Captain

Bisumaruku

Lt. Commander

omaliesschen

Gast

Reglohln

Captain

Ähnliche Themen