HTML/CSS Hilfe!

Alles, was sonst nirgendwo reinpasst

HTML/CSS Hilfe!

Beitragvon DominikP » 03.01.09 18:34

Moin Moin...

da ich ja weiß, dass hier einige fitte Webprogrammierer unterwegs sind, wollte ich um Hilfe bitten. Folgender Hintergrund:

Ein Bekannter von mir hat sein Hobby zum (Neben)Beruf gemacht und wollte seine alte etwas spartanische Webseite umrüsten. (Es geht um den Bereich Photographie)
Ich habe ihm ein CMS empfohlen und angeboten, ihm ein DesignTemplate zu erstellen.
Nach 2 kleinen Tutorials konnte ich direkt loslegen, meine eigene Webseite hab ich auch auf diese Weise gemacht.
Nun zum eigentlichen Problem:
Ich habe zu Hause mit Firefox Version 2 gearbeitet und alles war wunderbar. Ich habe ihm die Webseite zugeschickt und da hatten wir den Salat: trotz meines Erachtens korrektem CSS Code zeigt der Internet Explorer ein VÖLLIG anderes Bild, als der Firefox. Auch eine alte Opera Version, die ich noch aufm Rechner hatte, zeigt die Webseite "richtig" an.
Da er aber auf den Kundenanteil der IE Nutzer nicht verzichten kann, ist das logischerweise inakzeptabel.
Ich habe im CSSheet häufiger margin-left : auto bzw: bzw. marin-right : auto verwendet, was im Firefox wunderbar zu einer flüssigen Zentrierung der Webseite unabhängig von der Größe des Browserfensters führt.
Im IE ist alles linksbündig.

Ist diese Art die Webseite zu zentrieren etwa falsch? Welche sinnvollen Alternativen gibt es?
Oder kann der Fehler ganz woanders liegen ?

Falls sich das einer mal angucken möchte:
www.dominikpoppe.de/tnfotopreview/ (Das ist ein Preview der Webseite; bitte ignoriert den bereits vorhandenen Inhalt, das sind nur Lückenfüller und haben teilweise nichst mit dem späteren Original zu tun.)
www.dominikpoppe.de/tnfotopreview/templ ... mplate.css (zugehöriges CSSheet)
Den PHP Quellcode findet ihr unten in der Code Box, aber ich denke, der ist weniger interessant.


Ich wäre super froh, wenn mir jemand helfen könnte!



Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <meta content="text/html; charset=ISO-8859-1"
   http-equiv="content-type">
   <jdoc:include type="head" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
   <link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/tnfoto.ico" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
   <title><?php echo $this->sitename ?></title>
</head>

<body>
   <div id="wholesitebox">
      <?php if ($this->countModules('breadcrumb')): ?>
         <div id="pathwaycell"><jdoc:include type="modules" name="breadcrumb" style="xhtml"/></div>
      <?php else: ?>
         <div id="space"></div>
      <?php endif; ?>
      <div id="logo"></div>
      <div id="rahmen_oben"></div>
      <div id="mainbox">
         <div id="menubox">
            <div id="menu"><jdoc:include type="modules" name="left" style="xhtml"/></div>
            <div id="menu_rahmen_unten"></div>
         </div>
         <div id="contentbox">
            <?php if ($this->countModules('user1 + user2')): ?>
               <div id="topbox">
                  <?php if ($this->countModules('user1')): ?>
                     <div id="user1"><jdoc:include type="modules" name="user1" style="xhtml"/></div>
                  <?php endif; ?>   
                  <?php if ($this->countModules('user2')): ?>   
                     <div id="user2"><jdoc:include type="modules" name="user2" style="xhtml"/></div>
                  <?php endif; ?>
               </div>
            <?php endif; ?>
            <div id="content"><jdoc:include type="component" style="xhtml"/></div>
            <div id="content_rahmen_unten"></div>
            <div id="footer"><jdoc:include type="modules" name="footer" style="xhtml"/></div>
         </div>
      </div>
   </div>
</body>
</html>





(*)wer jetzt glaubt, das sei nur der hundertste Depp, der meint ein toller Photograph zu sein und auf diesem Wege versucht nackte Models ins Studio zu kriegen, der ist auf dem Holzweg. Seine Aufträge bekommt er viel mehr im industriellen Bereich und ist dort für seine Verhältnisse sehr erfolgreich.
Klein-\varphi macht auch Mist....
DominikP
 
Beiträge: 242
Registriert: 12.11.07 21:29
Wohnort: Aachen, vorher Korschenbroich bei MG
Studiengang: Informatik (M.Sc.)
Studiert seit: WS 07/08
Anwendungsfach: BWL

Beitragvon kb » 03.01.09 19:25

Pack in "body" "text-align: center;" rein. Musst dann ggf die Ausrichtung für die einzelnen Boxen wieder umändern (also auf "left" stellen. sollte über "body div" oder "body *" am einfachsten sein). So sollte es gehen.

Alternativ (habs nicht getestet!) könntest du um die "wholesitebox" noch ne box packen (width 100%), in der dann die wholesitebox zentriert wird (musst mal probieren, mit margin oder padding).

--edit--
ein Hinweis, dass die Darstellung mit dem IE u.U. fehlerhaft sein kann gehört meiner Meinung nach auch noch irgendwo unten auf die Seite =] Drecksbrowser
"Auch wenn fünfzig Millionen Menschen etwas Dummes sagen, bleibt es trotzdem eine Dummheit."
"It doesn't matter if you win or lose, it's whether or not you beat the spread."
Benutzeravatar
kb
 
Beiträge: 1237
Registriert: 06.04.06 21:20
Wohnort: Aachen / Köln

Beitragvon DominikP » 03.01.09 19:42

kb hat geschrieben:Pack in "body" "text-align: center;" rein. Musst dann ggf die Ausrichtung für die einzelnen Boxen wieder umändern (also auf "left" stellen. sollte über "body div" oder "body *" am einfachsten sein). So sollte es gehen.

Alternativ (habs nicht getestet!) könntest du um die "wholesitebox" noch ne box packen (width 100%), in der dann die wholesitebox zentriert wird (musst mal probieren, mit margin oder padding).


Hm, nur den Body zu zentrieren löst das Problem glaube ich nicht, da auch in inneren Boxen hier und da mal was zentriert wird (oder noch später zentriert werden soll).

Mich interessiert im Moment eher, wie so simple Design-Anweisungen derart verschieden ausgewertet werden können. Und wieso haben andere Webseiten-Programmierer nicht dieses Problem? (oder haben sie es doch?)

Die zweite Version, alles wiederum in eine noch "größere" Box zu packen, werde ich mal ausprobieren.
Klein-\varphi macht auch Mist....
DominikP
 
Beiträge: 242
Registriert: 12.11.07 21:29
Wohnort: Aachen, vorher Korschenbroich bei MG
Studiengang: Informatik (M.Sc.)
Studiert seit: WS 07/08
Anwendungsfach: BWL

Beitragvon kb » 03.01.09 19:50

Naja ich schreibs ja nicht zum Spaß hin, sondern weil ich zu 99,99% weiß, dass es so funktioniert ;]
Es ist nur so, dass dann jeder Text, der nicht explizit ausgerichtet ist, ebenfalls zentriert wird. Deshalb sagte ich ja, dass du "ggf die Ausrichtung für die einzelnen Boxen wieder umändern" müsstest.

Das Problem liegt ganz einfach daran, dass MS sich nicht an die Standards hält, sondern den Browser danach konzipiert hat, die FrontPage Seiten korrekt darzustellen. Und ja, dieses Problem hat so ziemlich jeder Webdesigner, der mit CSS arbeitet.
"Auch wenn fünfzig Millionen Menschen etwas Dummes sagen, bleibt es trotzdem eine Dummheit."
"It doesn't matter if you win or lose, it's whether or not you beat the spread."
Benutzeravatar
kb
 
Beiträge: 1237
Registriert: 06.04.06 21:20
Wohnort: Aachen / Köln

Beitragvon O.D. » 03.01.09 20:15

DominikP hat geschrieben:
kb hat geschrieben:Pack in "body" "text-align: center;" rein. Musst dann ggf die Ausrichtung für die einzelnen Boxen wieder umändern (also auf "left" stellen. sollte über "body div" oder "body *" am einfachsten sein). So sollte es gehen.

Alternativ (habs nicht getestet!) könntest du um die "wholesitebox" noch ne box packen (width 100%), in der dann die wholesitebox zentriert wird (musst mal probieren, mit margin oder padding).


Hm, nur den Body zu zentrieren löst das Problem glaube ich nicht, da auch in inneren Boxen hier und da mal was zentriert wird (oder noch später zentriert werden soll).

Mich interessiert im Moment eher, wie so simple Design-Anweisungen derart verschieden ausgewertet werden können. Und wieso haben andere Webseiten-Programmierer nicht dieses Problem? (oder haben sie es doch?)

Die zweite Version, alles wiederum in eine noch "größere" Box zu packen, werde ich mal ausprobieren.
Es ist so, dass text-align eigentlich nur für inline Elemente gedacht ist, der InternetExplorer setzt sich jedoch darüberhinweg und wendet es auf alle Elemente an, die nicht bei 3 auf dem Baum sind. Leider versteht der InternetExplorer das margin: auto nicht.
Meiner Ansicht nach ist display: table plus display: table-cell der Königsweg. Auch wenn der Name "table" eher historische Gründe hat (<table> war halt zeitweise die eierlegende Wollmilchsau des Webdesign) und ansonsten völlig sinnfrei ist.
I can hear deaf people!
Benutzeravatar
O.D.
 
Beiträge: 745
Registriert: 05.08.06 19:31
Wohnort: Aachen & Minden
Studiengang: Informatik (M.Sc.)
Anwendungsfach: Physik

Beitragvon YtKM » 04.01.09 01:27

O.D. hat geschrieben:Meiner Ansicht nach ist display: table plus display: table-cell der Königsweg. Auch wenn der Name "table" eher historische Gründe hat (<table> war halt zeitweise die eierlegende Wollmilchsau des Webdesign) und ansonsten völlig sinnfrei ist.


Hallo könntest du dazu etwas mehr sagen? Was ist table plus display?

Viele Grüße

ytkm
YtKM
 
Beiträge: 148
Registriert: 19.02.08 22:22

Beitragvon kb » 04.01.09 02:00

nichts, dass soll heißen "display: table" und "display: table-cell"
"Auch wenn fünfzig Millionen Menschen etwas Dummes sagen, bleibt es trotzdem eine Dummheit."
"It doesn't matter if you win or lose, it's whether or not you beat the spread."
Benutzeravatar
kb
 
Beiträge: 1237
Registriert: 06.04.06 21:20
Wohnort: Aachen / Köln

Beitragvon oxygen » 04.01.09 02:08

Ich weiß nicht in wie weit das ein Problem darstellt, aber du hast als Doctype HTML4.01 angegeben, aber benutzt XHTML Syntax.
oxygen
 
Beiträge: 1054
Registriert: 16.12.05 23:05
Wohnort: Bergheim
Studiengang: Informatik (Dipl.)
Studiert seit: fertig
Anwendungsfach: Medizin

Beitragvon O.D. » 04.01.09 02:37

kb hat geschrieben:nichts, dass soll heißen "display: table" und "display: table-cell"
Ja, so meinte ich's. Noch präziser; Das Kindelement von dem welches "display: table" ist muss "table-cell" sein.
I can hear deaf people!
Benutzeravatar
O.D.
 
Beiträge: 745
Registriert: 05.08.06 19:31
Wohnort: Aachen & Minden
Studiengang: Informatik (M.Sc.)
Anwendungsfach: Physik

Beitragvon AGo » 04.01.09 12:13

ruuuuuhhhich jungs.

Doch, auch der IE interpretiert margin:auto korrekt, wie dieses Beispiel
beweist (zumindest im IE7, den 6er hab ich grad nicht zum testen da, der solltes aber auch tun)

Kleines Webdesigner-1mal1:

Dem geneigten Leser wird auffallen, dass deine doctype deklaration fehlerhaft ist, du lässt einfach die Referenz auf die dtd untern Tisch fallen, eine vollständige Doctype sieht z.B. so aus (modulo passender doctype, bei dir wohl eher xhtml 1.1)

Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


und gehört als allererste Zeile nach den Headern in den output, insbesondere also nicht hinter eine Leerzeile oder so.

Fehlt diese Angabe schaltet der IE in den quirks modus und das führt dazu, dass eben zb auto nicht korrekt interpretiert wird.
Der Firefox verhält sich übrigens genau so, bei dem sind die Auswirkungen nur nicht ganz so dramatisch ;)

That´s it
Benutzeravatar
AGo
0x41476F
 
Beiträge: 2181
Registriert: 09.09.05 18:21
Wohnort: Awf
Studiengang: Informatik (Dipl.)
Anwendungsfach: BWL

Beitragvon Coolcat » 04.01.09 13:43

Bei der Gelegenheit sei auch nochmal auf den HTML-Validator vom W3C verwiesen:
http://validator.w3.org/
Wenn der "OK" sagt, auch noch mal den CSS-Validator laufen lassen:
http://jigsaw.w3.org/css-validator/

Korrektes XHTML sollte eigentlich mit allen aktuellen Browsern halbwegs gleich aussehen.
My software never has bugs. It just develops random features.
Benutzeravatar
Coolcat
Promoter
 
Beiträge: 2574
Registriert: 28.11.05 21:26
Wohnort: Kohlscheid / Düsseldorf
Studiengang: Informatik (Dipl.)
Studiert seit: fertig
Anwendungsfach: BWL

Beitragvon O.D. » 04.01.09 16:54

AGo hat geschrieben:ruuuuuhhhich jungs.

Verdammt. Ok, 5 Mark in die Scheiße-red-Kasse. Ich glaub' ich war gedanklich beim vertikalen und horizontalen Zentrieren von Elementen dynamischer Größe, da ich erst kürzlich genau dieses Szenario hatte.
I can hear deaf people!
Benutzeravatar
O.D.
 
Beiträge: 745
Registriert: 05.08.06 19:31
Wohnort: Aachen & Minden
Studiengang: Informatik (M.Sc.)
Anwendungsfach: Physik

Beitragvon AGo » 04.01.09 18:04

ahso, was ich in dem Zusammenhang noch vergessen hab zu erwähnen ist http://browsershots.org/

Hier gibts die Ergebnisse von meiner center.html, solange sie noch nicht abgelaufen sind

http://browsershots.org/http://www.flas ... enter.html
Benutzeravatar
AGo
0x41476F
 
Beiträge: 2181
Registriert: 09.09.05 18:21
Wohnort: Awf
Studiengang: Informatik (Dipl.)
Anwendungsfach: BWL

Beitragvon kb » 04.01.09 23:39

AGo hat geschrieben:Doch, auch der IE interpretiert margin:auto korrekt, wie dieses Beispiel
beweist (zumindest im IE7, den 6er hab ich grad nicht zum testen da, der solltes aber auch tun)
Ja, IE7, und IE6 vielleicht auch, aber dadrunter nicht mehr ^^. Es gibt immer noch etliche User mit IE5, und die darf man nunmal nicht unbeachtet lassen.
Ändert jedoch nichts an meiner Aussage über MS und deren Browser ^^ IE8 soll ja angeblich die Standards einhalten...angeblich.

Btw, die Validator (siehe Links von Coolcat) würd ich sehr empfehlen! Mit etwas Glück siehts dann auch im aktuellen IE fehlerfrei aus.
"Auch wenn fünfzig Millionen Menschen etwas Dummes sagen, bleibt es trotzdem eine Dummheit."
"It doesn't matter if you win or lose, it's whether or not you beat the spread."
Benutzeravatar
kb
 
Beiträge: 1237
Registriert: 06.04.06 21:20
Wohnort: Aachen / Köln

Beitragvon AGo » 05.01.09 00:26

wie der browsershots link zeigt interpretiert der IE bis incl. 5.5 die Angabe nicht korrekt, der wurde aber schon im Oktober 2001 abgelöst...
Ich kenne zwar die aktuellen Statistiken nicht, aber irgendwann ist mit Rücksicht auch mal gut, sonst dürftest du ja gar nix machen was Spaß macht, AJAX war damals auch noch ein Fremdwort...

Ich bin kein großer Fan vom IE, aber er existiert nunmal und es bringt einfach nix alles(tm) auf MS zu schieben, da muss man sich im Zweifel mal an die eigene Nase packen (siehe jetzt zB die sache mit dem doctype, das ist jetzt aber nur ein Beispiel und bitte nicht als Angriff zu werten, sowas passiert immer mal), einfach mal in den sauren Apfel beißen und sich Gedanken machen warum´s nich so aussieht wie´s soll und was dagegen tun
Benutzeravatar
AGo
0x41476F
 
Beiträge: 2181
Registriert: 09.09.05 18:21
Wohnort: Awf
Studiengang: Informatik (Dipl.)
Anwendungsfach: BWL

Nächste

Zurück zu Off-Topic