Beiträge von Niklas

    Den Aufwand, es zu verstehen und sich einzuarbeiten, investiert man besser nicht in ein Layout mit float sondern etwas, das klar, verständlich, geradlinig und der neueste Stand der Technik ist: Flexbox.

    Werde ich mir auch auf jeden Fall mal anschauen.....Jedenfalls Vielen Dank für die Hilfe, ihr habt mir echt weitergeholfen!:thumbup:

    Das liegt am float: Wenn Du ein Element floatest, wird im Eltern-Container kein Platz mehr dafür reserviert. Daher liegt in deinem Fall das gefloatete Element außerhalb seines Beitragscontainers und überdeckt den folgenden Beitragscontainer. Das ist eine sehr unangenehme Eigenschaft des floating und ein Grund, warum ich und andere auch davon abraten.


    Ahhhhh! Da lag der Fehler! :) Vielen Dank, jetzt funktioniert auch alles. Alles was rechtsbündig sein sollte habe ich jetzt einfach durch text-align: right ersetzt. Damit scheint es auch zu funktionieren. :):):)

    Versuch erstmal was wir sagten .Eigentlich sollte das dann auch gehen .Nur warum brauchst du height:130px;

    Wenn ich deine Seite so sehe ,haben alle beitrags container feste grössen .Dann brauch man eigentlich keine angaben über 100%. Oder vieleicht doch ,weiß ja nicht was du vor hast

    Das ist ja das komische. Wenn ich beispielweise 100% height nehmen würde, dann macht er einen Margin wieder mitten im Text (siehe Foto):



    bild3.png


    Irgendetwas stimmt da mit der Klasse Beitrag nicht.

    Ja in etwa! Hier mal ein Beispiel:


    Ich habe z.B. 2 verschieden Beiträge im HTML Quellcode (hier ohne Inhalt):


    So der CSS-Eintrag für die Klasse .Beitrag sieht folgendermaßen aus:


    CSS
    1. .Beitrag {
    2. max-width: 50%;
    3. background-color: white;
    4. margin: 20px auto;
    5. display: block;
    6. }

    Logischerweise müsste ja nun ein Abstand von 20px zwischen den beiden Beiträgen kommen , oder? Der Abstand ensteht jedoch zwischen der Klasse .headpicture und .Kurztext. Bei einem Klick auf "untersuchen" bei Google Chrome wird mir angezeigt das die .Beitrag Klasse aus dem Text vom ersten Beitrag und dem Bild aus dem zweiten Beitrag besteht. Wie kann das sein? Die Div-Klasse ist doch klar abgegrenzt.

    Also soweit sieht alles gut aus. Das einzige Problem sind die Beiträge. Sobald ich bei der .Beitrag Klasse height wegnehme bzw. es keine Vorgabe für die Höhe mehr gibt, ist eine Beitrag Klasse immer der untere Text eines Beitrages und das "headpciture" des darauffolgendem Beitrages. Da ich einen Margin haben möchte ist dieser jetzt immer zwischen Bild und zugehörigen Text. Eine Beitrag Klasse soll immer das ".headpciture", der ".kurztext" und die ".unterschrift" sein.


    Die !aktuellen! index und Stylesheet dateien habe ich mal hier angehängt.

    Dateien

    • Webseite.zip

      (4,44 kB, 3 Mal heruntergeladen, zuletzt: )

    Interesante frage. Wenn ich daraus eine fiddle mache verschiebt sich nix ineinander. Ich würde auf die bootstram einbindungen tippen weil die in der fiddle nicht bei wahren.Aber sicher bin ich mir da auch noch nicht .Ich probiere weiter

    Danke für deine Antwort! Ich werde es mal ausprobieren.

    Danke erstmal! Leider klappt das mit der Höhe noch nicht so ganz. Sobald ich sie weg lasse, wird nur noch das "headpicture" als Klasse ".Beitrag" gesehen. und er macht um das Bild einen Margin von 20px.

    Hallo Forum!


    Ich benötige Hilfe bei meiner Webseite niklasnaturblog.de. Um die Seite für Mobilgeräte zu optimieren, versuche ich momentan denn Quellcode anzupassen. Navbar, Überschrift und Banner passen sich schon mal an, aber die "Beiträge" weiter unten schieben sich ineinander und nebeneinander. Hat jemand eine Idee oder einen Vorschlag was ich versuchen könnte, um dies zu verhindern? Im Stylesheet sieht die Klasse für die einzelnen Beiträge momentan so aus:


    CSS
    1. .Beitrag {
    2. width: 1020px;
    3. height: 125%;
    4. max-width: 90vw;
    5. background-color: white;
    6. margin: 20 auto;
    7. display: block;
    8. position: absoloute;
    9. }

    width und height sind wahrscheinlich die Hauptprobleme, da diese Werte bisher nur für meinen Bildschirm ausgelegt sind.


    Ich hoffe ihr könnt mir weiterhelfen! :)