4. css: Von Tabellen loskommen

css: Von Tabellen loskommen

  • ?

    Hi,
    erst mal vorweg: Ich kenne mich in css noch nicht besonders gut aus und entschuldige mich gleich man für die dumme Frage. 😃

    Ich möchte eine Seite ganz ohne Tabellen machen, doch leider scheitert es noch an der Umsetzung. Also ich habe folgende Tabelle:

    <html>
<head>
</head>
<body>

<table width="80%" align="center">
<tr>
	<td background="./rand.gif" width="10%"></td>
	<td>test<br>test<br>test<br>test<br>test<br>test<br>test<br></td>
	<td background="./rand.gif" width="10%"></td>
</tr>
</table>

</body>
</html>

    Egal wie groß die mittlere Spalte wird, sollen die Ränder (die beiden äußeren Spalten) automatisch vergrößert werden. Ich habe nun mind. schon 1,5 Stunden probiert das mit css hinzubekommen, aber leider ohne Erfolgt. Sobald der div Container gößer geworden ist, als er vorher definiert worden ist, haben sich die Seitenränder nicht mehr bewegt.
    Könnt ihr mir sagen, wie ich das zu machen habe?

    Vielen Dank

    MfG
    CSS_Noob

    0
  • F

    Ich weiß nicht, ob ich das jetzt richtig verstanden habe, aber willst du einfach eine Box mit 80% Breite (des Browserfensters?) und darin dann links und recht jeweils eine Rand-Grafik mit 10% Breite (der 80% breiten Box).

    0
  • ?

    Also die größen sind egal, das war nur ein Beispiel.
    Ich hab z.B. sowas:

    <div id="a">
    <div id="b">$Text</div>
</div>

    $Text ist eine php-Variable. Ich möchte wenn der benötigte Platz größer ist als der im Container b vordefinierte Bereich, das sich Container a und b automatsich vergrößern. Geht das? Die Höhe von b wird ja größer, aber die von a nicht.

    Gruß
    CSS_Noob

    0
  • F

    Das kommt ganz darauf an, wie du sie positionierst (position) und was du für width angegeben hast bzw. angeben willst 😉

    0
  • ?

    Also mein momentaner Code:

    #textout  { position:absolute; top:150.5px; left:0px; width:100%; height:66%;}
#leftrow  { position:absolute; top:0px; left:5%; width:12%; height:100%;}
#rightrow { position:absolute; top:0px; right:5%; width:12%; height:100%;}
#seite_l  { position:absolute; top:0px; left:0%; width:100%; height:100%;}
#seite_r  { position:absolute; top:0px; right:0px; width:100%; height:200px;}
#text     { position:absolute; top:5%; left:20%; width:60%; height:90%; }

...

<div id="textout">
  <div id="leftrow">
     <div id="seite_l" style="background-image: url(images/links.gif);"></div>
  </div>

  <div id="text" style="background-image: url(images/text.gif);">
     $Text
  </div>

  <div id="rightrow" style="overflow:hidden">
     <div id="seite_r" style="background-image: url(images/rechts.gif);"></div>
  </div>

</div>

    Also wenn sich der mittlere Container vergrößert, also die Höhe größer wird, weil der Text mehr ist als eine Seite, dann sollen die anderen beiden Container, die den Seitenrand darstellen auch vergrößert werden.
    Ich hoffe die Angaben reichen diesmal.

    Gruß
    CSS_Noob

    0
  • F

    Wenn du position:relative; verwendest, dann wird das Parent auch mitgestreckt - und damit die eigentliche Text-Box auch größe wird, darfs du keine Höhenangabe machen (höchstens min-height)

    0
  • ?

    flenders schrieb:

    Wenn du position:relative; verwendest, dann wird das Parent auch mitgestreckt - und damit die eigentliche Text-Box auch größe wird, darfs du keine Höhenangabe machen (höchstens min-height)

    Vielen Dank, hat geklappt. Nur min-height funktioniert irgendwie nicht, aber da kann ich auch einfach Absätze einfügen, bis die Seite wieder stimmt.

    Eine andere Frage hätte ich noch: Kann man in css solche Angaben schreiben? height:100%-200px;
    Ist sowas irgendwie möglich?

    0
  • F

    CSS_Noob schrieb:

    Nur min-height funktioniert irgendwie nicht.

    Beim IE funktioniert es nicht, sonst sollte das schon gehen : http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height

    CSS_Noob schrieb:

    Eine andere Frage hätte ich noch: Kann man in css solche Angaben schreiben? height:100%-200px;

    Nein, das geht afaik so direkt nicht. Für Nicht-IE kannst du sowas einfach durch setzen von top und bottom erreichen, abder der IE kapiert da immer nur eine Angabe von beiden 😞 Du könntest es evtl. über geschachtelte DIVs in Verbindung mit padding erreichen - einfach mal ausprobieren. Also außen ein div mit 100% und padding und innen nochmal ein DIV mit 100% - keine Ahnung ob das so klappt 🙄

    0
  • ?

    Ok, vielen Dank.
    Ich werde das mal testen

    0
Anmelden zum Antworten