SELFHTML Forum
SELFHTML Forumsarchiv
2005
August
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 30. 08. 2005, 18:03
Tach alerseits
So, ich bin schon wieder ein Stück weiter bei meiner
CSS-Lern-Orgie :)
Nun stehe ich aber vor einem "Problem", wo ich nicht recht weiss,
wie ich es lösen soll. Bei SelfHTML und auch bei Google gibts ne
Menge Text dazu, aber so richtig weiter bin ich dadurch nicht.
Ich möchte folgendes Darstellen:
Text 01: Text 05
Text 02: Text 06
Text 03: Text 07
Text 04: Text 08
Es soll sozusagen eine Tabelle mit 2 Spalten sein.
Diese Tabelle soll eine feste Breite von 510px und
nur einen äusseren Rahmen haben.
Bisher habe ich das erstmal so gelöst:
HTML
-----------------------------------------------------------------<table>
<tr>
<td width=150>Text 01: </td>
<td>Text 05</td>
</tr>
<tr>
<td>Text 02: </td>
<td>Text 06</td>
</tr>
<tr>
<td>Text 03: </td>
<td>Text 07</td>
</tr>
<tr>
<td>Text 04: </td>
<td>Text 08</td>
</tr>
</table>
-----------------------------------------------------------------
CSS
-----------------------------------------------------------------table {
background-color: #004559;
border: 1px solid #ffffff;
width: 510px;
table-layout: fixed;
margin: 0 0 7px;
}
-----------------------------------------------------------------
Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.
(Nicht dass ich mir gleich wieder die Trickserei angewöhne).
Ansehen kann man sich das hier: http://www.spaceart.de/___Test-01.shtml
(Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)
Sieht ja soweit gut aus, aber wenn man nun die Schriftgröße
des Browsers verändert, laufen die Zeleninhalte der ersten
Spalte irgendwann in die der zweiten Spalte.
Ich hätte es gerne so, dass die Zelleninhalte dann in Ihrer Zelle umbrechen.
Oder kann man das ganze Anliegen vielleicht mit CSS
noch ganz anders lösen? Ich hatte schon überlegt,
zwei nebenander liegende Listen zu machen oder so.
Aber so ganz astrein kommt mir das nun auch nicht vor :)
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: wahsaga, 30. 08. 2005, 18:10
hi,
»» Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
»» Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.
das kommt einzig und allein darauf an, ob es sich bei den in der tabelle dargestellten daten um tabellarische handelt.
gruß,
wahsaga
--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 30. 08. 2005, 18:13
Hallo
»» das kommt einzig und allein darauf an, ob es sich bei den in der tabelle dargestellten daten um tabellarische handelt.
Es ist sowas wie:
Größe: 10 cm
Gewicht: 12 kg
Material: Plastik
Preis: 55,- EUR
Das sind doch tabellarische Daten, oder irre ich mich da?
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: wahsaga, 30. 08. 2005, 18:20
hi,
»» Es ist sowas wie:
»» Größe: 10 cm
»» Gewicht: 12 kg
»» Material: Plastik
»» Preis: 55,- EUR
da wäre bspw. eine definitionsliste ein recht brauchbarer elementtyp für.
»» Das sind doch tabellarische Daten, oder irre ich mich da?
jein.
ich würde eher zur definitionsliste tendieren.
gruß,
wahsaga
--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Die folgende Nachricht zum Thema stammt von: Detlef G., 30. 08. 2005, 18:24
Hallo Ingo
»» Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
»» Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.
Sind es tabellarische Daten, oder dient die Tabelle dem Layout?
»» (Nicht dass ich mir gleich wieder die Trickserei angewöhne).
»»
»» Ansehen kann man sich das hier: http://www.spaceart.de/___Test-01.shtml
»» (Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)
Darüber lässt sich trefflich streiten, ob es eine Tabelle oder eine
Definitionsliste ist.
»» Sieht ja soweit gut aus, aber wenn man nun die Schriftgröße
»» des Browsers verändert, laufen die Zeleninhalte der ersten
»» Spalte irgendwann in die der zweiten Spalte.
Warum verwendest du table-layout: fixed;?
»» Oder kann man das ganze Anliegen vielleicht mit CSS
»» noch ganz anders lösen? Ich hatte schon überlegt,
»» zwei nebenander liegende Listen zu machen oder so.
Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 30. 08. 2005, 18:34
Lieber Detlef
»» Sind es tabellarische Daten, oder dient die Tabelle dem Layout?
»» ...
http://www.spaceart.de/___Test-01.shtml
»» »» (Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)
»» ...
»» Darüber lässt sich trefflich streiten, ob es eine Tabelle oder eine
»» Definitionsliste ist.
Tja, wem sagst Du das :)
»» Warum verwendest du table-layout: fixed;?
Weil doch sonst die ganze Tabelle mit dem Inhalt wächst.
Und das möchte ich ja nicht. Die Tabelle insgesamt soll
auf jeden Fall immer 510px breit bleiben.
»» Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.
Bei dem Definitionslisten-Beispiel von SelfHTML
http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
Ist das bei Definitionsliten denn immer so?
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Detlef G., 30. 08. 2005, 19:07
Hallo Ingo
»» »» Warum verwendest du table-layout: fixed;?
»»
»» Weil doch sonst die ganze Tabelle mit dem Inhalt wächst.
Hast du das getestet?
Wann wächst die Tabelle mit dem Inhalt?
»» Und das möchte ich ja nicht. Die Tabelle insgesamt soll
»» auf jeden Fall immer 510px breit bleiben.
Was sieht besser aus, wenn die Tabelle wächst, wenn der Inhalt beim besten
Willen wirklich nicht mehr hineinpasst, oder wenn die Schrift über den
Border ragt?
»» »» Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.
»»
»» Bei dem Definitionslisten-Beispiel von SelfHTML
»» http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
»» sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
Ja, das ist die übliche Defaultanzeige der Browser.
»» Ist das bei Definitionsliten denn immer so?
Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
möchtest.
(Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
Selfhtml?)
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 31. 08. 2005, 19:00
Lieber Detlef
»» »» Bei Definitionslisten sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
»» Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
»» möchtest.
Tja, ich nun schon ne halbe Ewigkeit am googlen,
wie ich eine Defintionsliste so formatiren kann,
dass die "Inhalte" von <dt> und <dd> jweils nebeneinander
erscheinen und nicht um eine Zeile versetzt.
Ist das denn überhaupt machbar?
»» (Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
»» Selfhtml?)
Nein, ich habe die erstmal wieder rausgeschmissen.
Warum fragst Du?
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Detlef G., 31. 08. 2005, 20:07
Hallo Ingo,
ich schreibe meist keine direkten Lösungen, sondern versuche dir, auch mit
rhetorisch gemeinten Fragen, zu helfen, die Lösungen selbst zu finden.
»» »» Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
»» »» möchtest.
»» Ist das denn überhaupt machbar?
Könnte dir ein geschickter Einsatz von float (Textumfluss) eventuell helfen?
Dazu überlege, welche Elemente aus dem Fluss genommen werden müssen, damit
der Rest nicht darunter sondern daneben beginnt.
»» »» (Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
»» »» Selfhtml?)
»» Warum fragst Du?
Du meintest, die dl bei Selfhtml sähe anders aus, als du sie brauchst.
Die ul, bei deiner Navigation oder bei den #footerlinks sieht durch das CSS
auch anders aus, als die Beispiele in Selfhtml.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 31. 08. 2005, 21:12
Lieber Detlef
»» ich schreibe meist keine direkten Lösungen, sondern versuche dir, auch mit
»» rhetorisch gemeinten Fragen, zu helfen, die Lösungen selbst zu finden.
Ja, das begrüse ich auch sehr!
So werde ich hatlt "genötigt", nicht dem inneren bequemen
Schweinehund nachzugehen, sondern selbst zu wurschteln.
»» Könnte dir ein geschickter Einsatz von float eventuell helfen?
Allerdings :)
Hätte ich natürlich inzwischen auch selbst drauf kommen müssen.
Ich habe aber das Gefühl, dass die Tabelle doch besser geeignet ist,
weil bei der Definitionsliste ja nun der Inhalt von <dd> direkt,
neben dem von <dt> steht. Nun fehlt mir da halt noch so eine
Art Tabulator. Aber dafür ist so eine Definitionsliste wohl auch
nicht gedacht. Im Grunde sind es doch eigentlich auch tabellarische Daten,
weil die Begriffe in der ersten Spalte ja bei allen Produkten gleich sind.
»» Du meintest, die dl bei Selfhtml sähe anders aus, als du sie brauchst.
»» Die ul, bei deiner Navigation oder bei den #footerlinks sieht durch das CSS
»» auch anders aus, als die Beispiele in Selfhtml.
Sorry, da kann ich nun nicht folgen.
Ist aber auch egal, denke ich, weil ich mich bei Design der
Navi eh noch nicht entschlossen habe.
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Der Martin, 31. 08. 2005, 21:17
Hallo Ingo,
»» Sorry, da kann ich nun nicht folgen.
Darf ich mal eben das Brett wegnehmen... so... ja, jetzt müsste es gehen. ;-)
Was Detlef sagen wollte: Wenn du es bei einer Liste (UL) geschafft hast, das Aussehen durch CSS erheblich zu verändern, dann wirst du das doch wohl bei einer Definitionsliste (DL) auch hinkriegen!
»» Ist aber auch egal, denke ich, weil ich mich bei Design der
»» Navi eh noch nicht entschlossen habe.
Na gut, dann warten wir mal ab.
So long,
Martin
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 31. 08. 2005, 21:38
Lieber Martin
»» Wenn du es bei einer Liste (UL) geschafft hast, das Aussehen durch CSS erheblich zu verändern, dann wirst du das doch wohl bei einer Definitionsliste (DL) auch hinkriegen!
Ja, klar ... sorry für das Brett ... habs nun hinbekommen.
Aber die bündige Anordnung von den <dt>s und <dd>s ist doch mit CSS
nicht möglich ... oder?
Ich will nur ein JA oder NEIN hören.
Wenn ich nicht geht, brauche ich mir ja auch keinen abbrechen:)
Und wenn es doch geht, werde ich natürlich weiterforschen.
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Ashura, 31. 08. 2005, 21:43
Hallo Ingo.
»» Aber die bündige Anordnung von den <dt>s und <dd>s ist doch mit CSS
»» nicht möglich ... oder?
»» Ich will nur ein JA oder NEIN hören.
Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.
Also: /archiv/2005/5/t106772/#m662651
Einen schönen Mittwoch noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]
Die folgende Nachricht zum Thema stammt von: Detlef G., 31. 08. 2005, 22:56
Hallo Ashura
»» Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.
»»
»» Also: /archiv/2005/5/t106772/#m662651
Ich denke, dass ist viel mehr, als er braucht, vielleicht sogar irreführend.
Der Hinweis, dass Weite und/oder Mindestweite für viele Elemente angegeben
werden können, hätte doch gereicht.
Und wenn das nicht reichen sollte, in einem anderen Thread von Ingo, gab es
so ein Beispiel von mir.
Fröliche Suche! ;-)
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 01. 09. 2005, 11:20
Lieber Detlef
»» »» Also: /archiv/2005/5/t106772/#m662651
»» Der Hinweis, dass Weite und/oder Mindestweite für viele Elemente angegeben
»» werden können, hätte doch gereicht.
So weit bin ich inzwischen schon, dass ich innerhalb von
Sekunden den für mich relevanten Teil mit Weite und/oder
Mindestweite in dem Beispiel entdeckt hatte.
Und dann kahm natürlich auch gleich der Gedanke,
dass ich mal wieder auf das Naheliegenedste nicht selber gekommen bin ;-) (Ich muss wohl doch noch viel CSSen im Kopf)
Wenn ich solche Beispiele sehe, versuche ich natürlich immer,
den Teil herauszufiltern um den es mir geht.
Und wenn mir das nicht gelingt, speichere ich mir das lokal ab
und streiche alles aus dem Code, von dem ich mir sicher bin
dass es nichts mit meinem Anliegen zu tun hat.
Und wenn dann das pbriggebliebene noch funktioniert,
versuche ich natürlich, dass zu verstehen.
Das müsste doch eine ganz gute Methode sein, wobei ich natürlich
zu allererst immer versuche, mir den Code selber zusammenzustricken!
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 01. 09. 2005, 11:11
Liebe Ashura
»» Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.
:-))) ... Du traust mir noch nicht viel zu, gelle?
»» Also: /archiv/2005/5/t106772/#m662651
OK ich habe mir das Beispiel mal angesehen und mich natürlich
gleich geärgert, dass ich auf das einfachste mal wieder nicht
selber gekommen bin ;-)
Ich habs nun so gemacht:dl {
background-color: #004559;
border: 1px solid #ffffff;
margin: 0 auto 7px;
padding: 0.2em;
}
dt {
float: left;
}
dd {
margin-left: 8em;
}
Das Ergebnis ist hier: http://www.spaceart.de/___Test-01.shtml
Das obere ist eine Tabelle und das untere die Definitionsliste.
Die Definitionsliste sieht besser aus und vor allem ist
das Code-Stückchen auch wieder viel kleiner.
Was mich nur noch wundert ist, dass meine weiss-gerahmte Box beim
nicht mitwächst, wenn man die Schriftgröße z.B. im FF so dermassen
vergrößert, dass die Inhalte von den <dd>-Elementen nicht
merh umgebrochen werden können.
Hier auch nochmal ein Link ur entsprechenden CSS-Datei:
http://www.spaceart.de/___Test-01.css
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Detlef G., 01. 09. 2005, 12:23
Hallo Ingo
»» Was mich nur noch wundert ist, dass meine weiss-gerahmte Box beim
»» nicht mitwächst, wenn man die Schriftgröße z.B. im FF so dermassen
»» vergrößert, dass die Inhalte von den <dd>-Elementen nicht
»» merh umgebrochen werden können.
Ganz einfach, Tabellen passen sich der Größe des Inhalts an, wenn du das
nicht mittels table-layout:fixed verbietest. Andere Elemente halten sich
(außer im IE) an die angegebenen Maße.
In deinem CSS steht:#Inhalt {
width: 510px;
margin: auto;
min-width: 10em;
}
Damit hat dann auch dl eine Breite von 510px und eine Mindestbreite von
10em.
Bei 8em margin-left für dd und 0.2em padding für dl, bleibt nicht genug
Platz für den Inhalt von dd übrig.
Du hast jetzt die Möglichkeiten, entweder min-width für Inhalt zu
vergrößern (Spaltenbreite wächst eher), extra min-height für dl anzugeben (Verhalten, wie bei der Tabelle) oder es so wie bei meinem Beispiel zu machen.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 01. 09. 2005, 14:08
Lieber Detlef
»» Ganz einfach, Tabellen passen sich der Größe des Inhalts an
Ok, ich verstehe.
»» Bei 8em margin-left für dd und 0.2em padding für dl, bleibt nicht genug
»» Platz für den Inhalt von dd übrig.
OK, das verstehe ich auch.
Mann, das muss man ja echt aufpassen, wenn sich diese ganzen em
und paddings summieren :)
»» meinem Beispiel
Ich habe mir das angesehen ... vielen Dank erstmal dafür.
Nur verstehe ich nicht, warum Du da so viele paddings
für <dl>, <dt> und <dd> jeweils einzeln angegeben hast.
Es würde auch ein einziges em für <dl> reichen, also so:dl {
background-color: #004559;
border: 1px solid #ffffff;
margin: 0 auto 7px;
padding: 0.2em;
}
dt {
float: left;
min-width: 160px;
}
dd {
margin-left: 160px;
}
Hast Du das gemacht, dami der "Zeilenabstand" etwas größer wird
oder steckt noch ein anderer Grund dahinter?
Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: Detlef G., 01. 09. 2005, 14:51
Hallo Ingo
»» Hast Du das gemacht, dami der "Zeilenabstand" etwas größer wird
»» oder steckt noch ein anderer Grund dahinter?
Richtig erkannt, dadurch haben zusammengehörigen Listenpunkte einen kleinen
Abstand zu den Anderen, ohne dass sich der Abstand zum Border ändert.
Es wäre auch noch ein etwas Größerer möglich:dl {
background-color: #004559;
border: 1px solid #ffffff;
margin: 0 auto 7px;
padding: 0 0.2em;
}
dt {
float:left;
min-width:160px;
padding-top: 0.2em;
}
dd {
margin-left:160px;
padding: 0.2em 0;
}
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 01. 09. 2005, 16:09
Lieber Detlef
»» Richtig erkannt, »» Es wäre auch noch ein etwas Größerer möglich: ...
OK, verstehe.
Mal sehen, welcher Abstand mir besser gefällt.
Danke und Gruß
Ingo
Die folgende Nachricht zum Thema stammt von: wahsaga, 30. 08. 2005, 19:08
hi,
»» Bei dem Definitionslisten-Beispiel von SelfHTML
»» http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
»» sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
»» Ist das bei Definitionsliten denn immer so?
nein, das kommt natürlich - wie immer - auf die formatierung an.
auch dd und dt könnten beispielsweise mit display:inline oder float formatiert werden.
gruß,
wahsaga
--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Die folgende Nachricht zum Thema stammt von: Ingo Siemon, 31. 08. 2005, 12:32
Lieber wahsaga
»» nein, das kommt natürlich - wie immer - auf die formatierung an.
»» auch dd und dt könnten beispielsweise mit display:inline oder float formatiert werden.
Ahhh, prima.
Ich werde heute mal ne Weile mit diesen Definitionslisten herumspielen.
Mal sehen, wie mir das gelingt.
Gruß
Ingo
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)