✔ Tables richtig verteilen

[Hilmy]

Hallo Leute

ich hab ein kleines problem mit der Verteilung meiner Tables auf der Seite.
Ich habe 5 Tables. Einer oben, mit eingefügter Grafik, einer links mit den Links innerhalb meiner seite, Einer rechts mit dem main content, und einer unten, dass die Seite für Firefox designed ist.
Dies funktioniert ganz gut.
Das Problem ist der 5. Table. Er erscheint nur, wenn man eingelogt ist, und er sollte links unter dem Table mit den internen links erscheinen. Dies passiert aber leider nur, wenn der mainkonten gross genug ist, dass dieser Table weiter nach unten reicht als die Links.
Ist es irgendwie möglich, den login Table in diese Position zu zwingen?

Hier mein CSS File:

padding-left: 5px;

#topbar {
	background-color: #d5eff;
	padding: 2;
	border: 0px;
	margin: 10px;
	width: 98%;
    
}


#blue {
   background-color: #d5eeff;
   padding: 8px;
   border: 3px solid #09f;
   margin: 10px;
   width: 68%;
   float: right;
   margin {left:30px;}}
   
#left1 {
   background-color: #d5eeff;
   padding: 5px;
   border: 3px solid #09f;
   margin: 10px;
   width: 25%;
   float: left;
}

#user {
   background-color: #d5eeff;
   padding: 5px;
   border: 3px solid #09f;
   margin: 10px;
   width: 25%;
   float: left;
}

#down {
   background-color: #F6F975;
   padding: 5px;
   border: 0px solid #09f;
   margin: 10px;
   width: 98%;
   float: left;	
}	
	
   
h1 { color:red; font-size:48px; }
h2 { color:blue; font-size:24px; }
h3	{ color:black; font-size:20;}
h5 { color:black;font-size:20px; font-family:cursive; }
body { background-color:F6F975; }
a:link { color:blue; }
a:visited { color:blue; }
a:active { color:blue; }

Gruss Hilmy

 

[Maik]

Hi,

kannst du auch den dazugehörigen HTML-Code zeigen, damit man sich ein genaueres Bild von der Seite machen kann?

Und was hat es zu Beginn des CSS-Codes mit der alleinstehenden padding-left-Deklaration, sowie dieser "verstümmelten" Eigenschaft margin {left:30px;} auf sich?

mfg Maik

 

[Maik]

Ich hab jetzt mal das Markup aus dem CSS-Code hergeleitet, und kann dein Problem mit dem fünften fehlenden Block nicht nachvollziehen, da mir alle fünf Blöcke in der Seite angezeigt werden, und das, obwohl ich hier sozusagen nicht eingeloggt bin :suspekt:



Falls du vom Umbrechen der linken Blöcke sprichst, sobald der horizontale Viewport im Browser herunterskaliert wird, empfehle ich dir, zum einen eine globale linke Spalte einzurichten, die die beiden Blöcke in sich aufnimmt, und zum anderen alle vorhandenen Blöcke in ein übergeordnetes Element einzubetten, das mit min-width eine Mindestbreite erhält, und so das Layout nicht mehr vollends zusammengestaucht werden kann, wenn das Browserfenster verkleinert wird. Unterschreitet der Viewport das festgelegte Maß blendet der Browser umgehend den horizontalen Scrollbalken ein, und das Layout fällt nicht weiter in sich zusammen.

mfg Maik

 

[Hilmy]

@Maik

Ich glaub die grafik die du erstellt hasst, triff den aufbau meiner seite ganz gut.
Ich muss allerdings sagen, dass ich nicht so ganz verstanden habe, was du darunter geschrieben hast. Ist leider noch etwas zu fachchinesisch für mich.

es geht mir darum, dass laft1 und user unter einander bleiben, auch wenn left1 länger(nach unten) als blue ist.
Dein vorschlag, left1 und user zu verbinden kling vernünftig. Ich weis aber nicht so recht, wie ich das technisch umsetzen könnte.

Für vorschläge wäre ich sehr dankbar.

Greetz Hilmy

 

[Maik]

Kein Problem, hier folgt die praktische Anwendung meiner theoretischen Ausführungen

Markup:

<div id="wrapper">
     <div id="topbar">topbar</div>
     <div id="leftColumn">
          <div id="left1">left1</div>
          <div id="user">user</div>
     </div>
     <div id="blue">blue</div>
     <div id="down">down</div>
</div>

Stylesheet:

#wrapper {
    min-width:800px;
}

#topbar {
    background-color: #d5eff;
    padding: 2px;
    border: 0px;
    margin: 10px;
    width: 98%;
}

#leftColumn {
    width: 25%;
    float: left;
}

#blue {
   background-color: #d5eeff;
   padding: 8px;
   border: 3px solid #09f;
   margin: 10px;
   width: 68%;
   float: right;
}

#left1 {
   background-color: #d5eeff;
   padding: 5px;
   border: 3px solid #09f;
   margin: 10px;
}

#user {
   background-color: #d5eeff;
   padding: 5px;
   border: 3px solid #09f;
   margin: 10px;
}

#down {
   background-color: #F6F975;
   padding: 5px;
   border: 0px solid #09f;
   margin: 10px;
   width: 98%;
   clear:both;
}

mfg Maik

 

[Maik]

Ich glaub die grafik die du erstellt hasst, triff den aufbau meiner seite ganz gut.

Die Grafik ist ein Firefox-Screenshot deiner eingangs vorgestellten Seite

mfg Maik

 

[Hilmy]

@Maik

Danke, deine Lösung sieht vielversprechend aus.
Weist du, obs ne lösung giebt, bei der nur das css file geändert werden muss?

Greetz Hilmy

 

[Maik]

Hi,

meinst du damit, ob auf meine Ergänzungen im HTML-Code verzichtet werden kann?

Dann lautet die Antwort leider "Nein", denn wie sich die Blöcke ohne sie verhalten, hast du selbst erlebt und war ja auch der Grund dieses Themas.

mfg Maik

 

[Hilmy]

Ok schade. Ich dacht vieleicht giebts nen css befehl, der das table in ne bestimmte position zwingen kann.

Aber vielen dank. ich versuchs mal so um zu setzen, mit deinem Html code

Greetz Hilmy