Ergebnis 1 bis 13 von 13
  1. #1
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    Mit CSS den Inhalt der Seite mittig Platzieren

    Hy Leute,

    da oft die indirekte Frage gestellt wurde, wie man seinen Content mit CSS mittig bekommt, hier zwei sicher Lösungen.

    Lösung 1:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    
    <title>Content Center - Mit CSS den Inhalt der Seite mittig Platzieren</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    
    #contentcenter	{
    
    	margin: auto;
    
    	width: 700px;	 
    }
    
    #maincontent	{
    
    	width: 698px;
    
    	border: 1px solid #CCC;
    
    	background-color: #E8E8E8;
    }
    
    </style>
    </head>
    
    <body>
    <div id="contentcenter">
    
    	<div id="maincontent">
    
    	... Weitere Code ...
    
    	</div>
    
    </div>
    </body>
    </html>

    Lösung 2:
    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    
    <title>Content Center - Mit CSS den Inhalt der Seite mittig Platzieren</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    
    #contentcenter	{
    
    	width: 700px;
    
    	position: absolute;
    	left: 50%;
    
    	margin-left: -350px;
    }
    
    #maincontent	{
    
    	width: 698px;
    
    	border: 1px solid #CCC;
    
    	background-color: #E8E8E8;
    }
    
    </style>
    </head>
    
    <body>
    <div id="contentcenter">
    
    	<div id="maincontent">
    
    	... Weitere Code ...
    
    	</div>
    
    </div>
    </body>
    </html>

    Kompatibilität - Lösung 1
    Fehlerfrei funktioniert diese Version in folgenden Browsern:
    Opera 6 - 7
    Mozilla
    Firefox
    Netscape 6 - 7
    IE4 - 6

    Leider funktioniert diese Version nicht im IE, wenn eine XML-Deklaration gesetzt wurde.
    Ebenfalls setzt Opera 5 eine horizontale Scrollbar.


    Kompatibilität - Lösung 2

    Hier wird der Content mit einer absoluten Positionierung mit Prozentangaben gesetzt, der Wert von margin-left richtet sich nach der width - Angabe. Der Wert von width wird halbiert und ergibt den Wert für margin-left.

    Fehlerfrei funktioniert diese Version in folgenden Browsern:
    Opera 4 - 7
    Mozilla
    Firefox
    Netscape 6 - 7
    IE4 - 6


    Fazit
    Aus Kompatibilitätsgründen und aus Gründen der Validität würde ich die Lösung 2 empfehlen. Wenn die Browser sich dann mal weiter entwickelt haben, kann Lösung 2 als elegantere Methode gewählt werden.


    Grüße Robert

  2. #2
    Avatar von DaBurens
    DaBurens ist offline Tripel-As
    registriert
    27-04-2003
    Ort
    Prärie
    Beiträge
    214

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    danke für die tips!

  3. #3
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Geändert von dkdenz (22-02-2005 um 00:27 Uhr)

  4. #4
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    naja, im prinzip das selbe. nur bei meinen beispielen wird es klarer ersichtlich wies funzt

  5. #5
    jsgreenhorn Guest

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    geht auch so: dr.web und bluerobot .

  6. #6
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Zitat Zitat von jsgreenhorn
    geht auch so: dr.web und bluerobot .
    die erste methode von drweb, würde aber nur im IE funktionieren, die zweite entspricht der lösung 1.
    das von bluerobot entspricht der lösung 2.

    es wird sicher noch zig varianten geben, nur die oben beschriebenen 2 löungen sind die beiden hauptlösungen.
    Geändert von womstar (21-08-2004 um 03:51 Uhr)

  7. #7
    Mr.Blonde ist offline Mitglied
    registriert
    01-06-2004
    Beiträge
    28

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Ich würd die XML Deklaration am Anfang weglassen, sonst schaltet der IE in den Quirksmodus.

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Entgegen der bestehenden Vermutung,
    nur der IE könnte mit text-align:center Content zentriert darstellen,
    hier nun der Gegenbeweis:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>text-align:center</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /* <![CDATA[ */
    body {
      background:#fff;
      padding:20px;
      margin:0px;
      text-align:center;
    }
    #inhalt {
      text-align:left;
      margin:0px auto;
      padding:0px;
      width:700px;
      height:400px;
      background:#ff0000;
      border:1px dashed #000;
    }
     /* ]]> */
    </style>
    </head>
    <body>
        <div id="inhalt">
        </div>
    </body>
    </html>
    Getestet mit:
    Netscape 7.0
    Mozilla 1.8Alpha1
    IE 6
    Opera 7.23
    K-Meleon 0.9
    FireFox 1.0

  9. #9
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Das liegt wohl ehr am dem hier "margin:0px auto;" als am "text-align:center".
    Kannst ja mal das hier "text-align:center" rausnehmen, sollte dann immer noch funktionieren. Nebenbei schließt sich dies dann der Lösung 1 an.

    Na gut, außer der IE5-5.5 will noch das "text-align" haben ..


    Grüße Robert

  10. #10
    Bastiii ist offline Grünschnabel
    registriert
    13-11-2005
    Beiträge
    3

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    hallo,

    benutze bei mir lösung nummer 2, wollte jetzt gerne wissen, wie ich die breite verändere.

    greetz & thx
    Bastiii

  11. #11
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    Wenn Du das:
    http://forum.jswelt.de/showpost.php?...38&postcount=8
    als Lösung Zwei bezeichnest,
    dann musst Du einfach bei width:700px; Deinen benötigten Wert eintragen.

  12. #12
    Bastiii ist offline Grünschnabel
    registriert
    13-11-2005
    Beiträge
    3

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    bitte löschen
    Geändert von Bastiii (13-11-2005 um 20:09 Uhr)

  13. #13
    Bastiii ist offline Grünschnabel
    registriert
    13-11-2005
    Beiträge
    3

    AW: Mit CSS den Inhalt der Seite mittig Platzieren

    nungut, habe mich jetzt selber ein bissel dran versucht, allerdings bekomme ich schwierigkeiten, wenn ich eine andere bildschirmauflösung einstelle, dabei verschieben sich immer die 2 menü "spalten":

    auflösung 1024x768:
    "klick"

    auflösung 1152x864:
    "klick"

    habs auch mal hochgeladen, so könnt ihr euch selbst ein bild drüber machen:
    HP

    style.css:

    body {
    background:#0099FF;
    padding:20px;
    margin:0px;
    text-align:center;
    }
    #header {
    text-align:center;
    margin:2px auto;
    padding:1px;
    width:907px;
    height:100px;
    background:#0000B3;
    border:solid 1px black;
    color:white;
    }

    #links {
    text-align:center;
    padding:2px;
    margin:2px auto;
    position:absolute;
    top:126px;
    left:56px;
    width:155px;
    height:350px;
    border:solid 1px black;

    }

    #rechts {
    text-align:center;
    padding:2px;
    margin:2px auto;
    position:absolute;
    top:126px;
    right:56px;
    width:155px;
    height:350px;
    border:solid 1px black;

    }

    #inhalt {
    text-align:center;
    margin:2px auto;
    padding:2px;
    width:580px;
    height:350px;
    background:#0000B3;
    border:solid 1px black;
    color:white;
    }



    #footer {
    text-align:center;
    margin:2px auto;
    padding:1px;
    width:907px;
    height:20px;
    background:#0000B3;
    border:solid 1px black;
    color:white;
    }
    index.php:

    <html>
    <head>
    <title>...</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>

    <div id="header">
    Header
    </div>
    <div id="links">
    Menue
    </div>
    <div id="inhalt">
    Inhalt
    </div>
    <div id="rechts">
    Menue
    </div>
    <div id="footer">
    Footer
    </div>



    </body>
    </html>
    gibts da irgend nen trick dabei, kann man die zwei menü "spalten" irgendwie fest machen?

    bin für jede hilfe dankbar

    greetz
    Bastiii

Ähnliche Themen

  1. CSS Content mittig mittig
    Von crofthunter im Forum Allgemeines
    Antworten: 6
    Letzter Beitrag: 29-06-2004, 10:17
  2. Inhalt einer Form -> an zweite Seite
    Von renejahn im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 27-11-2003, 16:05
  3. Antworten: 2
    Letzter Beitrag: 29-08-2002, 15:38
  4. HTML Seite mit Javascript vorladen
    Von sweb im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 16-08-2001, 09:55
  5. Seite automatisch in Frame laden (Problem)
    Von Oli im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 06-12-2000, 06:59

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •