Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.


Bartoy
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline

CSS & HTML Probleme

Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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

Link zur Antwort auf "CSS & HTML Probleme" von Patrick Freitag 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
Beiträge: 17

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Testbild 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.

 
css
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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy Bartoy, am Mittwoch den 17.02.2010 um 17:28:54

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

Aber Danke euch!!!


Bartoy
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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
Beiträge: 1678

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Moritz Kern 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?

 
HTML
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:

 
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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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
Beiträge: 1678

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Moritz Kern 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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy Bartoy, am Donnerstag den 18.02.2010 um 21:50:24

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


Bartoy
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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?

Link zur Antwort auf "CSS & HTML Probleme" von Jannik Zschiesche Jannik Zschiesche, am Freitag den 19.02.2010 um 00:04:14

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

 
HTML
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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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. ;)

Link zur Antwort auf "CSS & HTML Probleme" von Jannik Zschiesche 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
Beiträge: 44

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS & HTML Probleme" von Bartoy 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? :)