Zentrierte HP


  • Vybsi
  • 1543 Aufrufe 20 Antworten

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

  • Zentrierte HP

    Hallo!

    Ich arbeite gerade an einer HP, und würde die gerne mittig, also in den Center - Tag stellen. Ich habe schon einiges versucht, ganz oben im head den center - Tag anzuwenden, aber das klappt nicht so ganz. Mir persönlich gefällt das am besten, wenn eine HP mittig ist, und nicht Link am Bildschirm klept. vllt hat jemand nen link oder einen code für mich. das wäre Prima.

    Danke.

    lg
    thomas

  • Erstell nen <div> mit ner class="BELIEBIGER_NAME" !

    In den div haust du alles rein ! deine class im stylesheet definierst du so : ( rotes ist wichtig ! )
    ( Zum Beispiel : )

    Quellcode

    1. .BELIEBIGER_NAME {
    2. [COLOR='Red']width:703px[/COLOR]; [COLOR='Silver']/* Höhe , beliebig aber wichtig ! */[/COLOR]
    3. height:700px;
    4. background-color:#8B4513;
    5. [COLOR='Red']margin:0px auto;[/COLOR] [COLOR='Silver']/*Damit definierst du, dass es center ist ! ) */[/COLOR]
    6. padding: 20px 20px 20px 10px;
    7. color:black;
    8. [COLOR='Red']position:relative;[/COLOR]
    9. margin-top:50px;
    10. margin-bottom: 30px;
    11. background-image : url('Garafik1.jpg');
    12. background-repeat: no-repeat;
    13. }
    Alles anzeigen

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • Hi,
    du musst dir etwas schaffen, was mittig ist. Ein div oder eine Tabelle, wobei ich eher zu divs raten würde. Dort rein den Inhalt der Homepage.
    Am besten solchen Code verwenden:

    Quellcode

    1. <div style="margin:0 auto;width:200px;">huhu</div>

    Das ist auch xhtml-valid ;)

    Gruß
    Broken Sword

    edit: aaahhhhh zu spät ^^
    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.

  • Broken Sword schrieb:


    Am besten solchen Code verwenden:

    Quellcode

    1. <div style="margin:0 auto;width:200px;">huhu</div>




    Schriebst du deine Styleanweisungen immer in die .. wie man das auch immer nennt :D ( Ist mir so fremd dass ich net mal den namen weiß :depp: ) Jeder vernünftige Mensch hat nen stylesheet :fuck: oder :D

    Vll hast du dir auch nur Zeit gespart ^^

    lg Makkus

    PS. Is ja egal, sollte im Grunde gelöst sein !

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • Moin Kolegen :D

    Danke schonmal für eure Tipps und Codes :)
    Werde das heute noch testen, und einen bericht abliefern :)

    Eine kleine frage hab ich noch an euch. Wiso und für was kann man einen belibigen namen eingeben? Hat der einen sinn, oder einfach nur zur vereinfachung gedacht?

    Quellcode

    1. <div> mit ner class="BELIEBIGER_NAME"


    danke nochmal:hot:

    Ich habe das gerade getestet ( mit dem Code von Broken_Sword), und das wird nichmal in die mitte des browsers geschoben ... :( .

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Unbenanntes Dokument</title>
    6. </head>
    8. <body><div style="margin:0 auto;width:200px;">
    9. <table width="610" cellspacing="0" cellpadding="4" border="1" bgcolor="#00ffff">
    10. <tr>
    11. <td valign="top" width="199" align="center">
    12. <table cellspacing="0" cellpadding="4" border="1" width="190" bgcolor="#ffff00">
    13. <tr>
    14. <td><a href="index.html">Link</a></td>
    15. </tr>
    16. <tr>
    17. <td><a href="index.html">Link</a></td>
    18. </tr>
    19. <tr>
    20. <td><a href="index.html">Link</a></td>
    21. </tr>
    22. <tr>
    23. <td><a href="index.html">Link</a></td>
    24. </tr>
    25. <tr>
    26. <td><a href="index.html">Link</a></td>
    27. </tr>
    28. </table>
    29. </td>
    30. <td valign="top" width="389">
    31. Hauptinhalt</td>
    32. </tr>
    33. </table></div>
    34. </body>
    35. </html>
    Alles anzeigen


    Ich arbeite mit Macromedia Dreamweaver 8. Vllt gibt es da eine coole funktion für das.

    EDIT: Ich habe jetzt mit diesem Code:

    Quellcode

    1. <p align=center></p>

    geschafft, die HP zu zentrieren. :)

  • Hi,
    hättest du das mit

    Quellcode

    1. <div style="margin:0 auto;width:610px;">

    versucht, hätte das natürlich geklappt ;)

    Aber wenn du so zufrieden bist, ist das ja auch okay. Entspricht so allerdings nicht den html-standards

    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.

  • Hallo Broken Sword!
    Aber wenn es der server so richtig versteht, muss das dch klappen :)

    Die seite ist für unseren Clup, das ich meine erste seite mit reinem HTML Texten. Aber zumglück gabs ja ein super krasses programm von Macromedia ohne das ich das nicht geschafft hätte :)

    Der link fon der HP: Top Pool

    Mir gefällt die jetzt viel besser, als wenn alles link klepte.

    Was sagt ihr dazu? Es feht noch einiges, aber ich bin drann, das baldest möglich zu schaffen :)

    ein kleines problem bei dem Menülink "termine". Wie kann ich das am besten beheben?

    Danke

  • HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>test</title>
    7. <style type="text/css">
    8. html {
    9. height: 100%;
    10. width: 100%;
    11. }
    12. </style>
    14. </head>
    16. <body style="margin:0; height:100%; width:100%">
    17. <table style="width:100%; height:100%;" cellspacing="0" cellpadding="0">
    18. <tr>
    19. <td align="center" valign="middle">dein Text</td>
    20. </tr>
    21. </table>
    22. </body>
    24. </html>
    Alles anzeigen


    ist valider code

    ---

    wegen dem Termine-Link: gib den tds eine Breite bzw. eine grössere Breite dann siehts gleich besser aus

  • Also valign="middle" benutzt man überhaupt nicht mehr, wenn man schon etwas positioniert dann bitte mit CSS, mit Tables eine Seite ausrichten ist ja noch ok.

    Ich habe das gerade getestet ( mit dem Code von Broken_Sword), und das wird nichmal in die mitte des browsers geschoben ...


    Kann auch nicht gehen, den Broken_Sword hat etwas wichtiges vergessen in seinem Code, den Wert das es Zentriert werden soll. Willst du einen Divcontainer mittig platzieren geht das volgendermaßen (Beispielweite 800px):

    HTML:

    HTML-Quellcode

    1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <title></title>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    6. <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    7. </head>
    8. <body>
    9. <div id="cont_center">
    11. Dein Wesbseiten Inhalt
    13. </div>
    14. </body>
    15. </html>
    Alles anzeigen


    CSS (style.css):

    Quellcode

    1. #cont_center {
    2. margin: 0;
    3. width: 800px;
    4. height: 100%;
    5. position: absolute;
    6. left: 50%;
    7. margin-left: -400px;
    8. }


    Was haben wir gemacht? Mit hilfe der Angabe "left: 50%" sagen wir unserem Container das er mit seiner linken oberen Ecke (Erstes Pixel sozusagen) um 50% in die Seite hinein rutscht, nun wäre natürlich der rechte Teil abgeschnitten, also schieben wir den gesamten Container mit hilfe von "margin-left: -400px;" (die hälfte von 800px) in die Mitte.

    Greetz
    Misserfolg ist eine Chance, es beim nächsten Mal besser zu machen!
    [SIZE="1"]Henry Ford[/SIZE]

  • Ist ja richtig, deswegen sag ich ja auch das es völlig ausreicht eine Seite mit Tables und der Angabe align="center" zentriert auszurichten. Aber valign="middle" benutzt man eigentlich nicht mehr... :)

    Greetz
    Misserfolg ist eine Chance, es beim nächsten Mal besser zu machen!
    [SIZE="1"]Henry Ford[/SIZE]

  • LoCoFR schrieb:



    Kann auch nicht gehen, den Broken_Sword hat etwas wichtiges vergessen in seinem Code, den Wert das es Zentriert werden soll.


    Falsch :D
    Mein Code (so, wie ich es gepostet habe, funktioniert natürlich alles einwandfrei.

    Quellcode

    1. <div style="margin:0 auto;width:610px;">

    Er hätte halt die Weite editieren müssen.



    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.

  • ... egal wie Du's machst, Du solltest es auf jeden Fall in möglichst vielen verschiedenen Browsern testen (oder zumindest den gängigsten). Ich hatte - unter anderem auch beim Zentrieren mit verschiedenen Methoden - die merkwürdigsten Resultate gesehen.

    Manchmal werden bestimmte HTML- bzw. CSS-Anweisungen auch vom gleichen Browser auf verschiedenen Betriebssystemen unterschiedlich dargestellt.

    Nur so als Hinweis...

    Gruß

    Superbonham

  • @superbonham:

    ja, das ist schon richtig. allerdings steigt mit der erfahrung des webdesigns auch das können.

    um mal ein beispiel zu nennen....hier wird ein div zentriert (egal wo)...kann auch ein anderes blockelement sein.

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

    das div bekommt folgende css:

    div { margin:0 auto; }

    das übergeordnete blockelement (in dem fall body) enthält folgende css-definiton:

    body { text-align:center; }

    damit funktioniert es in ALLEN browsern.

  • C-R-K schrieb:

    bild in der mite geht noch einfacher xD

    <center><img src="blalblabla.jpg"></center>
    fertig aus
    Was ihr mit DIV-Layern und CSS habt. ICh versteh diese Menschen nicht, die sich soviel Aufwand machen xD


    bilder centrieren is ja ganz einfach, aber was hilft mir das bei einer HP? :rolleyes:

  • C-R-K schrieb:


    Was ihr mit DIV-Layern und CSS habt. ICh versteh diese Menschen nicht, die sich soviel Aufwand machen xD


    Man ist eigentlich darauf angewiesen, wenn man etwas erreichen will, mit Stil eine HTML-Seite zugestalten, dazu gehören gewisse HTML-Standards an die man sich zuhalten hat und nicht so ein 0-8-15 Hingeklatsche.
    So kannst du höchstens bei Beepworld anfangen.
    Außerdem war das Problem bereits gelöst. Spam woanders deine 100 Beiträge, geht mir schon ne Weile auf die Eier.

    Gruß
    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.