Website Layout mit CSS

[yoT!mO]

Hallo,

ich bin grad dabei, eine Website zu gestalten. Der Grundaufbau sieht ungefähr so aus, wie die angehängte Grafik.

Zur Zeit hab ich die Website mit einer riesen Tabelle ge-Layout-et, aber ich hab hier irgendwo im Forum gelesen, dass das nicht mehr zeitgemäß ist und möchte nun die Website mit Hilfe von CSS und DIV-Containern o.ä. gestalten.
Ich hab schon ein bischen damit rumgespielt, allerdings führte das nie zu einem Ergebnis, was meinen Wünschen entsprach.

Was ich will:
- Der Header soll exakt so breit sein, wie die beiden unteren Abschnitte zusammen, sprich, dass die gedachte Verlängerung der Border eine Linie bildet.
- Der Bereich rechts unter dem Header soll nur so breit sein, wie es der Text, der drinsteht, es verlangt (Es sind immer nur 1-2 Wörter pro Zeile)
- Der Bereich links unter dem Header soll die Breite, die noch übrig ist, auffüllen und sich, wenn ich das Browserfenster in die Breite ziehe, mitvergrößern.

Könnt Ihr mir die benötigten Style-Sheets, mit denen ich die einzelnen Bereiche formatieren soll, posten?

Danke schon mal

Gruß Timo

 

[PEASANT KING]

Wenn du noch passende Längen und Breitenangaben machst joa

 

[yoT!mO]

Wie meinst Du das? Das Layout soll ja die ganze Breite ausfüllen.

Gruß Timo

 

[PW-toXic]

Die beiden unteren Bereichen sind das Problem: Du möchtest, dass sich zwei Bereiche konkret miteinander abstimmen. Hier: die Breite. Das ist mit div etwas problematisch, da so etwas nicht wirklich geht. Bei Tabellen ist das implizit so. Wenn bei einer Tabelle eine spalte mehr platz braucht als sie eigentlich hat, dann wird von der spalte daneben einfach Platz gestohlen.
Daher macht hier eine Tabelle sind, da es kein HTML Element gibt, das dieses Verhalten unterstützt. Das hat mit Zeitgemäß nichts zu tun.

Aber danke, dass du mir noch einen weiteren Grund für das Existenzrecht der Tabelle geliefert hast Ich versuch trotzdem mal das Problem irgendwie mit DIVs oder anderen "erlaubten" Elementen zu lösen, aber ich glaub fast es geht nicht.


Aber am Rande: wenn dir der IE6 egal ist, dann kannst du deinen DIVs weiss machen, dass sie sich wie Tabellen verhalten sollen, und umgehst somit das "semantik" problem.

edit: ich muss mich aber doch trotzdem sehr wundern, warum du ein solches Verhalten möchtest/brauchst? Muss ja ein sehr magisches Layout sein

 

[PEASANT KING]

Die ganze Breite vom Browser ?

Dann erstell mal nen Header Div und gib ihm im CSS

width: 100%;

und den Rest passt du an, sprich Höhe Border usw.
Die anderen Div Boxen kannst du dann einfach am Header orientieren, was breite höhe usw angeht

 

[PW-toXic]

hier mal ne Lösung die funktionieren sollte:

<div style="border: 1px solid black; margin: 10px; background: red; height: 20px">header</div>
<table style="margin: 8px;">
    <tr>
        <td style="border: 1px solid black; margin: 0px; background: yellow;">text asdf</td>
        <td style="width: 10px"></td>
        <td style="border: 1px solid black; margin: 0px; background: grey; width: 1%;">blub123123</div>
    </tr>
</table>

 

[yoT!mO]

@PW-toXic, genau, das war dein Thread, der mich darauf aufmerksam gemacht hat^^
Zu deiner Lösung: Ich wollte es halt wie gesagt ohne Tabellen machen. Das muss doch irgendwie gehen.

Ich mein, die Computerbase-Startseite wird doch auch nicht mit einer Tabelle formatiert, das sind doch auch DIVs. (Hab mir mal den Quelltext angeguckt, aber ich seh die CSS-Eigenschaften nicht. Zumindest nicht die, die für die Formatierung nötig sind). Und das Layout ist ja auch ähnlich zu dem, was ich vorhabe.

Gruß Timo

 

[Tandeki]

Hier kannst Du nachlesen, wie man so eine "Tabelle" mit dem Boxmodell generiert:

http://www.vanseodesign.com/blog/css/3-column-css-layout/

 

[bollerfant]

Hi,
ich kann dir als Tips diese zwei Seiten empfehlen:
http://www.css4you.de/ und http://www.w3.org/Style/Examples/007/
Da findest du viele Beispiele und Erklärungen

 

[PW-toXic]

Das ist ja alles schön und gut, aber keiner dieser Lösungen macht genau das was yoT!mO möchte!
yoT!mO möchte, dass die rechte spalte genau so breit ist, wie das breiteste Wort in dieser Spalte. Das ist mit CSS und DIVs nicht möglich! (man darf mich gerne mit einem Gegenbeispiel korrigieren^^)

- Der Bereich rechts unter dem Header soll nur so breit sein, wie es der Text, der drinsteht, es verlangt (Es sind immer nur 1-2 Wörter pro Zeile)

Die breite der rechten Spalte hängt also vom Inhalt ab, und nicht von der Browser Fenster Größe, wie zb. bei Computerbase.


Ich würde dir allerdings dazu raten es wie computer base zu machen, und einfach zwei Spalten mit einer prozentualen Breite machen. Wie man das lösen kann steht u.a. in meinem Thread. Allerdings hängt die beste Lösung stark vom Layout ab. Wenn du wirklich 2 boxen mit Rand haben möchtest, die beide gleich hoch sind, dann ist die Tabelle die einfachste Lösung.

Es gibt aber auch einige CSS hack-lösungen, die aber komplizierter sind als eine einfache Tabelle, und somit die bessere Lösung ist. (Genauere Diskussion in meinem Thread )
Ich persönlich würd aber wahrscheinlich trotzdem versuchen eine gute CSS Lösung zu finden, um zu zeigen dass ich auch ein cooler "CSS"ler bin...

 

[ownagi]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test</title>
        <style type="text/css">
            body {
                margin: 10px;
            }

            div.header {
                background-color: red;
                height: 50px;
                margin-bottom: 10px;
            }

            div.left {
                margin-right: 110px;
            }

            div.content {
                background-color: green;
                min-height: 800px;
                width: 100%;
                float: left;
            }

            div.sidebar {
                background-color: blue;
                width: 100px;
                min-height: 700px;
                float: right;
            }

        </style>
    </head>
    <body>

        <div class="header"></div>
        <div class="left">
            <div class="content"></div>
        </div>
        <div class="sidebar"></div>

    </body>
</html>

hier ein beispiel mit rechts fester breite und links variabel

ansonsten eben prozentual wobei das bei 24"+ warscheinlich saudoof aussieht

 

[PW-toXic]

Ich glaub er möchte, dass die sidebar automatisch von der höhe mit der linken Spalte mitwächst und andersrum. So leicht kannst du es dir also ned machen

Am besten arbeitet man hier mit dem margin/padding bottom trick und overflow hidden. Das ist zwar ein kleiner hack, aber damit kann man denk ich noch leben.

die verschachtelung von vom content div ist überflüssig.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test</title>
        <style type="text/css">
            body {
                margin: 10px;
            }

            div.header {
                background-color: red;
                height: 50px;
                margin-bottom: 10px;
            }

            div.left {
                margin-right: 110px;
            }

            div.content {
                background-color: green;
                min-height: 800px;
                border-right: 10px solid white;
                margin-right: 20%;
                height: 900px;
            }

            div.sidebar {
                background-color: blue;
                width: 20%;
                min-height: 700px;
                float: right;
            }
            
            .container {
            	overflow: hidden;
            }
            
            .column {
            	padding-bottom: 20000px;
            	margin-bottom: -20000px;
            }
           

        </style>
    </head>
    <body>

		
        <div class="header"></div>
        <div class="container">
        	<div class="sidebar column">asdf</div>
        	<div class="content column"> 
        
        	
        	</div>
        </div>
        

    </body>
</html>

 

[ownagi]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test</title>
        <style type="text/css">
            body {
                margin: 10px;
            }

            div.header {
                background-color: red;
                height: 50px;
                margin-bottom: 10px;
            }

            div.left {
                margin-right: 110px;
            }

            div.content {
                background-color: green;
                width: 100%;
                float: left;
            }

            div.sidebar {
                background-color: blue;
                width: 100px;
                float: right;
            }

            div.fake {
                background-image: url(html.gif);
                background-position: right;
                background-repeat: repeat-y;
            }

            div.clear {
                clear: both;
            }

        </style>
    </head>
    <body>

        <div class="header"></div>
        <div class="fake">
            <div class="left">
                <div class="content">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></div>
            </div>
            <div class="sidebar">a<br/>a<br/></div>
            <div class="clear"></div>
        </div>
    </body>
</html>

html.gif ist 100px breit und mind 1 px hoch und hat die farbe #0000ff



edit: gedacht: sidebar richtet sich nach dem content, falls nicht gleiches prinzip nur mehr divs und ne bgcolor beim content

 

[PW-toXic]

die breite der sidbar soll aber nicht statich sein soweit ich das verstanden hab.

desweiteren fehlt hier ein rahmen um den bereich...

 

[ownagi]

rahmen is natuerlich noch machbar

zum statischen: lieber statisch als wachsend auf prozentualer ebene wie bei dir
das sieht auf 1920+ nämlich richtig doof aus, wenn immer nur 1-2 wörter drinstehen

 

[PW-toXic]

wie willst du das mit dem rahmen machen?
rahmen links und rechts is klar..
aber was ist mit oben und unten? das wird spassig. Zumal muss man extra ein bild erstellen.. wenn man die breite ändern muss, muss man wieder ein neues bild erstelle, und die ladezeiten werden dadruch auch erhöht (jedes bild ist ein http request)
wozu all den aufwand wenn es doch viel einfacher geht. Das einfachste wäre übrigends eine Tabelle

 

[ownagi]

nunja, padding/margin hacks sind halt nochmal nen ganzes stueck schmutziger als faux columns ...

 

[PW-toXic]

überhaupt garnicht, weil die alleroberste devise in der entwicklung von code die lesbarkeit ist.
und die ist bei faux column vollkommen im arsch!

überhaupt gewinnt die Tabelle hier in allen Belangen, aber ich möchte hier ja keinem etwas aufoktroieren Gründe findet man allerdings genug in meinem Thread.