geloescht_JesterDay Geschrieben 18. Januar 2005 Teilen Geschrieben 18. Januar 2005 Hallo, wir wollen hier bei uns anfangen, unsere Homepage selbst in die Hand zu nehmen. Die HP wurde von einer Werbeagentur entwickelt und besteht aus etlichen Frames, Tabellen, platzhalter GIFs etc. Das ganze soll jetzt aufgeräumter, suchmaschienenfreundlicher und leichter verwaltbar gemacht werden. Ich bin jetz dabei, die Seite (das Design soll ansich beibehalten werden) mit CSS und XHTML nachzubauen. Dabei bin ich schon auf die ersten Probleme gestossen: Der Kopf-Frame bestand aus Hintergrund, einem Logo und einem Menü darunter. Das Logo und den Hintergrund hab ich in ein DIV gepackt und das Manü in ein Span in diesem Div. Beim Menü gibt es aber einen Teil, der immer rechtsbündig und somit getrennt vom Rest ist. Das ging ansich auch mit einem span unter dem span. Allerdings zeigt nur der IE diesen Teil auch Rechtsbündig an, im FF klebt der direkt am Elternspan. Auch der Hauptteil darunter geht im FF nicht so ganz. Gedacht ist er als Div, dass sich über den Rest der Seite erstreckt und einen Hintergrund hat, der sich nur in Y-richtung wiederholt. Im FF geht er aber nur soweit (von der Höhe her) wie Inhalt im Div ist. Hier erstmal das CSS: * { background-color: #D7DCE0; color:#666666; font-family:Arial, Verdana, Helvetica, sans-serif; } body { margin: 0px; } .logo { background-image: url(../images/it_head.gif); width:100%; height:110px; } .menu { position: absolute; left: 70px; top: 90px; font-size:11px; word-spacing:20px; } .rightalign { text-align: right; width: 100%;} .main { background-image: url(../images/bg_main.gif); height: 100%; background-repeat: repeat-y; width:100%;} [/php] und hier die Seite: [php] <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="./css/test.css"> </head> <body> <!-- Kopfteil und Menü -> <div class="logo"> <span class="menu">Hier ist ein Menü <span class="rightalign">download portal</span> </span> </div> <!-- Hauptteil -> <div class="main">hm</div> </body> </html> Im IE sieht alles soweit ok aus, nur überlagert er mit dem Menü-span einen Teil des Hintergrunds (da ist eine horiz. Linie, die durch den span (leeren Teil am unteren Rand) überdeckt wird). Beim FF ist der rightalign Teil nicht rechtsbündig und der main-Teil nur so hoch wie der Inhalt. Hat jemand eine Idee wie man das bei beiden korrekt hinbekommt? Ach ja, ich habe auch versucht die Klasse menu 100% breit zu machen. Dann macht er es im FF allerdings zu breit und ich bekomme einen horiz. Scrollbalken. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
geloescht_JesterDay Geschrieben 18. Januar 2005 Autor Teilen Geschrieben 18. Januar 2005 Den Fehler, warum der IE die Linie im Hintergrundbild teilweise überdeckt hat, hab ich weg. Wenn vor dem <!Doctype> z.B. die XML Angabe <?xml version="1.0"?> steht, schaltet der IE in den Quirks-Mode. Lässt man diese Angabe weg, ist die Seite immernoch valid nach w3c und sie wird auch im IE korrekt dargestellt. Moment... mir fällt gerade auf, die Höhe des Hauptdivs ist jetzt auch nur 1Zeile im IE. Wird die Höhenangabe 100% nicht akzeptiert? Noch was... auch der rechtsbündige Teil ist im IE jetzt nicht mehr rechtsbündig. 1 Sache korrigiert, dafür 2 andere versaut. Sprich im standardkonformen Modus entspricht der IE dem FF. Wie kann ich mit CSS einen Bereich an den rechten bzw. unteren Rand "kleben"? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
geloescht_JesterDay Geschrieben 18. Januar 2005 Autor Teilen Geschrieben 18. Januar 2005 soo, mal ein Update zur Situation: .footer { clear: both; background-color: #FFFFFF; width: 100%; position: absolute; left: 0; bottom: 0; } .rightborder { background-image: url(../images/bg_border.gif); background-position: bottom center; vertical-align: bottom; background-repeat:no-repeat; float: right; width: 50px; height: 768px; background-color: #FFFFFF; position: absolute; right: 0; bottom: 10px; } mit den Klassen hab ich einen Rand rechts und unten. Ich hab allerdings immernoch das Problem, dass ich kein Element 100% hoch machen kann. Rightborder ist auch fest angegeben hier. Um zu teste ob es geht ist das ok, aber auf Dauer ist das nix. Kennt niemand eine Möglichkeit wie man das lösen kann? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
geloescht_JesterDay Geschrieben 19. Januar 2005 Autor Teilen Geschrieben 19. Januar 2005 Ich hab allerdings immernoch das Problem, dass ich kein Element 100% hoch machen kann. Rightborder ist auch fest angegeben hier. Um zu teste ob es geht ist das ok, aber auf Dauer ist das nix. Kennt niemand eine Möglichkeit wie man das lösen kann? Ok, ist auch gelöst. Ich schreib das nur mal, falls jemand danach suchen sollte oder so... Es gibt keine Möglichkeit ein Element 100% hoch zu machen (nur im IE im Quirksmode geht das. IE halt ). Ein HTML Dokument kenn ansich keine Höhe 100%, zumindest nach den CSS Entwicklern. ein Dokument ist nach deren ansicht eben nach unten offen und kann ja beliebig lang werden. Warum es aber Breite 100% kennt ist mir dann schleierhaft. Für CSS3 ist aber wohl eine Überarbeitung der Layout Möglichkeiten vorgesehen. Mal gespannt was das bringt und wie lange es dann dauert bis es umgesetzt wird. Und überhaupt wann CSS3 kommt. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
tallman Geschrieben 19. Januar 2005 Teilen Geschrieben 19. Januar 2005 Ok, ist auch gelöst. Ich schreib das nur mal, falls jemand danach suchen sollte oder so... Es gibt keine Möglichkeit ein Element 100% hoch zu machen (nur im IE im Quirksmode geht das. IE halt ). Meintest du damit jetzt, dass man eine Website nicht so bauen kann, dass sie 100% der zu sehenden Fläche bedeckt oder das man objekte wie grafiken und so, nicht zu 100% grössere verhelfen kann?? mfg Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
geloescht_JesterDay Geschrieben 19. Januar 2005 Autor Teilen Geschrieben 19. Januar 2005 Meintest du damit jetzt, dass man eine Website nicht so bauen kann, dass sie 100% der zu sehenden Fläche bedeckt oder das man objekte wie grafiken und so, nicht zu 100% grössere verhelfen kann?? Ich meinte CSS-Objekte, also Divs o.ä. Du kannst kein: <div style="background-color: #BBBBBB; border: 1px solid; float: left; width: 20%; > </div> machen, dass sich über die gesamte Höhe erstreckt (also height: 100%). Mit dem IE im Quirks-Mode ist das möglich, aber nur da und es ist halt nicht standardkonform. EDIT: es gibt ein paar "Tricks" wie das dennoch geht, aber nur auf den ersten Blick. Man sollte die also nicht unb. verwenden. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.