[HTML] CSS und Elemente mit Variabler Breite

[igel457]

Hallo,

ich habe nochmal ein kleines Problem mit HTML und besonders CSS. Ich verwende in meinem Layout nun keine Tabellen mehr und bin stattdessen komplett auf div's umgestiegen. Problem ist nun, dass ich ähnlich wie in der DP so über jeder Box so einen Balken mit abgerundeten Ecken habe.
In meiner Menüleiste ist dieser einfach zu realisieren, da ich die Breite des inneren Teils des Balkens (156px) weiß.

Problematischer wird dies im "Content" Teil. Ich versuche eine "Box" folgendermaßen zu erstellen:

Code:

       <div class="box">
          <div class="leftborder"></div>
          <div class="tableheader">Test</div>
          <div class="rightborder"></div>
          <div class="content">
            


            



              Hi!
            </p>
          </div>
        </div>

Leider wird "Tableheader" nur auf die Breite des Wortes "Test" skaliert. Wenn ich im Stylesheet die Breite von "Tableheader" auf 100% stelle, so funktioniert dies auch nicht, da das Element dann zu Breit ist und "rightborder" in die nächste Zeile rutscht.

Habt ihr eine Idee wie ich dies am besten ausdrücken könnte (wenn es geht ohne Tabellen)?

Im Anhang befindet sich auch mein ganzes Projekt und ein Screenshot.

Danke im Vorraus,
Igel457

[pacman1986]

wie wäre es mit JavaScript in deiner css ?

width : expression(document.body.Clientwidth - 80 +"px");

wobei 80 schwachsinn ist du musst das rechnen wie groß das sein soll.

[Edit]denk an die 3 px für den ie[/Edit]

[Neuni]

Oder einfach einen Div dem man einmal links (vor den Text) das Bild für die Ecke links reinpackt und als Hintergrund die Ecke rechts inkl. Hintergrund mit 1000px breite oder so zuweist (background-position dann right). Dann sollte das gehen.

[igel457]

@pacman1986
Erstmal Danke für deine Antwort.

Leider geht dies nur im InternetExplorer (auf jeden fall hat es bei mir nur dort geklappt) und ich möchte nicht unbedingt JavaScript verwenden.

@neuni
Die Idee hört sich schonmal gut an. Ich habe jetzt folgendes Stylesheet

Code:

.test{
  content:url(img/left1.gif);
  background-image:url(img/right1.gif);
  background-position: right;
  background-repeat:no-repeat;
}

Das will aber noch nicht so richtig...

Edit:

Code:

.test{  
  background-image:url(img/right1.gif);
  background-position: right;
  background-repeat:no-repeat;
}
.test:before{
  content:url(img/left1.gif);
}

So gehts im FireFox, mein Freund, der IE, unterstützt before jedoch nicht :-).

Igel457

[igel457]

In meiner vorerst endgültige Lösung setze ich Width einfach auf 90% anstatt auf 100%... Beim Skalieren gibts zwar manchmal ein paar unschöne Konstelationen, aber ich denke ich lasse es jetzt einfach so. Ich denke dass ich spätestens in 1 Stunde meine neue Website oben habe...

Trotzdem danke an alle,
Igel457