[GastForen Web allgemein HTML und CSS / Stylesheets Ist die Seite fehlerhaft, obwohl css-valide.

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

4. Nov 2006, 08:39
Beitrag # 1 von 14
Bewertung:
(3793 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,
die Startseite von http://www.kolping-hohenfels.de/demo_gila/index.htm ist zwar CSS-valide, muss aber meiner Meinung nach einen Fehler besitzen. Grund für meine Überlegung ist:
Bei Aufruf der Seite sieht man einen roten Rahmen, der den Mainbereich umfassen soll. Bei der Startseite umrahmt er nur die Überschrift, bei Aufruf einer beliebigen anderen Seite den kompletten Textbereich.
Die Website arbeitet mit einem Content-Management-System (phpCMS); es sind alle Teile identisch mit Ausnahme des Mainbereiches: auf die Standardvorlage greift jede Seite zurück mit Ausnahme der Startseite und der Übersichtsseiten wie z.B. http://www.kolping-hohenfels.de/demo_gila/k_chr.htm.
Die Startseite und die Übersichtsseite unterscheiden sich im Aufbau: die Startseite wird als dreispaltige Liste gefloatet, die Übersichtsseite ist eine reine Tabelle. Verwende ich für die Startseite das Template der Übersicht, umschließt der Rahmen den gesamten Content-Bereich. Es kann daher nicht am CMS liegen.
Ich habe testweise die rote Rahmenhöhe auf 600px festgelegt. Dann bleibt die Startseite unverändert. Lediglich der Rahmen liegt etwa im unteren Bereich des Bildschirms. Bei allen anderen Seiten ist nur der rote Rahmenbereich mit der grauen Hintergrundfarbe gefüllt (bei IE blau) und der Text (CONTENT) schreibt über die Rahmenbegrenzung ohne Hintergrund weiter.

Template der Startseite:
Code
<ul class="ultest1"> 
<li class="litest">{CONTENT1}</li><li class="litest">{CONTENT2}{SCRIPT_ZITAT}</li><li class="litest">{CONTENT3}</li>
</ul>
<ul class="ultest2">
<li class="litest">{CONTENT4}</li><li class="litest">{CONTENT5}</li><li class="litest">{CONTENT6}{SCRIPT_ZUNGENBRECHER}</li>
</ul>
<ul class="ultest3">
<li class="litest">{CONTENT7}</li><li class="litest">{CONTENT8}</li><li class="litest">{CONTENT9}{SCRIPT_WITZ}</li>
</ul>

Template der Übersichtsseite:
Code
<table class="tab" summary="Es folgt eine Tabellenbersicht"> 
<tr><td class="tab">{CONTENT1}</td><td class="tab">{CONTENT2}</td><td class="tab">{CONTENT3}</td></tr>
<tr><td class="tab">{CONTENT4}</td><td class="tab">{CONTENT5}</td><td class="tab">{CONTENT6}</td></tr>
<tr><td class="tab">{CONTENT7}</td><td class="tab">{CONTENT8}</td><td class="tab">{CONTENT9}</td></tr>
<tr><td class="tab">{CONTENT10}</td><td class="tab">{CONTENT11}</td><td class="tab">{CONTENT12}</td></tr>
<tr><td class="tab">{CONTENT13}</td><td class="tab">{CONTENT14}</td><td class="tab">{CONTENT15}</td></tr>
</table>

CSS-Regeln für Startseite:
Code
#main-copy { 
color: black;
text-align: justify;
line-height: 1.5em;
margin: 0 13.5em 0 13.5em;
padding: 0.5em 1em 1em 1em;
border: 1px solid red;
height:100%;
}
#main-copy h1 {
color: white;
background-color: transparent;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 2.2em;
font-weight: bold;
font-style: italic;
text-align: left;
margin: 0 0 0 0;
padding: 1em 0 0 0;
border: 1px solid green;
}

Ist die Seite fehlerhaft? Es ist meiner Meinung nach ein CSS-Problem.

Gruß,
Dietmar
X

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

4. Nov 2006, 09:31
Beitrag # 2 von 14
Beitrag ID: #260085
Bewertung:
(3786 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,


schreib mal vor dem schließenden </div> des main-copy-Bereiches
<br clear="all" />

Dann erstreckt sich der rote Rahmen bis zum Ende dieses Bereiches.



<div id="main-copy">

Inhalt von main-copy
...
...
...

<!-- Main content (main.tpl) End -->

<!-- phpCMS FOOTER START -->
<br clear="all" />
</div>

Gruß Sabine


als Antwort auf: [#260079]
(Dieser Beitrag wurde von SabineP am 4. Nov 2006, 09:34 geändert)

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

4. Nov 2006, 14:22
Beitrag # 3 von 14
Beitrag ID: #260112
Bewertung:
(3768 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

das ist super..danke für den Hinweis.
Zur XHTML-Validität muss man
<br class="clearall" />
und
.clearall { clear: both; }
verwenden.
Bei verschiedenen Seiten ist jetzt allerdings
die Überschrift h1 in die unterste Zeile gerutscht,
obwohl ich neu bei main-copy h1
vertical-align:top;
eingefügt habe. Gleiches gilt auch für h2.

Es betrifft die Seiten Eventkalender, Umfrage, Gästebuch, Termine. In diesen Seiten wird der Text mit einem php-Script eingefügt.
Kann man dies mit CSS oder muss man es über phpCMS ändern?

Gruß,
Dietmar

Gruß,
Dietmar


als Antwort auf: [#260085]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

4. Nov 2006, 16:28
Beitrag # 4 von 14
Beitrag ID: #260126
Bewertung:
(3762 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

verwende doch einfach XHTML 1.0 Transitional als Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

Gruß Sabine


als Antwort auf: [#260112]

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

12. Nov 2006, 09:35
Beitrag # 5 von 14
Beitrag ID: #261418
Bewertung:
(3722 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

die Startseite ist valide. Dennoch ist die Seitenansicht im FF bedingt richtig (der Abstand margin-bottom 1.5em ist nicht angeziegt), in IE6 und Opera verschiebt es zusätzlich den Mainbereich (roter Rahmen) nach unten. Die Boxen auf der linken und rechten Seite sind gleich aufgebaut.
Code
div id="side-bar_right"> 
<!-- Right Sidebar (header.tpl) Start -->
<!-- Right Sidebar Box 1 (Content) Start -->
<div class="rightSideBar">

<div class="rightSideBarBox">
<p class="sideBarTitle">Wie gefällt dir die Homepage?</p>
{SCRIPT_UMFRAGETEST}
</div>
<!-- Right Sidebar Box 1 (Content) End -->

<!-- Right Sidebar Box 2 (Content) Start -->
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Eventkalender</p>
<a href="kalender/admin/vorschlag.php" title="Eventkalendereintrag">Termin eintragen<br /></a>
<a href="event.htm" title="zunm Eventkalender">Eventkalender ansehen<br /></a>
{SCRIPT_EVENT}
</div>
<!-- Right Sidebar Box 2 (Content) End -->



</div>
<!-- rightSideBar End -->
</div>
<!-- side-bar_right End -->


Insgesamt sind auf der rechten Sidebar 5 Boxen eingebaut. Doch dann verschwindet im IE und Opera der Mainbereich völlig. Jede Box hat in CSS einen margin-bottom 1.5em. Dennoch wird der Abstand zwischen Navigation und Kalender nicht angezeigt.

Die CSS-Definitione für die rechte Sidebar:
Code
#side-bar_right { 
float:right;
width:13.5em;
margin-right:0;
margin-top:1em;
border: 1px solid #00FFFF;
}

.leftSideBar {
padding: 0;
margin:0;
border: 1px solid yellow;
}

.leftSideBarBox {
background-color:#5f7797;
border: 0.12em solid white;
margin-bottom:1.5em;
}

.leftSideBar .sideBarTitle{
color: rgb(64,64,64);
background-color:#bfc4cb;
font-weight: bold;
margin: 0.6em 0.5em;
padding: 0.45em 0.5em;
}


LG Dietmar


als Antwort auf: [#260126]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

12. Nov 2006, 11:09
Beitrag # 6 von 14
Beitrag ID: #261419
Bewertung:
(3711 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

ich habe hier nur IE4 zum Testen.

Probier mal in Deinem IE aus, ob die Boxen nebeneinander passen, wenn Du die Breite der ID Seite erhöhst:
#seite {
margin: auto;
width: 84.6em;


Ich habe hier noch einen Layoutentwurf, der in allen Browsern funktioniert:
http://sperner.googlepages.com/...g-fix-zentriert.html

Getestet mit Firefox, Netscape4, Netscape6 IE4, IE5, IE5.5 IE6 und Opera.

Vielleicht kannst Du damit etwas anfangen.

Gruß Sabine


als Antwort auf: [#261418]

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

12. Nov 2006, 14:04
Beitrag # 7 von 14
Beitrag ID: #261436
Bewertung:
(3700 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,
es war die Angabe der Weite. Danke! Ich habe sie verändert und jetzt die weitere Boxbereiche auf der rechten Seite wieder aktiviert. Wie vorher verschwindet der Mainbereich im IE/Opera (Seite width=94.6em). Auch im FF kleben die Ränder zusammen, ob wohl ein Abstand nach unten von 1.5em eingegeben ist. Richtig dargestellt im FF jeweils nur nach der ersten Box oben.

Valide ist die Startseite weiterhin. Der Code
Code
<div id="side-bar_right"> 
<!-- Right Sidebar (header.tpl) Start -->
<!-- Right Sidebar Box 1 (Content) Start -->
<div class="rightSideBar">

<div class="rightSideBarBox">
<p class="sideBarTitle">Wie gefällt dir die Homepage?</p>
{SCRIPT_UMFRAGETEST}
</div>
<!-- Right Sidebar Box 1 (Content) End -->

<!-- Right Sidebar Box 2 (Content) Start -->
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Eventkalender</p>
<a href="kalender/admin/vorschlag.php" title="Eventkalendereintrag">Termin eintragen<br /></a>
<a href="event.htm" title="zunm Eventkalender">Eventkalender ansehen<br /></a>
{SCRIPT_EVENT}
</div>
<!-- Right Sidebar Box 2 (Content) End -->

<!-- Right Sidebar Box 3 (Content) Start -->
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Wetter</p>
<!--<script type="text/javascript" src="http://www.wetter.com/v2/woys2/woys2.js.php?138382,268cc2856f1a213da478de44931d228e" />-->
<script type="text/javascript" src="http://www.wetter.com/v2/woys2/woys2.js.php?156723,f3c584348fef4742bcd032794c8c8ad3" />
</div>
<!-- Right Sidebar Box 3 (Content) End -->

<!-- Right Sidebar Box 4 (Content) Start -->
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Validitätstest</p>
<!--<div class="sideBarTitle">Validate this page:</div>-->
<div class="sideBarText">
<a href="http://validator.w3.org/check/referer"><img style="border:none;" src="$home/gif/valid-xhtml10.gif" alt="Validator" /> </a></div>
<div class="sideBarText">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:none;" src="$home/gif/valid-css.gif" alt="Validator" /></a></div>
</div>
<!-- Right Sidebar Box 4 (Content) End -->

<!-- Right Sidebar Box 5 (Content) Start -->
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Unsere Empfehlung</p>
<img src="/kolping/gif/firefox.gif" alt="Firefox" />
<h3>Firefox</h3>
<a class="mehr" href="http://www.firefox-browser.de/">Download</a>
</div>
<!-- Right Sidebar Box 5 (Content) End -->

</div>
<!-- rightSideBar End -->
</div>
<!-- side-bar_right End -->


Weißt du auch, wie man die eingefügten Scripte (Wetter und Event) zentrieren kann. Ich habe es schon mit <div> und <span> erfolglos versucht.

Dein Beispiel sieht gut aus. Wenn ich es richtig verstanden habe, befinden sich alle Bereiche im Abstand von 20 px unter- und nebeneinander im Hauptcontainer. Eine saubere klare Lösung.

Ich bin in CSS nicht besonders: Könntest du mir noch den Vorteil oder Nachteil zu meiner bisherigen Struktur erklären; sie weicht wohl am meisten im Zwischenbereich ab, da hier (Idee stammt nicht von mir) der linke Seitenbereich mit margin-left 13,5 em und der rechte Seitenbereich mit margin-right 13,5 em abgegrenzt wird.
Die Spalten im Main besitzen eine Breiten von 17.0 em und einen Abstand von der mittleren Spalte mit 1.4 em. (Das obige Weitenproblem hätte sich doch gar nicht ergeben dürfen oder ist das wieder das Problem mit dem Boxmodell).

Statt der px-Werte könnte man bei deiner Vorlage auch relative Größenangaben verwenden?

LG Dietmar


als Antwort auf: [#261419]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

12. Nov 2006, 15:04
Beitrag # 8 von 14
Beitrag ID: #261441
Bewertung:
(3695 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> wie man die eingefügten Scripte (Wetter und Event) zentrieren kann

Das sind doch beides Tabellen.
<table align="center" usw.>
müßte die Tabelle zentrieren.

>> Könntest du mir noch den Vorteil oder Nachteil zu meiner bisherigen Struktur erklären
Die Seite ist viel zu breit, man muß nach rechts scrollen bei einer Auflösung von 1024 x 768.

>> Statt der px-Werte könnte man bei deiner Vorlage auch relative Größenangaben verwenden?
Du kannst da ruhig auch mal %-Werte einsetzen, getestet habe ich das aber noch nicht.

em wird in den Browsern unterschiedlich umgesetzt, vor allem wegen der Vererbung.
http://www.hilfdirselbst.ch/..._P260467.html#260467


Gruß Sabine


als Antwort auf: [#261436]

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

12. Nov 2006, 15:32
Beitrag # 9 von 14
Beitrag ID: #261443
Bewertung:
(3690 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,
bei dem Wetter-script könnte ich nur eine dreispaltige Tabelle einfügen und in die mittlere das Scripts einfügen, während die äußeren den Abstand definieren. Aber ist das xhtml-konform?
Code
<!-- Right Sidebar Box 3 (Content) Start -->  
<div class="rightSideBarBox zen">
<p class="sideBarTitle">Wetter</p>
<script type="text/javascript" src="http://www.wetter.com/v2/woys2/woys2.js.php?156723, f3c584348fef4742bcd032794c8c8ad3" />
</div>
<!-- Right Sidebar Box 3 (Content) End -->


Hast du noch eine Idee zu den Abständen zwischen den Boxen? Bevor ich die vielen Boxen einfügte, war alles ok.
Zustand vorher:
http://www.kolping-hohenfels.de/demo_gila/index_2.htm
Zustand jetzt:
http://www.kolping-hohenfels.de/demo_gila/index.htm
Der Code wurde nicht verändert, nur die Zahl der Boxen.

LG Dietmar


als Antwort auf: [#261441]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

12. Nov 2006, 16:04
Beitrag # 10 von 14
Beitrag ID: #261447
Bewertung:
(3689 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> Aber ist das xhtml-konform?

Frage doch einfach den Validator.
Du hast keinen Code gepostet, der nicht XHTML-konform wäre.

Nur das Leerzeichen in der URL ist nicht erlaubt (nach dem Komma):

src="http://www.wetter.com/v2/woys2/woys2.js.php?156723, f3c584348fef4742bcd032794c8c8ad3" /

URLs dürfen keine Leerzeichen enthalten.



>> Hast du noch eine Idee zu den Abständen zwischen den Boxen?

schreib mal
<div class="rightSideBarBox">

anstatt
<div class="rightSideBarBox zen">

Dann sind die Abstände auch wieder da.

Gruß Sabine


als Antwort auf: [#261443]

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

13. Nov 2006, 10:40
Beitrag # 11 von 14
Beitrag ID: #261521
Bewertung:
(3655 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

danke für die Hilfe. Jetzt sind die Fehler wieder weg. "zen" stand für die CSS-Definition zentriert. Im Internet fand ich den Hinweis (http://www.css4you.de/trickkiste/tr00029.html), dass man bei Anwendung von mehrere Klassen diese getrennt durch ein Leerzeichen nebeneinander schreiben kann. Ist wohl doch nicht so richtig.

Die Seitenbreite orientiert sich zur Zeit an der Breite der Fotoreihe. Aufgrund der em-Angaben müßte man sie prozentual leicht anpassen können oder bis der styleswitcher auf der Seite mal funktioniert.

Gibt es eine Richtlinie für ideale Seitenbreite nzw. ideale Schriftgröße.

LG Dietmar


als Antwort auf: [#261447]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

13. Nov 2006, 12:28
Beitrag # 12 von 14
Beitrag ID: #261568
Bewertung:
(3651 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

>> Gibt es eine Richtlinie für ideale Seitenbreite nzw. ideale Schriftgröße.

Eine Richtline gibt es nicht.

Meine persönliche Meinung dazu:

Die Seitenbreite sollte sich dynamisch anpassen an das Browserfenster.
Das erreicht man mit Breitenangaben in %.

Die Schriftgrößen kann sich jeder Benutzer im Browser selbst einstellen.
Es ist also nicht notwendig, daß der HTML-Autor eine Schriftgröße festlegt.

Gruß Sabine


als Antwort auf: [#261521]

Ist die Seite fehlerhaft, obwohl css-valide.

jdgf
Beiträge gesamt: 117

13. Nov 2006, 14:37
Beitrag # 13 von 14
Beitrag ID: #261621
Bewertung:
(3644 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

der Vorschlag mit dynamischer Anpassung ist optimal. Es klappt aber doch nur solange wie die Website größer oder gleich dem Monitorauflösung ist, wobei die individuellen Einstellungen des Users auch noch berücksichtigt werden müssen.

Wenn ich meine Seite (wenn auf 100% eingestellt) auf einem 17"Monitor ansehe, muss bei IE der Schriftgrad sehr klein eingestellt sein, damit es bildschirmfüllend ist. Auf einem 21"Monitor zerreißt es bei gleicher Einstellung die Seite. Ich habe schon unter dem Stichwort flexbles Design gesucht, aber auch keine Lösung gefunden.

Deswegen verwende ich nur "em" als relative Größe und bin bei der Seitenbreite auf 284em gekommen (entspricht bei meinem Bildschirm etwa 980px aufgrund der Fotogröße). Ich kann bei "em" die Website in allen Browsern stufenlos anpassen. Selbst bei IE-Einstellung Schrift von sehr klein bis sehr groß, werden alle Teile der Website gleich skaliert. Man sieht zwar die eizelnen Pixel, aber insgesamt ändert sich das Aussehen nicht.

Bei Einstellung % sieht das Ergebnis weniger schön aus, da hier bei "sehr groß" die Fotos in zwei Reihen übereinander stehen.

Ich könnte es bei meiner Website nur so machen, dass ich auf eine Größe von von 760px oder 1000 px (ausgedrückt in em) zurückgehe. Dann paßt es für eine Auflösung (1024 px) und die anderen passen an.

Eine Ideallösung weiß ich nicht. Die Prozentangabe wäre ideal, wenn sie je nach Auflösung abgestuft wäre. Nur da weiß ich nicht weiter.

LG Dietmar


als Antwort auf: [#261568]

Ist die Seite fehlerhaft, obwohl css-valide.

SabineP
Beiträge gesamt: 7586

13. Nov 2006, 16:05
Beitrag # 14 von 14
Beitrag ID: #261654
Bewertung:
(3631 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> Es klappt aber doch nur solange wie die Website größer oder gleich dem Monitorauflösung ist

Deswegen habe ich ja auch von %-Werten geschrieben. Es gibt also keine feste Websitegröße.

>> Ich habe schon unter dem Stichwort flexbles Design gesucht, aber auch keine Lösung gefunden.

Lies mal hier nach:
http://www.aboutwebdesign.de/...ent/1043668271.shtml

em für Schriftgrößen ist ja recht gut, wenn man auf die Vererbung achtet.

Nun zu Deiner Seite: In Deinem Fall wird ja die Gesamtbreite der Seite schon von der Breite der Fotos festgelegt,
wenn die Fotos immer in einer Zeile nebeneinander stehen sollen.

Da die meisten Benutzer eine Auflösung von 1024 x 768 eingestellt haben,
würde ich die Seite so anlegen, daß Sie im Browser genau diese Breite in Pixel einnimmt.

Das wäre eine Breite von 1000 Pixel. Pixel kannst Du nicht in em umrechnen, Du mußt schon Pixel verwenden.

Gruß Sabine

PS. Im Anhang findest Du noch ein Bildschirmfoto, so wie Deine Seite in meinem Browser aussieht.


als Antwort auf: [#261621]
(Dieser Beitrag wurde von SabineP am 13. Nov 2006, 16:28 geändert)

Anhang:
bildschirmfoto.jpg (96.9 KB)
X