Problem mit Zentrierung

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

  • Ich bin grade nicht an meinem PC, daher gebe ich den Quellcode später.
    Das war schon immer so. Ich mache einfache Bilder zu Buttons mit verlinkungen. dann schreibe ich jetzt zb.
    <div align="right"> Das sind de Buttons<div>

    und darunter
    <div> align="center"> Das ist der Text</div>
    .
    Ich weiß nicht warum das so ist, aber evtl. vergesse ich immer etwas.


    mfg. h4wX
  • Jo, da hast du einen Denkfehler.
    Divs sind Zeilenübergreifende Elemente. Sprich, nach jedem div erfolgt automatisch ein Zeilenumbruch.
    Deine Rettung ist die CSS-Angabe "float"
    Sprich,

    Quellcode

    1. <div style="float:left;"><imgs></div>
    2. <div style="text-align:center;">TEXT</div>

    Mehr zum Thema findest du hier: float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    Gruß
    Broken Sword
  • ok danke, hier ist nochmal der komplette queltext:
    <html>
    <head><title>Links</title>
    </head>
    <body style="background-image:url(background.jpg);">
    <div align="right"> <script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>
    <br>
    <div align="left"><img src="button_home.jpg"></div>
    <div align="left"><img src="button_aboutme.jpg"></div>
    <div align="left"><img src="button_links.jpg"></div>
    <div align="left"><img src="button_dls.jpg"></div>
    <div align="left"><img src="button_impressum.jpg"></div>
    <div align="center">
    <h1> <u>Schule und Alltag</u></h1>
    <br>
    <a href="http://www.windthorst-gymnasium.de/index.php?nav=01.Home" target="_blank">Die Website vom Windthorst-Gymnasium Meppen</a><br>
    <a href="http://www.schuelervz.net" target="_blank">Die Plattform fuer Schueler - SVZ</a> <br>
    <a href="http://wikipedia.de/" target="_blank">Wikipedia - Eine Loesung fuer alles</a><br>
    <a href="http://www.baumkunde.de/" target="_blank">Baumkunde - Das Wissen fuer Pflanzen</a><br>
    <br>
    <br>
    <h1> <u>Freizeit</u></h1>
    <br>
    <br>
    <a href="http://www.youtube.com/" target="_blank">YouTube - Das Video Portal</a> <br>
    <a href="http://www.myvideo.de/" target="_blank">MyVideo - Ein weiteres Video Portal</a> <br>
    <br>
    <br>
    <h1> <u>Games</u></h1>
    <br>
    <br>
    <a href="http://www.nur-games.de" target="_blank">Mini Spiele - Und das auch umsonst</a><br>
    <a href="http://www.metin2.de/" target="_blank">Metin2 - Ein kostenloses MMORPG</a><br>
    <a href="http://www.wow-europe.com/de/index.xml" target="_blank">WoW - Wahrscheinlich das beste MMOG </a> <br>
    <a href="www.digitalpaintball.net/" target="_blank">Paintball 2.0 - Lustig, gute Sounds, FREE </a><br>
    <br>
    <br>
    <h1> <u> HP's von Freunden </u> </h1>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    </div>
    </body>
    </html>


    mfg. h4wX

    €: Könntest du evtl. den Code ins Quelltext integrieren, ich weiß noch nicht so genau wie ich das machen muss, es scheint als obs bei mir nicht funktioniert.
  • Hi,

    h4wX schrieb:

    <div align="left"><img src="button_home.jpg"></div>
    <div align="left"><img src="button_aboutme.jpg"></div>
    <div align="left"><img src="button_links.jpg"></div>
    <div align="left"><img src="button_dls.jpg"></div>
    <div align="left"><img src="button_impressum.jpg"></div>
    <div align="center">


    sollte also zu

    Quellcode

    1. <div style="float:left;text-align:left;"><img src="button_home.jpg"><br />
    2. <img src="button_aboutme.jpg"><br />
    3. <img src="button_links.jpg"><br />
    4. <img src="button_dls.jpg"><br />
    5. <img src="button_impressum.jpg"></div>
    6. <div style="text-align:center;">

    werden.

    Wenn du es auf der Höhe von dem JavaScript-Ding haben willst, musst du dann noch vor

    Quellcode

    1. <div style="text-align:center;">

    in meinem geänderten Code

    Quellcode

    1. <div style="float:right;"><script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>

    einfügen, damit der Text auch ganz oben startet.

    Gruß
    Broken Sword
  • THX für deine Antwort, das mit den Buttons klappt auch so, aber dann ist der Text in gleicher Höhe von den Buttons, was recht unschön aussieht.
    Ich meine es so, die Buttons sollen auf der Linken Seite ungefähr in der Mitte zentriert werden. Der Text soll in der Mitte des Bildschirms sein, was man mit "center" hinbekommt.
    Das ist mein jetziger Code:

    <html>
    <head><title>Links</title>
    </head>
    <body style="background-image:url(background.jpg);">
    <div align="right"> <script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="float:left;text-align:center;"><img src="button_home.jpg"><br />
    <img src="button_aboutme.jpg"><br />
    <img src="button_links.jpg"><br />
    <img src="button_dls.jpg"><br />
    <img src="button_impressum.jpg"></div>
    <div style="text-align:center;">

    <h1> <u>Schule und Alltag</u></h1>
    <br>
    <a href="http://www.windthorst-gymnasium.de/index.php?nav=01.Home" target="_blank">Die Website vom Windthorst-Gymnasium Meppen</a><br>
    <a href="http://www.schuelervz.net" target="_blank">Die Plattform fuer Schueler - SVZ</a> <br>
    <a href="http://wikipedia.de/" target="_blank">Wikipedia - Eine Loesung fuer alles</a><br>
    <a href="http://www.baumkunde.de/" target="_blank">Baumkunde - Das Wissen fuer Pflanzen</a><br>
    <br>
    <br>
    <h1> <u>Freizeit</u></h1>
    <br>
    <br>
    <a href="http://www.youtube.com/" target="_blank">YouTube - Das Video Portal</a> <br>
    <a href="http://www.myvideo.de/" target="_blank">MyVideo - Ein weiteres Video Portal</a> <br>
    <br>
    <br>
    <h1> <u>Games</u></h1>
    <br>
    <br>
    <a href="http://www.nur-games.de" target="_blank">Mini Spiele - Und das auch umsonst</a><br>
    <a href="http://www.metin2.de/" target="_blank">Metin2 - Ein kostenloses MMORPG</a><br>
    <a href="http://www.wow-europe.com/de/index.xml" target="_blank">WoW - Wahrscheinlich das beste MMOG </a> <br>
    <a href="www.digitalpaintball.net/" target="_blank">Paintball 2.0 - Lustig, gute Sounds, FREE </a><br>
    <br>
    <br>
    <h1> <u> HP's von Freunden </u> </h1>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br></div>

    </body>
    </html>

    Und hier ist mal ein Bild was die Lage besser beschreibt:
    d78.de/images/1210334850screen_helo2.JPG
  • Das habe ich doch schonmal berichtet :\

    Broken Sword schrieb:


    Wenn du es auf der Höhe von dem JavaScript-Ding haben willst, musst du dann noch vor

    Quellcode

    1. <div style="text-align:center;">

    in meinem geänderten Code

    Quellcode

    1. <div style="float:right;"><script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>

    einfügen, damit der Text auch ganz oben startet.


    Natürlich musst du dann auch

    Quellcode

    1. <div align="right"> <script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>
    2. <br>
    3. <br>
    4. <br>
    5. <br>
    6. <br>
    7. <br>
    8. <br>

    entfernen!

    Gruß
    Broken Sword
  • Aber dieses

    <div align="right"> <script language="JavaScript" src="http://www.begann.de/uhren/uhr11.js"></script></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    Ist doch fürs Zentrieren der Navigation. Also die Bilder werden nachher noch als Hyperlinks etc. gemacht.
    Der text sollte jedoch oben beginnen. Ich zeige es dir mal an einem bearbeitetem Bid:
    d78.de/images/1210356197show.JPG