Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS - Design (clear - Problem)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Gast-Avatar
    Ein Gast erstellte das Thema [Erledigt] CSS - Design (clear - Problem).

    [Erledigt] 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

  • xabbuh
    antwortet
    Zitat von -Oliver-
    ok, habe ich mal sicherheitshalber auf 160 gesetzt, aber dass war nicht so das problem - leider
    Mit welchem Quellcode?

    Einen Kommentar schreiben:


  • Zergling-new
    antwortet
    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)

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    ok, habe ich mal sicherheitshalber auf 160 gesetzt, aber dass war nicht so das problem - leider

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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

    Einen Kommentar schreiben:


  • xabbuh
    antwortet
    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.

    Einen Kommentar schreiben:


  • imported_Ben
    antwortet
    Ä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.

    Einen Kommentar schreiben:

Lädt...
X