Mein Code

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Mein Code

    Heyho,

    um euch noch ein wenig auf den Sack zu gehen, habe ich mein erstes Webdesign gecodet.
    Ich habe versucht Responsive zu Coden aber das hat nur so halb geklappt. Nun habe ich ein paar Fragen:
    1. Warum wird im Validator angezeigt das ich den <main> nicht geschlossen habe obwohl er geschlossen ist?
    2. Unter dem MainMenu sind einige Bilder (offers) eingeblendet, was wäre hierbei der genau richtige Code, damit sie sich nicht überlappen?
    3. Was ist die beste möglichkeit einen Bereich unterschiedliche Breiten zu geben (mit dem Responsive Teil). Sprich .grid-1 { width: 20% } .grid-2 { 40% } .grid-3 { der rest von den 100% }
    4. Würde jemand ggf. meinen Code Kommentieren (sollte jemand Lust haben) damit ich ihn dementsprechen überarbeite kann?




    Gruß, Devine_

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Devine ()

  • Zu Punkt 2:
    Die Idee ist richtig, aber die Umsetzung passt nicht.
    Dein Problem:
    Du gibst .offer-span_1_of_2 eine Breite von 49.2% (das passt (nimm lieber "gerade" Zahlen)), aber danach gibst du .offer-1-width eine Breite von 66%. Da die beiden DIVs relativ zueinander sind beziehen sich die 66% auf die 49.2% und dir verschiebts den gesamten Inhalt. Mach daraus 100% und du hast den vollen Platz zur Verfügung.
    Lösung:
    Du definierst dir ein DIV mit einer bestimmten Breite (in Prozent normalerweise), und fügst dann entweder ein weiteres DIV mit 100% Breite ein (wenn du mehr Inhalt hast) oder gibst eben dem Bild direkt eine Breite von 100%. Das hängt zum einen vom jeweiligen Anwendungsfall ab, da u.U. auch mit position: absolute gearbeitet werden sollte, und zum anderen vom persönlichen Geschmack.
    Also Beispiel (ungetestet):

    CSS-Quellcode

    1. .firstOffer {
    2. width: 40%;
    3. float: left;
    4. }
    5. .firstOffer img {
    6. width: 100%;
    7. }
    8. .firstOffer .description { /* Dein Begleittext */
    9. position: absolute;
    10. left: 0; /* unten links ins Eck setzen */
    11. bottom: 0;
    12. }
    Alles anzeigen


    Zu deinem Responsiv-Problem:
    Die gängigste Methode ist es einen Container zu definieren, der dir erstmal alles auf eine gemeinsame Breite setzt und zentriert. Und diesen kannst du dann über @media für jede beliebige Bildschirmbreite verändern und musst dir kaum Sorgen um anderen Code machen.

    CSS-Quellcode

    1. .container {
    2. margin: 0 auto; /* automatische Zentrierung */
    3. width: 1024px; /* Beliebig wählbar */
    4. max-width: 80%; /* optional */
    5. }


    Zwei Tipps von mir (nur meine Ansicht, kein Muss ;) ):
    • Verwende "gerade" Zahlen. 49.2% oder 32.26% machen dir keine Freude zum arbeiten und sagen mir, ohne den Rest der CSS anzuschauen, dass du irgendwo margin-Werte hast, wo keine hinsollten. Denn die Regel ist immer: Wenn du relative Angaben hast, dann zerschießen dir margin-Werte im Normalfall alles (oder rufen irgendwelche Sonderheiten hervor). Deswegen regel mit einem DIV nur die Größen und nimm dann ein zweites DIV, um den Inhalt des DIVs zu positionieren.
    • <br> Tags werden faktisch nicht (mehr) verwendet, nutze lieber <p> um deine Texte zu gliedern.

    Falls irgendwas von diesem Text nicht verständlich war (und davon geh ich aus, weil ich mich selber beim Durchlesen schon verhedder^^), dann kann dir das gern auch per PN in aller Ruhe nochmal erklären.

    PS: Ich glaube Dennis321 wollte seine Begriffe genau andersherum verwenden, denn seine Lösung ist so auch nicht stimmig und wenn ich mir den betreffenden Block ansehe, glaube ich nicht, dass du den verlinken möchtest :S