Webdesign, Tutorials und mehr - Webmasterpro.de

CSS & HTML Probleme

Bartoy, am Mittwoch den 17.02.2010 um 15:18:41

Hey,

habe folgende HTML-Datei erstellt und habe die darauf folgenden Probleme. :)

www.shuesch.de

1. Warum ist die Schrift im Firefox normal und im IE8 fett?

2. Wieso sind die einzelnen Menüpunkte im IE8 vertikal auseinandergedrückt?

3. Warum wiederholen sich im IE8 die Bilder oben teilweise?!

Vielen Dank & Gruß

Simon

Patrick Freitag, am Mittwoch den 17.02.2010 um 16:19:49

2. Versuch mal der Liste eine fixe Höhe zu geben und eventuell nochmal Margin bzw. Padding auf 0 zu setzen (in der Liste).

3. Verwende gültiges CSS (und keine Element-interne Attribute die nicht mehr valide sind). Z.B.: "background: url(url.jpg) no-repeat;". Dadurch sollte sich der Hintergrund nicht mehr wiederholen.

Bei 1. kann ich nur sehr wage spekulieren und lege einen Denkanstoß in Richtung Font Rendering von Trident (IE) bzw. Windows.

Testbild, am Mittwoch den 17.02.2010 um 16:20:45

Trotzdem ich keinen Internet Explorer zum testen habe folgendes:

Zu 1) Der Text der Links in der Liste wurde über das CSS der Seite nicht standardkonform als fett deklariert, daher ist er wahrscheinlich im IE auch fett. Statt font: bold sollte font-weight: bold eingesetzt werden, um den Text fett zu machen.

1

#menu li a:link, #menu li a:visited, #menu li a:active {display:block;color:#000;font:bold;}

Zu 2) Möglicherweise sind die Voreinstellungen für Listenabstände im IE anders als in Firefox. Es bietet sich ein CSS-Reset an.

Zu 3) Der Hintergrund wurde in HTML anstatt in CSS definiert. Daher wiederholt er sich. Mit folgenden CSS-Eigenschaften lässt sich das Bild mit CSS richtig einfügen: background-image und background-repeat.

Zudem solltest du den Einsatz von Tabellen zur Formatierung überdenken.

Bartoy, am Mittwoch den 17.02.2010 um 17:22:48

@ Patrick Freitag

Leider hat dies keinerlei Auswirkungen auf die Menüpunkte.

@ Testbild

Den normalen CSS-Reset nutze ich normalerweise. Aber auch die "Eric Meyers"-Methode ändert den Abstand im IE nicht.

Bartoy, am Mittwoch den 17.02.2010 um 17:28:54

Der fehlende Doctype war natürlich das Übel. :)

Aber Danke euch!!!

Bartoy, am Donnerstag den 18.02.2010 um 09:50:03

Könnt ihr mir vieleicht mit der Seite nochmals helfen?

Blicke das mit float und clear nicht ganz.

www.shuesch.de

Visuell sieht es so aus. Die Bilder hängen außerhalb des oberen Divs durch "float:right;". Ohne dieses float sind die zwar im Div aber untereinander. :/

Moritz Kern, am Donnerstag den 18.02.2010 um 10:38:54

generell deute ich nochmal darauf hin dass du auf tabellen komplett verzichten könntest....

wenn ich das richtig verstanden hab sollen die videos weiterhin untereinander stehen und rechts nebendran die Bilder?

1
2
3
4

<div id="content">
    <div id="video"><h1>Videos</h1> deine 2 videos</div>
    <div id="bild"><h1>Videos</h1>alle deine bilder</div>
</div>

und nutze folgendes CSS:

1
2
3

#video {float:left; margin:10px; width:320px}
#bild {float:right; margin:10px; width:600px}
#bild img {float:left; margin:10px}

Bartoy, am Donnerstag den 18.02.2010 um 11:02:30

Hey, ich habe den Hinweis nicht ignoriert. Allerdings, bekomme ich das ja noch nicht einmal mit den Bildern hier hin. :)

Deine Lösung ist auch interessant aber leider nicht meine Wunschoptik. Die Videos sind korrekt angeordnet. Die Bilder ebenfalls, jedoch außerhalb des "Content". Ich bekomme die nicht darein. :)

Gibt es irgendwie eine einfache und verständliche HowTo zu Float/Clear?!

Danke für die Hilfe!!!

Moritz Kern, am Donnerstag den 18.02.2010 um 11:23:03

Lesestoff:

einfache Beispielseite

tabellen versus CSS Layout

Tabellen im Web

wmp designgala

einfach mal ein wenig unter Entwicklung XHTML & Entwicklung CSS stöbern und lesen....

Bartoy, am Donnerstag den 18.02.2010 um 21:50:24

Ist schon ein klein wenig. ;) Aber danke. Werde es mir mal reinziehen.

Bartoy, am Donnerstag den 18.02.2010 um 22:39:28

Nächste Probleme ;)

1. Habe eine Shadowbox (Lightbox), für die Bilder, integriert. Aber irgendwie sind die beiden Videos im aktiven Shadowbox-Modus im Vordergrund. Normalerweise sollte alles im Hintergrund sein, natürlich außer der Shadowbox.

2. Im IE8, zumindest bei mir, ruckelt das scrollen sehr. Das liegt garantiert auch an den Videos. Wie kann ich das verbessern?

Jannik Zschiesche, am Freitag den 19.02.2010 um 00:04:14

Zu 1.:
Du musst bei dem object wmode="transparent" setzen.

1

<param name="wmode" value="transparent" />

Zu 2.:
Ich denke, dass das viel eher an den 3478.41 KB an Bildern liegt, die du auf der Seite einbindest. Ändere mal die Bilder so ab, dass sie wirkliche Thumbnails (Vorschaubilder) sind, und nicht 2000px breite Poster, die auf Personalausweisfotogröße gestaucht werden.

Bartoy, am Freitag den 19.02.2010 um 00:52:41

Hey danke!

zu 1. Wo muss ich das einsetzen? ;) Habe es mal ausprobiert aber weiß nicht genau wohin. :)

zu 2. Stimmt. Habe wohl intuitiv die Cam unterschätzt. ;)

Jannik Zschiesche, am Freitag den 19.02.2010 um 01:28:02

Zu 1.:

In die <object>...</object> Objekte, die die Youtube-Videos einbinden.

Bartoy, am Freitag den 19.02.2010 um 08:29:21

Funktioniert leider nicht. Hab glaube alle Möglichkeiten ausprobiert. :/

Hätte ich mit einer anderen Lightbox das gleiche Problem? :)