Website-layout "bricht", wenn das Zoomen in oder out, in Browser + ein paar andere grundlegende css-Fragen

Ich bin ziemlich neu in CSS wie es geht und was ich versuche zu tun, jetzt ist nur das design eine sehr simple/basic splash oder landing-page für ein kleines Unternehmen.

Hier ist die url für die Website: Meine Website

Nun, wenn Sie gehen, auf jedem browser, z.B. google chrome und Sie heran-und herauszoomen (Strg -/+), werden Sie bemerken, dass das website-layout beginnt, zu "zerbrechen", dass alle meine divs nur start verschieben. Ich offensichtlich nicht wollen, dass diese, und wollen einfach nur die Website, um die gleichen bleiben, wenn die Menschen ein-oder Auszoomen, ziemlich viel, wie alle guten Websites haha.

Ich weiß, es muss etwas zu tun mit der Positionierung, aber ich kann nicht herausfinden Sie unsere für das Leben oder mich. Letzte Nacht verbrachte ich Stunden surfen ähnliche Fragen, aber ich kann es herausfinden.

Bin ich nicht posten den code, um mehr Platz einnehmen, ich nehme an, da gab ich Ihnen die URL, die Sie in der Lage sein, die zum abrufen der code von dort.

Ich habe auch noch ein paar weitere, kleinere Fragen:

1) wenn Sie offen für meine Website in Google chrome, oder ie, die Sie werden bemerken, dass nach den "Allgemeinen Geschäftsbedingungen" auf der Unterseite der Seite, die Seite endet, wie es sollte. allerdings, wenn Sie gehen auf firefox, werden Sie feststellen, dass nach den "Allgemeinen Geschäftsbedingungen", den hintergrund so zu sprechen weiterhin für eine Weile. warum ist das so und wie kann ich es beheben?

2) Sie werden bemerken, dass auf verschiedenen Browsern Positionierung von Elementen ist etwas anders.
die meisten spürbar, wenn Sie suchen oder chrome/firefox und danach internet explorer 9 werden Sie feststellen, dass die "Allgemeinen Geschäftsbedingungen" sind etwas höher als in chrome oder ff und somit leicht berühren des Haupt-content-Bereich. gibt es eine Möglichkeit dieses Problem zu beheben?

3) was ist eine effiziente, effektive Weg, um center-divs? Zum Beispiel möchte ich, um die Mitte der "anmelden" - Taste, perfekt zentriert, relativ in der Haupt-content-Bereich. ive ziemlich viel einfach nur beäugte Sie es aus und verwenden von relativen Positionierung in der Mitte. was ist eine genauere Möglichkeit, um es?

Dank, und sorry, wenn diese Fragen scheinen ein wenig überflüssig. wenn Sie keine Klärung auf alles, was ich überwachen werde diese Frage wie ein Falke.

Cheers

InformationsquelleAutor DeHustle | 2012-07-14
  1. 12

    1. Wenn Sie vergrößern oder verkleinern, begegnen Sie Problemen, weil der Rundung und text-rendering. Es ist eine gute Idee, um sicherzustellen, dass die layout-überleben können, ein bisschen dehnen ohne zu brechen.

    2. Relative Positionierung beeinflusst wird durch die genannten Fragen in #1, und daher unzuverlässig.

    3. Schauen Sie in Verwendung von etwas zu entfernen, die Eigenschaften, die den verschiedenen Browsern gelten. Man könnte ein zurücksetzen, um Ihnen etwas mehr praktikabel oder versuchen normalisieren die Werte um, damit Sie auch zwischen den Browsern.

    4. Für (horizontale) Zentrierung haben Sie einige Optionen:

      • Wenn Sie einen container mit "text-align:center" es wird center alle Kind-Elemente, inline-Block oder inline.
      • Wenn Sie zentrieren möchten ein block-element, kann man mit "margin: 0 auto" zentrieren es horizontal und entfernen Sie die vertikale Ränder.
      • Wenn Sie wollen-center ein absolut positioniertes element, können Sie mit "left: 50% margin-left: -(Breite des Elements/2)".

    Zusätzlich zu versuchen, um loszuwerden, relative Positionierung, würde ich empfehlen, dass Sie nicht explizit gesetzt, wird die Höhe des body-Elements. In der Regel möchten Sie die Elemente, um zu verwalten Ihre eigene Größe, so werden Sie robuster.

    Wenn du "position: relative" nun, weil das ist, was Sie wissen, wie zu benutzen, würde ich vorschlagen, Sie versuchen Sie es mit "float: left" (oder rechts) oder das ändern der display Typ (display: inline-block). Das kann Ihnen helfen, Schritte in die richtige Richtung.

    • Dankeschön! das ist genau die Informationen, die ich brauchte!
    • Einfach und klar, tolle Tipps
    InformationsquelleAutor Henrik
  2. 1

    nicht sicher, für deine Punkte 1 & 2, aber wie bei 3, was ich bin gekommen, um zu verwenden, ist die folgende die div möchte ich auf center, und verwenden Sie dann width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, wo ein gewisser Prozentsatz ist die Breite, die ich verwenden möchten.

    InformationsquelleAutor Dio
  3. -3

    ein paar Vorschläge, bevor Sie gehen in die Festlegung der zoom-in und zoom-out-Problem.

    1. Nicht verwenden <div> wrap-around-text.
    2. Verwenden <h1> - tags für header
    3. Lagern Sie Ihr CSS in eine separate css-Datei.
    4. Sie definiert den header-Abschnitt, der ist großartig, aber das tun für den container-und Fußzeile sowie.
    5. Kommentare! Damit wäre die Arbeit viel einfacher für Menschen, die versuchen, Ihnen zu helfen.
    • Danke für die Tipps, die Sie sagen, nicht zu verwenden <div> wrap-around-text. Ich bin ein wenig verwirrt von diesem, Sie sind also nicht die USA <div id="bla"></div> wenn das einzige, was innerhalb dieses div ist text? Wenn dem so ist, dann, was würden Sie empfehlen, um den text zu Bearbeiten?
    • <div> tut nichts, es nur hilft, wickeln Sie einen Abschnitt. Es ist nicht so, dass Sie sind nicht erlaubt, es ist nur schlecht Codierung.
    • Ich kann nicht erkennen, wie die Umhüllung Abschnitte ist schlecht Codierung.
    • nicht einwickeln Abschnitte, Textumbruch
    InformationsquelleAutor lusketeer
Schreibe einen Kommentar