"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

CSS: div über spans mit br

fatmike182 03.01.2007 - 00:44 716 5
Posts

fatmike182

Agnotologe
Registered: Oct 2005
Location: VIE
Posts: 4223
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
abc.jpg

semteX

begehrt die rostschaufel
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14595
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

Agnotologe
Registered: Oct 2005
Location: VIE
Posts: 4223
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

Agnotologe
Registered: Oct 2005
Location: VIE
Posts: 4223
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:
abc.jpg
(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
Bearbeitet von fatmike182 am 03.01.2007, 21:55

tomstig

OC Addicted
Avatar
Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341
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

Agnotologe
Registered: Oct 2005
Location: VIE
Posts: 4223
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!
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz