Layout Problem mit 100 % Breite

[socke999]

Hallo,
ich habe folgendes Problem und weis nicht so recht wie ich an die Sache ran gehen soll.
Vielleicht habt ihr ein Paar Tipps bzw. Vorschläge.


Also ich würde gerne mit einer Tabelle ein Seitenlayout schaffen, dass sich immer mit width: 100% die gesamte breite des Browserfensters ausfüllt.

So weit so gut.

Das Problem das sich mir jetzt, stellt ist die Breite der einzelnen Spalten. ungefähr sollte das so aussehen:

  <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td id="spalte1">spalte1</td>
                <td id="spalte2">spalte2</td>
                <td id="spalte3">spalte3</td>
               
                <td id="spalte4">
                                           <div id=jqueryPlugin"></div>

                </td>
                
               <td id="spalte5">spalte5</td>
                <td id="spalte6">spalte6</td>
            </tr>
            </table>

Also das Problem ist folgendes:
Ich weiß wie groß die Spalten sein sollen, bis auf die Spalte4.
Spalte4 soll dann den "rest", abhängig von Browserfenster und Auflösung usw. des Users auffüllen. Spalte4 enthält ein JQuery Plugin, welches dann wiederum in der Spalte4 zu 100% breite ersteckt sein soll.

Mein Lösungsansatz:

#spalte1{width:30px;}
#spalte2{width:30px;}
#spalte3{width:30px;}
#spalte5{width:30px;}
#spalte6{width:30px;}

#spalte4{width:auto;}

#jqueryPlugin{width:100%;}

z.B. haben alle Spalten, außer Spalte4 fix immer width:30px;
Für Spalte4 gebe ich einfach für width "nix" an. Dadurch wird dann die Spalte 4 komplett ausgefüllt.
also wenn das Browserfenster 1000px breit wäre: dann wäre Spalte4 width: 1000 - 5*30 = 850 px breit.
das würde auch so angezeigt werden, nur hat Spalte4 jetzt keinen "width Wert" und dadurch kann ich das JQueryPlugin nicht richtig mit 100% ausgerichtet werden.


Wie kann man das Problem dann lösen?

Alternativ hab ich mir gedacht das so zu lösen:

1)

#spalte1{width:10%;}
#spalte2{width:10%;}
#spalte3{width:10%;}
#spalte5{width:10%;}
#spalte6{width:10%;}

#spalte4{width:50%;}

#jqueryPlugin{width:100%;}

Aber das mit den Prozent ist nicht wirklich sehr schön, weil bei einem User mit 800px Fensterbreite und einem anderen User mit 1200px Fensterbreite das ganze total anders aussieht.


2)
Als zweite alternative wäre mir da JavaScript eingefallen, um width von Spalte4 wirklich zu berechnen. aber weis nicht ob das so eine tolle Idee ist.

 

[ComFreek]

2)
Als zweite alternative wäre mir da JavaScript eingefallen, um width von Spalte4 wirklich zu berechnen. aber weis nicht ob das so eine tolle Idee ist.

Stimmt. Wen jmd. JS deaktiviert hat, dann wird die Seite falsch angezeigt.

Aber das mit den Prozent ist nicht wirklich sehr schön, weil bei einem User mit 800px Fensterbreite und einem anderen User mit 1200px Fensterbreite das ganze total anders aussieht.

Was soll den daran so schlimm sein?

 

[socke999]

Was soll den daran so schlimm sein?

Naja, also wenn Spalte 2 zum Beispiel ein Bild beinhaltet, dass genau 50px breit ist.

Wenn jetzt spalte2 width:10%hat,
dann hat User1 mit Fenstergröße 800px Spalte2 als 80px breit dargestellt, also 30 px um das Bild frei.
User2 mit fenstergröße 1200px, sieht dann Spalte2 als 120px breit dargestellt, also hat er rund 70 px um das Bild herum freiraum, und dass ist bei einer Bildbreite von 50px eindeutig zu viel und nicht mehr schön ...

 

[hela]

Hallo,
m.E. ist das kein CSS-Problem, da dein jQuery-Plugin vermutlich auch nur dann funktionsfähig ist, wenn Javascript aktiv ist. Daher kannst du auch die Ermittlung der Breite in der betreffenden Spalte per Javascript ausführen, wenn der Wert denn unbedingt gebraucht wird.

 

[socke999]

Das stimmt allerdings! Und auch sonst noch genug JavaScript mit an bord ...


Aber irgendwie sollte das doch auch mit reinen CSS zu machen sein

 

[SpiceLab]

Da hast du dich wohl augenscheinlich noch nicht mit dem Kapitel zur Tabellenformatierung beschäftigt, und die Eigenschaft table_layout näher betrachtet, die im Tabellengerüst für fixe und variable Breite sorgen kann.

Siehe das dritte Beispiel table-layout:fixed mit teilweiser Breitenangabe als weitere Arbeitsvorlage für dein Vorhaben.

Inwieweit dein genutztes jQuery-Plugin hiervon Kenntnis nimmt, entzieht sich meiner Kenntnis.

 

[socke999]

Danke spicelab für die antwort.

Genau das table-layout:fixed mit teilweiser Breitenangabe habe ich von Anfang an verfolgt und auch so implementiert und wie ich es am Anfang in meinen ersten Beitrag als width: "nix" beschrieben habe

Das Problem ist, das mein JQueryPlugin so einen "Div Container" angeben muss, und dieser Div Container braucht eine width angabe.

  <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td id="spalte1">spalte1</td>
                <td id="spalte2">spalte2</td>
                <td id="spalte3">spalte3</td>
               
                <td id="spalte4">
                       <div id=jqueryPlugin">   PLUGIN  </div>

                </td>
                
               <td id="spalte5">spalte5</td>
                <td id="spalte6">spalte6</td>
            </tr>
            </table>

also muss ich jetzt irgendwie die #spalte4 eine width geben und #jqueryPlugin eine css width.

Nur wenn jetzt spalte4 keinen width Wert hat wie im "table-layout:fixed mit teilweiser Breitenangabe" Beispiel, dann kann #jqueryPlugin auch nicht korrekt bezug nehmen.

z.B. hab ich es jetzt so versucht:

body {
margin:0;
padding:0;
height:100%;
max-height:100%;
overflow:hidden;
}

#topbar {
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
background:#eee;
}

<body>
  <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td id="spalte1" style="width: 30px;">spalte1</td>
                <td id="spalte2" style="width: 30px;">spalte2</td>
                <td id="spalte3" style="width: 30px;">spalte3</td>
               
                <td id="spalte4">
                       <div id=jqueryPlugin" style="width: 100%;">   PLUGIN  </div>

                </td>
                
               <td id="spalte5" style="width: 30px;">spalte5</td>
                <td id="spalte6" style="width: 30px;">spalte6</td>
            </tr>
            </table>
</body>

aber irgendwie wird dabei die #jqueryPlugin div so breit wie die gesamte seite, und nicht nur so breit wie #spalte4


auch mit #jqueryPlugin width: inherit funktioniert es nicht.

Weis nicht so recht wieso bzw. wie es anders gemacht werden kann

 

[SpiceLab]

also muss ich jetzt irgendwie die #spalte4 eine width geben und #jqueryPlugin eine css width.

Nur wenn jetzt spalte4 keinen width Wert hat wie im "table-layout:fixed mit teilweiser Breitenangabe" Beispiel, dann kann #jqueryPlugin auch nicht korrekt bezug nehmen.

z.B. hab ich es jetzt so versucht:

<body>
  <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td id="spalte1" style="width: 30px;">spalte1</td>
                <td id="spalte2" style="width: 30px;">spalte2</td>
                <td id="spalte3" style="width: 30px;">spalte3</td>
               
                <td id="spalte4">
                       <div id=jqueryPlugin" style="width: 100%;">   PLUGIN  </div>

                </td>
                
               <td id="spalte5" style="width: 30px;">spalte5</td>
                <td id="spalte6" style="width: 30px;">spalte6</td>
            </tr>
            </table>
</body>

aber irgendwie wird dabei die #jqueryPlugin div so breit wie die gesamte seite, und nicht nur so breit wie #spalte4

Kann ich mit deinem Codeschnipsel nicht bestätigen:



Übrigens fehlt dort im <div> nach dem Gleichheitszeichen des id-Attributs das doppelte Anführungszeichen.

Kann es vielmehr sein, dass dein genutztes jQuery-Plugin eine absolute Breitenangabe benötigt?