Hilfe bei Responsive Web Design

    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
    .Beitrag {
    width: 1020px;
    height: 125%;
    max-width: 90vw;
    background-color: white;
    margin: 20 auto;
    display: block;
    position: absoloute;

}

    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! :)

    Ohne mir das näher anzuschauen, kann ich schon mal Folgendes sagen:


    Die Breite gibst du am besten in Prozent an und die Höhe lässt du ganz weg.


    Des Weiteren sehe ich nicht, warum du in diesem Fall absolute Positionierung nutzen solltest. Das kann also höchstwahrscheinlich auch weg.


    Bei margin hast du einen kleinen Fehler. Es soll wahrscheinlich 20px, nicht nur 20, heißen.

    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 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.

    Zitat von basti1012

    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.

    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.

    Hey Niklas,


    also wenn ich das jetzt richtig verstanden habe, dann beinhaltet deine Klasse mit dem Namen .beitrag immer den Text von dem jetzigen Bild, sowie das Bild vom nächsten Bild? Und du möchtest nun einen Abstand zwischen diesem Text und dem darauffolgenden Bild?


    Gruss

    Zipity :)

    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
    .Beitrag {
    max-width: 50%;
    background-color: white;
    margin: 20px auto;
    display: block;

}

    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.

    Hier sind noch paar sachen die verkehr


    position: absoloute;


    Hättest du das überall richtig geschrieben ,hättest du ein riesen haufen auf ein Fleck gehabt . Das ganze ploaten hat keine wirkung weil falsch geschrieben. Wie Sempervivum schon schrieb brauchst du keine positions angaben wenn du alles untereinander schreibst.


    Willst du versuchen das selber umzu schreiben ? Fang mit der Css an und lösch alles weg was man nicht brauch .

    Dein HTML wahr jetzt kein Fehler drinne ,zuumindest habe ich nix entdekt

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden