CSS: div über spans mit br

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_div_ueber_spans_mit_br_174219/page_1 - zur Vollversion wechseln!

fatmike182 schrieb am 03.01.2007 um 00:44

Hallo,

ich hab wieder ein kleines css-problem:
In einem Block (div) soll die erste/evtl auch die 2. Zeile auch als div sein, aber darunter in 3 Spalten (wieviele Reihen soll aber egal sein) je "Spaltenfeld" ein Span:

[div class="block"]
[div class="titel"]Text[/div]

[span class="dreispalten"]linksoben[/span]
[span class="dreispalten"]mitteoben[/span]
[span class="dreispalten"]rechtsoben[/span]
[br /]
[span class="dreispalten"]linksunten[/span]
[span class="dreispalten"]mitteunten[/span]
[span class="dreispalten"]rechtsunten[/span]
[/div]

um 3 Spalten zu erhalten hab ich keine positions-Angaben gemacht, sondern die width:33% & dann float:left gesetzt.
Soweit funktioniert das auch.

Aber:
Um den gesamten Block (class="block") will ich einen Rahmen haben. Das funktioniert nur solange ich kein float für die dreispalten-Klasse setze! (float MUSS ich setzten, um verlässlich die 33% zu bekommen, wenn kein float gesetzt ist ist der span-bereich immer nur so breit wie der Text, auch wenn der Text >33% lang ist!)
# float:left -> das block-div geht nichtmehr um die spans, der Rahmen umscchließt gerade mal die erste Zeile!

#1 ich habe schon oft gesehen, dass float in Verbindung mit spans verwendet wird: ist das überhaupt ok?
#2 was habe ich falsch gemacht? Wie könnte ich das anders lösen? (will position vermeiden, wenns geht)
& jedesmal eine Höhenangabe für das div eingeben kanns auch nicht sein...

tia,
michi

semteX schrieb am 03.01.2007 um 00:58

ein sehr interessantes problem, da ich grad massiv mit css herumhur würds mich a persönlich interessiern, könntest wo das htmlfile + css raufhaun?

fatmike182 schrieb am 03.01.2007 um 01:05

yeppa: wollte ich euch eigentlich ersparen *µ*

Ausschnitt vom html:

Code: PHP

 
	<div class="kasten">
		<div class="frage">
			Testfrage
		</div>
		<span class="three l">links</span>
		<span class="three m">links</span>
		<span class="three r">links</span>
		<br />
		<span class="three l">links</span>
		<span class="three m">links</span>
		<span class="three r">links</span>
	</div>
	
	<div class="kasten">
		<div class="frage">
			Testfrage
		</div>
		<span class="three l">links</span>
		<span class="three m">links</span>
		<span class="three r">links</span>
	</div>

Ausschnitt vom css

Code: PHP

div{border:#009933 solid thin;}
span {border:#ff9933 solid thin;}
div.kasten {width:99%; margin:5px; clear:both; float:none;}
div.frage {color:#666666; width:100%; margin-bottom:8px;}
span.three {width:33%; float:left;}

Erklärung:
- die Klassen l, m, r von den Spans bräuchte ich evtl später.
- wenn ich span durch div ersetzte gehts auch nicht!
-> das block-div geht nicht um die spans herum, da diese float:left sind? (aber warum?)
- Ursprünglich wollte ich das mit einem table machen, aber wegen ie-bug versuch ichs jetzt mit span/div

tia!
Michi

fatmike182 schrieb am 03.01.2007 um 21:51

schön langsam fallen mir keine Argumente ein, warum <table> schlechter sein soll als css!

wenigstens hab ich das umsetzen können, ist aber relativ sehr grauslich...
Was ich gemacht habe:
das letzte Span float:none, die anderen können links-gefloatet werden!

Code: PHP

<style type="text/css">
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFFFFF;}
div.kasten, div.frage, span {background-color:#ABC2D5;}
div{border:#009933 solid thin;}
span {border-left:#ABC2D5 solid thin; border-right:#ABC2D5 solid thin; border-top:#ABC2D5 solid thin;}
div.kasten {width:99%; margin:5px;}
div.frage {color:#666666; width:100%; margin-bottom:8px;}
span.three {width:33%; float:left;}
span.last {width:33%; float:none;}
</style>
</head>
<body>
	<div class="kasten">
		<div class="frage">
			Testfrage
		</div>
			<span class="three">linksoben linksoben linksoben linksoben linksoben linksoben linksoben linksoben linksoben </span>
			<span class="three">mitteoben </span>
			<span class="three">rechtsoben rechtsoben rechtsoben rechtsoben rechtsoben rechtsoben rechtsoben rechtsoben</span>
			<br />
			<span class="three">linksunten</span>
			<span class="three">mitteunten </span>
			<span class="last">rechtsunten rechtsunten rechtsunten rechtsunten rechtsunten rechtsunten </span>
	</div>
</body>

sieht dann folgendermaßen aus:

(um einen korreketn Zeilenumbruch in der letzten Zelle = rechtsunten, die ohne float, zu haben MUSS man einen Border setzen, sonst ist der Zeilenumbruch von rechtsunten nach linksunten!)

falls jemand noch eine bessere Möglichkeit kennt, um die modernere Lösung von Layouten ohne CSS umzusetzen, wäre ich sehr dankbar!

Ciao,
Michi

tomstig schrieb am 03.01.2007 um 22:34

Kannst du amal einen Screenshot von deinem erwünschten Design machen? Mit Buchstaben alleine kann man sich nichts vorstellen und deswegen schwierig helfen. Weil Lösungen gäbe es noch genug

fatmike182 schrieb am 03.01.2007 um 22:40

erwünschtes Design (bei Opera & FF funktionierts):
http://human-future.tk/
(damals noch mit Tabellen gemacht)

Prinzipiell möchte ich eben eine Fragezeile & darunter einen 3-spalitigen Teil für die Antworten; das ganze soll in einem Block (div oder was auch immer) stehen, damits geordneter aussieht!

thx!