mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 15:03 Benutzername: Passwort: Auto-Login

Thema: [CSS] Div zentrieren vom 12.12.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Div zentrieren
Seite: 1, 2, 3  Weiter
Autor Nachricht
derwebling
Threadersteller

Dabei seit: 16.11.2004
Ort: Traunstein
Alter: 36
Geschlecht: Männlich
Verfasst Mo 12.12.2005 10:38
Titel

[CSS] Div zentrieren

Antworten mit Zitat Zum Seitenanfang

Hab eine Site fertig gestellt, die zentriert im Browser fenster stehen soll. Beim Firefox geht's! Aber der IE mach mal wieder zicken! Wo ist das Problem? Hab schon einiges ausprobiert! bei Testseiten geht es einwandfrei:

Hier ist die Site bei der es nicht geht >> Zur Site

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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div style="width:250px; height:250px; margin:0 auto; border:1px solid #f00;"></div>
</body>
</html>


Zuletzt bearbeitet von shakadi am Mo 12.12.2005 10:44, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
shakadi
Griller Killer

Dabei seit: 21.12.2003
Ort: SHA
Alter: 36
Geschlecht: Männlich
Verfasst Mo 12.12.2005 10:41
Titel

Antworten mit Zitat Zum Seitenanfang

wie wärs zusätzlich noch mitm text-align: center; für den body?

bzw fürs horizontale und vertikale:

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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Blub</title>
<style type="text/css" media="screen"><!--
#blub       
   {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 0px;
   width: 100%;
   height: 1px;
   overflow: visible;
   visibility: visible;
   display: block
   }

#blablub
   {
   margin-left: -125px;
   position: absolute;
   top: -125px;
   left: 50%;
   width: 250px;
   height: 250px;
   }
--></style>
</head>
<body>
<div id="blub">
<div id="blablub"></div>
</div>
</body>
</html>


Zuletzt bearbeitet von shakadi am Mo 12.12.2005 10:50, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
derwebling
Threadersteller

Dabei seit: 16.11.2004
Ort: Traunstein
Alter: 36
Geschlecht: Männlich
Verfasst Mo 12.12.2005 11:18
Titel

Danke schön!

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für die Tipps, ich habe es jetz ein bisschen anders gelöst.

Wenn du für body= text-align: center; definierst ist alles zentriert!
Lösung:

div {
text-align: left;
}
text-align: center für die äusserste box definieren

=> dann passts!


Zuletzt bearbeitet von derwebling am Mo 12.12.2005 11:19, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
HaiKai

Dabei seit: 15.04.2007
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst So 15.04.2007 12:30
Titel

DIV-Container nach <body> mit CSS zentrieren

Antworten mit Zitat Zum Seitenanfang

[s]Semantisch[/s] korrekt zentriert nach CSS2.0 werden DIV-Container, indem eine feste Breite zugewiesen und dann als Aussenabstand zum <body>-Tag im Stylesheet

Code:

width: 770;
margin: 0 auto;


notiert wird.

Nach der CSS-Definition soll sich ein "text-align" nicht auf umschliessende Elemente auswirken, sondern ausschliesslich auf die Inhalte. Leider interpretiert dass nicht jeder Browser nach den W3C-CSS-Vorgaben. Die Notation

Code:

body {
text-align: center;}


bewirkt zum Beispiel im Firefox ab V 1.00 garnichts, wenn "margin: 0 auto;" notiert wurde, ausser die Inhalte aller nachfolgenden Elemente zentriert darzustellen. Der IE7 interpretiert das "text-align: center;" in Hinsicht auf die Zentrierung von Elementen nur im Quirks-Modus, während der IE 6 Probleme mit der Darstellung hat, wenn dieses CSS-Attribut für <body> nicht notiert wurde. IE5 und vorherige Versionen benötigen "text-align: center;" dringend, damit die zu zentrierenden DIV-Blöcke tatsächlich mittig angezeigt werden.

Tatsächlich ist das jedoch einer der vielen, Nicht-CSS-konformen IE-Bugs.

Viele Grüße vom Kai.

[edit vom 16.04.2007] Nachdem der Ausdruck "Semantisch" im nachfolgenden höchst OT diskutiert werden musste, streiche ich den Begriff lieber, damit's hier weiter hilfreich bleibt. [/edit]


Zuletzt bearbeitet von HaiKai am Mo 16.04.2007 16:45, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 19:03
Titel

Re: DIV-Container nach <body> mit CSS zentrieren

Antworten mit Zitat Zum Seitenanfang

HaiKai hat geschrieben:
Semantisch korrekt zentriert nach CSS2.0 werden DIV-Container, indem eine feste Breite zugewiesen und dann als Aussenabstand zum <body>-Tag im Stylesheet ...

Richtigkeitshalber ist noch hinzuzufügen, das die Css-
Angaben selbst nichts mit Semantik zu tun haben.
  View user's profile Private Nachricht senden
HaiKai

Dabei seit: 15.04.2007
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst So 15.04.2007 19:35
Titel

Re: DIV-Container nach <body> mit CSS zentrieren

Antworten mit Zitat Zum Seitenanfang

Raumwurm hat geschrieben:
HaiKai hat geschrieben:
Semantisch korrekt zentriert nach CSS2.0 werden DIV-Container, indem eine feste Breite zugewiesen und dann als Aussenabstand zum <body>-Tag im Stylesheet ...

Richtigkeitshalber ist noch hinzuzufügen, das die Css-
Angaben selbst nichts mit Semantik zu tun haben.


OT & QED, Raumwurm,

CSS ist eine Sprache mit eigenen Sprachregeln und "Formulierungen". "Semantik" trifft daher zu.

Beispiel:

Code:
body { text-align: center; } /* Zentrieren von nachfolgenden DIV-Blöcken */
div {margin: 0 auto;}


ist - will man mit den CSS-Attributen zu "body" nachfolgende DIV-Container zentrieren - semantisch nicht korrekt, da die "semantische Logik" von CSS davon ausgeht, dass die Zentrierung von Elementen mit "margin: 0 auto;" vorzunehmen ist, während die Zentrierung von Content mit einem "text-align:center;" erledigt wird.

Code:
body } text-align: center; { /* Zentrieren von nachfolgenden DIV-Blöcken */
div }magrin: 0 auto;{


... ist semantisch ebenso nicht korrekt, weil CSS Element-Attribute mit "{ ... }" umschliesst und es das Attribut "magrin" in CSS nicht gibt.

Wenn ich mit einer Sprache (hier CSS) etwas bestimmtes beschreiben will, und ich beschreibe es unter Verwendung von hierfür nicht vorgesehenen Formulierungen oder mit falschen Ausdrücken, ist es semantisch nicht korrekt.

Wenn ich mit CSS etwas korrekt beschreibe, und der Browser versteht es nicht, bleibt es dennoch semantisch korrekt. *zwinker*

Stichwort: Semantik
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 20:10
Titel

Antworten mit Zitat Zum Seitenanfang

Naja wie Du meinst. Und 'tschuldige aber dein zweites
Beispiel ist hier einfach schlichtweg falsch definiert und
das wiederum hat auch nichts mit Semantik an sich zu
tun. Ließ Dir doch mal in dem Zusammenhang z.B. das
hier durch, vielleicht verstehst Du dann was ich meine:
http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/


Zuletzt bearbeitet von Raumwurm am So 15.04.2007 20:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
HaiKai

Dabei seit: 15.04.2007
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst So 15.04.2007 21:11
Titel

Antworten mit Zitat Zum Seitenanfang

@Raumwurm - OT... Es ging hier ursprünglich um die Zentrierung von Elementen, und nicht um die Definition von Semantik

Raumwurm hat geschrieben:
Naja wie Du meinst. Und 'tschuldige aber dein zweites
Beispiel ist hier einfach schlichtweg falsch definiert und
das wiederum hat auch nichts mit Semantik an sich zu
tun.


Es wäre hilfreich, wenn Du konkretisieren würdest, was Du meinst, wenn Du auf etwas hinweist, was angeblich nicht richtig oder nicht in einem bestimmtes Zusammenhang stehend sein soll. Die absolut pauschale Aussage "schlichtweg falsch definiert" steht einfach einmal so im Raum, ohne dass Du hiermit etwas belegen willst / kannst. Dabei müsste es doch eine Regel geben, die es Dir ermöglicht, festzustellen wieso das zweite Beispiel "schlichtweg falsch definiert wurde" - und diese Regel ist eindeutig diejenige der CSS-Semantik. Oder wie würdest Du das nennen?

Mein zweites Beispiel ist falsch, weil es - in Hinsicht auf die CSS-Semantik - unzulässige "Formulierungen" enthält. Das hatte ich jedoch bereits beschrieben.

Raumwurm hat geschrieben:
Ließ Dir doch mal in dem Zusammenhang z.B. das
hier durch, vielleicht verstehst Du dann was ich meine:
http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/


Also, Dein Beispiel von semantischem XHTML-Markup hat jetzt ganz sicher nichts mit semantisch richtigem CSS zu tun. Sicherlich ist mir klar, dass man in XHTML für bestimmte Elemente (etwa unsortierte Listen) den dafür vorgesehenen Markup (<ul><li>) logisch auszeichnet, und keine Tabelle zur Darstellung einer unsortierten Liste generiert.

Fällt Dir etwas auf? Falls nicht: In CSS sollte {margin: 0 auto;} genutzt werden, um Elemente zu zentrieren, und nicht "body {text-align: center;}", weil der CSS-Definition nach damit ausschliesslich nachfolgende Inhalte innerhalb von nachfolgenden Elementen zentriert dargestellt werden. Die Bedeutung (Semantik=Lehre von der Bedeutung) von "body {text-align: center;}" ist der CSS-Definition nach eine andere, als die von "body div {margin: 0 auto;}".

Sicherlich kann ich in (X)HTML eine Liste als solche darstellen, indem ich den Listen-Inhalt in blinde Tabellen einsetze: Die blinde Tabelle sieht niemand, sondern nur die damit generierte "Liste" - dennoch ist es semantisch ebenso wenig korrekt ausgezeichnet, wie in CSS "body { text-align: center;}" zu benutzen, um damit Elemente anstatt Inhalte zu zentrieren.

Wo ist bei CSS in diesem Zusammenhang weniger von Semantik die Rede als bei semantischem (X)HTML? Beides sind Auszeichnungssprachen - die eine beschreibt die verschiedenen Elemente zur semantisch korrekten Auszeichnung des Contents (DTD), die andere beschreibt die Attribute für Darstellungseigenschaften, die solche Elemente haben können (W3C-Standard).

Ich hoffe, es ist klar geworden, worauf ich hinaus will.


Zuletzt bearbeitet von HaiKai am So 15.04.2007 22:19, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen css div zentrieren
CSS/Javascript (?) Div zentrieren
Text in DIV zentrieren per CSS
(CSS) Zentrierter DIV Conti - Inhalt zentrieren = wie?
[css] div(float: right) vertikal im elternelement zentrieren
<div> vertical zentrieren
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.