Inhalt zentriert ausrichten

Diskutiere mit über: Inhalt zentriert ausrichten im Web Page Design Forum

  1. Rupp

    Rupp Thread Starter MacUser Mitglied

    Beiträge:
    7.543
    Zustimmungen:
    603
    Registriert seit:
    10.10.2004
    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
     
  2. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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%.
     
  3. Galanos

    Galanos MacUser Mitglied

    Beiträge:
    624
    Zustimmungen:
    23
    Registriert seit:
    19.12.2005
    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.
     
  4. naomi_watts

    naomi_watts MacUser Mitglied

    Beiträge:
    111
    Zustimmungen:
    0
    Registriert seit:
    11.02.2006
    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
     
  5. Rupp

    Rupp Thread Starter MacUser Mitglied

    Beiträge:
    7.543
    Zustimmungen:
    603
    Registriert seit:
    10.10.2004
    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... :/
     
  6. Little Buddha

    Little Buddha Banned

    Beiträge:
    212
    Zustimmungen:
    0
    Registriert seit:
    15.03.2006
    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; 
    }
    :)
     
    Zuletzt bearbeitet: 21.06.2006
  7. Galanos

    Galanos MacUser Mitglied

    Beiträge:
    624
    Zustimmungen:
    23
    Registriert seit:
    19.12.2005
    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.
     
  8. hobbyuser

    hobbyuser MacUser Mitglied

    Beiträge:
    28
    Zustimmungen:
    0
    Registriert seit:
    31.12.2005
    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:
     
  9. Rupp

    Rupp Thread Starter MacUser Mitglied

    Beiträge:
    7.543
    Zustimmungen:
    603
    Registriert seit:
    10.10.2004
    danke leute... das ist der grund warum ich dieses forum liebe :D
     
Die Seite wird geladen...
Ähnliche Themen - Inhalt zentriert ausrichten Forum Datum
Wie verschiebe ich in einem Div-Layer den Inhalt, ohne dabei den HG anzusprechen? Web Page Design 15.08.2011
vom Datum abhängiger variabler Inhalt Web Page Design 16.02.2011
Inhalt soll sich Fenstergröße anpassen Web Page Design 04.06.2009
Footer mit variablem Inhalt Web Page Design 21.11.2008
<div> Container mit Inhalt füllen?? Web Page Design 13.05.2008

Diese Seite empfehlen

Benutzerdefinierte Suche