kostenloser Webspace werbefrei: lima-city


Gesamter Inhalt in die Mitte

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mypc

    Kostenloser Webspace von mypc, auf Homepage erstellen warten

    mypc hat kostenlosen Webspace.

    Hallo,
    ich habe ein Problem, und zwar möchte ich den gesamten Inhalt einer Seite (.php) nicht nur im Verhältnis Links-Rechts mittig haben
    sondern auch Oben zu Unten. Wie bekomme ich also egal ob sich die Größe des Seiteninhalts verändert (also nicht einfach Zeilenumbrücke machen :D), die Seite genau in die Mitte?

    Ich danke euch im Vorhinein
    euer PC ;)

    Beitrag zuletzt geändert: 9.7.2009 21:41:39 von mypc
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Das ist schwer, wenn der Inhalt verändern soll. Prinzipiell willst du also folgendes:
    <div id="mitte">Hier steht soviel Inhalt wie du willst</div>

    Üblicherweise mittels CSS:
    #mitte {margin: auto;}
    Ich bin mir nicht sicher, aber das dürfte es nicht ganz so mittig setzen. Das Problem liegt in der dynamischen Höhe.
    Wenn diese nicht dynamisch wäre könnte man den Trick mit dem absoluten positionieren machen und negative margins einsetzen: Tutorial.

    Aber wie soll das ganze aussehen, wenn der Inhalt größer ist als die Fensterhöhe...
  4. CSS-Code:

    vertical-align: middle;


    also z.B.

    <body style="vertical-align: middle;">


    LG cookies
  5. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Du stellst den gesamten Inhalt deiner Seite in einen "wrapper":

    <div id="wrapper">kompletter Inhalt der Seite</div>


    In deinem CSS machst du dann folgendes:

    #wrapper {
    	position: absolute; 
    	width: 800px;
    	margin-left: -400px;
     	left: 50%;
    	height: 500px;
    	margin-top: -250px; 
    	top: 50%;
    	}


    margin-left und margin-top sollten halb so groß sein wie dein content. Ich habe selbst schon mal eine Seite auf diese Weise realisiert.
  6. kaetzle7 schrieb:
    Du stellst den gesamten Inhalt deiner Seite in einen "wrapper":

    <div id="wrapper">kompletter Inhalt der Seite</div>


    In deinem CSS machst du dann folgendes:

    #wrapper {
    	position: absolute; 
    	width: 800px;
    	margin-left: -400px;
     	left: 50%;
    	height: 500px;
    	margin-top: -250px; 
    	top: 50%;
    	}


    margin-left und margin-top sollten halb so groß sein wie dein content. Ich habe selbst schon mal eine Seite auf diese Weise realisiert.

    ich dachte mit php will er andeuten, dass die website einen flexiblen inhalt hat. also dass sich die größe des wrapper nicht genau bestimmen lässt. (ausser man betreibt etwas mathrmatik mit php)
    Gruß
    Daniel
  7. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Dann müsste er beim content eben mit overflow: auto arbeiten... Ohne eine fixe Höhe, macht doch eine vertikale Mittestellung überhaupt gar keinen Sinn... :confused:
  8. Hallo,

    hab' mal eben eine Demo erstellt, wo die Seite immer zentriert ist und der Inhalt sich dynamisch der Höhe anpasst... Ich weiß zwar nicht, ob es das ist, was Du als Ergebnis haben wolltest, aber anschauen kostet bekanntlich nix! :wink:

    http://staymyfriend.lima-city.de/demo/index.html
  9. Vergesst den Käse mit Overflow und Co. Es reicht aus wenn man ca 30-40 Px Abstand oben lässt um einen ähnlichen optischen Effekt zu erziehlen. Wenn der Inhalt zu klein ist (Höhe) dann wird der Obere Abstynd einfach erhöht.

    Aber via Overflow grenzt man zum Beispiel mobile Endgeräte aus, die dann schlicht die Scrolleiste nicht anzeigen und somit den Inhalt nicht richtig darstellen.
  10. Autor dieses Themas

    mypc

    Kostenloser Webspace von mypc, auf Homepage erstellen warten

    mypc hat kostenlosen Webspace.

    Danke an alle, ich möchte eh nur die Enter-Page in der Mitte haben und die hat eigentlich eine feste Höhe. Das was kaetzle geschrieben hat hat auch gut funktioniert! Danke!

    Aber eine Frage hätte ich noch: Was muss ich verändern an dem Code
    #wrapper {
    	position: absolute; 
    	width: 800px;
    	margin-left: -400px;
     	left: 50%;
    	height: 500px;
    	margin-top: -250px; 
    	top: 50%;
    	}
    Damit nur Links und Rechts die Seite immer Mittig ist?

    Euer PC

    Beitrag zuletzt geändert: 9.7.2009 21:13:38 von mypc
  11. Wie wäre es denn hiermit?
    <table width="100%" height="100%">
        <tr>
            <td align="center" valign="middle">
                ...
            </td>
        </tr>
    </table>
  12. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    mypc schrieb:
    Aber eine Frage hätte ich noch: Was muss ich verändern an dem Code
    #wrapper {
    	position: absolute; 
    	width: 800px;
    	margin-left: -400px;
     	left: 50%;
    	height: 500px;
    	margin-top: -250px; 
    	top: 50%;
    	}
    Damit nur Links und Rechts die Seite immer Mittig ist?

    Lass einfach das
    margin-top: -250px; 
    	top: 50%;

    weg, dann ist der Inhalt am oberen Rand.
  13. Probiers doch mit <center> und <table>
    <table width="100%" height="100%"><tr><td><center>Dein ganzer Text</center></td></tr></table>


    Beitrag zuletzt geändert: 13.7.2009 19:31:35 von r2d2-aeg
  14. r2d2-aeg schrieb:
    Probiers doch mit <center> und <table>
    <table width="100%" height="100%"><tr><td><center>Dein ganzer Text</center></td></tr></table>


    gnade....
    bitte nicht solche tabellenspiele.
    Die css- variante von der Katze (oder was auch immer..) sind doch gut.
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!