[HTML/CSS] Positionierung ... Und mehr [Frage]

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

    • [HTML/CSS] Positionierung ... Und mehr [Frage]

      Hey,

      also da ich gerade ein Studium zum Informatiker mache,
      aber leider nur ein mal in der Woche HTML &' CSS habe
      und bis jetzt nur das gelernt habe was ich schon kann.

      Würde ich gerne paar Infos haben.

      Beispiel Homepage:
      Klick - Mich

      An meinem Laptop ist alles perfekt Positioniert,
      nicht's ist bei mir falsch.
      Dagegen in den Schulcomputern und diversen anderen
      wird alles verschoben.

      Beispielsweise den Content (Die Box mit allem drin)

      PHP-Quellcode

      1. #contain1
      2. {
      4. border-radius:1px;
      5. height:500px;
      6. width:1000px;
      7. margin:0 auto;
      8. background-image:url(../images/blue/other.png);
      9. box-shadow:0px 0px 10px 2px blue;
      10. }


      PHP-Quellcode

      1. margin:0 auto;

      [COLOR="red"]Benutze ich zum Zentrieren.[/COLOR]

      Das dürfte eigentlich richtig sein.



      Aber sobald man den Browser "Verkleinert" tut sich
      das "Registerfeld" - "Follow us" verschiebt sich.
      Im Normalfall sollte das an der Position bleiben!

      Wie Positioniere ich z.b Buttons Elemente die man
      normal auf der Homepage hab richtig und das die auch
      so bleiben?

      Positionieren tu ich immer mit Margin.
      Bsp.

      Quellcode

      1. #bsp
      2. {
      3. [COLOR="blue"]margin-left:164px;[/COLOR]
      4. }


      [COLOR="blue"]
      Mir ist klar, bei einem anderen Bildschirm der kleiner oder grösser
      ist ist das anders, weil ich das nicht weis, würde ich es gerne
      wissen, da ich denke das hier paar erfahrene sind.

      Wenn ich was zu meinem Quelltext sagen könnt was
      verbesserungswürdig ist, immer her damit. ;)
      [/COLOR]

      Danke

      Greez

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Zum einen, welche Browser werden bei euch an der Schule verwendet?
      Die Auswahl des Browsers hat (leider) große Auswirkungen darauf, wie die Homepage aussieht.

      Zum zweiten, das Layout-Modell von HTML ist ein Box-Modell.
      D.h dass weitgehend alle Elemente als Box vorstellbar sind. (Über display:block kann man in CSS festlegen, dass ein Element als Box behandelt werden soll, z.b <a>, was einen Link darstellt, die sind normal inline-Elemente. [Falls ich falsch liege, bitte korrigieren])
      Jede Box hat dabei ihren Außen- und Innenabstand.
      Mittels des margin-Befehl in CSS bestimmst du den Außenabstand des Elementes zum jeweiligen Elternelement (zB dem Browserfenster). Der Befehl padding tut das gleiche für den Innenabstand, der sich dann auf Kindelemente innerhalb des mit padding-ausgezeichneten Elements auswirkt.

      Beide Befehle sind so gesehen nicht gedacht, dass man damit Elemente positionieren kann (Es geht zwar damit, aber der Sinn von margin/padding ist normalerweise ein anderer)
      Zum Positionieren wird normalerweise der CSS-Befehl position benutzt.
      Mittels position:fixed kannst du zB festlegen, dass ein Element bei Scrollen dennoch im Bild bleibt und nicht mitscrollt.

      Zu deinem Problem, da Margin ja wie gesagt für den Außenabstand ist und sich die Elternelemente durchaus auch verkleiner/Vergrößern können, wirkt sich das auch auf den Abstand aus.
      Daher wird beim verkleinern des Browserfensters dein Registercontainer mit weggeschoben, zumal der Elterncontainer (dürfte ja das <div> mit der ID inhalt2 sein) keinem Elternelement angehört, wenn ich das richtig gesehen habe und somit sein Elternelement das Browserfenster darstellt.

    • Ersetz einmal alles zwischen den {} bei inhalt2 durch

      Quellcode

      1. border-left:1px solid black;
      2. float:left;
      3. height:450px;
      4. width:200px;
      5. margin:-460px 0 0 600px;


      Das löst dein erstes Problem. Nun hast du ein weiteres, die Box springt kurz rum, wenn man den Browser verkleinert. Vielleicht möchtest du daran ja selbst arbeiten.

      lg

    • Well, sag mal, ist deine verlinkte Seite sauber?
      Ich bekomm von meinem Virenscanner einen Alarm über nen Trojaner auf der Seite.
      Da ich nich weiß, ob false-Alarm oder nich, hab ich vorsorglich mal nen Link entschärft.
      Sobalds geklärt ist, gibts den Link wieder.
      Sollte es ein Fehlalarm sein, so sorry für meine Vorsicht, aber gut, ich will jetzt mal nich grad was riskiern.

      EDIT(h): jaja, auch noch nen Rick Roll versuchen.
      Ich lass den Link jetzt ma draußen.

    • internetfreak;267003 schrieb:

      Zum einen, welche Browser werden bei euch an der Schule verwendet?
      Die Auswahl des Browsers hat (leider) große Auswirkungen darauf, wie die Homepage aussieht.



      JavaScript - Browser detect

      Ist zwar ein Lebenswerk, aber via JS kann man mit ein paar Abfragen (paar is gut..) die CSS doch eigentlich für jeden Browser optimieren, damit die Seite in sämtlichen gängigen Browser gleich angezeigt wird, oder irre ich mich?

    • margin 0 auto; funktioniert nicht in allen Browsern.

      Ist zwar ein Lebenswerk, aber via JS kann man mit ein paar Abfragen (paar is gut..) die CSS doch eigentlich für jeden Browser optimieren, damit die Seite in sämtlichen gängigen Browser gleich angezeigt wird, oder irre ich mich?

      Sehr kluge Idee, den wenn der User JavaScript deaktiviert hat wird die Seite nämlich
      komplett falsch angezeigt.. Wobei JavaScript auch von Browser zu Browser verschieden
      ist :D

    • Warum sollte margin: 0 auto; nicht in jedem Browser funktionieren?
      Solange das Eltern - und Kind Element eine feste Größe hat, sollte es damit keine Probleme geben. wenn ich meinem Body Tag ein width: 100%; gebe und dann meinem wrapper ein margin: 0 auto; width: 960px; dann ist der in der Mitte. So wie er soll.
      Das sich diverse Sachen verschieben hängt damit zusammen wenn man diesen keine Feste Größe gibt.

      Ich hoffe ich konnte helfen.