css div layout einfach nur in die mitte von der seite? aber wie?

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

  • css div layout einfach nur in die mitte von der seite? aber wie?

    Hallo,

    ich habe ein ganz simples einfaches div layout aber ich bekomme es einfach nicht in die mitte von der Seite gesetzt kann mir bitte jemand helfen? Danke

    CSS:

    Quellcode

    1. a:link {
    2. color: #FFF;
    3. }
    4. a:visited {
    5. color: #F00;
    6. }
    7. a:hover {
    8. text-decoration: none;
    9. color: #FFF;
    10. }
    11. a:active {
    12. text-decoration: none;
    13. color: #000;
    14. }
    15. body,td,th {
    16. margin-left: 0px;
    17. margin-top: 0px;
    18. margin-right: 0px;
    19. margin-bottom:0px;
    20. background-color: #FFF;
    21. }
    22. #tino { /*schwarzer Teil*/
    23. position:auto;
    24. width:659px;
    25. height:136px;
    26. z-index:2; /*Überlappungen*/
    27. background-color:#000;
    28. }
    29. #tino2 { /*grüner Teil*/
    30. position:absolute;
    31. width:659px;
    32. height:188px;
    33. z-index:1;
    34. top:136px;
    35. background-color:#0F0;
    36. }
    37. #seite { /*roter Teil*/
    38. position:absolute;
    39. width:50px;
    40. height:272px;
    41. z-index:3;
    42. top:0px;
    43. left:609px;
    44. background-color:#FF0000;
    45. }
    46. #schirftfarbe_kopfteil {
    47. color:#FFF;
    48. }
    49. #schriftfarbe_asd {
    50. color: #FF0;
    51. text-align:center;
    52. }
    Alles anzeigen


    html code

    Quellcode

    1. <html>
    3. <head>
    4. <title>TINOS UEBERSCHRIFT</title>
    5. <link rel="stylesheet" href="dein_stil.css" type="text/css"/>
    6. </head>
    8. <body>
    9. <div id="tino">
    10. <div align="left"><font id="schirftfarbe_kopfteil"><a href="#">KOPFTEIL</a></font><br>
    11. <a href="http://www.google.de" title="Verlinkung zu Google" target="_blank"><img src="bilder/deu.gif" /></a></div>
    12. </div>
    13. <div align="center" id="tino2">
    14. <div align="left"><a href="#">KOPFTEIL</a><br>
    15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum pellentesque dui. Quisque nec massa. Suspendisse orci tellus, mollis ut, hendrerit eu, aliquam a, est. Etiam nisl neque, pretium accumsan, congue sit amet, porta sit amet, nibh. Nulla eget felis ut ipsum placerat semper. Mauris tortor libero, condimentum eget, suscipit ac, porta at, leo. Ut convallis. Nullam gravida lacinia enim. Nulla feugiat. Quisque eleifend felis et ipsum. Vestibulum leo. Phasellus ante felis, tincidunt sit amet, ullamcorper ut, laoreet sed, leo. Donec dignissim, arcu ac dignissim sagittis, purus dui condimentum libero, non porta elit sem in mi. Donec interdum placerat ipsum. Aenean pellentesque. Quisque et nisi. Sed quis quam non quam cursus viverra. Mauris ut neque. Vestibulum augue nibh, faucibus et, tempor ac, sollicitudin eget, risus.
    16. </div>
    17. </div>
    18. <div id="seite">
    19. <div align="left">SEITE<font id="schriftfarbe_asd"><br>
    20. asd</font></div>
    21. </div>
    22. </body>
    24. </html>
    Alles anzeigen
    --Kommt noch--

  • Nimm erstmal die "aligns" aus den divs raus. Da bekommt man ja Augenkrebs ;)


    Um etwas mittig zu positionieren kannst du für den IE das nutzen:

    Quellcode

    1. text-align:center;


    Für Gecko und Webkit Browser benutzt du:

    Quellcode

    1. margin: auto auto;


    Das ganze verschachtelst du mit 2 divs als Hauptcontainer:

    Quellcode

    1. <div> // Hier benutzt du das text-align
    2. <div> // hier das margin
    3. ....
    4. </div>
    5. </div>


    Und für ein Mehrspaltiges Layout kannst du dann floats nutzen.

  • So gedacht?

    Quellcode

    1. a:link {
    2. color: #FFF;
    3. }
    4. a:visited {
    5. color: #F00;
    6. }
    7. a:hover {
    8. text-decoration: none;
    9. color: #FFF;
    10. }
    11. a:active {
    12. text-decoration: none;
    13. color: #000;
    14. }
    15. body,td,th {
    16. margin-left: 0px;
    17. margin-top: 0px;
    18. margin-right: 0px;
    19. margin-bottom:0px;
    20. background-color: #FFF;
    21. }
    22. #middle { /*schwarzer Teil*/
    23. position:auto;
    24. text-align:center;
    25. }
    26. #tino { /*schwarzer Teil*/
    27. position:auto;
    28. margin:auto auto;
    29. width:659px;
    30. height:136px;
    31. z-index:2; /*Überlappungen*/
    32. background-color:#000;
    33. }
    34. #tino2 { /*grüner Teil*/
    35. position:auto;
    36. margin:auto auto;
    37. width:659px;
    38. height:188px;
    39. z-index:1;
    40. top:136px;
    41. background-color:#0F0;
    42. }
    43. #seite { /*roter Teil*/
    44. position:auto;
    45. margin:auto auto;
    46. width:50px;
    47. height:272px;
    48. z-index:3;
    49. top:0px;
    50. left:609px;
    51. background-color:#FF0000;
    52. }
    53. #schirftfarbe_kopfteil {
    54. color:#FFF;
    55. }
    56. #schriftfarbe_asd {
    57. color: #FF0;
    58. text-align:center;
    59. }
    Alles anzeigen


    Quellcode

    1. <html>
    3. <head>
    4. <title>TINOS UEBERSCHRIFT</title>
    5. <link rel="stylesheet" href="dein_stil.css" type="text/css"/>
    6. </head>
    8. <body>
    9. <div id="middle">
    10. <div id="tino">
    11. <div><font id="schirftfarbe_kopfteil"><a href="#">KOPFTEIL</a></font><br>
    12. <a href="http://www.google.de" title="Verlinkung zu Google" target="_blank"><img src="bilder/deu.gif" /></a></div>
    13. </div>
    14. <div id="tino2">
    15. <div><a href="#">KOPFTEIL</a><br>
    16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum pellentesque dui. Quisque nec massa. Suspendisse orci tellus, mollis ut, hendrerit eu, aliquam a, est. Etiam nisl neque, pretium accumsan, congue sit amet, porta sit amet, nibh. Nulla eget felis ut ipsum placerat semper. Mauris tortor libero, condimentum eget, suscipit ac, porta at, leo. Ut convallis. Nullam gravida lacinia enim. Nulla feugiat. Quisque eleifend felis et ipsum. Vestibulum leo. Phasellus ante felis, tincidunt sit amet, ullamcorper ut, laoreet sed, leo. Donec dignissim, arcu ac dignissim sagittis, purus dui condimentum libero, non porta elit sem in mi. Donec interdum placerat ipsum. Aenean pellentesque. Quisque et nisi. Sed quis quam non quam cursus viverra. Mauris ut neque. Vestibulum augue nibh, faucibus et, tempor ac, sollicitudin eget, risus.
    17. </div>
    18. </div>
    19. <div id="seite">
    20. <div>SEITE<font id="schriftfarbe_asd"><br>
    21. asd</font></div>
    22. </div>
    23. </div>
    24. </body>
    26. </html>
    Alles anzeigen
    --Kommt noch--

  • Guten Tag GFXShorty,

    ich habe deinen Quellcode mal ein wenig angepasst, solltest du Fragen dazu haben stelle sie einfach hier.

    index.html

    Quellcode

    1. <HTML>
    2. <HEAD>
    3. <title>TITLE</title>
    4. <link rel='stylesheet' href='theme/style.css' type='text/css'>
    5. </HEAD>
    6. <BODY>
    7. <div id='main'>
    8. <div id='header'>
    9. <p class='caption_font'>
    10. <a href='#'>HEADER</a>
    11. </p>
    12. <a href='http://www.google.de' title='Verlinkung zu Google' target='_blank'><img src='img/deu.gif'></a>
    13. </div>
    14. <div id='content'>
    15. <p class='caption_font'>
    16. <a href='#'>CONTENT</a>
    17. </p>
    18. <p class='default_text'>
    19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum pellentesque dui. Quisque nec massa. Suspendisse orci tellus, mollis ut, hendrerit eu, aliquam a, est. Etiam nisl neque, pretium accumsan, congue sit amet, porta sit amet, nibh. Nulla eget felis ut ipsum placerat semper. Mauris tortor libero, condimentum eget, suscipit ac, porta at, leo. Ut convallis. Nullam gravida lacinia enim. Nulla feugiat. Quisque eleifend felis et ipsum. Vestibulum leo. Phasellus ante felis, tincidunt sit amet, ullamcorper ut, laoreet sed, leo. Donec dignissim, arcu ac dignissim sagittis, purus dui condimentum libero, non porta elit sem in mi. Donec interdum placerat ipsum. Aenean pellentesque. Quisque et nisi. Sed quis quam non quam cursus viverra. Mauris ut neque. Vestibulum augue nibh, faucibus et, tempor ac, sollicitudin eget, risus.
    20. </p>
    21. </div>
    22. <div id='footer'>
    23. <p class='caption_font'>
    24. <a href='#'>FOOTER</a>
    25. </p>
    26. <p class='coloured_text'>
    27. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    28. </p>
    29. </div>
    30. </div>
    31. </BODY>
    32. </HTML>
    Alles anzeigen


    style.css

    Quellcode

    1. #main {
    2. width: 60%;
    3. height: 60%;
    4. margin-left: 20%;
    5. margin-top: 0%;
    6. }
    7. #header { /*schwarzer Teil*/
    8. height: 15%;
    9. background-color: #000;
    10. }
    11. #content { /*grüner Teil*/
    12. height: 70%;
    13. background-color: #0F0;
    14. }
    15. #footer { /*roter Teil*/
    16. height: 15%;
    17. background-color: #FF0000;
    18. }
    19. p {
    20. margin-top: 0px;
    21. margin-bottom: 0px;
    22. }
    23. .caption_font {
    24. color:#FFF;
    25. }
    26. .default_text {
    27. margin-top: 1em;
    28. text-align: center;
    29. }
    30. .coloured_text {
    31. margin-top: 0.5em;
    32. color: #FF0;
    33. text-align:center;
    34. }
    35. a:link {
    36. color: #FF0000;
    37. }
    38. a:visited {
    39. color: #6495ED;
    40. }
    41. a:hover {
    42. text-decoration: none;
    43. color: #FFF;
    44. }
    45. a:active {
    46. text-decoration: none;
    47. color: #000;
    48. }
    Alles anzeigen


    Folgende Änderungen habe ich durchgeführt:
    • einführung von class, bei wiederkehrenden Formatierungsarten
    • aussagekräftigere ID- und Klassennamen
    • positionierung über margin
    • dynamische Größenangaben eingeführt, anstelle von statischen Pixelangaben
    • Formatierung nach meinem Stil geändert
    • verwendung von einfachen Anführungszeichen (') für einfache Textstrings um Code-Tags zu vermeiden (auch Gewöhnungsbedingt)
    • ersetzen von <font> durch <p>
    • entfernen aller manuellen Zeilenumbrüche durch <br> (</br>), da dies durch einsetzen von Stylesheets meist überflüssig wird

    Mit freundlichem Gruß

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von apensiv ()

  • Entschuldige DOCTYPE muss natürlich drinnen sein.

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    Und wenn das Skript XHTML komform sein soll, müssen die (X)HTML-Tags auch alle klein geschrieben sein.
    (DOCTYPE sollte dann auch an XHTML angepasst werden)
    Ich persönlich skripte noch nach HTML, mache dies aber auch nicht beruflich.

    Noch eine kleine Fehlerkorrektur: </br> sollte <br/> lauten.

    mfg

    Edit:
    Wenn man ganz genau ist, müsste man wahrscheinlich noch andere Dinge ändern, wie z.B. das setzen von alt beim Einfügen eines Bildes,
    habe den Quellcode jetzt aber (noch :rolleyes: ) nicht durch einen W3C-Test gejagt.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von apensiv ()