Box Css-richtig darstellen

holunda · 24.01.2005, 10:00

Hi Css'ler

Bei meinem aktuellen Projekt versuche ich per CSS eine Box darzustellen. Eine Box heißt in meinem Fall:

Code:

<div class="box">
    <a class="toogle" href="">Der toogle link</a>
    <div class="boxHead">Boxtitle</div>
    <table class="listing">
    // Tabellarische Datendartstellung
    </table>
</div>

Soweit sogut.
Jetzt soll es aber noch die Möglichkeit geben die Tabelle zu tooglen (also ein- und ausblenden wenn gewünscht). Die Technik ist ja kein Problem, aber:

Momentan siehts im IE so aus wie im Anhang. Wie soll ich das CSS mäßig richtig schreiben, so dass es valid und noch gut aussschaut

Boris · 24.01.2005, 10:27

Lass Dich doch vom Code des vBulletin hier "insprieren". Oder von Rage3D.com

holunda · 24.01.2005, 10:36

Ist den ein "<thead>" Tag valide so wie er hier im vbulletin verwendet wird?

holunda · 25.01.2005, 13:05

*schieb* wo sind die Validitäts-Verfechter?

25.01.2005, 13:07

moinsen,
kannst du das beispiel mit css ma online schieben (*schieb*)

holunda · 25.01.2005, 13:16

aber klar doch

http://www.hard-soft.at/projekte/box/box.html

25.01.2005, 13:47

spendierst du noch ein paar (hintergrund) bilder?

25.01.2005, 14:00

aha, jetzt dämmerts.
probiers doch mal so:

PHP-Code:


			
div.header {background: url("bg.gif"); usw...}

div.header h1 {float:left;display:inline, usw...}

div.header a img {float:right;display:block;width:breite des togglebildes; usw...}

PHP-Code:


			
<div class="header"><h1>Aufgaben</h1><a href="#" onclick="return toggle_collapse('aufgaben');" class="toogle" title="Box ausblenden"><img id="collImg_aufgaben" src="box_dateien/toogle.gif" alt="Box ausblenden" border="0"></a> 

<br style="clear:both">

//edit
hier mal ein beispiel

holunda · 25.01.2005, 15:21

sorry wegen den bildenr

Dankeschön genau das hab ich gebraucht !!!

holunda · 25.01.2005, 15:37

hmm kleines Problem habe ich noch. Ich brauche im H1 ein Hintergrundbild (is so ein BalkenHintergrund) Oder soll ich das in den div.header ganz oben anordnen?

Alex

25.01.2005, 15:54

haus in das umgebende div. soll wohl so sein, wie auf dem bild, oder?
dann gehts ganz durch und liegt auch noch hinter dem link.
wenns da nicht mehr sein soll, hab ich noch ne andere lösung, ich hau die mal eben noch in die beispieldatei, moment

holunda · 27.01.2005, 14:46

Jetzt hab ich noch ein problem:
Ich brauche im Titel noch einen Rahmen unten und rechts, wie krieg ich den hin?

danke und grüße aus dem verschneiten Tirol
Alex

Boris · 27.01.2005, 15:50

Kannst Du auch mal die Suchfunktion bemühen, oder hattest Du vor, jede Einzelheit nachzufragen? ;-)

Zwei Möglichkeiten:

Code:

.test
{
border: #000 1px solid;
border-width: 0 1px;
}

Oder:

Code:

.test
{
border-right: #000 1px solid;
border-left: #000 1px solid;
}

holunda · 27.01.2005, 17:18

hi Adagio,

... und könntest du dich mal genau in thread einlesen?
Mein Post bezog sich auf die Boxanordnung von ing.o.

Sorry, aber ich weiß sehr wohl wie man einen Rand in CSS darstellt

freundliche Grüße
Alex

27.01.2005, 17:26

welchen rand meinst du? von der h1 oder von der ganzen box?