Poste mal einen Link zur Problemseite.
Beiträge von sejuma
-
-
Du kannst auch auf die Klasse .foto1 verzichten und die Grafik .fotolink zuweisen:
Code.foto-link { width: 290px; height: 190px; display: block; margin: 0 auto; background: url(img/0026/tor.jpg) no-repeat; }Wenn du jedoch mehrere solcher Hovereffekte mit jeweils anderen Fotos aber gleicher Größe hast, dann ist die zusätzliche Klasse .foto1, .foto2 usw. sinnvoll.
Du kannst dann nämlich .fotolink und .fotolink:hover als "Konstante" verwenden und musst nicht jedesmal deren Hintergrundgrafik anpassen.
Viele Wege führen nach Rom. -
-
Schmeiß überall die absoluten und relativen Positionierungen samt top, left, right, bottom-Werten raus.
Die heißen so, weil sie meist absolut unnötig sind und zu den von dir genannten Problemen führen.
Positioniere besser und ausschließlich mit margin und/oder float. -
Dieser Teil gehört nicht an den Quelltextanfang und muss weg:
Code
Alles anzeigen<script type="text/javascript"> window.google_analytics_uacct = "UA-7539432-2"; </script> <style> #catfish16438bfc{PADDING: 0px;MARGIN: 0px 0px -90px;WIDTH: 100%;HEIGHT: 90px;BOTTOM: 0px;POSITION: fixed;} </style> <!--[if IE]> <style> #catfish16438bfc{ Z-INDEX: 1000; OVERFLOW: hidden; POSITION: absolute;} HTML,BODY {OVERFLOW: hidden;WIDTH: auto;HEIGHT: 100%;} DIV#zip16438bfc{PADDING: 0px;MARGIN: 0px;OVERFLOW: auto;WIDTH: 100%;HEIGHT: 100%;POSITION: relative;} </style> <![endif]--> <div id="topad16438bfc"></div>Stammt vermutlich vom Werbeanbieter und deshalb die Unterschiede offline zu online.
Ich denke, dass du dir irgendwann eigenen, werbefreien Webspace besorgst und dann wäre dieses Problem gelöst. -
Schreib mal diesen Doctype in die allererste Quelltextzeile:
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
Sieh dir mal hier Ziffer 7 an, möglicherweise hilft das: http://www.ohne-css.gehts-gar.net/0066.php
-
Versuch's mal mit
Codeul #navigation-3 {margin: 0;}
Ansonsten poste mal einen Link zur Seite. -
-
Versuch's mal damit:
Code#menu { font-size:13px; width: 840px; margin: 0 auto; padding-top: 15px; text-align: center; }Dann mach dich mal noch dran, deinen Code insgesamt abzuspecken. Er wird dadurch übersichtlicher und somit weniger fehleranfällig.
Auf manche divs kannst du verzichten.
Wenn du einmal mit einem allumfassenden #wrapper eine horizontale Zentrierung vornimmst, kannst du dir das im weiteren Verlauf für andere Elemente sparen.So sind z.B. #headwrapper und #fixedwrapper unnötig. Abstände kannst du auch mit margins bei den anderen Elementen erreichen.
Auch #main ist überflüssig.Aber keine Bange: das sind so typische Anfängerfehler, die anfangs auch ich gemacht habe.
Weniger ist mehr. Versuche also immer, mit so wenig wie möglich divs auszukommen. Das erhöht wie gesagt den Überblick. -
Du kannst die Seite ja abstrahieren und trotzdem einen Link posten. Ist immer besser, wenn man alles im Zusammenhang sieht.
Generell sollte sich das so lösen lassen:
linke Spalte: float: left;
rechte Spalte: margin-left mit einem Wert, der mindestens der Gesamtbreite der linken Spalte entspricht.
Zum Schluss der Footer, bei dem du clearen musst.
Damit beide Spalten gleich lang werden, helfen Faux Columns -
du musst im HTML-Teil die Reihenfolge der Divs vertauschen:
Bisher:
#firstleft
#firstmiddle
#firstrightRichtig:
#firstleft
#firstright
#firstmiddle -
Lass zunächst wieder alle position-Angaben weg, weil sie nicht nötig sind.
Verzichte ebenso auf das veralteteCode<div align="center"
und behebe noch den hier genannten zweiten Fehler: http://validator.de.selfhtml.org/validate
Zentriere die Seite dagegen so wie hier beschrieben:
http://www.ohne-css.gehts-gar.net/0001.phpWenn das nichts nützt, poste nochmal einen Link mit diesen Anpassungen.
-
Meinst du sowas? CSS-Tooltipp
-
Nimm eine ul-Liste, gib ul eine Breite und einen Hintergrund. Verzichte auf absolute und relative Positionierungen, siehe Bildergalerie in Listenform
-
Wenn du das innerhalb des head-Bereichs einfügst, sollten die meisten Abstände verschwinden:
Code<style type="text/css"> img {display: block;} </style>Unabhängig davon:
Weshalb hast du das Bild gesliced und weshalb verwendest du ein veraltetes Tabellenlayout? Tabellen sind für so etwas nicht gedacht.Du köntest ebenso das komplette Bild dm body als Hinergundgrafik zuweisen und den schwarzen Mittelteil als zentrierten Div einbauen.
-
Hintergrundgrafiken lassen sich nicht skalieren und passen sich deshalb nicht automatisch an die Bildschirmgröße an.
Mit diesem Trick geht es - unter inkaufnahme evtl. Verpixelungen und Verzerrungen - dennoch: http://www.ohne-css.gehts-gar.net/0055.php -
Der Prozentwert richtet sich nach der jeweiligen Größe des Browserfensters. Insofern kannst du - und ich auch nicht - wissen, wieviele Pixel du einsetzen musst.
Ich persönlich verwende meist eine Gesamtbreite von ca. 900 - 1000px.Die zu verwendenden Breiten hängen u.a. auch von den Breiten der verwendeten Grafiken ab, so dass diese dann auch in die entsprechenden '"Spalten" passen.
Wird viel Text verwendet, sollte die Breite nicht zu groß sein, da dann für den Leser der "Tennis-Zuschauer-Effekt" eintritt. D.h., er muss beim Lesen den Kopf von lin ks nach rechts bewegen, was viel Konzentration erfordert und die Seite dann deshalb unattraktiv macht. Siehe hierzu insbesondere Ziffer 3: http://www.ohne-css.gehts-gar.net/0015.php -
Die prozentualen width-Werte musst du mit fixen Pixelwerten ersetzen.
-
Gib html einen height-Wert von 101%, siehe http://www.ohne-css.gehts-gar.net/0052.php.
Dann ist der Scrollbalken permanent vorhanden und die Seite verschiebt sich nicht mehr.