Anfängerfrage bzgl Webseitenlayout

[spires]

Tag zusammen, ich bin html-Laie und habe für eine kleine Website die ich gestalten möchte ein bestimmtes Layout im Kopf das ich mit meinen begrenzten html-Fertigkeiten aber nicht allein hinbekomme.

Also simpel formuliert möchte ich dass meine Startseite in 2 Bereiche aufgeteilt ist. Bereich A soll dabei (von links nach rechts) 70% der Seite abdecken, Bereich B die restlichen 30%.

Ich möchte dass sich sämtlicher Inhalt der Startseite in Bereich A befindet/abspielt und Bereich B nicht "betritt". In Bereich B möchte ich nichts haben außer einem Hintergrundbild. Ich weiß dass ich dies mit Frames machen könnte, wollte aber fragen ob es evtl auch ohne geht.

Hier dazu noch ein absolut spektakuläres Piktogramm:
___________
|      |   |
|   A  | B |
|______|___|

...und das wäre dann auch erstmal schon alles.

[Der Martin]

Hallo,

Ich möchte dass sich sämtlicher Inhalt der Startseite in Bereich A befindet/abspielt und Bereich B nicht "betritt". In Bereich B möchte ich nichts haben außer einem Hintergrundbild. Ich weiß dass ich dies mit Frames machen könnte, wollte aber fragen ob es evtl auch ohne geht.

der einfachste Ansatz wäre vermutlich, das body-Element mit margin-right:30%; auf Distanz vom rechten Rand zu halten, und das gewünschte Hintergrundbild dann dem html-Element zuzuweisen (eventuell background-position verwenden).

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

der einfachste Ansatz wäre vermutlich, das body-Element mit margin-right:30%; auf Distanz vom rechten Rand zu halten, und das gewünschte Hintergrundbild dann dem html-Element zuzuweisen (eventuell background-position verwenden).

Das ganze sollte man aber in ein Media-Query tun, damit bei schmalen Viewports (bspw. Smartphones) nicht noch 30% der ohnehin schon knappen Anzeigefläche vergeudet werden. Und damit das dann nicht benötigte Hintergrundbild nicht geladen wird.

Wenn der body mindestens 21em breit sein sollte:

@media screen and (min-width: 30em)  
{  
  html { background: url(…) right no-repeat }  
  body { margin-right: 30% }  
}

Dass bei Browsern, die keine Media-Queries mit min-width können, kein Hintergrundbild kommt, kann man verschmerzen?

Ansonsten

html { background: url(…) right no-repeat }  
body { margin-right: 30% }  
  
@media screen and (min-width: 0em)  
{  
  html { background: none }  
  body { margin-right: 0 /* oder anderen kleinen Wert */ }  
}  
  
@media screen and (min-width: 30em)  
{  
  html { background: url(…) right no-repeat }  
  body { margin-right: 30% }  
}

oder

html { background: url(…) right no-repeat }  
body { margin-right: 30% }  
  
@media screen and (max-width: 0em)  
{  
  html { background: none }  
  body { margin-right: 0 /* oder anderen kleinen Wert */ }  
}

Qapla'

PS. 70% können für Fließtext zu breit sein. Eine Zeilenlänge sollte 45–90 Zeichen umfassen, nicht mehr.

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Im letzten Beispiel muss es beim Breakpoint natäurlich 30em statt 0 heißen:

html { background: url(…) right no-repeat }  
body { margin-right: 30% }  
  
@media screen and (max-width: 30em)  
{  
  html { background: none }  
  body { margin-right: 0 /* oder anderen kleinen Wert */ }  
}

Qapla'

[spires]

Danke für die Codes, nur habe ich jetzt nicht wirklich die Ahnung wie und wo ich die in meinen Quelltext schreiben soll.

wenn mir jemand noch anfängerfreundlich hinschreiben könnte wie das ganze innerhalb meines html dokumentes auszusehen hat, das wäre nett.

[Gunnar Bittersmann]

@@spires:

nuqneH

wenn mir jemand noch anfängerfreundlich hinschreiben könnte

Die http://de.selfhtml.org/@title=SELFHTML-Doku hat das getan.

wie das ganze innerhalb meines html dokumentes auszusehen hat

Gar nicht. Darstellung ist http://de.selfhtml.org/css/index.htm@title=CSS-Code.

Qapla'

[spires]

Gibt es eine Möglichkeit das was ich vorhabe auch in reinem html zu programmieren? Mit den CSS Codes bekomme ich nichts hin.

Mein Hintergrundbild in Bereich B soll sich z.B. wiederholen, aber wenn ich die Eigenschaft in "repeat" umändere bedeckt es die gesamte Seite. Die Hintergrundfarbe von Bereich A kann ich auch mit der Zeile background-color: nicht verändern, und wWenn ich normalen Text in den Quelltext schreibe taucht der garnicht auf. Ich sitze ziemlich ratlos vor diesem CSS Zeug.

[Melvin Cowznofski]

Hallo spires!

Gibt es eine Möglichkeit das was ich vorhabe auch in reinem html zu programmieren? Mit den CSS Codes bekomme ich nichts hin.

"bekomme ich nichts hin" ist leider keine Problembeschreibung, wo Dir hier weitergeholfen werden wird.

Das "Dieses Forum versteht sich sowohl als Ergänzung zum SELFHTML-Wiki als auch zur statischen Dokumentation SELFHTML" am Anfang der Forumsseite bedeutet, dass Du zuerst mal, so wie es schon Gunnar geschrieben hat, Dich mit dem Wiki bzw. der Doku auseinandersetzen sollst. Und mit Hilfe der <http://de.selfhtml.org/css/eigenschaften/index.htm@title=CSS Kapitel> ist es nicht sehr schwer, seinem html-Gerüst ein passendes Layout zu geben.

Wenn Du dann immer noch Probleme hast, dann stelle die Seite online und definiere genau, was "nicht funktioniert" bzw. sich nicht Deinen Erwartungen entsprechend verhält. Dann wird Dir hier sicher weitergeholfen werden, solange, bis alle Probleme gelöst sind.

Aber sich hinsetzen, "geht nicht" sagen und fertigen Code verlangen ist hier nicht der goldene Weg.

Mit lieben Grüßen

Melvin Cowznofski

[molily]

Hallo,

Gibt es eine Möglichkeit das was ich vorhabe auch in reinem html zu programmieren?

Das ginge über Umwege schon, ist aber nicht Sinn der Sache. CSS ist schon das richtige Werkzeug dafür.

Mit den CSS Codes bekomme ich nichts hin.

Kein Problem, wir helfen dir schon dabei.

Mein Hintergrundbild in Bereich B soll sich z.B. wiederholen, aber wenn ich die Eigenschaft in "repeat" umändere bedeckt es die gesamte Seite. Die Hintergrundfarbe von Bereich A kann ich auch mit der Zeile background-color: nicht verändern, und wWenn ich normalen Text in den Quelltext schreibe taucht der garnicht auf.

Das klingt nach einem relativ trivialen Fehler. Poste bitte einmal den Quellcode, den du schon geschrieben hast, oder lade ihn irgendwo hoch, damit wir uns das ansehen und konkrete Tipps geben können.

Siehe auch mein Beispiel.

Grüße,
Mathias

[molily]

Hallo,

Ich möchte dass sich sämtlicher Inhalt der Startseite in Bereich A befindet/abspielt und Bereich B nicht "betritt". In Bereich B möchte ich nichts haben außer einem Hintergrundbild.

Martins Vorschlag habe ich einmal beispielhaft umgesetzt:
http://codepen.io/molily/pen/qtBiy

Zusätzlich zu Martins Vorschlag: Das lässt sich auch mit position: absolute oder float (http://de.selfhtml.org/css/layouts/, http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/) umsetzen.

Um CSS wirst du da nicht herumkommen – CSS ist die Sprache, mit der HTML-Dokumente formatiert werden.

Grüße,
Mathias