Ich hab die Diskussion jetzt nicht richtig verfolgt.
Wenn es um die Headergrafik geht, dann gib mal bei #line einen width-Wert von 100% statt dem Pixelwert an.
Beiträge von sejuma
-
-
Das kommt auf deine Datei- und Ordnerstruktur an.
Befindet sich die CSS-Datei im gleichen Ordner wie die html-Dateien, dann lautet der Pfad so:Hast du die Datei in einem speziellen Ordner, z.B. im Ordner "css", dann wäre - wenn sich dieser Ordner im gleichen Verzeichnis wie die html-Dateien befindet - folgender Pfad anzugeben:
Der Pfad geht also vom Standort der html-Dateien aus zu der CSS-Datei.
Den o.g. Code dann innerhalb des head-Bereiches einfügen.
-
Wenn du eine feste Prozenthöhe willst, dann muss sich der Prozentwert auf ein übergeordnetes Element (Basis) beziehen. Deshalb solltest du dann auch für body und html 100% height definieren.
Bei deinem #inhalt hinterlege noch ein "display: inline;" sonst macht der IE 6 Mucken.
-
Hier solltest du fündig werden: http://www.ohne-css.gehts-gar.net/0019.php
-
Theoretisch ja, kannst es ja einfach mal ausprobieren.
Aber da du nie weißt, wie groß 100% sind, besteht die Gefahr, dass nicht alle Links in eine Reihe passen. Oder anderer Extremfall: dass sie viel zu breit werden. -
Ich bin zwar nicht der Tabellenfreak, aber das sollte dir weiterhelfen.
-
Mal ein paar grundsätzliche Überlegungen, ohne jetzt eine Gesamtlösung parat zu haben:
Wenn du eine Breite von 70% verwendest (oder auch ein beliebiger anderer Prozentwert):
Dann ist doch die Navi je nach Bildschirmbreite ebenfalls immer unterschiedlich breit. Andere Bildschirme --->> andere Navibreiten.
Die Links haben aber eine feste Breite.
Folge: Sie werden immer in unterschiedliche (prozentuale) Gesamtbreiten eingebunden und können so nie richtig zentriert sein oder der prozentuale Platz reicht noch nicht mal aus, um sie nebeneinander darzustellen.Deshalb folgender Lösungsansatz:
Verwende für die Navi feste Pixelwerte.
Ich hatte in einem anderen Zusammenhang mal was ähnliches gebastelt und da ist etwas Rechenarbeit angesagt:
Zunächst ermittelst du die Anzahl der Links. Diesen gibst du eine bestimmte, einheitliche Pixelbreite. Unter Berücksichtigung von evtl. Border-, Margin- und Paddingwerten ermittelst du die Gesamtbreite der einzelnen Links.
Diese verwendest du für ul. Und ul zentrierst du in dem Navi-Div.Ich poste hier mal dieses Beispiel, das du dann an deine spezifischen Verhältnisse mit anderen Pixelwerten anpassen müsstest.
CSS:
Code
Alles anzeigen#navi { width: 898px; height: 1.8em; background-color:#EBECE4; border-left: 1px solid #4D4D4D; border-right: 1px solid #4D4D4D; margin: 0 auto; } #navi ul { width: 605px; margin: 0 auto; list-style-type: none; line-height: 1.8em; text-align: center; } #navi li { float: left; border-right: 1px solid #4D4D4D; } #navi a { width: 150px; display: block; text-decoration: none; color: #4D4D4D; } #navi li a:hover { color: #0000CD; background-color: #C1CDCD; }
HTML
-
-
Ohne Gewähr, weil ich nicht alles nachvollziehen kann bzw. nicht an die Dateien komme:
In deiner Index.htm steht ziemlich oben folgendes:
Das ersetze mal komplett damit:
Dadurch soll das Hintergrundbild nur einmal angezeigt werden. Sofern überflüssiger Platz vorhanden, wird dieser schwarz dargestellt.
Falls es nicht klappt, mach's wieder rückgängig. -
Da gibt es unterschiedliche Ansätze:
Die Wiederholung kannst du unterdrücken mit der CSS-Angabe
Ich vermute, dass du das Hintergrundbild in den Body eingebunden hast.
Falls ja, könntest du es stattdessen in einen allumfassenden Div packen, der z.B. der Größe des Bildes entspricht.Dann kommt es auf die Art der Grafik an:
Zunächst solltest du sie komprimieren. Selbst 500kb sind bereits sehr groß.
Wenn es nicht unbedingt auf den kompletten Bereich der Grafik ankommt, ist vielleicht auch das eine Variante: http://www.ohne-css.gehts-gar.net/0030.phpAm besten wäre ein Link, so dass man sich das mal konkret ansehen kann.
-
-
Sieht (im IE7) ziemlich verschoben aus.
Du solltest dem #all eine feste Breite geben, sonst füllt er die Gesamtbreite aus und ist somit überflüssig.
Das "position:relative;" beim #all ist unnötig. -
-
Vielleicht an den Java-Scripts.
Kenn ich mich aber nicht mit aus. -
Irgendwie passt das nicht zusammen bzw. allenfalls an deinem PC wo du die Seite entwickelst:
Du verwendest für den body ein Hintergrundbild. Das hat fest definierte Pixlewerte (Höhe und Breite).
Für deine Div's nimmst du dann Prozentwerte. Die sind abhängig von den unterschiedlichen Bildschirmgrößen und können somit an jedem PC unterschiedlich sein.
Folge: Hintergrundbild und die einzelnen Elemente können wegen der unterschiedlichen Einheiten nicht zusammenpassen. In so einem Fall wäre ein fixes Layout vermutlich die bessere Lösung.
Für die Navi selbst würde ich eine Listennavi verwenden. Beispiele siehe hier:
http://css.maxdesign.com.au/listamatic/
Gut wäre es, wenn man sich die Page mal direkt per Link ansehen könnte. -
-
Lade das mal bitte hoch und poste den Link.
-
Dein #scrollbereich wird doch immer gleich angezeigt: Immer 208px vom oberen und 258px vom linken Rand entfernt.
Möglicherweise willst du ihn jedoch nur zentriert darstellen. Das geht horizontal unproblematisch. Vertikal müsste der Div eine bestimmte Pixelhöhe haben.
Ich empfehle dir, auf alle absoluten Positionsangaben zu verzichten.
Verwende besser margin-Angaben und für nebeneinander angeordnete Div's float.Wenn du eine horizontale Zentrierung anstrebst, die in allen Auflösungen gleich aussieht, dann sieh dir mal diese Anleitung an. Für zusätzlich vertikal evtl. noch diese.
-
-