zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Komplette Seite zentrieren (ohne "text-align" und Tabellen)?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.06.2006, 13:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Frage Komplette Seite zentrieren (ohne "text-align" und Tabellen)?

Hallo, ich stehe gerade vor einem Problem...

Ich möchte, dass der gesamte Inhalt meiner Seite immer zentriert ist, egal welche Auflösung eingestellt ist oder welche Größe das Browserfenster hat. Jetzt gibt es da ja das schöne "text-align". Wenn ich über mein CSS einem div-Block ("container"), der alles umschließt, die Eigenschaft "text-align:center" zuweise, dann funktioniert es zwar, allerdings ist es ja nicht erlaubt, diese Eigenschaft auf Blockelemente anzuwenden. Und <div> ist ja definitiv ein Blockelement.

Zitat:
Zitat SELFHTML:

text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der MS Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über Seite margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können.

Eine ehemals eingeführte CSS-Eigenschaft namens alignment ist mittlerweile aus dem CSS-Standard verschwunden. Verwenden Sie nur noch text-align.

Quelle: http://de.selfhtml.org/css/eigenscha...htm#text_align
Mit "margin", wie es bei SELFHTML steht und mit "margin: 0 auto;", funktioniert es leider nicht (zumindest habe ich es nicht hin bekommen). Die Seite wird immer nur linksbündig dargestellt. Zentriert wird sie im Moment mit folgendem:

Code:
#container
              {
               position:absolute;
               left:50%;
               width:775px;
               margin:0 0 0 -388px;
               padding:0;
              }
Die Frage ist: Gibt es eine elegantere/schlankere Lösung, die außerdem auch noch Standardkonform ist (und funktioniert )? Mir wäre wichtig, dass ich meinen Code möglichst "sauber" halte - also möglichst klein, möglichst 100%ig Standardkonform (XHTML 1.1/CSS 2).
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.06.2006, 13:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Die Suche liefert dir hunderte Ergebnisse...

Nimm ein div, gib es mit CSS folgende Werte: text-align: left; width: 775px; margin: 0 auto; und weise dem body-tag den Wert: text-align: center; zu, schon klappt es...

Geändert von cgdesign (02.06.2006 um 14:56 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.06.2006, 13:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

Gesucht habe ich! Allerdings bin ich eigentlich nur auf das "margin: 0 auto;" gestoßen, was bei mir ja irgendwie nicht funktionieren will (getestet bis jetzt nur im FF 1.5.0.4).

Das was du geschrieben hast, kommt mir noch etwas aufgebläht vor und unterscheidet sich ja auch nicht stark von dem, was ich hab. Gibt es denn keine Möglichkeit, das ganze einfacher, also vllt. mit ein oder zwei Eigenschaften zu realisieren? Bzw...woran kann das liegen, dass das "margin:0 auto;" bei mir nicht funktioniert?

Vllt. hier noch mal ein paar weitere Infos:

Browser: Firefox 1.5.0.4

Code:
Auszug aus meinem CSS:

body,textarea
              {
               background-color:#99cc00;
               font-family:Verdana,Arial,sans-serif;
               color:#000000;
               font-size:12pt;
              }


#container
              {
               position:absolute;
               left:50%;
               width:775px;
               margin:0 0 0 -388px;
               padding:0;
/*              margin: 0 auto;*/
              }
Code:
Auszug aus meiner html:

<?xml version="1.1" 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">

<head>
	<title>[(site_name)] | [*pagetitle*]</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

	<link rel="stylesheet" href="[(base_url)]A_M/templates/screen.css" type="text/css" media="screen"/>
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]"/>
        <base href="[(site_url)]"/>

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */
  </style>

  <script type="text/javascript" src="assets/js/sleight.js"></script>

<![endif]-->

        <script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
        <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>

</head>
<body>

<div id="container">

  <div id="site">

    <div id="header">
        <img src="[(base_url)]A_M/images/head_04_775.jpg" alt="Startseite"/>

    </div>
    <!-- close #header -->

    <div id="headmenu">

    <!-- close #headmenu -->


    <div id="content">

      [*#content*]

    </div>
    <!-- close #content -->

<div class="clear">&nbsp;</div>

<div id="footer">
	<p>
	</p>
</div>
<!-- close #footer -->

</div>
<!-- close #site -->

</div>
<!-- close #container -->

</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 02.06.2006, 14:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Hast du mein Post überhaupt zu Ende gelesen? Einfacher geht's nicht... Und was du für Fehler gemacht hast, steht eigentlich auch in meinem Post, wenn du denn dein Quelltext mit meinem vergleichst...

Sooo, vielleicht poste ich mal ein Beispielcode, damit du es verstehst.

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" lang="de">
<head>
<title>neu</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body
{
	background-color: #9c0;
	font: 0.8em verdana;
	text-align: center;
}
#container
{
	background: #fff;
	width: 775px;
	margin: 0 auto;
	text-align: left;
}
</style>
</head>
<body>
	<div id="container">text</div>
</body>
</html>

Geändert von cgdesign (02.06.2006 um 15:04 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 02.06.2006, 14:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

Ich habe es doch verstanden. Ich hatte nur gedacht/gehofft, dass es auch kürzer geht. Das es so funktioniert ist schon klar.

Ich hab das jetzt erstmal in meinen Code eingebaut. Jetzt muss ich nur noch die Stelle suchen, die meinen Text auch ohne das "text-align:left" linksbündig macht.

edit: Hmm...den Grund hab ich gefunden (Tippfehler; dadurch wurde das "text-align:center" nicht übernommen). Allerdings verstehe ich jetzt nicht so ganz, wozu das "text-align:center" für den body gut sein soll. Kann mir das bitte einer erklären? Zentriert ist es auch ohne diese Angabe.

Geändert von marcee (02.06.2006 um 14:52 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.06.2006, 14:52
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Ich hatte nur gedacht/gehofft, dass es auch kürzer geht.
Noch kürzer? Es sind zwei Angaben, ohne den IE5.x ists nur eine - kürzer gehts wohl kaum

Zitat:
die meinen Text auch ohne das "text-align:left" linksbündig macht.
Wozu? Ohne text-align:left ist Linksbündigkeit unmöglich. Diese Angabe darf problemlos auch auf Block-Elemente angewendet werden.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #7 (permalink)  
Alt 02.06.2006, 15:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von marcee
Allerdings verstehe ich jetzt nicht so ganz, wozu das "text-align:center" für den body gut sein soll. Kann mir das bitte einer erklären? Zentriert ist es auch ohne diese Angabe.
Richtig, die neueren Browser verstehen das, nur unser Problemkind der IE 5.x versteht das leider nicht... Wenn du den IE5.x ausschließt, brauchst du auch kein text-align: center; mehr, dann würde auch auch margin: 0 auto; völlig langen...
Mit Zitat antworten
  #8 (permalink)  
Alt 02.06.2006, 15:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2006
Beiträge: 16
marcee befindet sich auf einem aufstrebenden Ast
Standard

Erstmal danke an euch!

Zitat:
Noch kürzer? Es sind zwei Angaben, ohne den IE5.x ists nur eine - kürzer gehts wohl kaum
Ja, hab ich jetzt auch gesehen. Scheine heute irgendwie durch den Wind zu sein. Hab vorhin nämlich irgendwie ein, zwei mehr gesehen (wenn man den IE-Kram weg lässt).


Zitat:
Richtig, die neueren Browser verstehen das, nur unser Problemkind der IE 5.x versteht das leider nicht...
Das ist mir vorhin auch eingefallen. Hab mich ja schon ein bisschen in CSS etc. eingelesen. Und da stößt man ja ziemlich schnell auf die Problematiken, den quirks-Modus etc...

Na gut...dann wäre das Problem ja gelöst. Danke nochmal an euch!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div-Konainer soll sich über komplette Seite legen Safran CSS 3 02.07.2006 19:14
Seite zentrieren.... Spyker CSS 2 16.01.2006 23:21
Fröhliches Rätselraten - Firefox zeigt komplette Seite nicht Boris CSS 4 02.06.2005 17:49
Style Sheets => eine Seite zwei verschiedne Tabellen PowerBook CSS 2 23.10.2004 13:10
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ? Fidi CSS 0 07.01.2004 12:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:43 Uhr.