Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS - Design (clear - Problem)

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    [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
    Stichworte: -
  • #2
    Ä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.
    [b][url=http://www.benjamin-klaile.de]privater Blog[/url][/b]

    Kommentar

    • #3
      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.

      Kommentar

      • #4
        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

        Kommentar

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

          Kommentar

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

            Kommentar

            • #7
              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)

              Kommentar

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

                Kommentar

                Vorherige Weiter
                Lädt...
                X