CSS - Design (clear - Problem)

-Oliver- · #1 (**permalink**) 20.12.2005, 12:01

Sorry falsches Bereich, nun richtig:

Hi!

Also ich habe ein CSS Problem.

Ich habe eine Seite mit Navigation und Contentbereich.

###############
# navi # content #
###############

dies geschieht mit float
also

#navi {width:200px;float:left}
#content {margin-left:200px}

lauft alles wunderbar

aber nun will ich im contentbereich

# bild # Text

# bild # Text

damit wenn mal weniger Text ist, schiebt sich das bild nach oben neben das obige Bild.

CSS-Code

#bild {width:100px;float:left}

#text {clear:left; }

das clear geht aber nicht, weil ich dadurch das floaten vom navi-content beende.

Bitte um Lösungsideen.

Vielen Dank im Voraus und schöne Weihnachtszeit

Boris · #2 (**permalink**) 20.12.2005, 12:09

Meinst du nicht, ein Beitrag zu dem Thema reicht?

-Oliver- · #3 (**permalink**) 20.12.2005, 12:21

naja kann ihn leider nicht löschen, aber egal, habe ihn nun umbenannt.

Aber das soll ja nicht das Problem sein, eigentlich würde mich eine Lösung für mein Problem freuen.

Wer hat damit Erfahrungen bzw. Ideen?

-Oliver- · #4 (**permalink**) 21.12.2005, 14:26

Hallo nochmals!

Leider brachten sie bis jetzt noch keine Verbesserungen.

Deswegen habe ich mal das Beispiel online gestellt, damit sich alle etwas vorstellen können.

http://oliver.cybton.com/test/clear-float.htm

Code:

Code:

<html>
<head></head>
<body>
<div style="width:150px;float:left;border:1px red solid">
	navigation
navigation

	navigation
navigation

	navigation
navigation

	navigation
navigation

	navigation
navigation

</div>
<div style="margin-left:150px;border:1px blue solid">content
		  
		<div style="border:1px blue solid;float:left;width:150px;height:100px">image</div>
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		
		<div style="border:1px blue solid;float:left;width:150px;height:100px">image</div>
		text text text text text text text text text text text text text text 	 
		<hr
		<div style="border:1px blue solid;float:left;width:150px;height:100px">image</div>
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		<hr>
	
</div>
</body>
</html>

Die Ideen habe ich wieder auskommentiert.

Bitte um eure Mithilfe

mazzo · #5 (**permalink**) 21.12.2005, 14:39

da ist noch einiges im Argen.
Ein hr Tag wird nciht geschlossen, es gibt keinen Doctype und es gibt keine clears. Wenn Du z.B. jedem floatierten img (warum ist das in einem DIV? das geht auch als img zu floaten, Texte würde ich in p-Tags schreiben) vorher ein clear mitgibst wird das schön untereinander dargestellt.
Wenn Du das CSS in eine CSS-Datei schreibst kann man das online-Beispiel auch mit der FF WebDeveloperToolbar schnell editieren und verbessern.

-Oliver- · #6 (**permalink**) 21.12.2005, 14:52

okey, habe nun die sachen beseitigt bzw erledigt.

Jedoch das Hauptproblem besteht noch immer.

mazzo · #7 (**permalink**) 21.12.2005, 15:02

ist doch fast fertig. Schau mal hier:
http://www.highresolution.info/webde...aml/index.html

bzw:
http://www.xhtmlforum.de/viewtopic47341nr47341.html

Chattanooga · #8 (**permalink**) 21.12.2005, 15:04

wie Mazzo schon sagte ....

Ich hoffe, dass dear folgende Code Deine Frage richtig beantwortet. Falls ja, gäbe es noch manches zu sagen, ich habe aber leider nicht mehr die Zeit dazu.

Gruß
Chattanooga

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title></title>
<style type="text/css" media="screen, projection, tv">

#navi {
	width: 150px;
	height: 12em;
	float: left; 
	border: 1px red solid;
}

#content {
	margin-left: 250px;
	border: 1px green solid;
	height: 1px;
}

.image {
	border: 1px blue solid;
	float: left; 
	clear:left;
	width: 150px;
	height: 100px;
}

</style>
</head>
<body>

<div id="navi">Navigation</div>

<div id="content">
<div class="image">image1</div>
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 

<div class="image">image2</div>
text text text text text text text text text text text text text text 	 

<hr />

<div class="image">image 3</div>
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
<hr />
</div>

</body>
</html>

Chattanooga · #9 (**permalink**) 21.12.2005, 15:07

oops ... Mazzos 15:04h posting hatte ich nicht gesehen.

Gruß
Chattanooga

-Oliver- · #10 (**permalink**) 21.12.2005, 21:09

Vielen Dank für die ganzen Tipps und Tricks!

Also der letzte Code von Chattanooga hat dann die Lösung gebracht. Leider gibt es aber dann noch nicht im Firefox, jedoch mit display:table-cell in der content-box ist es nun perfekt!

VIELEN, VIELEN DANK!!!

Ps.: Kann mir irgendwer erklären warum height:1px notwendig ist

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Gelöst!- CSS Problem - clear Befehl	madmaxy	CSS	2	01.08.2011 22:23
CSS Problem - Finde den Fehler nicht...	expou	CSS	4	27.04.2011 12:31
Inspiration - Sammlung von Links	emti	Ressourcen	8	01.12.2009 18:02
CSS Problem Design auf anderen Rechnern verschoben	MALPI	CSS	3	09.10.2008 10:51