Problem mit Zentrierung


  • h4wX
  • 1426 Aufrufe 17 Antworten

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

  • Problem mit Zentrierung

    Hi Leute, ich habe ein Problem mit der Zentrierung.
    Schaut euch doch bitte mal das Bild an:
    d78.de/images/1210256297html_help.JPG
    So ich will aber, dass die Schrift nach oben kommt. Nur wie mache ich das?


    mfg. h4wX
  • Hi,
    da musst du uns schon ein wenig Quellcode geben.
    Da es unter "Impressum" anfängt, schätze ich mal, dass die Größe von den Buttons zu groß ist.
    Aber das ist nur eine waage Vermutung.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • 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
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • 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
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • 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
  • Ieh, eine Internet Explorer Macke ^^
    Die kannst du ausmerzen indem du

    Quellcode

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

    mit

    Quellcode

    1. <div style="float:left;text-align:center;position:absolute">

    ersetzt.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • setz einfach ein

    Quellcode

    1. padding-left:400px;

    in das Text-Div ein bzw. Wie weit (Pixel) das weiteste "rote Ding" ist.
    Sprich so in etwa:

    Quellcode

    1. <div style="text-align:center;padding-left:400px;">


    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • 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
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • 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
  • Okay, dann hast du nun zwei Wege:
    Zum einen kannst du die <br>s in den div-Container mit dem imgs packen.

    Oder du gibst dem div ein css-Atribut (padding-top:10%), was natürlich professioneller ist ;)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.