PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS-Problem mit IE

mithrandir
2004-04-28, 09:18:10
Hallo Leute,

Ich bastele gerade an einem Seitenlayout, wo vorwiegend DIV-Tags meine verschachtelte Tabellenstruktur ersetzen sollen. Für ein simples Menü habe ich nun folgendes erstellt:

http://staff.withingames.net/mithrandir/test/menu.php

Das sieht in Mozilla Firefox und Opera auch ganz gut aus, im IE habe ich allerdings oben und unten blaue Streifen (in der Farbe des Menühintergrundes).

So sieht das ganze aus:

<body>
<div id="menu">

<img border="0" src="n_menu_left_top2.gif" height="10" width="170" style="padding-bottom: 10px;" />

<div id="menu_1">
<a href="xxx"><img border="0" src="r_arrow.gif" id="menu_gif" /></a>
</div>
<div id="menu_2">
&nbsp;&nbsp;<a href="xxx"><b>home</b></a>
</div>

<div id="menu_1">
<a href="xxx"><img border="0" src="r_arrow.gif" id="menu_gif" /></a>
</div>
<div id="menu_2">
&nbsp;&nbsp;<a href="xxx" target="_blank"><b>community</b></a>
</div>

...

<img border="0" src="n_menu_left_bottom2.gif" height=10 width="170" style="padding-top: 10px;" />

</div>
</body>


Und hier das Stylesheet (bzw. hier (http://staff.withingames.net/mithrandir/test/test_style.css)):

body
{
scrollbar-arrow-color: #406080;
scrollbar-base-color: #103050;
scrollbar-track-color: #406080;
scrollbar-face-color: #103050;
background-color: #C3D0E6;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}

...

#menu
{
width: 170px;
float: left;
background-color: #406080;
margin: 0px 0px 0px 0px;
position: absolute;
left: 50px;
top: 50px;
}
#menu_1
{
width: 17;
height: 19;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: left;
position: relative;
top: 0px;
left: 0px;
background-image: url(../images/menu_button2.gif);
}
#menu_2
{
width: 140;
height: 19;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: left;
position: relative;
top: 0px;
left: 0px;
background-image: url(../images/menu_button.gif);
}
#menu_gif
{
position: relative;
top: 4px;
left: 3px;
}

So sollte es aussehen (Mozilla Firefox, 0.8): http://staff.withingames.net/mithrandir/test/firefox.png
Und so nicht (Internet Explorer, 6.0): http://staff.withingames.net/mithrandir/test/ie.png

Ich bin natürlich für jede Hilfe dankbar, ist meine erste Beschäftigung mit CSS.

thx & bye, mith
Flipper
2004-04-28, 17:24:25
Du nutzt CSS etwas ineffektiv hier. Alles was du fürs Aussehen der Seite - und nicht für den Inhalt - in HTML machst kannst du auch mit CSS machen.

Statt
<div id="menu_1"> <a href="xxx"><img border="0" src="r_arrow.gif" id="menu_gif" /></a> </div> <div id="menu_2"> __<a href="xxx"><b>home</b></a> </div>
machst du besser folgendes (ich probier nicht aus ob das funk - muss gleich weg, kleine fehler sind sicher drinnen):

ganz normal <a href="xxx">text</a> im menu div-container drinnen schreiben. Also reines HTML.

und dann in der css-datei:

#navbar a {
background-image:pfeilxxx.gif;
background-repeat:no-repeat;
padding-left:20px;
}

Zu deinem Problem: Du solltest das Hintergrundbild für die navbar anders einbinden. Gib da nix in HTML an, sondern mach das wie gesagt einfach im div-container "navbar". In die CSS-Datei kommt dann:

#navbar {
background-image:background.gif;
background-repeat:no-repeat;
padding:5px;
}


Da ersparst du dir einige div-container, und es wird auch viel übersichtlicher. So, ich hoffe in der Eile hab ich nicht allzuviel Mist geschrieben ;)

mfg
Flipper
mithrandir
2004-04-28, 20:37:58
Danke für die Anregung, ich werde mir das mal näher ansehen. In der Zwischenzeit habe ich den IE-Bug umgangen, indem ich die Images anders positioniere.

thx & bye, mith
imagine
2004-04-28, 20:42:01
Original geschrieben von mithrandir
Ich bastele gerade an einem Seitenlayout, wo vorwiegend DIV-Tags meine verschachtelte Tabellenstruktur ersetzen sollen.
Sehr löblich :)
Allerdings ist dein Quellcode wie von Flipper schon angemerkt ziemlich verwirrend und aufgebläht.

Etwas Theorie: div-Container (span-Container auch) lösen bei einem auf CSS aufbauenden Layout nicht die anderen (X)HTML Elemente ab, sondern sind ausschließlich Ausweich-Elemente, falls kein anderes (X)HTML Element passt.
Beispiel: Wenn du eine Überschrift über einen Textabschnitt setzen willst, die natürlich größer und fetter als der Text darunter sein soll nimmst du kein
#headline {font-size:120%; font-weight:bold;} ...
<div id="headline">My Headline</div>
sondern
h2 {font-size:120%; font-weight:bold;} ...
<h2>My Headline</h2>
Statt h2 natürlich die jeweils passende Überschriftenklasse. Wichtig ist aber dass es in (X)HTML eigene Elemente für Überschriften gibt und die sollten dann auch genutzt werden. Das hat gegenüber der ersten Lösung zwei Vorteile: Der Code wird viel leichter les- und nachvollziehbar als eine Suppe von 200 nichtssagenden divs und ein Browser der mit CSS nicht klar kommt stellt die Überschrift trotzdem einigermaßen groß und fett dar, da sie ja in einem h2-Element eingeschlossen ist. Ein Browser der CSS beherrscht überschreibt die Eigenschaften des h2-Elements dann mit den angegebnen CSS-Formatierungen.
Gegenbeispiel: Ein Container mit einem Text und einem Bild daneben. Es gibt in (X)HTML kein Element dafür. img kann keinen Text enthalten und p kann keine Bilder aufnehmen, also weicht man hier auf div aus.

Um zurück zu deiner Seite zu kommen: Ein Menü ist nichts unbekanntes, sondern letztendlich einfach eine Liste von Links. Für (ungeordnete) Listen gibt es das ul Element, also brauchst du kein div
Wenn du die Struktur des Menüs in HTML aufgeschrieben hast, setzt du den einzelnen Einträgen mittels list-style-image deine Pfeile vornedran, klebst oben und unter die Liste deine beiden Bilder um das Menü abzurunden, schiebst die einzelnen Einträge mittels margin und padding noch ein bisschen durch die Gegend, bis sie den gewünschten Abstand voneinander haben, packst das ganze in ein div (es gibt kein anderes (X)HTML Element das zwei Bilder und eine Liste aufnehmen würde) und hast dein Menü fertig. Dieses div kannst du nun nach Belieben inkl. seinem Inhalt über die Seite schieben.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

body {
background-color:#C3D0E6;
font-size: 100,01%
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#menue {
width:170px;
position: absolute;
top: 50px;
left: 50px;
}

#menue ul {
background-color:#406080;
font-size:0.8em;
line-height:1.4em;
font-weight:bold
padding:20px;
list-style-image:url(../images/r_arrow.gif);
margin:0;
}

a:link,a:visited {
color:#EEE;
}

a:hover,a:active {
color:#FFF;
}

</style>
<title>Test</title>
</head>

<body>

<div id="menue">
<div style="background:url(../images/n_menu_left_top2.gif) no-repeat bottom right; width:auto; height:10px"></div>
<ul>
<li><a href="./index.php?show=main">home</a></li>
<li><a href="http://www.withinboards.net/">community</a></li>
<li><a href="http://www.withinboards.net/">community</a></li>
<li><a href="http://www.withinboards.net/">community</a></li>
<li><a href="http://www.withinboards.net/">community</a></li>
<li><a href="http://www.withinboards.net/">community</a></li>
</ul>
<div style="background:url(../images/n_menu_left_bottom2.gif) no-repeat top right; width:auto; height:10px"></div>
</div>

</body>
</html>
Das ist natürlich nur ein Grundgerüst, sollte aber ungefähr deinen Vorgaben entsprechen. Der Code ist nicht nur kürzer, sondern auch (hoffentlich) leichter lesbar geworden.
Die beiden Bilder ober- und unterhalb des Menüs sind aus zweierlei Gründen in divs und nicht in imgs gepackt:
1. Hat der IE6 um img auch bei margin:0; einen nicht gewollten Rand gelassen (kein Plan wieso).
2. Bietet die Einbindung als Hintergrundbild deutlich mehr Freiraum beim Skalieren der Seite. Das heißt: Wenn du die beiden Bilder deutlich länger (nach links verlängern) machen würdest, kannst du dem Menü eine dynamische Breite von zB 10em (statt festen 130px) verpassen, so dass beim Vergrößern und Verkleinern der Schriftgröße nicht nur die Schrift wächst/schrumpft, sondern der Kasten um das Menü gleich mit. Damit würde auch verhindert dass bei riesigen Schriftgrößen die Schrift den Kasten sprengen könnte.
Die beiden Bilder zum Abrunden sind dabei fest in der rechten oberen bzw unteren Ecke ihres div verankert und werden genau soweit sichtbar wie das Menü breit ist. Du kannst sie mit einem Bildbearbeitungsprogramm also problemlos 300 Pixel nach links breiter machen und sie werden vom Browser passend abgeschnitten.



Noch paar Anmerkungen zu deinem ursprünglichen Code:

* Laut Spezifiation dürfen dem Doctype zwar Leerzeichen/-zeilen vorausgehen, einigen Browser gefällt das aber trotzdem nicht. Also den Doctype immer in der ersten Zeile, erste Spalte beginnen.

* Ein Doctype muss einen system identifier besitzen. Also nicht <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, sondern <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">.

* Elemente nicht mittendrin umbrechen, das mögen einige Browser nicht. In XHTML ist es außerdem verboten.
Nicht <img src="bild.jpg"
alt="">,
sondern <img src="bild.jpg" alt="">.

* Der abschließende / bei leeren Elementen ist nicht optional. Bei XHTML muss er stehen, bei HTML darf er nicht stehen.

* Allen numerischen Werten außer 0 muss eine Einheit folgen. Nicht <img src="bild.jpg" alt="" height="100" width="200">, sondern <img src="bild.jpg" alt="" height="100px/pt/em/wasauchimmer" width="200px/pt/em/wasauchimmer">.

* Das alt-Attribut bei img ist nicht optional, sondern zwingend. Wenn das Bild keine Beschreibung verdient, zB weil es nur dekorativen Zwecken dient, das alt leerlassen, aber nicht weglassen.

* Eine CSS Klasse kann mehrere Elemente die gleich formatiert werden sollen zusammenfassen. Beispiel:
.fetterText { text-weight:bold; } ...
<p class="fetterText">Toller fetter Text</p>
<p class="fetterText">Noch ein toller fetter Text</p>
Eine ID hingegen kennzeichnet genau ein Element. Es dürfen keine zwei Elemente die gleiche ID besitzen.

* Entweder ein Element ist floatend oder es ist fix positioniert. Nicht beides zusammen.

* Die CSS Pseudoformate :link :visited :hover :active müssen in dieser Reihenfolge im Code auftauchen, nicht irgendwie gemischt.

* Netscape 4 mag keine Leerzeichen/Tabulatoren zwischen CSS Attribut und Wert, auch wenn man diesen Browser natürlich ignorieren kann.
Flipper
2004-04-28, 21:39:36
hey, das mit dem id und class wusste ich noch gar nicht *g*
mithrandir
2004-04-29, 14:53:25
Danke erstmal für die Antworten. Im Endeffekt kommen dann noch Hintergrundbilder und verschiedenfarbige Pfeile dazu. Das kann man mit einer Auflistung IMO nicht machen, oder?

So wie es jetzt aussieht ist es (optisch) ganz gut, ist der Code wirklich sooo schlecht?

-> http://staff.withingames.net/mithrandir/test/menu.php

bye, mith
imagine
2004-04-29, 21:31:53
Schlecht ist relativ :)
Der Code ist eben etwas aufgebläht, wäre er eine Rede würde man wohl "viel heiße Luft" dazu sagen.
Den ul Elementen aus meinem Beispiel könntest du analog auch Hintergrundbilder verpassen.

Das Menü sieht IMHO gut aus, ich würde evtl noch nen 3D-Effekt hinzufügen, so dass beim Drüberfahren mit der Maus durch Ändern der border-Farbe von schwarz nach weiß der Eindruck entsteht es würde eingedrückt werden. Ähnlich wie hier -> http://css.maxdesign.com.au/listamatic/vertical15.htm Aber das ist Geschmackssache.