zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout per HTML + CSS umsetzbar?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2012, 13:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2011
Beiträge: 2
Colt Sievers befindet sich auf einem aufstrebenden Ast
Beitrag Layout per HTML + CSS umsetzbar?

Hallo,

ich möchte folgendes Seitenlayout bauen:



Die Seite besteht aus drei Bereichen, alle sollen auf der Oberfläche fixiert bleiben. Der Header und Col #2 wachsen flexibel bis zur definierten Maximalbreite an. Col #1 besitzt eine fixe Breite. Falls viele Seiteninhalte vorhanden sind, bieten Col #1 und #2 eine vertikale Scrollbar an.

Kann mir jemand sagen, ob sich dieses Layout ohne JavaScript nur auf der Basis von HTML und CSS umsetzen lässt? Ich würde meine CSS-Kenntnisse als gut durchschnittlich bezeichnen. Leider habe ich im Bereich flexible Layouts nur wenig Erfahrung.

Ach ja, der Google Reader hat den gleichen Seitenaufbau. Allerdings wird dort JS eingesetzt.

Ich sage schon einmal Danke, Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2012, 19:28
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Colt Sievers Beitrag anzeigen
Kann mir jemand sagen, ob sich dieses Layout ohne JavaScript nur auf der Basis von HTML und CSS umsetzen lässt?
Ja, das kann ich. - Und ja, es ist möglich.

Ach, du willst auch noch ein paar Tipps?

Zitat:
Zitat von Colt Sievers Beitrag anzeigen
Ich würde meine CSS-Kenntnisse als gut durchschnittlich bezeichnen. Leider habe ich im Bereich flexible Layouts nur wenig Erfahrung.
Obiges Layout is nicht wirklich flexibel. Zudem wirst du auf mobilen Geräten auf Schwierigkeiten Treffen, weil der Aufbau relativ starr ist.
Dass sich ein (Block-)Element der Breite des Elternelements anpasst ist Standard (das solltest du wissen). Das feststehende Verhalten der anderen Elemente erinnert zu sehr an Frames. Aber wenns denn sein muss...

HTML-Code:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>3-Teile-Layout</title>
 <style>
html, body { margin: 0; padding: 0; height: 100%; }
body { position: relative; margin-left: 15em; }
#header { background: pink; position: absolute; top: 0; left: -15em; right: 0; height: 5em; }
#nav { background: lightblue; position: absolute; top: 5em; left: -15em; bottom: 0; width: 15em; overflow: auto; }
#inhalt { background: lightgreen; position: absolute; top: 5em; left: 0; right: 0; bottom: 0; overflow: auto; }
 </style>
</head>
<body>
<div id="header">
 <h1>3-Teile-Layout</h1>
</div>
<div id="nav">
 <h2>Übersicht</h2>
</div>
<div id="inhalt">
 <h2>Inhalt</h2>
 <p>Bla.</p>
 <p>Bla.</p>
 <p>Bla.</p>
 <p>Bla.</p>
 <p>Bla.</p>
 <p>Bla.</p>
</div>
</body>
</html>
Und jetzt zur Hausaufgabe für dich zum Lernen:
  • Welche Aufgabe hat das body-Element?
  • Warum passt sich sowohl der Header als auch der Inhaltsbereich der Breite des Browserfensters an?
  • Worauf bezieht sich 100% beim html-Element und warum ist diese Angabe notwendig?
  • Warum sind die bei 'left' angegebenen Werte negativ?
Wenn du all diese Fragen beantworten kannst, werden sich keine CSS-Kenntnisse sehr verbessert haben. Viel Erfolg.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Geändert von gato (20.03.2012 um 19:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.03.2012, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2011
Beiträge: 2
Colt Sievers befindet sich auf einem aufstrebenden Ast
Standard

Hey gato,

vielen Dank für deine Mühe! Das funktioniert super und scheint auch in älteren Browsern keine Probleme zu machen. Ich habe die Hausaufgaben gemacht - sie waren eigentlich gar nicht so schwer...

Ich frage mich allerdings trotzdem, wie stabil diese Lösung ist. Warum setzen viele Webanwendungen, welche die gleiche Seitenstruktur nutzen (bspw. der bereits erwähnte Google Reader, diverse Groupware-Lösungen), nicht diese Variante ohne JavaScript ein? Bei der Analyse des Codes einiger Seiten fiel mir auf, dass die Anpassungen an den Viewport immer mit JS gemacht wurden. Warum?

Zum Stichwort mobile Geräte: Das ist momentan noch kein Thema. Falls es eines wird, würde ich eine spezielle Version erstellen.

Grüße
Mit Zitat antworten
  #4 (permalink)  
Alt 21.03.2012, 18:48
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Colt Sievers Beitrag anzeigen
Warum setzen viele Webanwendungen, welche die gleiche Seitenstruktur nutzen (bspw. der bereits erwähnte Google Reader, diverse Groupware-Lösungen), nicht diese Variante ohne JavaScript ein? Bei der Analyse des Codes einiger Seiten fiel mir auf, dass die Anpassungen an den Viewport immer mit JS gemacht wurden. Warum?
Vermutlich, weil es einfacher ist.

Obiges Beispiel ist schnell erstellt, aber wenn du hier einen Rahmen, dort einen Abstand haben möchtest, kann sich das Box-Modell schon mal in dern Hintern kneifen.

Andere Gründe sind mir nicht bekannt. Ich arbeite aber auch so gut wie nie mit derartigen Layouts.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Little Boxes Teil 1: Crashkurs zu HTML und CSS online lesen pmmueller Ressourcen 6 25.02.2010 16:17
Untermenü im IE nici CSS 10 22.06.2009 22:19
CSS und Tabellen PW-toXic CSS 70 06.03.2009 22:02
html und css Tali CSS 1 10.01.2004 16:23
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ? Fidi CSS 0 07.01.2004 12:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:08 Uhr.