 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
derwebling
Threadersteller
Dabei seit: 16.11.2004
Ort: Traunstein
Alter: 44
Geschlecht: 
|
Verfasst Mo 12.12.2005 11:38
Titel [CSS] Div zentrieren |
  |
|
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 11:44, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
shakadi
Griller Killer
Dabei seit: 21.12.2003
Ort: SHA
Alter: 43
Geschlecht:
|
Verfasst Mo 12.12.2005 11:41
Titel
|
|
|
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 11:50, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
derwebling
Threadersteller
Dabei seit: 16.11.2004
Ort: Traunstein
Alter: 44
Geschlecht:
|
Verfasst Mo 12.12.2005 12:18
Titel Danke schön! |
|
|
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 12:19, insgesamt 1-mal bearbeitet
|
|
| |
|
|
HaiKai
Dabei seit: 15.04.2007
Ort: -
Alter: 53
Geschlecht:
|
Verfasst So 15.04.2007 13:30
Titel DIV-Container nach <body> mit CSS zentrieren |
|
|
[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 17:45, insgesamt 4-mal bearbeitet
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 15.04.2007 20:03
Titel Re: DIV-Container nach <body> mit CSS zentrieren |
|
|
| 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.
|
|
| |
|
|
HaiKai
Dabei seit: 15.04.2007
Ort: -
Alter: 53
Geschlecht:
|
Verfasst So 15.04.2007 20:35
Titel Re: DIV-Container nach <body> mit CSS zentrieren |
|
|
| 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. 
Stichwort: Semantik
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 15.04.2007 21:10
Titel
|
|
|
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 21:11, insgesamt 1-mal bearbeitet
|
|
| |
|
|
HaiKai
Dabei seit: 15.04.2007
Ort: -
Alter: 53
Geschlecht:
|
Verfasst So 15.04.2007 22:11
Titel
|
|
|
@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.
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 23:19, insgesamt 3-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
css div zentrieren
[Illustrator] Zentrieren?
div's zentrieren Problem
Zentrieren & Fixed im IE
[dreamweaver] zentrieren
<div> vertical zentrieren
|
|
|
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.
|
|
