Inhalt zentriert ausrichten

  1. Rupp

    Rupp Thread Starter MacUser Mitglied

    Mitglied seit:
    10.10.2004
    Beiträge:
    7.557
    Zustimmungen:
    603
    Hallo,

    ich habe eine einfache, und zugegeben ziemlich dumme Frage:
    Ich habe eine einfache Webseite, mit CSS strukturiert. Nun möchte ich den Layer für den Inhalt immer zentriert positionieren. Das habe ich mit
    HTML:
    margin:0 auto 0 auto;
    hinbekommen.

    Jetzt möchte ich aber noch, dass der Layer vom oberen Bildschirmrand bis zum untern durchgeht (ohne scrollbalken). Also quasi eine Höhe von 100% hat, die jedoch ohne "Position:absolute / fixed / static" tag nicht umgesetzt wird!
    wie kann ich das Problem lösen? bei der webseite:
    http://www.streetsoflife.com/
    ist das jedenfalls so gelöst. Habe mir die CSS dateien auch mal angesehen, aber nichts informatives finden können!

    Ich hoffe ihr könnt mir helfen!

    Danke,
    Rupp
     
    Rupp, 20.06.2006
    #1
  2. moses_78

    moses_78 MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    Bei mir hat die keine Höhe von 100%, siehe http://www.streetsoflife.com/index.php?s=ff ;)

    Ansonsten: Absolute Positionierung, oder einen zentrierten Hintergrund,
    der nur vertikal wiederholt wird, und so den Eindruck erweckt, als hätte
    die Sektion mit dem Inhalt tatsächlich eine Höhe von 100%.
     
    moses_78, 20.06.2006
    #2
  3. Galanos

    Galanos MacUser Mitglied

    Mitglied seit:
    19.12.2005
    Beiträge:
    624
    Zustimmungen:
    23
    Da gibt's einige Techniken, aber wenn man Inhalte mit nicht definierten (z.B. dynamischen) Dimensionen hat, fuehrt (soweit ich recherchiert hatte) nichts an der "guten" alten seitenumfassenden Tabelle vorbei:
    HTML:
    <table width="100%" height="100%" align="center" valign="middle">
    <tr>
    <td>
    INHALT
    </td>
    </tr>
    </table>
    Wenn du weisst, wie hoch dein Inhalt wird, kannst du seinem Elternelement 50% Padding oben und dem Objekt selber einen negativen Margin seiner Hoehe nach oben geben.
    Beispielsweise wird ein <div> mit der festen Groesse von 164 Pixeln in einem Eltern-<div> so vertikal zentriert:

    Das Eltern-<div> bekommt:
    Code:
    padding-top: 50%;
    Das Objekt selber bekommt:
    Code:
    margin-top: -82px;
    Wenn du das Objekt auf der sichtbaren Seite zentrieren willst, muss das Eltern-<div> natuerlich seitenumfassend sein.

    Wenn du durch die CSS-Artikel auf http://www.alistapart.com stoeberst, wirst du noch eine Handvoll anderer Methoden zum vertikalen Zentrieren finden.
     
    Galanos, 20.06.2006
    #3
  4. naomi_watts

    naomi_watts MacUser Mitglied

    Mitglied seit:
    11.02.2006
    Beiträge:
    111
    Zustimmungen:
    0
    hallo rupp,

    ich gehe mal davon aus, dass du liquid design css einsetzt und nicht absolut positioning css. ich habe's zwar nur mit absolut-positioning umgesetzt, aber mit liquid sollte es auch gehen. du fragst einfach über js die browserfensterhöhe ab und korrigiert anschließend über dom die höhe von der entsprechenden div-box.

    grüße naomi
     
    naomi_watts, 21.06.2006
    #4
  5. Rupp

    Rupp Thread Starter MacUser Mitglied

    Mitglied seit:
    10.10.2004
    Beiträge:
    7.557
    Zustimmungen:
    603
    das wär natürlich ne super idee...
    aber okay, wenn das anders nicht möglich ist, dann werd ichs mit einer absoluten positionierung machen! ist nicht weiter tragisch hoffe ich... :/
     
    Rupp, 21.06.2006
    #5
  6. Little Buddha

    Little Buddha MacUser Mitglied

    Mitglied seit:
    15.03.2006
    Beiträge:
    212
    Zustimmungen:
    0
    Einfach, effizient und ohne Java Script: http://www.css4you.de/wslayout1/ex0001.html

    Je nach Einsatz reicht sogar ein simples

    Code:
    html { 
       height: 100%; 
       margin-bottom: -50px; 
    }
    :)
     
    Little Buddha, 21.06.2006
    #6
  7. Galanos

    Galanos MacUser Mitglied

    Mitglied seit:
    19.12.2005
    Beiträge:
    624
    Zustimmungen:
    23
    Herrje, ist das peinlich. Ich habe erst jetzt geblickt, dass es gar nicht um vertikales Zentrieren geht :(
    Tut mir Leid, vielleicht sollte man Posts nicht nur zu Ende, sondern auch sorgfaeltig lesen und nicht nur ueberfliegen.

    Zum eigentlichen Thema:
    Du kannst dich auch der Technik der Faux-Columns bedienen, auch wenn du nur eine Spalte hast.
    Einfach dem Body eine bestimmte Breite geben, ein Hintergrundbild auf die gleich Breite anlegen und mit:
    Code:
    background:url(hintergrund.gif) repeat-y 50% 0;
    mittig nach oben setzen und vertikal wiederholen (natuerlich in #body {…}).

    Ich kann dir eine URL zu einem Beispiel im Bau schicken, falls es dich interessiert. Einfach PM schreiben.
     
    Galanos, 22.06.2006
    #7
  8. hobbyuser

    hobbyuser MacUser Mitglied

    Mitglied seit:
    31.12.2005
    Beiträge:
    28
    Zustimmungen:
    0
    Hi Rupp

    eigentlich ist das kein Problem. Du hast eine Div in die du alle Inhalte dieser gibst du eine ID (z.B. container), dann benötigst du nur noch ein wenig CSS.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    
    <head>
    	<title>Musterseite</title>
    	<style type="text/css">
    	body {
    		margin:0;
    		padding:0;
    		text-align:center
    	}
    	#container {
    		margin:0 auto;
    		width:600px;
    		min-height:100%;
    		background-color:#e0e0e0;
    	}
    	</style>
    </head>
    <body>
    
    	<div id="container">INHALT<div>
    
    </body>
    </html>
    Natürlich wäre es besser die CSS Anweisungen in eine extra Datei zu schreiben, dass ist für ein Beispiel aber unnötig. ;)

    Gruß
    Hobbyuser

    PS: Ich hätte gerne die HTML-Codes des Boards benutzt, leider wurde damit der Quelltext falsch formatiert (Zeilenumbrüche). :rolleyes:
     
    hobbyuser, 24.06.2006
    #8
  9. Rupp

    Rupp Thread Starter MacUser Mitglied

    Mitglied seit:
    10.10.2004
    Beiträge:
    7.557
    Zustimmungen:
    603
    danke leute... das ist der grund warum ich dieses forum liebe :D
     
    Rupp, 29.06.2006
    #9
Die Seite wird geladen...
Ähnliche Themen - Inhalt zentriert ausrichten
  1. muplo
    Antworten:
    13
    Aufrufe:
    972
    muplo
    16.08.2011
  2. romac
    Antworten:
    5
    Aufrufe:
    1.211
    falkgottschalk
    17.02.2011
  3. Neddi
    Antworten:
    0
    Aufrufe:
    566
    Neddi
    14.09.2010
  4. Jhonny Jumper
    Antworten:
    1
    Aufrufe:
    1.075
    Labrar
    24.08.2009
  5. Aarsak
    Antworten:
    2
    Aufrufe:
    655
    Aarsak
    01.12.2008