Mouseover Menü - in CSS umschreiben

[czoczo]

Als erste muss ich warnen . Ich binn voll Anfänger in HTML , CSS & Co.
Trotzdem seit gewisse Zeit habe ich einen Blog gestartet . Die meisten Teile sind schon vorprogramiert , andere durch verschidene Plugins erlädigt.
Trotzdem bei manchen sachen wollte ich eigene idee verwirklichen .
Und nach mehreren versuchen klapte es dies und das .
http://www.czoczo.de/photography/

Seit zwei Tagen aber stehe ich bei einem Mouseover Grafischen Menü , die eine Breite Abstand zwischen zwei Bildern bekommen hat .
http://www.czoczo.de/sportaufnahmen/

Auf der Suche nach lösungen habe ich mehrmals gelehsen das Tabelen / HTML Coden sind inzwischen out (?) Das man sollte in CSS solsche sachen lösen .

Code: Alles auswählen

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><a onmouseover="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvan.jpg';" onmouseout="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg';" href="http://www.czoczo.de/tsv-1887-2009-2010/"><img id="image5" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg" border="0" alt="" /></a></td>
<td width="100"><img src="http://www.czoczo.de/wp-content/gallery/dies-und-das/but.jpg" alt="" /></td>
<td width="200"><a onmouseover="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgan.jpg';" onmouseout="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg';" href="http://www.czoczo.de/cdggw-2009-2010/"><img id="image6" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg" border="0" alt="" /></a></td>
</tr>
</table>

wie lösse ich dieses Problem mit CSS .
Kann mir jemand auf die Sprünge Helfen ?

[sejuma]

Im Prinzip funktioniert das genauso wie deine normale Navi im Headbereich, nämlich mit einer ul-Liste.
Sieh dich mal hier um, vielleicht hilft das weiter: http://www.ohne-css.gehts-gar.net/0022.php

[czoczo]

jeep die seite habe ich auch schon gesehen ....
bin grade dabei an "Studieren"
bin gespannt ob es was wird

[czoczo]

Wie es aussieht ich werde davon nicht klug .
Trotzdem muss ich das Problem lösen

deswegen habe ich angefangen das Fehler in der Theme zu suchen .
was ich inzwischen schon gelernt habe Das „border“ HTML Attribut hat keinen Einfluss wenn eine CSS Regel bevorsteht .

Und wie es bei einem anderen Theme gesehen habe das Mouseover menü wurde wo anders 100% dargesstellt - also doch eine unterschidliche CSS die diese Probleme bei mir verursacht haben .

aber wo
Im Stylesheet habe ich ein Eintrag gefunden
table {
border-collapse: collapse;
border-spacing: 0;

hier ist das Border auf 0 gestellt - oder suche ich einfach am falsche stelle?
Bitte um Hilfe das Problem zu lösen

[sejuma]

Das ist jetzt wirklich verschlimmbessert, weil ich nach wie vor eine ul-Liste für sinnvoller erachte.

Aber so funktioniert es auch:
Lass die ganze Tabelle weg:

Code: Alles auswählen

<a onmouseover="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvan.jpg';" onmouseout="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg';" href="http://www.czoczo.de/tsv-1887-2009-2010/"><img id="image5" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg" alt="" border="0"></a>
<img src="http://www.czoczo.de/wp-content/gallery/dies-und-das/but.jpg" alt="">
<a onmouseover="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgan.jpg';" onmouseout="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg';" href="http://www.czoczo.de/cdggw-2009-2010/"><img id="image6" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg" alt="" border="0"></a>
<div style="clear: both;"><!--Clear-Div-->

und in CSS füge ein:

Code: Alles auswählen

img {float: left;}

Das wirkt sich aber auf alle Bilder aus und kann deshalb an anderer Stelle zu Problemen führen. Deshalb verwende evtl. zusätzlich für diesen Teil eine Klasse, die du den images noch zuweist.

[czoczo]

Das ist jetzt wirklich verschlimmbessert, weil ich nach wie vor eine ul-Liste für sinnvoller erachte....

...Das wirkt sich aber auf alle Bilder aus und kann deshalb an anderer Stelle zu Problemen führen. Deshalb verwende evtl. zusätzlich für diesen Teil eine Klasse, die du den images noch zuweist.

Sejuma - Danke für die Hilfe . Trotzdem erfolgreich war Sie nicht
Der Button bleibte weiter in seinem zustand - dafür wie Du gesagt hast Probleme sind wo anders gekommen .

Ich muss langsam mir überlegen ob nicht besser währe ein normallen Link zu setzten .
Wenigstens wird das auf irgendetwas aussehen . Weil selber das zu umschreiben auf CSS - Packe ich nicht . Inzwischen träume ich schon über diese sache

Noch mall Danke !
und Frohe Ostern

wen Dir noch was einfält - werde ich mich freuhen für jeder Hilfe

[czoczo]

Ich habe geschaft !!!

Habe eine CSS geschriben für die Tabele und die neu zwischen den <li></li> gesetzt .
Es hat geklappt

trotzdem immer noch fragen über fragen .
1 . es hat sich unter dem Button (Links) ein Dicke Punkt gezeigt - wieso?
2 . wie zentriere ich den Button . Habe versucht in dem CSS float einzutragen aber keine veränderung

Code: Alles auswählen

#TABLEMOUSE {
border-style: none
border: 0
margin: 0
float: absolute;
}

#MOUSHORISONTAL {
border-style: none
border: 0
margin: 0
}

habe ich überhaupt das Richtig gemacht ?
#TableMouse - ist das Grundgerüst die Tabele
#Moushorisont - soll die einzelne spalten ansprechen

am anfang habe ich nur das 2 eingetragen , allerdings obwohl die abstände zwischen den Bildern viel kleiner waren trotzdem kleine abstände waren immere noch .
erst wo ich das 2 Eigetragen habe ....wurde es perfekt .

Grade habe ich was anders Probiert und es hat geklappt
ich hab vorher bei <ul> & <Div> angesprochen
TableMouse hat das <Div></Div> angesprochen
das Moushorisontal hatte <ul></ul> angesprochen .
das <ul> braucht man nicht

ich hab heut wirklich viel gelernt

[sejuma]

Du bist jetzt schon mal auf dem richtigen Weg.
Allerdings darf innerhalb von ul nur li vorkommen. Also musst du alle drei Teile jeweils in einen li packen.
ul wird zentriert und die li's werden gefrloatet, damit sie nebeneinander kommen. Der Punkt verschwindet dann mit list-style: none;
Der Div ist überflüssig, da du auch ul einen ID direkt zuweisen kannst:

Code: Alles auswählen

#tablemouse {
width: 500px;
margin: 0 auto;
}

ul {list-style: none;}
li {float: left;}

Code: Alles auswählen

<ul id="tablemouse">

<li>
<a onmouseover="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvan.jpg';" onmouseout="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg';" href="http://www.czoczo.de/tsv-1887-2009-2010/"><img id="image5" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg" alt="" border="0"></a>
</li>

<li>
<img src="http://www.czoczo.de/wp-content/gallery/dies-und-das/but.jpg" alt="" border="0">
</li>

<li>
<a onmouseover="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgan.jpg';" onmouseout="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg';" href="http://www.czoczo.de/cdggw-2009-2010/"><img id="image6" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg" alt="" border="0"></a>
</li>

</ul>

Perfekt wird das Ganze dann, wenn du den ganzen onmouse-Kram noch rausschmeißt und die Links mit Hintergrundgrafiken versiehst, wie hier unter 2 beschrieben:
http://www.ohne-css.gehts-gar.net/0022.php

[czoczo]

@sejuma - Danke für dein Ensatzt , langsam fange ich das zu verstehen
obwohl manche sachen mache ich doppelt und dreifach .

Mit dem onmouse-Kram hast Du vieleicht recht . Leider wie Du siehst ahnung davon habe ich =0
deswegen dies werde ich vieleicht später machen wen ich das ganze ein wenig verstanden habe .
Da ich voll "Verliebt" bin in solschen spielereien will ich auf das Button wechsel nicht ganz verzichten

Ich habe noch gestern nacht ein wenig experimentiert und das Zentrieren mit
text-align: center; erreicht .

Code: Alles auswählen

#TABLEMOUSE {
text-align: center;
border-style: none
border: 0
margin: 0 0 0 0;
}

auch das CSS eintrag inzwischen für andere Buttons angewendet . Es klappt !
Das <Div></Div> habe ich gelöscht und das Tablemouse auf <ul></ul> angewendet - hat geklappt .

zu dem Button Code
Ich habe den ganzen Code zwischen einen <li></li> gesteckt ( nicht jedes teil einzeln) - es hat funktioniert

Code: Alles auswählen

<ul id="TABLEMOUSE" >
<li><a onmouseover="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvan.jpg';" onmouseout="image5.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg';" href="http://www.czoczo.de/tsv-1887-2009-2010/"><img id="image5" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/tsvaus.jpg" border="0" alt="" /></a><img src="http://www.czoczo.de/wp-content/gallery/dies-und-das/but.jpg" border="0" alt="" /><a onmouseover="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgan.jpg';" onmouseout="image6.src='http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg';" href="http://www.czoczo.de/cdggw-2009-2010/"><img id="image6" src="http://www.czoczo.de/wp-content/gallery/dies-und-das/cdgaus.jpg" border="0" alt="" /></a></li>
</ul>


Es ist ein wenig unübersichtlich - aber es funktioniert . Bei nächsten mal werde ich versuchen die einzeln reinsetzten .

ul {list-style: none;}

habe ich allerdings Probleme . Laut SELFHTML und deine Hilfe sollt das Funktionieren aber es macht nicht
Ich habe das inzwischen überal reingesteckt in CSS Code dierekt in
<ul list-style: none; id="BUTTONHORISONT" > bei dem Beitrag selbst . es klappt einfach nicht

[sejuma]

Das klappt u.a. deshalb nicht, weil deine Seite noch viele Validierungsfehler hat:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.czoczo.de%2Fsportaufnahmen%2F
D.h., dass dein Code nicht den allgemein definierten Regeln entspricht und deshalb auch nicht korrekt angezeigt wird.
So sind die Styleangaben für ul falsch eingebunden und du verwendest nach wie vor nur einen li anstelle von dreien.

Was hindert dich denn daran, einfach mal meine zuletzt geposteten Codeschnipsel zu verwenden.

Den Bildwechsel bekommst du ohne onmouse-Kram hin, indem du den Linkzuständen für a bei a:link und a:hover unterschiedliche Klassen mit unterschiedlichen Hintergrundgrafiken zuweist. Das funktioniert im Endeffekt genauso.

Ich geb's ja zu: Es ist etwas aufwendig, das alles zu lernen. Aber nur wenn dir die Bedeutung und die Zusammenhänge von allem bewusst sind, wirst alles auch verstehen und somit auch dauerhaft Spaß an deiner Website haben.

[czoczo]

Was hindert dich denn daran, einfach mal meine zuletzt geposteten Codeschnipsel zu verwenden.

Ich habe den schnipsel probiert und habe das ergebniss bekommen

Ich bekomme jetzt die punkte uzwischen jeder teil und dazu noch ein abstand .
und ausserdem wen ich das
ul {list-style: none;}
li {float: left;}
eintrage wird mein sidebar ausseinander genohmen
nach dem ich das eintrag lösche kommt Sidebar zu ruhe
aber dafür das Buton wird teil für teil untereinander angezeigt

Was mich aber ein wenig stützig macht sind die eintrege im stylesheet

Code: Alles auswählen

ol, ul {
   list-style: none;
}

es existiert schon ganz oben solsche eintrag , wieso also graifte nicht auf die <ul> an ?

das gleiche

Code: Alles auswählen

.postContent th, .postContent td {
border:none;
}

auch oben schon da trotzdem erst wo ich das nocheinmal unten geschrieben habe
sind die ränder von der Tabelen verschwunden .

für mich ein wenig kommisch - aber ich habe keinne ahnung .

Was mich noch interessiert ( lektion für blödis )
wen ich ein CSS schreibe
#egal {blablablka format für egal}

wen ich schreibe das <ul id=egal> heist das allez was zwischen den <ul> und </ul> sich befindet wird mit dem #egal "formatiert"
wieso also werden die einträge noch mit einem anderen CSS formatiert obwohl ich das #egal anspreche ?

Blöd gefragt aber wie man sieht habe nicht ganz viel ahnung

Langsam habe ich das gefühl das in dem theme steckt wirklich viel fehler
und wen ich eine andere Theme genommen hätte vieleicht währe das nicht so komliziert

[sejuma]

OK, dann bleiben wir nochmal bei meinem geposteten Code:
dioe ul und li-angaben schlagen natürlich auch auf alle anderen Listen durch.
Das kannst du verhindern, indem du den entsprechenden ID hinzufügst:

Code: Alles auswählen

#tablemouse ul {list-style: none;}
#tablemouse li {float: left;}

In diesem Fall betrifft das alle ul, li innerhalb des id tablemouse.

Bei mir hat der gepostete Code funktioniert.

[czoczo]

@ sejuma - ich weist nicht wie ich Dir Danken soll , für deine ausdauer .
Trotzdem es hat nicht funktioniert
hier ein kleines vorstellung was ich gemacht habe
http://www.czoczo.de/test/ dort ist der Button mit einzenen <li>
http://www.czoczo.de/sportaufnahmen/dort ist der ganze Button zwischen 2<li> ( am anfang und ende)

Code: Alles auswählen

#TABLEMOUSE {
text-align: center;
border-style: none;
border: 0;
margin: 0 0 0 0;
}

#BUTTONHORISONT {
text-align: center;
border-style: none;
border: 10;
margin: 0;
}

#tablemouse ul {list-style: none;}
#tablemouse li {float: left;}

wen ich die tablemouse ul mit grossen Buchstaben schreibe ( ich glaube so soll es sein) werden die Buttons ausseinander genommen .
wen ich die so lasse wie es ist den ergebniss siehts Du ( sehe Links oben ).

Inzwischen habe ich zu dem Theme macher ein email geschrieben .
irgendwas in meinen Augen ist hier faul . vor allem wen bei Dir läuft und bei mir nicht ist es beweis das die restliche Stylesheet bei mir zimmlich durcheinander ist .
Bin gespant ob ich einen Antwort bekomme.

Auch einen Antwort habe ich von meine Frau bekommen
die Taschen stehen bei mir vor meine Computer ecke
habe ganze Ostern Dir & mir mit dem coden zeschossen .
SORRY

[sejuma]

Solche Sachen passieren am Anfang. Es zeugt aber nur von deiner Hartnäckigkeit und deinem Durchhaltevermögen.

Füge in deiner Testversion bei li noch ein margin: 0; hinzu, dann sollte es wirklich klappen:

Code: Alles auswählen

#tablemouse li {float: left; margin: 0;}

Es ist natürlich ein Unterschied, ob du Groß- oder Kleinbuchstaben verwendest. Das sind dann zweierlei Definitionen, wovon dann nur die identischen greifen.
Gewöhne dir am besten durchgehend Kleinschrift ohne sonder- und ohne Leerzeichen an.

[czoczo]

@sejuma - klasse ich weis nicht wie ich Dir danken soll oder
es ist fast Perfekt .

trotzdem habe eine frage .
durch das neue CSS sind jetzt die teile nach Links gerückt - wie wird das ganze Kram zentiert ?

ich hab versucht das <ul> mit einem text-align: center; es hat aber nicht geklappt
für mein kleines gehirn soll das <ul> aber zentreirt werden oder?

Es ist wirklich klasse das Du dir soviel gedanken machst über meine Probleme .

[sejuma]

So wie bereits gepostet, wobei du den Pixelwert evtl. noch anpassen musst:

Code: Alles auswählen

#tablemouse {
width: 500px;
margin: 0 auto;
}

[czoczo]

@ sejuma - PERFEKT es sieht schon recht Gut aus .
jetzt werde ich die Alten Tabelen versuchen in dieses art umzuschreiben .
Und langsam mich mit dem CSS befassen
trotzdem ist noch ein Fehler/Problem entstanden .
Ich habe die Buttons in einem Bericht draufgesetzt und dort sind sie ganz anders angezeigt .

Ich bin inzwischen Rattlos - von Minute zu Minute verstehe ich weniger
http://www.czoczo.de/2010/04/04/fruhjahrs-putz-ist-abgeschlossen/
wie vermeinde ich das der Text sich um die Buttons "wickelt"?

[sejuma]

Das Problem scheint nicht in allen Browsern zu bestehen.
Ich vermute jedoch, dass es an einem fehlenden Clear liegt.

Füge mal das jeweils nach den ul-Listen ein:

Code: Alles auswählen

<div style="clear: both;"><!--Clear-Div--></div>

[czoczo]

ICH DANKE DIR!
was habe ich heute nicht versucht um das selbst zu erlädigen .
Ich glaube ... für dieses Thema ist also Erlädigt .
jetzt werde ich langsam mich antasten müssen an die Fotografie seite
Dort habe ich das ganze auch mit den Tabelen alles aufgebaut .
Bin gespant auf das ganze und hoffe das ich Dir nicht so offt auf den " sack" gehen werde .

Trotzdem hoffe wenn ich noch fragen/hilfe brauch kann ich mich an dich wenden ?

Viele Grüsse aus Wuppertal
czoczo-marius

[sejuma]

Kein Problem, dafür kann ich von dir bei meinem anderen Hobby noch viel lernen: http://www.ohne-handballfotos.gehts-gar.net/index.php

Mach dann aber je Thema am besten einen neuen Beitrag auf.

[czoczo]

Klasse Seite hast Du aufgebaut !
Gratulire !
habe ich am Anfang auch gedacht reine Handball Fotogalerie zu machen . aber man fotografiert nicht nur Handball

Viele Grüsse