CSS - Design (clear - Problem)

18.12.2005, 21:54

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

imported_Ben · 21.12.2005, 01:57

Äh, ich hab zwar keine Ahnung, was du derzeit hast .. aber du kannst ja einfach noch ein div-Element verwenden, welches du dann separat behandelst.

xabbuh · 21.12.2005, 09:16

Setze mal in das das div-Element mit der id content ein weiteres div-Element, welchem du die Eigenschaften float:left und width:100% gibst. Dann sollte clear:left sich nur auf die Elemente beziehen, die innerhalb des Inhaltsbereiches liegen.

21.12.2005, 14:16

Vielen Dank schon mal für die Ideen!

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

xabbuh · 21.12.2005, 14:33

Der Wert für margin-left muss 152 statt 150 lauten, da die Rahmebreite zur Breite des Elementes addiert wird.

21.12.2005, 14:38

ok, habe ich mal sicherheitshalber auf 160 gesetzt, aber dass war nicht so das problem - leider

Zergling-new · 21.12.2005, 14:47

Mal back to the roots: Was willst du eigentlich machen?
Einfach ne Navigation und daneben der Inhalt?
Dann hilft dir vielleicht das hier:
http://tut.php-q.net/frames.html
(der Dateiname ist etwas irreführend)

xabbuh · 21.12.2005, 14:55

Zitat:

Zitat von -Oliver-

ok, habe ich mal sicherheitshalber auf 160 gesetzt, aber dass war nicht so das problem - leider

Mit welchem Quellcode?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Design und Code Trennen	TeazY	PHP Tipps 2008	29	21.05.2008 12:08
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
include - get - big problem	Buschdieb	PHP-Fortgeschrittene	6	14.04.2006 20:28
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Problem CSS Design		HTML, Usability und Barrierefreiheit	3	27.09.2005 06:47
[Erledigt] Problem mit div, float und clear		HTML, Usability und Barrierefreiheit	2	09.09.2005 18:51
Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem: Internet Explorer zeigt DIV fehlerhaft an		HTML, Usability und Barrierefreiheit	13	04.01.2005 17:10
[PHP] Design Schutz für ein Gästebuch	I-Spy	PHP Tipps 2005	5	01.01.2005 11:25
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34
[Erledigt] Problem mit Timestamp!		PHP Tipps 2004	24	08.06.2004 19:51

18.12.2005, 21:54
Gast Beiträge: n/a	CSS - Design (clear - Problem) 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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.12.2005, 01:57
imported_Ben Erfahrener Benutzer Registriert seit: 18.09.2003 Beiträge: 13.598 PHP-Kenntnisse: Fortgeschritten	Äh, ich hab zwar keine Ahnung, was du derzeit hast .. aber du kannst ja einfach noch ein div-Element verwenden, welches du dann separat behandelst. __________________ Webentwickler-Blog - Buchbesprechung PHP Design Patterns - SQL-Antipatterns

21.12.2005, 09:16
xabbuh Erfahrener Benutzer Registriert seit: 13.11.2005 Beiträge: 2.583	Setze mal in das das div-Element mit der id content ein weiteres div-Element, welchem du die Eigenschaften float:left und width:100% gibst. Dann sollte clear:left sich nur auf die Elemente beziehen, die innerhalb des Inhaltsbereiches liegen.

21.12.2005, 14:33
xabbuh Erfahrener Benutzer Registriert seit: 13.11.2005 Beiträge: 2.583	Der Wert für margin-left muss 152 statt 150 lauten, da die Rahmebreite zur Breite des Elementes addiert wird.

21.12.2005, 14:38
Gast Beiträge: n/a	ok, habe ich mal sicherheitshalber auf 160 gesetzt, aber dass war nicht so das problem - leider

21.12.2005, 14:47
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Mal back to the roots: Was willst du eigentlich machen? Einfach ne Navigation und daneben der Inhalt? Dann hilft dir vielleicht das hier: http://tut.php-q.net/frames.html (der Dateiname ist etwas irreführend)