Zwei kleine CSS Problemchen

  • Halli Hallo. Ich habe zwei gröbere CSS Probleme bei meinem ersten selbst entworfenen Template. Ich habe leider nicht so viel auf dem Kasten was CSS und HTML angeht aber für meine Band möchte ich auf jeden Fall die Homepage selber basteln.

    1.) Ist es möglich die Seite bzw. den Footer auf maximale Auflösung anzupassen, sodass der Footer, egal welche Auflösung man hat immer ganz unten ist (siehe Screenshot1). Die Pfeile symbolisieren wo der Footer hin sollte.

    2.) Wenn ich Fotos einfüge und diese per Bildfunktion "rechts" neben dem Text platziere wird das Bild zwar im Editor richtig platziert, auf der Homepage selber jedoch immer links. (siehe Screen 2).

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • zu 1) Diese Anleitung könnte Dir weiterhelfen: http://matthiasschuetz.com/css-sticky-footer

    zu 2) Dem Theme fehlen wahrscheinlich die entsprechenden CSS Anweisungen zum Ausrichten der Bilder

    Füge der style.css mal folgendes hinzu:

    Code
    .alignleft{float: left; padding: 4px;}
    .alignright {float: right; padding 4px;
    .aligncenter {margin: 0 auto; padding 4px;}

    Sollte das nicht funktionieren, wäre ein Link zum Blog hilfreich.

  • Vielen Dank schonmal für eure Hilfe!

    Ich hab dem css mal die fehlenden Umhang Boxen hinzugefügt.

    Mein Index.php sieht so aus, jedoch tut sich da noch nicht viel mit dem Footer ^^

    Meinem Template haben wirklich nur die Einträge im css gefehlt um die Bilder auszurichten! Tausend Dank dafür!

  • http://frostbitten.bplaced.net/band/

    Mist, irgendwie ist im IE alles verschoben :-/
    (bzw. nur die box #wrap ?)

    Erstmal brauchst du einen Doctype sonst wird die Site im Quirksmode gerendert.
    Dann solltest du validieren. Du hast einige grobe techn. Fehler drin.

    Es reicht ein Element mit min-height:100%; (#umhang-innen)
    Der footer ist in ein überflüssiges div eingeschachtelt. Entferne das.
    Dann muss der footer um seine Höhe mit negativem margin-top hochgeholt werden.

    Das overflow:hidden; für div#wrap ist eher kontraproduktiv.

    Arbeite das Tut dazu durch, damit du den Mechanismus verstehst. ;)

  • Meine güte gibst du mir gute Tipps und Hilfen! Tausend Dank dafür!

    1.) Doctype festlegen hat schonmal das verschiebeproblem im IE gelöst :)

    2.) Wegen dem Fixed Footer: Du meinst es würde ein Element mit height: 100% ausreichen. In der Anleitung steht aber, dass man Umhang innen, umhang und body sowie html mit heigth: 100% ausgerüstet werden sollten.

    EDIT: Der Footer stickt jetzt untern, jedoch ziehen bei mir die -40px nicht wirklich und er ist eben ganz unten so dass man scrollen muss um ihn zu sehen.

    Sobald ich die margin-top:-40px; beim Footer einbaue ist er wieder weg, liegt dann vermutlich hinter dem wrap?

    <<---- ist einfach schwer von Begriff ^^

    Einmal editiert, zuletzt von warismoney (8. Oktober 2010 um 08:31)


  • 2.) Wegen dem Fixed Footer: Du meinst es würde ein Element mit height: 100% ausreichen. In der Anleitung steht aber, dass man Umhang innen, umhang und body sowie html mit heigth: 100% ausgerüstet werden sollten.

    nicht ganz.
    Wenn ein Element height:100%; bekommt ist immer die Frage 100% von was??
    Hat der Vorfahre keine Höhe, dann gilt height:auto; (default!!) für beide Elemente weil 100% nicht errechnet werden kann.
    height:100% muss also bis hinauf inkl. dem Initial Containing Block (html) vergeben werden, damit es wirkt.


    Sobald ich die margin-top:-40px; beim Footer einbaue ist er wieder weg, liegt dann vermutlich hinter dem wrap?

    jep, Die korrekte Stapelreihenfolge auf der z-Achse (zum Betrachter hin) stimmt nicht.
    Wenn div#foot ein position:relative; bekommt stimmt es wieder.
    Lesestoff hierzu

    Um das von dir gewünschte Ergebnis zu erreichen mußt du folgendes tun:
    min-height:100%; für #content wird ersatzlos gestrichen.

    Dann definierst du folgendes:

    PHP
    #foot  {
        position:relative;
        height:40px;
        margin-top:-40px;
    }

    Danach hat es bei mir im FF gepaßt.
    Du mußt bedenken das der #footer nochmal in ein div#foot gewickelt ist und das Element mußt du gestalten.

    Weiterer Lesestoff zur Aneignung von Kenntnissen. ;)

Jetzt mitmachen!

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