 CSS basiert Layouts, Andere Darstellung im IE und Firefox |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML  |
 27.11.2006 - 16:20
Beitrag
#1
|
|
|
is getting harder Gruppe: User Beiträge: 15 Mitglied seit: 29.08.2005 Wohnort: Bayreuth (Bayern) Mitglieds-Nr.: 5.391  |
Hallo zusammen,
ich bin dabei, meine Homepage auf ein CMS umzustellen. Als CMS verwende ich Redaxo. Bei dieser Gelegenheit will ich auf ein CSS basiertes Layout umstellen. Habe mich hiezu über Selfhtml informiert und auch ein CSS Layout auf die Beine gestellt. Hier erstmal der code der CSS-Datei: QUELLTEXT body { background-color: #3399CC; margin: 0px; } .invisible { position: absolute; color: red; background-color: #3399CC; left: -1000px; top: -1000px; width: 0px; height: 0px; overflow: hidden; display: inline; } /*div für linke navigation*/ #left { float: left; width: 15%; background-color: #003399; margin: 0px 0px 0px 0px; padding: 1% 1% 1% 1%; font-size: 12pt; font-family: Arial, Helvetica, sans-serif; color: #FF9900; height: 100%; } #left a { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 0px; } #left a:hover { background-color: #3399CC; margin: 0px; } /*div für Hauptnavigation*/ #top { left: 17%; height: 65px; background-color: #003399; font-weight: bold; font-size: 16pt; font-family: Arial, Helvetica, sans-serif; color: #FF9900; margin: 0px; padding: 15px 0px 0px 10px; } #top a { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 0px; } #top a:hover { background-color: #3399CC; margin: 0px; } /*div für Inhaltsanzeige*/ #inhalt { left: 17%; background-color: #3399CC; margin: 0px; padding: 0% 0% 0% 19%; } Soweit funktioniert die sache auch. Nur jetzt habe ich, was mein Hauptproblem ist, allerdings nur im Internet Explorer 6, dass zwischen der linken Navigation und der hauptnavigation (die oben ist) ein kleiner Leerraum befindet und ich weiß nicht wie ich den wegbring. sämtliche breihtenangabenänderungen haben nichts gebracht. Achja, vielleicht wäre ein Link auf die Seite mal nicht verkehrt.  Soweit zu meinem 1. Problem. Dieses wird übrigens im Firefox 1,5 korreckt dargestellt. Nun zum 2. Problem. Wenn ich den body Teil in meiner css Datei rauslasse, kommt nur im FireFox 1.5 zwischen der oberen Navigation und dem Inhalt ein horizontaler balken. Gut, den kann ich durch eben diesen body Teil übermalen, aber er schränkt mich dann doch bei der gestaltung der Seite ein.  Ich habe auch die Dictype Deklaration wie von selfhtml empfohlen eingetragen: QUELLTEXT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> So, jetzt zu drittens und gleichzeitig endlich letztens. Ist es möglich, dass ich die linke Navigation bis nach unten mit der Hintergrundfarbe versehe? So, soviel von mir. Danke schonmal im Vorraus für euere Hilfe. sebeck |
 |
 
|
|
27.11.2006 - 19:38
Beitrag
#2
|
|
|
Anwärter auf W3.org Mitgliedschaft  Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 |
ZITAT(sebeck @ 27.11.2006 - 16:20)  Hallo zusammen, ich bin dabei, meine Homepage auf ein CMS umzustellen. Als CMS verwende ich Redaxo. Bei dieser Gelegenheit will ich auf ein CSS basiertes Layout umstellen. Habe mich hiezu über Selfhtml informiert und auch ein CSS Layout auf die Beine gestellt. Zuallererst (bezogen auf den Threadtitel): Verschiedene Browser kommen von verschiedenen Herstellern und dürfen unterschiedliche Vorgaben zur Standarddarstellung von Elementen machen. Es wird also immer Fälle geben, in denen ein 100%-ige Übereinstimmung der Darstellung nicht zu erreichen ist. QUELLTEXT body { background-color: #3399CC; margin: 0px; } Tip: setze auch padding auf 0, sonst ist im Opera ein Rand zu sehen. Dieser benutzt nämlich nicht margin:0; sondern padding:0; um body auf die volle Größe zu bringen. QUELLTEXT .invisible { position: absolute; ... left: -1000px; top: -1000px; width: 0px; height: 0px; overflow: hidden; display: inline; } Um die links zum Inhalt vor (CSS-fähigen) graphischen Browsern zu verbergen, bietet sich .invisible { display:none; } an. Dein Konstrukt könnte von Suchrobotern als Spam gedeutet werden (Inhalt aus dem Anzeigefenster herausrücken) QUELLTEXT /*div für linke navigation*/ #left { float: left; width: 15%; ... } /*div für Hauptnavigation*/ #top { left: 17%; ... } Erstens ist da zwischen #left und #top eine Lücke von 2%, welche im MSIE wohl auch angezeigt wird. Zweitens ist die Verwendung von left hier fehl am Platz, benutze bitte margin:...%;. ZITAT(sebeck @ 27.11.2006 - 16:20) Achja, vielleicht wäre ein Link auf die Seite mal nicht verkehrt. Sieht auch vom HTML grundsätzlich gut aus. Den Fehler des Firefox kann ich leider nicht nachvollziehen. Ich benutze allerdings auch die Mozilla-Suite (1.7.13). Die hat, soweit ich weiß, eine ältere Renderengine. Ich sehe also weder die Lücke des MSIE noch die des Firefox. QUELLTEXT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Tip: Wenn du den HTML-Quelltext nach HTML 4.01 strict aufbaust, solltest du bei erzwungenen Zeilenumbrüchen <br> (HTML) und nicht <br /> (XHTML) verwenden. ZITAT(sebeck @ 27.11.2006 - 16:20) Ist es möglich, dass ich die linke Navigation bis nach unten mit der Hintergrundfarbe versehe? Das ist leider nicht so einfach. Das Element, hier das <div> mit der ID left, wird vom Browser grundsätzlich nur so groß gerendert, wie es der Inhalt erfordert. Deine Angabe von height:100%; bezieht sich somit nur auf das Element incl. seines Inhalts. Erst wenn das übergeordnete Element eine bestimmte Höhe zugewiesen bekommt, können sich die 100% von #left darauf beziehen. Wenn du also body eine Höhe von 100% gibst, wird auch #left so hoch dargestellt. Daraus ergibt sich aber ein anderes Problem. Ist die Seite höher als das Browserfenster, bezieht sich die Höhe von #left immernoch auf die Höhe des Browserfensters. Beim runterscrollen endet der Balken von #left mitten im Anzeigefenster (dies gilt auch für die Hintergrundfarbe von body). Die einfachste Lösung ist, für body ein sich vertikal wiederholendes Hintergrundbild zu definieren, das nur am linken Rand angezeigt wird und die Hintergrundfarbe von #left ersetzt. Dieses geht zwangsläufig bis zum Ende von body und somit bis zum Ende der Seite. Tschö, Auge |
|
|
|
|
27.11.2006 - 22:14
Beitrag
#3
|
|
|
is getting harder Gruppe: User Beiträge: 15 Mitglied seit: 29.08.2005 Wohnort: Bayreuth (Bayern) Mitglieds-Nr.: 5.391 |
ZITAT(Auge @ 27.11.2006 - 19:38) Zuallererst (bezogen auf den Threadtitel): Verschiedene Browser kommen von verschiedenen Herstellern und dürfen unterschiedliche Vorgaben zur Standarddarstellung von Elementen machen. Es wird also immer Fälle geben, in denen ein 100%-ige Übereinstimmung der Darstellung nicht zu erreichen ist. ZITAT Tip: setze auch padding auf 0, sonst ist im Opera ein Rand zu sehen. Dieser benutzt nämlich nicht margin:0; sondern padding:0; um body auf die volle Größe zu bringen. Danke. hab ich gemacht. da wäre ich selber nicht drauf gekommen. Das mit den verdeckten Inhalten habe ich nur von einem Freund. Daher bin ich auh nur arauf gekomen. ZITAT Erstens ist da zwischen #left und #top eine Lücke von 2%, welche im MSIE wohl auch angezeigt wird. Zweitens ist die Verwendung von left hier fehl am Platz, benutze bitte margin:...%;. OK, das Ergebnis bleibt aber hier das gleiche. und die Lücke wird trotz der jetzt passenden breite nicht angezeigt.  Gut, der Balken im Firefox wäre das etwas kleinere übel. Aber die licke im IE. Die schiebt sich egal wie die Breite ist dementsprechend mit. Danke trotzdem für deine sehr Hilfreiche Antwort. Grüße sebeck |
|
|
|
|
28.11.2006 - 10:22
Beitrag
#4
|
|
|
____________________  Gruppe: Admin Beiträge: 1.220 Mitglied seit: 20.10.2001 Mitglieds-Nr.: 3 |
Die Lücke im IE sieht ein wenig nach dem 3-Pixel-Bug aus. Die Lösung habe ich verlinkt.
Gruß Andreas (edit: Guck an, hatte ich selbst schon mal  )
|
|
|
|
|
28.11.2006 - 12:04
Beitrag
#5
|
|
|
is getting harder Gruppe: User Beiträge: 15 Mitglied seit: 29.08.2005 Wohnort: Bayreuth (Bayern) Mitglieds-Nr.: 5.391 |
Hallo Andreas,
Genau das war auch die Lösung Wäre schon fast dabei verzweifelt. Danke *freu* Gruß sebeck |
|
|
|
|
28.11.2006 - 15:58
Beitrag
#6
|
|
|
Anwärter auf W3.org Mitgliedschaft Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 |
Hallo
ZITAT(Andreas @ 28.11.2006 - 10:22) Die Lücke im IE sieht ein wenig nach dem 3-Pixel-Bug aus. Die Lösung habe ich verlinkt. Mit einem Blick auf das Ende des Elements hätte das auch mir auffallen sollen. War wohl zu offensichtlich. *tststs*  Tschö, Auge |
|
|
|
|
02.12.2006 - 23:32
Beitrag
#7
|
|
|
is getting harder Gruppe: User Beiträge: 15 Mitglied seit: 29.08.2005 Wohnort: Bayreuth (Bayern) Mitglieds-Nr.: 5.391 |
Hallo nochmal,
so langsam nimmt meine Sache hier schon Formen an. Nur jetzt habe ich schon wieder ein ähnliches Problem. Und zwar musste ich aus Gründen der Barrierefreiheit die beiden div-Elemente im Code vertauschen. Klar, der übliche Effekt ist der, dass es mir meine Navigation auf die rechte seite zieht. Somit musste ich eine "float: right" Anweisung einbauen. Der versuch, die "float: left" anweisung zu entfernen, hat er mir dann den Inhalt unter die Navigation gesetzt. Hier nochmal der Link zur Seite. Und hier nochmal die aktuelle CSS-Datei: QUELLTEXT /*Coppiright: Sebastian Eckardt*/ body { background-color: #3399CC; font-size: 100,1%; /*neu*/ margin: 0px; padding: 0px; } span { color: Black; border: 1px solid Black; display: block; } /*die andere Möglichkeit soll besser sein. .invisible { position: absolute; color: red; background-color: #3399CC; left: -1000px; top: -1000px; width: 0px; height: 0px; overflow: hidden; display: inline; }*/ .invisible { display: none; } /*div für Hauptnavigation*/ #top { height: inherit; /*vorher 65px*/ background-color: #003399; font-weight: bold; font-size: 1,2em; /*vorher 16pt*/ font-family: Arial, Helvetica, sans-serif; color: Aqua; margin: 0% 0% 0% -3px; /*vorher 17%-3px*/ padding: 10px 0px 5px 1%; float: right; } #top a { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; display: block; /*neu*/ margin: 0px 1px 0 1px; width: 7em; float: left; border: 1px solid Black; } #top a:hover { background-color: #3399CC; } #top li { list-style: none; display: inline; padding: 0 0 0 1%; text-align: center; } #top ul { text-align: center; } #top span { float: left; width: 7em; margin: 0 1px 0 1px; } /*div für linke navigation*/ #left { float: left; width: 15%; background-color: #003399; margin: 0px -3px 0px 0px; padding: 1%; /*vorher 1%*/ font-size: 0,91em; /*vorher 12pt*/ font-family: Arial, Helvetica, sans-serif; color: Aqua; height: 100%; } #left a { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 2px 0 2px 0; border: 1px solid Black; display: block; } #left a:hover { background-color: #3399CC; } #left ul { list-style: none; } #left li { border: 2px White; list-style: none; list-style-image: none; margin: 2px 0px 2px 0px; padding: 2px 0 2px 0; } /*div für Inhaltsanzeige*/ #inhalt { font-family: Arial, Helvetica, sans-serif; color: #000000; list-style-type: disc; font-size: 0,91em; /*vorher 12pt*/ background-color: #3399CC; margin: 1px 0% 0px 17%; padding: 0% 0% 0% 1%; border: 0; } #inhalt a { color: #FFFFFF; } #inhalt a:hover { background-color: #003399; } Bilder folgen bei Bedarf morgen. Danke schonmal im Vorraus. Grüße sebeck |
|
|
|
|
08.12.2006 - 21:41
Beitrag
#8
|
|
|
is getting harder Gruppe: User Beiträge: 15 Mitglied seit: 29.08.2005 Wohnort: Bayreuth (Bayern) Mitglieds-Nr.: 5.391 |
Hallo,
hier nun ein Bild in der Hoffnung, dass mir dann jemand weiterhelfen kann.  danke schonmal. Viele Grüße sebeck |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 25.04.2024 - 17:30 |