Wenn Das Fenster Kleiner Elemente Überlappen Einander?

Habe ich konzipierte eine website und bin ein wenig überfragt jetzt.

Wenn Sie die website unter:

http://www.noxinnovations.com/portfolio/charidimos/

Wenn Sie ändern die Größe des Fensters bemerken Sie die Navigation überlappt das logo/header.

Sowieso um dies zu ändern? Was soll ich tun praktisch ist es, die Fenster haben eine scroll-Leiste angezeigt, wenn das möglich ist.

Irgendwelche Ideen?

Danke :-D.

InformationsquelleAutor Aaron Brewer | 2011-07-18
  1. 3

    Es ist Ihre width: 100%; in Ihrem #header element, das die Ursache Ihres seltsamen überlauf. Platzieren Sie Ihre #logo und #navigation Elemente innerhalb eines anderen div mit fester Höhe und Breite, die sitzt in der #header, dann geben Sie Ihrem #header Eigentum overflow: hidden; und das sollte Sie beheben rechts, bis.

    • Aber diese haben noch das hintergrund-Bild des headers, um die repeat-x 100% über dem Fenster?
    • Ja... Man kann ziemlich viel halten Sie den rest Ihres #header css das gleiche; Sie müssen nur eine neue wrapper-element in der #header hat eine Feste Breite.
    • Okay, ich habe neu hochgeladen, bitte Mach einen cache-refresh und / oder ein browser-refresh. Als Sie sagen können. Wenn die Auflösung kleiner ist es nicht schrumpfen, aber jedes element schrumpft, das bringt alles out-of-Platz. Was ich will, zu tun ist, wo, wenn die Auflösung zu klein ist, dass die scrollbar angezeigt werden muss, so dass Sie Blättern können und sehen Sie alles. Wissen Sie, was ich sage? Danke.
    • Alles überlappt sich jetzt, weil Sie entfernt Ihre floats und positionierte Ihre #logo und #navigation absolute. Gehen Sie zurück zu position: relative und schweben Ihre beiden Elemente Links und wieder rechts.
    • Auch, wenn mein Mathe richtig ist, ändern width: 100% auf Ihre #header-container element width: 1276px.
    InformationsquelleAutor 65Fbef05
  2. 1

    Wenn Sie möchten, dass Ihre navigation nicht überschneiden, können Sie die folgenden

    #navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed;    //CHANGE FROM RELATIVE TO FIXED
left: 770px;        //ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right;       //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;

}
    • Danke :-D. ich Schätze die Hilfe.
    InformationsquelleAutor Jason Gennaro
Schreibe einen Kommentar