Header und Footer verschieben sich beim Verkleinern!

simon_c

Hallo Profis!

Das Design meines neuen Blogs Funkmaster’s Coffeehouse ist jetzt im Grunde fertig und läuft! Allerdings verschieben sich die Headergrafik und die Footergrafik immer etwas zum Content-Teil der Seite, wenn man das Fenster verkleinert.

Hier mal der Code des Styles:

CSS

/*
    CSS files kept in the 'schemes' directory can be used to
    costumize your K2 installation without having to mess
    with the core K2 files. This in turn makes it easier to
    upgrade to new K2 version as well as debug any problems
    that might occur.


    You select schemes from the K2 Options page in the
    'Presentation' section of your WordPress administration.


    Author Name    :Simon-Claudius Wystrach
    Author Site    :simon.mindpot.de
    Style Name    :Coffeehouse One
    Style URI    :simon.mindpot.de
    Version        :0.1
    Comments    :
*/












*{
    margin:0px;
    padding:0px;
         }
body {
        background: #000000;
        text-align: center;
        background-image:url(header_01.png);
        background-repeat:no-repeat;
        background-position: center 0;
        }


#page {
        text-align: left;
        margin:  auto;
        padding: 20px 0 0px;
        position: relative;
        border-top: ;
        clear: both;
        }
ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
        background-color: #FFF3D1;
        }
ul.menu li a:hover {
          }
ul.menu li a:hover {
    background: #111;
    }


h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, h4, h4 a, h4 a:hover, h4 a:visited {
         color: black !important;
    }
a, a:visited, .sidebar a:visited {
       color: #8D571B;
        }


.post p a:visited {
        color: #8D571B;
        }




#header {
        padding: 20px;
        margin: 0;
        position: relative;
        background: ;
        height: 219px;
    clear: both;
        }


.content {


        padding: px;
        background: #FFF3D1;
        background-image:url(header_03.png);
        background-repeat:no-repeat;
        }


#footer {background-image:url('footer.png');
         background-repeat:no-repeat;
         background-position: center top;


        text-position: 10px;
        color: black;


        }


#footer a {
        border-bottom: 1px solid #FFFFFF;
        color: #FFFFFF;
        }


#footer a:hover {
        color: #8D571B;
        border-bottom: 1px solid #FFFFFF;
        }




         }

Alles anzeigen

Das Theme ist K2!

Liebe Grüße,

Euer Simon

Werbepost

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

gsibergerin

Der div .columns-two #page hat eine width-Angabe (780px), header und footer nicht, was in Hinblick auf deine Header-Grafik beim Verkleinern des Fensters natürlich ungünstig ist. Gib ihnen eine Breite, dann sollte das Problem gelöst sein.

simon_c

Habe es jetzt so:

CSS

/*
    CSS files kept in the 'schemes' directory can be used to
    costumize your K2 installation without having to mess
    with the core K2 files. This in turn makes it easier to
    upgrade to new K2 version as well as debug any problems
    that might occur.


    You select schemes from the K2 Options page in the
    'Presentation' section of your WordPress administration.


    Author Name    :Simon-Claudius Wystrach
    Author Site    :simon.mindpot.de
    Style Name    :Coffeehouse One
    Style URI    :simon.mindpot.de
    Version        :0.1
    Comments    :
*/












*{
    margin:0px;
    padding:0px;
         }
body {
        background: #000000;
        text-align: center;
        background-image:url(header_01.png);
        background-repeat:no-repeat;
        background-position: center 0;
        }


#page {
        text-align: left;
        margin:  auto;
        padding: 20px 0 0px;
        position: relative;
        border-top: ;
        clear: both;
        }
ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
        background-color: #FFF3D1;
        }
ul.menu li a:hover {
          }
ul.menu li a:hover {
    background: #111;
    }


h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, h4, h4 a, h4 a:hover, h4 a:visited {
         color: black !important;
    }
a, a:visited, .sidebar a:visited {
       color: #8D571B;
        }


.post p a:visited {
        color: #8D571B;
        }




#header {
        padding: 20px;
        margin: 0;
        position: relative;
        background: ;
        height: 219px;
    width: 982px;
    clear: both;


        }






.content {


        padding: px;
        background: #FFF3D1;
        background-image:url(header_03.png);
        background-repeat:no-repeat;
        }


#footer {background-image:url('footer.png');
         background-repeat:no-repeat;
         background-position: center top;
    width: 982px;


        text-position: 10px;
        color: black;


        }


#footer a {
        border-bottom: 1px solid #FFFFFF;
        color: #FFFFFF;
        }


#footer a:hover {
        color: #8D571B;
        border-bottom: 1px solid #FFFFFF;
        }




         }

Alles anzeigen

Beim Footer hat sich was verändert, beim Header aber nicht. Liegt womöglich daran, dass die Headergrafik im body und nicht im Header liegt (Designbedingt).

Schaus Dir nochmal an bitte.

Liebe Grüße,

Simon

gsibergerin

Simon, da gibt´s aber auch noch eine zweite CSS-Datei (die coffeeshop-css), in der auch Angaben zum body drin sind. Ich finde hier insgesamt drei Stellen, an denen body definiert ist (ist mit #page ähnlich), das heißt, du musst deine css-Dateien dringend aufräumen. Da sind außerdem Angaben drin, die´s nicht gibt (text-position, padding: px) also erst mal prüfen und Fehler beheben.

Die Lösung mit dem Bild im body ist ziemlich ungewöhnlich (kommt die von dir oder ist das ein Theme?). Der body hat natürlich keine fixe width (wär auch nicht günstig). Ich würde nach Lösungen suchen, das Bild doch in den Header zu bekommen. Oder einige div´s in einen Wrapper-div mit fixer Breite packen.

simon_c

Also die normale Style.css ist fest in K2 implementiert. Man verändert das Design ja dann durch die eigene CSS Datei (in dem Fall coffeehouse_one.css).

Hmmm...

Inwiefern muss ich nun aufräumen? Die nicht benötigten Einträge in der coffeehouse_one.css löschen?

Also die Lösung mit dem Header wurde mir in einem anderen Forum vorgeschlagen...
Nehme aber gerne Lösungen, bei denen die Header-Grafik auch im Header ist ;)!

"Oder einige div´s in einen Wrapper-div mit fixer Breite packen."

Oha... das übersteigt bald meine, wohl bemerkt begrenzten, Kentnisse...

gsibergerin

Ja, das kannst du so machen. Mit Aufräumen meinte ich, dass du Anweisungen z.T. doppelt drin hast - ein Mal genügt. Aufpassen musst du auch, dass sich Anweisungen nicht widersprechen - und natürlich, dass sie richtig sind.

Wenn dir diese Lösung in einem anderen Forum (CSS?) vorgeschlagen wurde, dann findet sich dort vielleicht auch jemand, der die dadurch entstandenen Probleme löst? ;-)
Eine schnelle sinnvolle Lösung gibt´s hier wohl eher nicht, und umfangreiche CSS-Umbauarbeiten würden den Rahmen eines Wordpress(!)-Forums sprengen. Du könntest vielleicht dem body eine min-width geben, wenn es dich nicht stört, dass die älteren IE´s das nicht verstehen.

simon_c

Vielen Dank Dir auf jeden Fall schonmal.

Aber mal von Vorne respektive Grundsätzlich:

Ist es schwierig eine Header Grafik so anzuordnen, wie ich es wollte, also über der Hauptseite und dem Hintergrund liegend?

gsibergerin

Nein, das ist durchaus machbar. Lass die Grafik im Header. Gib dem Header die gleich Höhe wie das Bild hat (height: 279px). Der schwarze Abstand oben muss weg (das ist das padding von page, das setzt du auf 0). Jetzt noch das Headerbild an die richtige Stelle rücken. Geht ohne Umbauarbeiten nur so:

HTML

margin: 0px 0px 0px -98px;

Das trägst du im header ein (-98 dürfte ungefähr passen, sonst entsprechend abändern). Ist auch etwas unorthodox, zugegeben, aber vielleicht die schnellste Lösung für deine Grafik.
Dann musst du noch dein Menü etwas verschieben, indem du bei ul.menu den Wert left auf etwa 80px setzt.
Probier´s mal so, bei mir hat´s geklappt.
Noch ein Rat: Firefox und das Addon Firebug installieren. Mit Firebug kannst du solche Dinge ausprobieren, ohne deine CSS wirklich zu verändern. Und du verschaffst dir besseren Überblick über dein Layout. Wertvolles Werkzeug!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header und Footer verschieben sich beim Verkleinern!

Jetzt mitmachen!