nicht angemeldet
Dieses mehrspaltige Layout HTML5-Konform ohne JS-Hilfe umsetzen
0 
Gunnar Bittersmann
0 0 
suit
Dieses mehrspaltige Layout HTML5-Konform ohne JS-Hilfe umsetzen
Hallöchen,
ich hänge derzeit an einem kleinen Problem fest.
Ich habe ein Layout, das im Grunde aus zwei vertikalen Spalten besteht, wobei die linke der beiden Spalten eine feste Breite und die komplette verfügbare Höhe hat und die rechte Spalte den Rest des Anzeigebereichs ausfüllen soll, also ebenfalls die komplett verfügbare Höhe haben soll und als Breite die noch verfügbare Breite.
Die rechte Spalte wiederum soll dann in eine Kopfzeile mit fester Höhe und einen Hauptbereich, der die restliche Höhe ausfüllt, aufgeteilt werden.
Zur besseren Vorstellung habe ich ein Schema des Layouts erstellt (externer Link da wahrscheinlich zu groß für diesen Anzeigeberich):
http://s159880906.online.de/layoutbeispiel.jpg
Meine bisherige Idee war folgendes:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<style type="text/css">
/* <![CDATA[ */
/****************************/
/* Allgemeine Einstellungen */
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: arial, helvetica, sans-serif, sans;
background: white;
}
/****************************/
/***********************************/
/* Einstellungen für grundlegende
Struktur-Elemente */
#left
{
width: 200px;
height: 100%;
padding-left: 5px;
background: #ebeae8;
overflow-y: scroll;
float: left;
}
#right
{
height: 100%;
}
#top
{
background: #ebeae8;
height: 120px;
}
/***********************************/
/* ]]> */
</style
<!-- ... --->
</head>
<body>
<!-- linke Spalte -->
<div id="left">
<!-- Inhalt der vertikalen Navigation -->
</div>
<!-- rechte Spalte -->
<div id="right">
<!-- Kopfzeile der rechten Spalte -->
<div id="top">
<!-- Weitere Navigationselemente -->
</div>
<!-- Inhaltsbereich -->
<div id="main">
<!-- Diagramme und Co. -->
</div>
</div>
</body>
</html>
In der Grafik habe ich schon beschrieben, dass in den Hauptbereich per flot (jQuery-Erweiterung) dynamische Diagramme geschrieben werden sollen.
Eigentlich sieht das auch schon so aus, wie die Vorgabe, doch es gibt zwei Probleme:
Der main-Bereich ist nur so hoch wie sein Inhalt und daher würde overflow-y: scroll nichts bringen, ebenso ist hier height: 100% nicht hilfreich, da das div-Element dann über das untere Seitenende hinausragt, weil es die Höhe des übergeordneten Elements annimmt.
Zweitens zerreißen die flot-Charts das Layout (ich habe an den Einstellungen der Charts noch nichts geändert). Die flot-Charts werden in einem vorgegebenen Container erstellt (z.B. erstellt man ein div-Element mit gewissen Dimensionen und übergibt dieses bzw. dessen ID an die Plotter-Funktion), dem dann automatisch die CSS-Eigenschaft "position: relative" zugewiesen wird, da die weiteren Elemente, die zur Darstellung des Diagramms automatisch im Container erstellt werden, dann per "position: absolute" relativ zum Container plaziert werden - oder so ist es zumindest geplant, denn sie rutschen einfach an den ganz linken Rand des Anzeigebereichs.
Was habe ich hier übersehen, bzw. wie könnte ich das anders lösen? Ich würde sehr gerne auf JavaScript - abgesehen von den Diagrammen - verzichten und anstatt die mögliche Größe für div#main per JS auszulesen und dann entsprechend die height-Eigenschaft von div#main zu setzen lieber das Ganze falls möglich auch ohne JS funktionsfähig haben.
Vielen Dank schonmal an diejenigen, die sich dieser langen Nachricht annehmen :)
-
@@subsurf:
nuqneH
<style type="text/css">
/* <![CDATA[ */
[…]
/* ]]> */Was hat das in einem (nicht polyglotten) HTML5-Dokument zu suchen?
(Zu einem polyglotten HTML5-Dokument fehlt zumindest die Namensraumangabe im Wurzelelement. Außerdem bin ich mir nicht sicher, ob man dies bei XHTML5 überhaupt machen müsste. Selbst bei XHTML 1.x ist die Kennzeichnung von CSS-Code (im Gegensatz zu JavaScript-Code) als CDATA nur in ganz wenigen Ausnahmefällen notwendig.)
<div id="left">
<!-- Inhalt der vertikalen Navigation -->
</div><!-- rechte Spalte -->
<div id="right">
<!-- Kopfzeile der rechten Spalte -->
<div id="top">
<!-- Weitere Navigationselemente -->
</div>
<!-- Inhaltsbereich -->
<div id="main">
<!-- Diagramme und Co. -->
</div>
</div>Das ist kein HTML5. Zumindest kein sinnvolles. Die Navigation gehört in ein nav-Element, die Kopfzeile vermutlich in ein header-Element.
Außerdem sollten IDs und Klassen NIEMALS nach der (gegenwärtig) gewünschten Darstellung benannt werden. Was, wenn bei einer Layoutänderung die Navigation rechts vom Seiteninhalt stehen soll?
wie könnte ich das anders lösen?
Wenn Anordnung und Breiten in Stein gemeißelt sein sollten (die Seite also nur auf einigen wenigen Anzeigegeräten vernünftig darstellbar sein soll): Navigation und Kopfzeile absolut postionieren, body entsprechend großes Padding oben und links geben.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
<style type="text/css"> /\* <![CDATA[ \*/ […] /\* ]]> \*/Was hat das in einem (nicht polyglotten) HTML5-Dokument zu suchen?
(Zu einem polyglotten HTML5-Dokument fehlt zumindest die Namensraumangabe im Wurzelelement. Außerdem bin ich mir nicht sicher, ob man dies bei XHTML5 überhaupt machen müsste. Selbst bei XHTML 1.x ist die Kennzeichnung von CSS-Code (im Gegensatz zu JavaScript-Code) als CDATA nur in ganz wenigen Ausnahmefällen notwendig.)
Ich hatte das style-Element nur zur Veranschaulichung in den Beispielcode kopiert, im eigentlich Projekt liegen die Style-Definitionen in externen Stylesheets.
Dass CSS-Code als CDATA gekennzeichnet werden sollte, habe ich mal in irgendeinem Ratgeber aufgeschnappt. Schaden tut es ja denke ich nicht, oder?
Was für eine Namensraumangabe müsste ich für polyglottes HTML5 machen? "http://www.w3.org/1999/xhtml"?Das ist kein HTML5. Zumindest kein sinnvolles. Die Navigation gehört in ein nav-Element, die Kopfzeile vermutlich in ein header-Element.
Ich habe mich noch nicht so ausgiebig mit HTML5 beschäftigt, hauptsächlich die Grundlagen überflogen wegen flot, daher bin ich noch nicht mit allen Neuigkeiten vertraut. Danke für den Hinweis, das werde ich so umgestalten.
Außerdem sollten IDs und Klassen NIEMALS nach der (gegenwärtig) gewünschten Darstellung benannt werden. Was, wenn bei einer Layoutänderung die Navigation rechts vom Seiteninhalt stehen soll?
Auch wenn das derzeit unwahrscheinlich ist, werde mich das beherzigen.
wie könnte ich das anders lösen?
»»
Wenn Anordnung und Breiten in Stein gemeißelt sein sollten (die Seite also nur auf einigen wenigen Anzeigegeräten vernünftig darstellbar sein soll): Navigation und Kopfzeile absolut postionieren, body entsprechend großes Padding oben und links geben.
Das ist eine gute Idee, werde ich ausprobieren :)
-
Außerdem sollten IDs und Klassen NIEMALS nach der (gegenwärtig) gewünschten Darstellung benannt werden. Was, wenn bei einer Layoutänderung die Navigation rechts vom Seiteninhalt stehen soll?
Auch wenn das derzeit unwahrscheinlich ist, werde mich das beherzigen.
Du wirst auch irgendwann an den Punkt kommen, andem du Code von einem deiner Vorgänger, die schon lange das Unternehmen verlassen haben, "erbst" und 3 Stunden damit verbrätst, nach "#menuright" zu suchen, um dann festzustellen, dass damit eigentlich die Suche auf der linken Seite gemeint ist :)
-
-