CSS Layout & Positionierung

Hi, ich hab gestern ein wenig angefangen mich intensiever mit CSS zu beschäftigen und hätte jetzt ein paar Fragen.
Zuerst einaml ein Bild:

Auf diesem Bild sind all meine Probleme Vorhanden

1) Als erstes: Was kann ich machen das die Tabelle sich auch verkleinert? das schaut nicht gerade hübsch aus wenn ich das Fenster klein mache. Hier der aktuell verwendete code:

/* main layout */

body {
background-color:#fff;
margin:10px 10px 10px 10px;
padding:0px; }

.banner {
background: #ccf;
height:40px;
border:1px solid #000; }

.navigation {
background: #ccf;
position: absolute;
left:10px;
top:53px;
width:160px;
height: 500px;
border:1px solid #000; }

.main{
margin-left: 163px;
margin-right: 103px;
margin-top: 1px;
border:1px solid #000;
padding: 10px;}

.bottom {
background: #ccf;
margin-left: 203px;
margin-top: 3px;
border:1px solid #000; }

.right {
background: #ccf;
position: absolute;
right:10px;
top:53px;
width:100px;
background:#ccf;
border:1px solid #000;
padding-bottom:3px; }

/* end main layout */

2) Wie kann ich ein ganzes <div> feld als link interpretieren und nicht nur der eingefügte Text wie man ja am linken Teil des Bildes sieht.

3) Wie kann ich nur die links einer kategorie beeinflussen, ich dachte so:

#menue a:link{}

aber das geht nicht

4) Wie kann ich nachdem 3 erledigt ist das fenster das die URL anzeigt abschalten.

der dazugehörige code:

/* left side navigation */

.category {
background: #fff;
margin-left: 5px;
margin-top: 5px;
margin-right:5px;
border:1px solid #000;
padding-bottom: 5px; }

.menue_head{
background:#ffc;
padding:5px;
font-weight:600; }

.menue{
background:#ffc;
padding:3px;
font-size:16px;
margin-left: 10px;
margin-top: 6px;
margin-right:10px;
border: lpx solid #000;}

.menue:hover {
background:#ccf; }

.menue:active{ }

.menue:link{
font-weight:600; }

/* end left side navigation */

Ich suche jetzt schon seit Stunden im Netzt nach einer Antwort (wie man an den tabs des Browsers im Bild sieht ) aber finde keine zufriedenstellenden Lösungen.

Ich bin auch für allgemeine Anregungen und Kritik, sei es am layout selbst oder am code offen.

Ich hoffe ihr könnt (wollt) mir helfen.

thx

alexsb

danke, aber die Seite hat ja genau das gleiche Problem wie ich, der Content wird nicht mitverändert..

ich habe noch eine frage:

ich hab ein element
<div>
<div class = "message">
Diesen Text hätte ich gerne Zentriert, sowohl vertikal als auch horizontal, innerhalb des Elements
</div>
<div>

Zitat von atrox

das problem sind die überschriften: sie verhindern, daß die zellen kleiner werden, weil sie nicht umgebrochen werden können.

2) setze für die den main bereich ein "overflow: hidden"

danke, das funktioniert wunderbar, jetzt sind noch problem 2, 3 und 4, aber das war einmal das wichtigste

ad 4) willst du damit den browser bzw. die ganze seite schliessen? irgendwie versteh ich die frage da nicht so ganz

Zitat von atrox

ad 2)
<div onclick="window.location='someother.html'">

danke nochmal, aber ist das 100% xhtml strict conform?

ahh.. du meinst vielleicht, wenn du mit der maus drüberfährst erhältst du einen gelben "tooltip" ? versuch es mit
<a href="..." title="some info">...</a>

Wahnsinn, danke für die irrsinnig kompetente Antwort, werd das gleich mal umsetzten

Was du willst ist also zwei, Block-Level Elemente nebeneinander positionieren.

Ein Block-Level Element nimmt einmal prinzipiell _immer_ den ganze ihm in der Breite zur Verfuegung stehenden Platz ein. D.h. auch wenn du sagt "width: 45%;" und "margin-left: 53%;" ist der Platz, den du durch den margin eingerueckt hast, nicht einfach so fuer andere Elemente verfuegbar.

Das Zauberwort lautet "float" (und dazugehoerig auch "clear").

Grundvorraussetzungen:
- float Elements sind automatisch immer Block-Level Elemente (z.B. DIV)
- float braucht IMMER AUSNAHMSLOS eine Breitenangabe (width property)

Zulaessige Werte fuer "float" sind "left", "right" und "none".

Ausgehend von der Position, an der du das DIV Element platzierst, wird das Element ganz nach links bzw. ganz nach rechts in der aktuellen Zeile geschoben mit der Breite die du ihm gegeben hast.

Der Text der direkt ausserhalb dieses DIVs ist, umfliesst das DIV Element.

Chart 1

Code:

<div>
	<div style="float: left; width: 66%;">
		bin im float DIV drinnen
	</div>
	text ausserhalb umfliesst das DIV ganz normal
</div>

+---irgendein container DIV---------+
| +---DIV float: left--+            |
| |bin im float DIV    | text ausser|
| |drinnen             | halb umflie|
| +--------------------| sst das DIV|
| ganz normal                       |
+-----------------------------------+

Fuer float:right ist das ganze Einfach seitenverkehrt.

Der Trick ist jetzt, das du mehrere Elemente hintereinander mit float:left platzieren kannst du die sich hintereinander von links nach rechts anreihen. Im Prinzip wie der Text. Und wenn sie sich in einer "Zeile" nicht ausgehen, rutschen sie in die naechste.

Chart 2

Code:

<div>
	<div style="float: left; width: 33%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 33%;">
		bin das zweite float:left
	</div>
	text ausserhalb umfliesst das DIV ganz normal
</div>

+---irgendein container DIV--------------------------------+
| +-DIV float: left-++---DIV float:left-+ text ausserhalb  |
| |bin das erste    ||bin das zweite    | umfliesst die    |
| |float:left       ||float: left       | floats ganz      |
| +-----------------++------------------+ normal wie jeder |
| andere Text                                              |
+----------------------------------------------------------+

Hast du keinen Text ausserhalb der floats und du gibst beiden z.B. eine Breite von 50% dann hast du genau das was du wolltest:

Chart 3

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
</div>

+---irgendein container DIV-------------+
|+-DIV float: left-++---DIV float:left-+|
||bin das erste    ||bin das zweite    ||
||float:left       ||float: left       ||
|+-----------------++------------------+|
+---------------------------------------+

Wenn du keinen margin/border/padding hast und somit die Hilfslinien vom ASCII Chart wegfallen geht sich das mit zweimal 50% aus. Hast du allerdings mind. eines dieser Attribute musst du eben mit Geschick ein paar Prozent weniger nehmen da "width" ja nur die Breite des Content in der Box angibt. Aber auch zweimal 50% fuehrt bei manchen Browser wegen Rundungsfehlern zu Problemen, dann muss man eben auc 49% ausweichen, ist im Prinzip eh vernachlaessigbar.

Wenn wir das umfliessende Textbeispiel von oben nochmal nehmen, gibt es natuerlich auch eine Moeglichkeit den Text NACH den Floats komplett zu platzieren mit dem "clear" property. Das "clear" Property gibt an, auf welcher Seite der Fluss der floats unterbrochen werden soll. Die Werte sind "left", "right" und "both" ("none" natuerlich auch).

Chart 4

Code:

<div>
	<div style="float: left; width: 33%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 33%;">
		bin das zweite float:left
	</div>
	<br style="clear: left;">
	Text wird durch clear:left unterhalb der floats gesetzt.
</div>

+---irgendein container DIV--------------------------------+
| +-DIV float: left-++---DIV float:left-+                  |
| |bin das erste    ||bin das zweite    |                  |
| |float:left       ||float: left       |                  |
| +-----------------++------------------+                  |
| Text wird durch clear:left unterhalb der floats gesetzt. |
+----------------------------------------------------------+

Floats sind das A&O der Positionierung mit CSS.

Ein sehr wichtiger Punkt ist aber noch folgender: floats selbst werden aus dem Document-Flow ausgehebelt und verbrauchen keinen echten Platz im Container-Element. Somit ist das Beispiel von Chart4 auch falsch gezeichnet. Die Hoehe des Container DIVs in dem die zwei floats platziert sind ist in wirklich die Hoehe 0 ! Und man muesste es eigentlich so zeichnen:

Chart 5

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
</div>

+---irgendein container DIV-------------+
++-DIV float: left-++---DIV float:left-++
 |bin das erste    ||bin das zweite    |
 |float:left       ||float: left       |
 +-----------------++------------------+

Warum ist das wichtig? Hat man im Container DIV z.B. eine background-color und die DIVs keine (d.h. sie scheint durch) wurde diese aber nicht unterhalb der beiden float DIVs zu sehen sein!

Der Trick hier ist, auch wenn kein Text ausserhalb der floats vorhanden ist, einen Bruch mit clear zu erzeugen wodurch der Content dann "aufgebraucht" (consumed) wird.

Chart 6

Code:

<div>
	<div style="float: left; width: 50%;">
		bin das erste float:left
	</div>
	<div style="float: left; width: 50%;">
		bin das zweite float:left
	</div>
	<br style="clear: left;">
</div>

+---irgendein container DIV-------------+
|+-DIV float: left-++---DIV float:left-+|
||bin das erste    ||bin das zweite    ||
||float:left       ||float: left       ||
|+-----------------++------------------+|
+---------------------------------------+

Statt BR kann man natuerlich auch einfach wieder ein DIV nehmen.

float:left und float:right kann man wild mischen wie man will. Das ist wichtig, den hier entkopplen wir auf einmal Content von Layout da, vier hintereinanderfolgende DIVs im Mark-Up nicht mehr notwendigerweise in dieser Reihenfolge untereinander sind. Ich kann eines mit float:left nach links schicken, das zweite mit float:right auf die rechte Seite und das naechste wieder nach links und das uebernaechste wieder nach rechts.


Das alles waere zu schoen wenn es nicht den IE geben wuerde. Der hat seit der Version 6 einen ziemlich argen Bug mit floats der unter "IE6 Peekaboo Bug" bekannt ist [3]. Schau dir dazu die Seite mit IE6 an und du wirst sehen wie boeser der Bug wirklich ist. Zum Glueck gibst abhilfe die (sogutwie) immer funktioniert.


Nun das ganze auf dein CSS gemappt.

Vorerst, ich versteh nicht ganz warum du position: relative; drin hast und overflow: hidden; aber vermutlich waren das deine Versuche die Boxen zu positionieren.

Hier kurz die Erklaerung was die zwei Properties machen; sind auch ziemlich praktisch:

- position: relative
Sobald ein Element gelayoutet wurde kannst du mit hilfe von position:relative sagen, dieses Element wird jetzt RELATIV zu seiner gelayouteten (sp?) Position verschoben. Wie verschoben? Ganz einfach mit top/left/bottom/right angaben, wie bei der absoluten Positinierung. Damit kannst du angeben mit right: 15px verschiebe das Element 15 pixel nach rechts. Kann nuetzlich sein.
Siehe auch [4]

- overflow
Mit dem overflow Property gibst du an, was mit den Inhalt eines Elements (ich geh hier von Block Elementen aus wie DIV) passieren soll wenn sein Inhalt mehr Platz braucht als das Element zur Verfuegung stellt. Normalerweise dehnt sich ein DIV ja von selbst aus. Es nimmt den ganzen Breite ein und waechste in der Hoehe soviel Inhalt eben vorhanden ist. Wenn du dem DIV aber eine fixe Hoehe gibst (height:300px z.B.) dann kannst du mit overflow angeben was passieren soll wenn der Inhalt aber ueber die 300px hinausschiesst. Z.b. soll der Inhalt einfach abgeschnitten werden wenn er sich nicht ausgeht (overflow:hidden) oder soll er einfach ueber die Box hinaus gezeichnet weden (overflow:visible , Standardeinstellung) oder der grafische Client soll eine Scrollbar zur Verfuegung stellen damit der Benutzer den restlchen Content erreicht (overflow:scroll). Dies schaut dann aus wie wenn z.B. ein IFRAME in einer Seite eingebettet waere, ist aber nur ein DIV. Specs dazu unter [5] . PKK hat dazu eine schoene Seite zum Testen wie sich die Clients verhalten gemacht [6].


Dein CSS abgewandelt wuerde dann so aussehen:

Code:

desc-detail-left {
    float: left;
    width: 45%;
    background: #E9ECEC;
    border-width: 2px;
    border-style: dashed;
    border-color: #666;
}

.desc-detail-right {
    float: left;
    width: 45%;
    background: #E9ECEC;
    border-width: 2px;
    border-style: dashed;
    border-color: #666;
}

Eventuell wird es noetig sein nach den floats einen Umbruch zu machen:

Code:

.desc-detail-umbruch {
	clear: left;
}

[1] http://www.w3.org/TR/CSS21/visuren.html#propdef-float
[2] http://www.w3.org/TR/CSS21/visuren.html#propdef-clear
[3] http://www.positioniseverything.net...r/peekaboo.html
[4] http://www.w3.org/TR/CSS21/visuren.html#x37
[5] http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
[6] http://www.xs4all.nl/~ppk/css2tests/overflow.html