HTML

CSS Link Formatierungs.Problem

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hallo, ich habe bei meiner Homepage ein Problem mit dem Formatieren von Links mit Hilfe von CSS. Ich finde einfach nicht meinen Fehler. Am Besten mal ein paar Quellcodeschnippsel: [u]style.css[/u] [code]a.einleitung:link {text-decoration:none; color:#006600}[/code] [u]datei[/u] [code]<div align="justify"> <h4> <a href="../tipps/icq6/">[Windows-Software] ICQ 6 stylen</a> </h4> [b] <p> <a class="einleitung" href="/tipps/icq6"> blablabla</a><br> <a class="einleitung" href="/tipps/icq6/">Mehr...</a> </p>[/b] [i] <p> <a class="einleitung" href="www.google.de">TEST</a> </p>[/i] </div> [/code] So, das Problem liegt bei dem fett-geschriebenen. Es beachtet einfach nicht die class-Angabe. [u] Was nun seltsam ist[/u] (zumindest für mich): Wenn ich den Link mit einem www. versehe, so wie im kursiven Text, funktioniert alles wunderbar. Es hängt also scheinbar vom Link ab, ich verstehe nur nicht warum. Oder sitzt der Fehler wo anders? Danke und Gruß Strg_Alt_Entf ehem. Strg+Alt+Entf

Antwort 1 von DeluxeStyle

Mach mal das :link im css weg, gehts dann?

Antwort 2 von Strg_Alt_Entf

Jein.
Es ändert sich zwar die Farbe (was ich eigentlich nur zu Testzwecken eingesetzt habe), aber der Link ist immer noch unterstrichen.
Nur bei dem kursiven Link namens Test geht es nach wie vor (Farbe und text-decoration:none)

Gruß

Antwort 3 von Supermax

Mit welchem Browser hast du das denn getestet? Manche Webbrowser (besonders der IE im "Quirks"-Modus) gehen sehr schlampig mit den CSS-Angaben um.

Antwort 4 von Strg_Alt_Entf

Nur mit Firefox. IE kann ich nicht testen, da ich Linux verwende.

Gruß

Antwort 5 von Strg_Alt_Entf

Habe es gerade mit Konqueror (Browser) getestet und der macht es so wie ich es will (also Link nicht unterstreichen).

Weiß jmd. eine Möglichkeit, die von (fast) allen Browsern unterstützt wird?

Gruß

Antwort 6 von derpfleger

Wenn ich exakt dein Beispiel aus der Eröffnungsfrage teste, dann klappt deine gewünschte Darstellung problemlos in IE6, FF2, Opera9.
Entweder hast du da noch mehr Code, und der Fehler liegt woanders, oder du hast ganz andere Browser. Mit meinen Browsern kann ich leider dein Problem nicht nachvollziehen...

Gruß derpfleger

Antwort 7 von Supermax

Welchen "DOCTYPE" hast du denn angegeben? Ohne gültigen DOCTYPE arbeiten die meisten Browser im Quirksmodus, wo CSS nicht oder anders als erwartet unterstützt wird.

empfehlenswerte Lektüre zum Thema (Englisch)

Antwort 8 von Strg_Alt_Entf

Danke euch beiden.

Ich gebe euch einfach mal die Seite: Problemseite

HTML und CSS sind eigentlich valide.

Gruß

Antwort 9 von derpfleger

Habs gerade mit html strict, html transitional und xhtml strict in meinen Browsern getestet und auch ohne doctype: wird immer richtig dargestellt. Ich vermute weiterhin den Fehler woanders im Code des vollständigen Dokumentes .

Antwort 10 von derpfleger

und wo da genau?

Antwort 11 von derpfleger

wird doch so dargestellt, wie du es willst, oder?

Antwort 12 von Strg_Alt_Entf

Zitat:
und wo da genau?

Was wo genau? Der Fehler?
Ich kenne mich HTML und CSS-mäßig auch nicht allzugut aus.

Gruß

Antwort 13 von derpfleger

Naja, die linktexte werden doch grün und nicht-unterstrichen dargestellt, also so wie du es willst. Der Fehler ist nicht zu sehen.

Abgesehen davon, dass der IE den Inhalt (.inhaltright) unter das .submenu floaten lässt weil es, wenn ich es grob überschlage 2 Pixel zu wenig sind für die width des wrapper.

Antwort 14 von Strg_Alt_Entf

Zitat:
Naja, die linktexte werden doch grün und nicht-unterstrichen dargestellt, also so wie du es willst. Der Fehler ist nicht zu sehen.

Naja wenn das so ist. Bei mir funktioniert es nämlich beim Firefox2 nicht. Ich verwende ihn allerdings unter Kubuntu Linux.

Ist halt schon ärgerlich, wenn es nicht überall 100% geht. Wenn ich

text-decoration:none;

zu jedem Link einzeln dazu setze, geht es auch bei mir.

Zitat:
Abgesehen davon, dass der IE den Inhalt (.inhaltright) unter das .submenu floaten lässt weil es, wenn ich es grob überschlage 2 Pixel zu wenig sind für die width des wrapper.

Vielen Dank für die Info. Wie gesagt: Ich habe kein IE.

Gruß und Vielen Dank

Antwort 15 von derpfleger

Dann präzisiere ich wenigstens noch: getestet mit FF2.0.0.8 und FF2.0.0.9 .

Schade, da wirst du wohl selbst noch rumspielen müssen, deine Konfiguartion werden ja nicht allzuviele haben.

Eine Idee vielleicht noch: definiere auch ein a:link, das hast du nicht getan. Da will ja die Reihenfolge eingehalten werden.

Und: Opera überschreibt deine Schriftfarbe (weiss) im a:hover mit der grünen Schriftfarbe, da du dort keine einzelnen Pseudoklassen (:link, :visited, :hover :active) für die Klasse .einleitung definiert hast. Das heisst, wenn man die Textteile mit der Maus überfährt, wird zwar der Hintergrund blau, die Schriftfarbe wechselt aber nicht von grün auf weiss und ist so in Opera kaum noch zu lesen.

Antwort 16 von Strg_Alt_Entf

Zitat:
Und: Opera überschreibt deine Schriftfarbe (weiss) im a:hover mit der grünen Schriftfarbe, da du dort keine einzelnen Pseudoklassen (:link, :visited, :hover :active) für die Klasse .einleitung definiert hast. Das heisst, wenn man die Textteile mit der Maus überfährt, wird zwar der Hintergrund blau, die Schriftfarbe wechselt aber nicht von grün auf weiss und ist so in Opera kaum noch zu lesen.

Ok, werde versuchen, den Fehler (heute oder morgen) zu beheben. Die Farben waren eh nur zufällig ausgewählt (grün passt ja überhaupt nicht zum Rest der Seite...).

Gruß

Antwort 17 von Strg_Alt_Entf

@derpfleger:

Als das Problem bei Opera beheben wollte, habe ich ganz nebenbei für Firefox unter Linux die Lösung gefunden:

a:link {
	color: #000000;
	text-decoration:none;
	border-bottom: 1px dotted black;
}

a:visited {
	color:#000000;
	text-decoration: none; 
	border-bottom: 1px dotted black;
}

a:hover {
	color:#ffffff;
	text-decoration: none;
	border-bottom: none;
	background-color:#0066CC;
}

a.einleitung {text-decoration:none; border-bottom:none; color:#000000}

a.einleitung:visited {text-decoration:none; border-bottom:none; color:#000000}

a.einleitung:hover {text-decoration:none; color:#FFFFFF; background-color:0066CC}

Wenn du das hier ließt kannst du mir ja schreiben, ob's jetzt auch bei Opera funzt.

Antwort 18 von derpfleger

Funktioniert bei Opera. Glückwunsch auch zur Lösung für deinen FF.

Gruß derpfleger

Antwort 19 von CSSrules

Zitat:
Ohne gültigen DOCTYPE arbeiten die meisten Browser im Quirksmodus

nein, nicht die meisten, sondern ALLE!

Zitat:
Ist halt schon ärgerlich, wenn es nicht überall 100% geht.

mag ärgerlich sein, ist aber so. ZB haben User-Stylesheets grundsätzlich. Vorrang vor deinen Angaben.

Antwort 20 von CSSrules

bei der Durchsicht deines Quelltextes:

Zitat:
<div align="justify">

Solche Relikte aus der Vor-CSS-Zeit solltest du vermeiden. Das bläht den Quellcode unnötig auf, ist Dank CSS vollkommen überflüssig, eher kontraproduktiv, und steht daher auch auf der Abschussliste des W3C.

Übrigens leidet dein Quellcode auch an starker DIVitis. Layouten mit CSS bedeutet nicht für alles und jedes noch ein DIV einzufügen. DIVs sind nur eine Krücke, wenn kein semantisch korrektes TAG greifbar ist. Bei dir tauchen aber haufenweise vollkommen überflüssige DIVs auf.

Beispiel:

<div id="menutop">
<div class="menu">
<a href="/tipps" class="menu">Tipps & Tricks</a>
<a class="menu">Fotos</a>
<a class="menu">Musik</a>
<a href="/videothek" class="menu">Videothek</a>
<a class="menu">Fun</a>
<a href="/forum" class="menu">Forum</a>
<a href="/gaestebuch/" class="menu">Gästebuch</a> | 
<a href="/ich/" class="menu">TEST</a>
<a href="/vorschlaege" class="menu">URL-Vorschläge</a>
</div>
</div>

Semantisch Korrekt wäre:

<ul id="menutop">
<li><a href="/tipps" >Tipps &amp; Tricks</a></li>
<li><a >Fotos</a></li>
<li><a >Musik</a></li>
<li><a href="/videothek" >Videothek</a></li>
<li>Fun</li>
<li><a href="/forum" >Forum</a></li>
<li><a href="/gaestebuch/" >Gästebuch</a></li>
<li><a href="/ich/" >TEST</a></li>
<li><a href="/vorschlaege" >URL-Vorschläge</a></li>
</ul>

Offensichtlich sind die Links in einer Liste zusammengefasst, also

UL

. Zum Ansprechen aus CSS (aber sogar auch JavaScript) reicht die ID menutop auch für alle darin enthaltenen Elemente, die Klasse menu ist komplett überflüssig. Informiere dich über Nachfahrenelemente in CSS. Dass du deine Links nicht untereinander zeigen willst sondern nebeneinander lässt sich - dafür gibts das nämlich - mit CSS festlegen, die Eigenschaft float auf das umgebende

li

angewendet sollte reichen.

Antwort 21 von Strg_Alt_Entf

Wird wohl stimmen, das mein Code nicht sehr gut ist ;-(

Zitat:
bei der Durchsicht deines Quelltextes:
Zitat:
<div align="justify">

Solche Relikte aus der Vor-CSS-Zeit solltest du vermeiden. Das bläht den Quellcode unnötig auf, ist Dank CSS vollkommen überflüssig, eher kontraproduktiv, und steht daher auch auf der Abschussliste des W3C.

Wie geht's besser?

<div style="text-align:justify">

oder soll das DIV weg? Weiß aber nicht wie, da <span> nicht erlaubt ist.

Zitat:
Offensichtlich sind die Links in einer Liste zusammengefasst, also UL. Zum Ansprechen aus CSS (aber sogar auch JavaScript) reicht die ID menutop auch für alle darin enthaltenen Elemente, die Klasse menu ist komplett überflüssig. Informiere dich über Nachfahrenelemente in CSS. Dass du deine Links nicht untereinander zeigen willst sondern nebeneinander lässt sich - dafür gibts das nämlich - mit CSS festlegen, die Eigenschaft float auf das umgebende li angewendet sollte reichen.

Hab es jetzt mal geändert, habe aber keine Ahnung ob es so richtig ist:

>> style.css

#menutop {
	width: 734px;
	height: 20px;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:8px;
	margin: auto;
	background-color:#0066CC;
	text-decoration:none;
}

#menutop li {
	float:left;
	text-align:center;
	list-style:none;
	border: 1px solid #FFCC00 ;
	padding:2px;
	margin-left:2px;
	margin-right:2px;
	text-decoration:none;
	background-color:#0033CC;
	color:#FFFFFF;
}

#menutop li:hover {
	float:left;
	text-align:center;
	list-style:none;
	border: 1px solid #0033CC ;
	padding:2px;
	margin-left:2px;
	margin-right:2px;
	text-decoration:none;
	background-color:#FFCC00;
	color:#000000;

und dann auf der >> Seite

<ul id="menutop">
<li><a href="/" >Home</a></li>
<li><a href="/tipps" >Tipps &amp; Tricks</a></li>
<li>Fotos</li>
<li>Musik</li>
<li><a href="/videothek" >Videothek</a></li>
<li>Fun</li>
<li><a href="/forum" >Forum</a></li>
<li><a href="/gaestebuch/" >Gästebuch</a></li>
<li><a href="/ich/" >TEST</a></li>

<li><a href="/vorschlaege" >URL-Vorschläge</a></li>
</ul>

Es ist glaube ich von mir nicht ideal gelöst, oder?

Habe noch ein Problem:
Die Links im Menü übernehmen die Link-Einstellungen der kompletten Website. Sie sollen aber weder unterstrichen sein, noch bei hover blau werden.

Mit für jede Hilfe Dankbar.
Gruß

Antwort 22 von CSSrules

ohne das im Einzelnen jetzt nachzuprüfen:

Deine Links im Menü sprichst du besser nicht mit

#menutop li:hover

an sondern natürlich mit

#menutop a:hover

lediglich der Menüeintrag ohne Link erhält mit

#menutop li

noch ein bisschen Linkähnlichkeit verpasst

Antwort 23 von derpfleger

Zitat:
Die Links im Menü übernehmen die Link-Einstellungen der kompletten Website. Sie sollen aber weder unterstrichen sein, noch bei hover blau werden.

Dann musst du für die links innerhalb der Liste Klassen definieren und diese Klassen dann im CSS ausweisen.
Also so in der Art:

<li><a href="/" class="Klassendefinition">Home</a></li>

Du hast einen hover-Effekt für das Listenfeld definiert. Der link, der in dem Listenfeld steht überlagert das aber. Da dieser spezielle link bei dir nicht näher definiert wird, übernimmt er die allg. link-Einstellungen, die du im CSS definiert hast.

Noch was zu CSS-Supercode-Verschlimmbesserungen.
Wenn du jetzt spasseshalber mal deine Seite skalierst (vergrößerst), so wirst du feststellen, dass dieser "bessere" CSS-Code dein Layout total verreisst. Wenn man floatet passieren leider die blödesten Designzerstörungen, da muss man unheimlich aufpassen. Und bevor man am floaten verzweifelt, darf mans auch etwas weniger elegant lösen. Kommt ganz auf die Zielgruppe an...
Vorher mag der Code schlechter gewesen sein, aber die Seite war wenigstens anzuschauen.

Gruß derpfleger

Antwort 24 von derpfleger

Zitat:
Deine Links im Menü sprichst du besser nicht mit
#menutop li:hover
an sondern natürlich mit
#menutop a:hover

das ist natürlich noch besser.

Antwort 25 von Strg_Alt_Entf

Danke, aber wenn ich

#menutop a:hover

mache, ändert nur der Text Hintergrund die Farbe und nicht der ganze Kasten /Button.

Gruß

Antwort 26 von Strg_Alt_Entf

danke. ich mach morgen weiter. bis dann

Antwort 27 von CSSrules

Zitat:
Da dieser spezielle link bei dir nicht näher definiert wird,

sollte er dies tun, aber eine extra Klasse ist überflüssig, da wie oben gezeigt, diese links auch ohne Klasse eindeutig ansprechbar sind. Der OP hatte bloß fälschlicherweise versucht das Listenelement mit der Formatierung des Links zu beglücken. Das kann nur schief gehen.

Die Meinung zu float und Co kann ich nicht teilen. Das Layout bedarf ggf. der Präzisisierung, nicht aber der Schlamperei.

zu <div style="text-align:justify">
Wenn du Stylesheets benutzt hat das style-Element hier sowieso nix mehr zu suchen, sowas steht dann im Stylesheet. Aber wenn du ein DIV nur einführst um eine Textformatierung einzubauen, ist das zweifelsohne überflüssig. Weise die Eigenschaft dem Element zu, dessen Text ausgerichtet werden soll.

Antwort 28 von derpfleger

Zitat:
Die Meinung zu float und Co kann ich nicht teilen. Das Layout bedarf ggf. der Präzisisierung, nicht aber der Schlamperei.

Ich gebe dir prinzipell ja auch gerne recht, dass mit der Variante Liste horizontal floaten lassen der Code durchaus übersichtlicher wird und unnötiger Code ausgemistet werden kann. Aber gerade mit dem floaten kommen so schnell unerwünschte Nebeneffekte, die jegliches Layout zerstören können, gerade auch, weil die unterschiedlichen Browser da so ihre eigenen Interpretationen mit einfliessen lassen, dass ich sage, wer sein Design mit einem etwas unglücklich zusammengeruckelten, weniger übersichtlichen Code so hinbekommt, dass alles funktioniert, der muss nicht unbedingt alles wieder über den Haufen schmeissen, nur weil es so eleganter wäre.

Hängt natürlich davon ab, für welche Zielgruppe die Seite eingerichtet werden soll, ob man sich evtl. sogar als "Webdesigner" bezeichnen möchte und damit Geld verdienen möchte, ob es ein großes oder eher kleines Projekt werden soll usw usf...

Nichts gegen schönen Code.

By the way: @Strg_Alt_Entf: Die Art, wie du hier deine Fragen stellst, wie du die Codeteile einindest und gleich noch den link zum CSS und zu der Seite einbindest ist beispielhaft. Würden alle Fragen so gut gestellt werden, wäre es wunderbar. Das erleichtert es ungemein, sich in das Problem hineinzudenken.

Antwort 29 von LoLo

Hi, ich habe nicht alle Antworten gelesen.

Du musst das a im style weglassen

Zitat:
style.css
a.einleitung:link {text-decoration:none; color:#006600}

und dafür für jeden Link neu deklarieren z.B.

.einleitung1:link {text-decoration:none; color:#006600}

.einleitung2:link {text-decoration:underline ; color:#668800}

Das a setzt die Linkformatierung global, also für alle Links der Seite. Aber du willst ja verschiedene Links anders darstellen.

Antwort 30 von CSSrules

Zitat:
Du musst das a im style weglassen

nein, das ist einfach falsch

a.einleitung bedeutet alle Links der Klasse einleitung, nicht alle Links der Seite. Wenn du aber für jeden Link - wie in deinem Beispiel - eigene CSS-Regeln aufstellen willst, ist eine Klasse sowieso ein Griff daneben, hierfür wäre die Verwendung von IDs angemessen.

Zitat:
Hi, ich habe nicht alle Antworten gelesen.

sowas kommt von sowas

Antwort 31 von Strg_Alt_Entf

Zitat:
zu <div style="text-align:justify">
[...] Weise die Eigenschaft dem Element zu, dessen Text ausgerichtet werden soll.

Ok, habe in der style.css folgendes hinzugefügt:

a.einleitung {text-decoration:none; border-bottom:none; color:#000000;text-align:justify; font-style:italic}
a.einleitung:visited {text-decoration:none; border-bottom:none; color:#000000; text-align:justify; font-style:italic}
a.einleitung:hover {text-decoration:none; color:#FFFFFF; background-color:#0066CC; text-align:justify; font-style:italic}

dann auf der Seite:

  <p><a href="../tipps/youtube-downloaden/" class="einleitung">Videoplattformen wie Youtube, MyVideo, Clipfish, GoogleVideo, usw. [...] </a><br >
  <a href="../tipps/youtube-downloaden/">Mehr...</a></p>

<div>...</div> habe ich wie du gemeint hast weg gelassen.
font-style:italic wird akzeptiert, nur justify beachtet mein Browser nicht.

- - - - - - - - - - - - - - - - - - - - - - - - - -

So, nun zur Menüleiste:

Zitat:
wer sein Design mit einem etwas unglücklich zusammengeruckelten, weniger übersichtlichen Code so hinbekommt, dass alles funktioniert, der muss nicht unbedingt alles wieder über den Haufen schmeissen, nur weil es so eleganter wäre.

Naja zu spät für mich. Mir ist es eigentlich schon wichtig, dass es mit allen Browsern funktioniert. Vielleicht nicht 100%, aber es sollte z.B. nichts groß verschoben sein. Wie ich es davor hatte, hat es eigentlich gut funktioniert.
Aber hier scheint es wieder so zu sein, dass es einfach verschiedene Möglichkeiten und somit auch Meinungen gibt.

Was ist eigentlich schlimm daran, wenn man viel <div> verwendet?

Das Menü funktioniert jetzt so in Etwa. Habe nur noch ein kleines Problem, was aber lösbar sein sollte: Ich bekomme die Punkte vor jedem Menü- (Listen)Eintrag nicht weg.

style.css

#menutop a {
	float:left;
	text-align:center;
	list-style:none;
	border: 1px solid #FFCC00 ;
	padding:2px;
	margin-left:2px;
	margin-right:2px;
	text-decoration:none;
	background-color:#0033CC;
	color:#FFFFFF;
}

#menutop a:hover {
	float:left;
	text-align:center;
	list-style:none;
	border: 1px solid #0033CC ;
	padding:2px;
	margin-left:2px;
	margin-right:2px;
	text-decoration:none;
	background-color:#FFCC00;
	color:#000000;
}

- - - -

und index.php:

<ul id="menutop">
<li><a href="/" >Home</a></li>
<li><a href="/tipps" >Tipps &amp; Tricks</a></li>
<li><a>(Fotos)</a></li>
<li><a>(Musik)</a></li>
<li><a href="/videothek" >Videothek</a></li>
<li><a>(Fun)</a></li>
<li><a href="/forum" >Forum</a></li>
<li><a href="/gaestebuch/" >Gästebuch</a></li>
<li><a href="/ich/" >TEST</a></li>
<li><a href="/vorschlaege" >URL-Vorschläge</a></li>
</ul>

Ich freue mich wirklich, dass ihr so geduldig hilfsbereit. Vielen Dank!!!
Gruß

Antwort 32 von derpfleger

Zitat:
Ich bekomme die Punkte vor jedem Menü- (Listen)Eintrag nicht weg.

nicht

list-style:none;

sondern

list-style-type:none;

Antwort 33 von CSSrules

Zitat:
<p><a href="../tipps/youtube-downloaden/" class="einleitung">Videoplattformen wie Youtube, MyVideo, Clipfish, GoogleVideo, usw. [...] </a><br >
<a href="../tipps/youtube-downloaden/">Mehr...</a></p>

wieder eine Linkliste in irgendein anderes Element gequetscht!
Zum Problem: text-align ist eine CSS-Eigenschaft für Blockelemente, a ist keins, p schon.

Menüpunkte weg:

#menutop {
list-style-image:none;
}

Antwort 34 von Strg_Alt_Entf

Zitat:
nicht list-style:none;
sondern list-style-type:none;

Danke, es geht aber immer noch nicht.

Antwort 35 von derpfleger

Zitat:
Mir ist es eigentlich schon wichtig, dass es mit allen Browsern funktioniert. Vielleicht nicht 100%, aber es sollte z.B. nichts groß verschoben sein.

Dann schau dir mal spasseshalber deine Seite mit dem IE6 an wenn du mal woanders zu Besuch bist:
Dein menutop sieht dort treppenstufenartig (von li oben nach re unten) aus, dein Content ist nach wie vor komplett nach unten (unter den unteren Rand der gelben Menuspalte li) verschoben.

Das sind halt so die Probleme die man mit dem IE und seiner Interpretation von Randangaben und floats bekommt. Für den IE solltest du das alles nochmal aufarbeiten.

Antwort 36 von derpfleger

Zitat:
Danke, es geht aber immer noch nicht.

doch

Antwort 37 von Strg_Alt_Entf

Zitat:
doch

Jetzt gehts. Hatte es falsch positioniert.

Zitat:
Dann schau dir mal spasseshalber deine Seite mit dem IE6 an wenn du mal woanders zu Besuch bist:
Dein menutop sieht dort treppenstufenartig (von li oben nach re unten) aus, dein Content ist nach wie vor komplett nach unten (unter den unteren Rand der gelben Menuspalte li) verschoben.

Das sind halt so die Probleme die man mit dem IE und seiner Interpretation von Randangaben und floats bekommt. Für den IE solltest du das alles nochmal aufarbeiten.

Oje... danke für den Hinweis. Hatte es mal mit IE7 geteste. Da gings. Aber IE6 ist immer noch verbreitet....
Da kommt wohl noch einiges an Arbeit auf mich zu. Das mach ich dann am Besten in einem neuen Thread.

Gruß

Antwort 38 von derpfleger

Zitat:
Da kommt wohl noch einiges an Arbeit auf mich zu.

Hauptsache es macht Spass :-)

Antwort 39 von CSSrules

Zitat:
Dein menutop sieht dort treppenstufenartig

vermutlich fehlt einfach: #menutop li {display:inline;}

Zum Punkt-Problem:
So sollte das aussehen:

#menutop {
list-style-type:none;
}

Du musst diese Eigenschaft natürlich bei dem Element ändern, das sie hat, also ul#menutop und nicht irgendwelchen a!

Wenn du bei www.css4you.de nachschaust steht für jede CSS-Eigenschaft dabei, für welche Elemente sie gilt.

Zitat:
Was ist eigentlich schlimm daran, wenn man viel <div> verwendet?

es zeigt, dass du dich mit deinen Inhalten nicht auseinandersetzt. Fast immer gibt es nämlich ein HTML-Element, das exakt beschreibt, was für Inhalte kommen (Liste, Absatz, Zitat, Tabelle, Überschrift).

Antwort 40 von derpfleger

Zitat:
dein Content ist nach wie vor komplett nach unten (unter den unteren Rand der gelben Menuspalte li) verschoben.

Einfachste Lösung:

#inhaltright {
	width:580px;

statt 582 px

Antwort 41 von Strg_Alt_Entf

Zitat:

Einfachste Lösung:
#inhaltright {
width:580px;

statt 582 px

Danke. Hab's korrigiert

Antwort 42 von derpfleger

Die Treppenstufen bekommst du aber nur weg, wenn du dich an Antwort 39 hälst: display:inline gehört nicht ins a sondern ins li .
Einfach das von CSSrules geschriebene im CSS hinzufügen:

#menutop li {display:inline;}

Antwort 43 von Strg_Alt_Entf

Danke

Zitat:
Die Treppenstufen bekommst du aber nur weg, wenn du dich an Antwort 39 hälst: display:inline gehört nicht ins a sondern ins li .

Entschuldigung, hatte ich irgendwie falsch verstanden. Ich hab nicht gedacht, dass ich es 1zu1 übernehmen soll.

Gruß

Antwort 44 von derpfleger

Ein Vorschlag noch: du solltest den float-Bereich auch wieder beenden, damit dein Layout beim skalieren nicht total zerrissen wird:
also dem ersten Element das nach der gefloateten Liste kommt die Eigenschaft clear:left;
zuweisen. Das wäre in deinem Fall das

<div id=ort">

.
Also entweder

<div id="ort" style="clear:left;">

oder im CSS

#ort {.....
clear:left;
.....}

Antwort 45 von Strg_Alt_Entf

Zitat:
also dem ersten Element das nach der gefloateten Liste kommt die Eigenschaft clear:left; zuweisen. Das wäre in deinem Fall das <div id=ort">.

Danke, hab's gemacht und es funktioniert natürlich auch.

Antwort 46 von Strg_Alt_Entf

Ach was mir gerade noch spontan einfällt, jedoch nicht direkt etwas mit diesem Thread zu tun hat:
Beim Firefox unter Linux (weiß nicht, ob es bei anderen BS und Browsern auch so ist) gibt es einen Bug, bei dem das Scollen auf einer Seite nur sehr ruckartig abläuft, sobalt man

	background-attachment:fixed;

verwendet. Könntet ihr das vielleicht mal kurz bei euch testen, ob es auch so ist? Wäre echt klasse.
Gibt es einen Alternativen Befehl, der das selbe bewirkt, oder müsste ich dann auf ein fixiertes Hintergrundbild verzichten?

Gruß

Antwort 47 von derpfleger

Schon mal versucht, es als .gif abzuspeichern? Vielleicht gleich noch die Größe ändern (nur 1px breit bei gleicher Höhe, macht die Datei deutlich kleiner). Dann sollte es etwas ruckelärmer gehen.

Antwort 48 von Strg_Alt_Entf

Könnte ich natürlich mal versuchen, jedoch bin ich nicht alleine mit diesem Problem -> Foren-Thread
Allerdings weigert sich Gimp gerade zu starten...

Antwort 49 von derpfleger

Der Ruckeleffekt taucht auch bei meinem Windows-System auf, es ist also kein Linux-Problem bei dir. Allerdings ist der Effekt praktisch weg, wenn ich das Bild auf 1x1280px verkleinere und als .gif abspeichere.

Interessant an deinem Foren-Thread ist ja auch, dass es nur im oberen Bereich ruckelt solange noch das Menu und die google Ads li zu sehen sind. Weiter unten wo nur noch Forenbeiträge sind, ruckelt es nicht mehr.