nicht angemeldet
td width per CSS
moin community,
ich hab ein problem, welches mich vor ein rätsel stellt. ich scheine heute auf einem auge blind zu sein. eigentlich bereitet mir die formatierung via CSS keine schwierigkeiten, aber jetzt hapert es irgendwie.
ich habe eine einfache tabelle, die via CSS formatiert wird. die Tabelle sieht folgendermaßen aus:
<table class="disco_table">
<tr class="disco_tr">
<td class="disco_td_left">Text
</td>
<td class="disco_td_right">Text
</td>
</tr>
<tr class="disco_tr">
<td class="disco_td_cover">
<img src="1.jpg" width="150" height="150" border="0" alt="">
<img src="2.jpg" width="150" height="150" border="0" alt="">
</td>
<td class="disco_td_center">
<table width="100%">
<tr>
<td colspan="2" align="center">
<u><b>TITEL</b></u>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<center><b><u>A</u></b><br></center>
Inhalt A
</td>
<td width="50%" valign="top">
<center><b><u>B</u></b></center>
Inhalt B
</td>
</tr>
<tr>
<td colspan="2">
<hr color="#000000" width="90%">
<br>
Text
</td>
</tr>
</table>
</td>
</tr>
<tr class="disco_tr">
<td class="disco_td_left">
Label: <b>Eigenproduktion</b>
</td>
<td class="disco_td_right">
Labelbezeichnung - <b>--/--</b>
</td>
</tr>
</table>
Wie man sieht ist der großteil mit klassen ausgestattet, welche in meiner CSS datei auch liegen.
table.disco_table {
width: 500px;
border: 1px solid #000000;
padding: 0px;
margin: auto;
border-collapse: collapse;
border-spacing: 0px;
}
table.disco_table td { }
td.disco_td_left {
width:300px;
text-align: left;
padding-left: 4px;
background: #494041;
}
td.disco_td_right {
width:200px;
text-align: right;
padding: 0px;
background: #494041;
}
td.disco_td_center {
width: 350px;
text-align: center;
padding: 3px;
background: #494041;
vertical-align: top;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
td.disco_td_cover {
width: 150px;
text-align: center;
padding: 0px;
margin: 0px;
background: #494041;
vertical-align: top;
border-right: 0px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
tr.disco_tr {
padding: 0px;
margin: 0px;
width: 100%;
}
Das Problem, die beiden Spalten in der mitleren der 3 Zeilen der grundtabelle nehmen nicht die gewünschten breiten von 150 und 350 px an, sondern teilen sich den platz 50/50.
in meiner CSS ist über 700 zeilen zuvor eine grunddefinition für tabellenzellen. aber die hat bisher eigentlich nie probleme bereitet.
td {
text-align: left;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
}
ich hoffe mir kann jmd. die augen öffnen, wo es da hapert.
gruß und dank
-
Hallo zzz,
meiner Meinung kann es nicht funktionieren, weil die erste td der ersten Spalte 300px, die erste td der zweiten Spalte aber nur 150px breit ist - was willst Du denn bezwecken?
Hehe, eine Disco-Table, gibts da auch Table-Dance? ;D
Gruß,
Manu-
moin,
das wird eine discographie. und pro platte gibt es eben dieses grundgerüst.
dass es daran liegt, dass die zelle drüber und drunter 300px messen und die mitlere nur 150px haben soll, das weiß ich. aber wie löse ich das, ohne in diese zelle eine weitere tabelle einzufügen und der zelle colspan="2" zu geben? tabellen überall nerven mich tierisch.
wollte es erst mit divs machen, aber irgendiwe wollen die nicht so wie ich und statt nebeneinander, liegen sie untereinander.
da dachte ich an
<div id="container">
<div id="left"> </div>
<div id="right"> </div>
<div id="cover"> </div>
<div id="inhalt"> </div>
<div id="left"> </div>
<div id="right"> </div>
</div>und dann eben #container mit 500px, #left mit 300px, #right 200px, #cover 150px, #inhalt 350px...
aber statt dass sich die divs nebeneinander legen liegen sie alle munter untereinander... dabei sollen doch immer 2 in eine zeile, denn immer 2 ergeben eben auch ne 500px breite.
also dachte ich an tabellen. aber da will ich nicht unbedingt 3 tabellen verschachteln.-
Hallo Jacob,
(nur als Tip vorneweg: ids sollten unique sein, also nur einmal pro Seite vorkommen).
Ohne Colspan wüßte ich tabellenmäßig keine Lösung (allerdings würde ich mal schätzen, dass Du darin keine weitere Table brauchst...).
Hast Du mal float:left bzw. float:right in die ids...ähh, Klassen Deiner Divs eingebaut? Das dürfte in Verbindung mit display:inline Deine Probs lösen...
Gruß,
Manu--
Vegetarier essen meinem Essen das Essen weg.-
ha, ja, sicher, ich habe float vergessen.
genau das wollte ich auch gerade schreiben. stellt mich aber immernoch vor das problem, dass height: 100%; bei den divs nicht funzt. und dann mal eben nachfolgende divs noch dorthin rutschen, wohin sie nicht sollen.
tabellen sind eben doch mist, auch wenn sie auf den ersten blick immer ne einfache lösung darstellen, dann aber um schachtelungen nicht drum herum kommen.
wenn ich das mit der höhe der divs noch hinbekomme hab ich was ich will, nur wesentlich fixer.
wieso sollte man denn ein und dieselbe ID nicht mehrfach benutzen, wenn die divs derselben formatierung gedacht sind. oder soll ich dann neben id <div id="left1" class="left"> </div> o.ä. einführen?
-
height:100% bei Divs? was meinst Du denn?
Naja, ich finde Tabellen immer noch einfacher zu handhaben *duck* - aber je mehr div-Seiten ich baue, desto einfacher gehts...Divs haben halt mehr andere Vorteile...
hmnaja, versuch mal ein getElementById (oder einfach einen Validator ;)
Gruß,
Manu--
Vegetarier essen meinem Essen das Essen weg.-
naja, bei dem beispiel das ich postete, habe ich insgesamt 7 divs. einer ist ein übergeordneter container. in diesem liegen 6 weitere. von diesen 6 sollen immer 2 in einer zeile, sprich nebeneinander liegen. also 3 zeilen a 2 spalten.
nun ist aber leider meine rechte spalte in der 2ten zeile vom inhalt her kürzer, als die erste spalte der 2ten zeile. somit rutschen die nachfolgenden 2 divs der 3ten zeile in eben diesen raum (plus alles was danach noch kommt)
also brauch ich da etwas, dass diesen div id="inhalt" auf die höhe des divs id="cover" anpasst.
-
Ok, ich muss zugeben, dass ich im Mom etwas in Hektik bin (und auch aufm Schlauch stehe...)
Gruß,
Manu--
Vegetarier essen meinem Essen das Essen weg.-
Dann solltest du die 2 Container, die nebeneinanderliegen, wiederum mit einem Container einschließen.
-> Hauptcontainer mit 3 untereinander angeordneten Containern
-> in jedem der 3 Container deine 2 Container/Spalten... dran denken. Wer floated, muss auch clearen (;-) ...
M.
-
hab es jetzt mit divs hinbekommen. was mich aber prinzipiell an divs stört, ist, dass man ihnen keine auto höhe geben kann, dann auf bg bilder angewiesen ist, wenn man rahmen ala 1px etc will.
und jetzt ganz speziell das mit dem float. ich habe 500px breite divs eingebaut mittig (margin:auto) in einen contentbereich von 56opx. nun sind links udn rechts also 30px platz. bei ner tabelle wäre das mti center kein problem. ALLES nachstehende beginnt darunter.
wenn ich jetzt aber unter den container div bspw. noch ne tabelle habe, die auch 500px breit ist, oder nur n wort, was kurz ist oder so, setzt sich alles neben den float:left div. sprich es zerschiesst das ganze layout. wie bekommt man diesen effekt weg?
mein container div hat gar keinen float befehl abbekommen aus eben dem grund.
-
-
-
-
-
-
-
-