mein code/ zuviele blockelemente

[neuroleptika]

....
Wird aber irgendwie zu allem möglichen missbraucht ;)

Mh,
ist wohl besser ich verwende sowas erst gar nicht.

 

[Efchen]

@elfchen ^^ ist ein zeichen um auszudrücken dass man es nicht ganz so ernst meint oder...

Hmmm...ich bin wohl doch schon etwaas lange aus der "Branche" raus :-)
In meiner IRC-Zeit vor 19 Jahren gab es sowas noch nicht ;-)

Ach, übrigens, in der geeigneten Umgebung mag ich ein Halb-Elf sein, aber "Efchen" hat damit nichts zu tun. Das wird eher mit dem Affen als mit einem Elf assoziiert.
Muss ich dann jetzt auch ^^ schreiben, damit Du weißt, dass ich mich nicht darüber ärgere, dass Du meinen Namen ständig falsch schreibst? :-)

 

[csstester]

Wird aber irgendwie zu allem möglichen missbraucht ;)

ahh, also sowas ähnliches wie div´s ^^

 

[Efchen]

Uuuuahahhh!!!

SCNR,
-Efchen

 

[littleHtml Freak]

ist der sinn hinter dem code nur, dass ich hoverefekte habe?
das ginge doch viel unumständlicher, oder?

 

[koslowski]

Hi,

ist der sinn hinter dem code nur, dass ich hoverefekte habe?
das ginge doch viel unumständlicher, oder?

welchen code meinst du??

koslowski

 

[littleHtml Freak]

den ewig langen code von dir
mfg
EDIT:
wenn es nur um einen hover effekt ging, dann habe ich, denke ich das ganz gut hinbekommen
Simon Kulozik - Home
das ist nur eine test seite; aber auf dem einen home ist ein hover effekt

 

[Efchen]

wenn es nur um einen hover effekt ging, dann habe ich, denke ich das ganz gut hinbekommen

Wenn man keine Grafiken hat, sieht man den Link nicht mal. geschweige denn den Hover-Effekt.

 

[csstester]

warum hast du in die Links ein <span> eingebaut?

Nur mal so von der logik her hättets doch auch den Links selbst die class geben können;)

 

[koslowski]

Moin,

den ewig langen code von dir
mfg
EDIT:
wenn es nur um einen hover effekt ging, dann habe ich, denke ich das ganz gut hinbekommen
Simon Kulozik - Home
das ist nur eine test seite; aber auf dem einen home ist ein hover effekt

ewig lang??
Wenn das schon ewig lang für dich ist, wie willst du dann mit ner CSS-Datei klarkommen die 400-500 Zeilen lang ist (was ja fast schon normal ist).

Außerdem hast du ihn dir ja gar nicht richtig angeschaut, sonst hättest du die gleiche Frage wie "CSS-Tester" gestellt und du hättest auch gesehen das es nicht nur um den Hover-Effekt geht.

Mit dem "ewig langen" Code sorge ich unter anderem auch dafür, das der Link der aktuellen Seite immer hervorgehoben ist und nicht auf sich selber zeigt.

@CSS-Tester Erwischt!!
Ich hätte da noch eine Erklärung anfügen müssen, damit der Sinn des spans klar wird.
Der Text ist nicht in der HG-Grafik, sondern steht im Quellcode.
Das mache ich damit die Seite noch funktioniert wenn die Grafiken deaktiviert sind.
Das span brauche ich für die Klasse, um den Text per padding wie gewünscht in der Grafik zu positionieren.
Die Klasse a zuzuweisen hat leider nicht zum gewünschten Ergebnis geführt.

koslowski

 

[littleHtml Freak]

aber wenn ich die schrift im quellcode habe kann ich nicht die schrift nehmen die ich gerne haben will...
da diese keine standartschrift ist.
zu dem "langen css": ich habe gemerkt, dass meine version auch so lang werden wird, wenn ich erst alle links definiert habe
mfg

 

[koslowski]

Hi

aber wenn ich die schrift im quellcode habe kann ich nicht die schrift nehmen die ich gerne haben will...
da diese keine standartschrift ist.

jep, kenn ich.:-)

Das leidige Thema: "Websichere Schriftarten".
Wenn man sich die dürre Liste der Schriftarten anschaut und weiß das jeder Browser andere Schriftarten "intus" hat, weswegen man ja auch immer mehrere in body definieren sollte, kriegt man als Webentwickler graue Haare.

Zumal man diese wenigen ja auch nicht wirklich schön nennen kann.

Eine Möglichkeit beides zu haben, schöne Schrift in der Grafik und häßliche im Quelltext, wäre mit einer Image Replacement Technik zu arbeiten, dort speziell nach Gilder/Levin, weil dann die Quelltextschrift nur von der Grafik verdeckt wird.
Kann aber ziemlich fummelig werden.

koslowski

 

[Efchen]

aber wenn ich die schrift im quellcode habe kann ich nicht die schrift nehmen die ich gerne haben will.

Die Leute interessiert vor allem der Inhalt einer Website, nicht die Schriftart. Klar, eine schöne Schrift wirft auch ein gutes Licht auf eine Website. Aber eine Schrift, die nicht da ist, wirft ein schlechteres Licht auf die Website, als eine schöne Schrift jemals positiven Effekt erzielen könnte.

Eine barrierefreie Lösung, die man eigentlich sowieso immer anwenden muss, will man validen Code haben, ist das alt-Attribut im img-Tag. Da kann das Menü noch so aufwändige Bilder haben oder sonstwas für eine exotische Schrift haben, wenn Images abgestellt oder technisch nicht möglich sind, wird der alt-Text angezeigt. In der Schriftart, die Du einstellst oder der Default-Schriftart des Browsers.

Problem gelöst :-)

gruß,
-Efchen

 

[neuroleptika]

/*---------Aktuellen Menuepunkt hervorheben------------------*/
#hannes #navi01 strong,
#georg #navi02 strong,
#stefan #navi03 strong   {
    background:url(../images/navi.jpg) no-repeat 0px -44px;
}
[/quote]
[I]#hannes[/I] [I]#georg[/I] und [I]#stefan[/I] sind die ID's des jeweiligen <body> aber der aktuelle Menüpunkt enthält im html schon ein anderes Tag ([I]<strong>[/I]) und bräuchten keine eigene ID.
Es reicht dann auch [I]strong[/I] über die ID der Navigation anzusprechen.
[CODE]
#navigation1  {
    width:775px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#navigation1 li   {
    float:left;
    width:187px;
    height:44px;
}


#navigation1 a,
#navigation1 strong
  {
    display:block;
    height:33px;
    text-align:center;
    background:url(../images/navi.jpg) no-repeat 0px 0px;
    text-decoration:underline;
    padding-top:11px;
}
/*---------Aktuellen Menuepunkt (strong) hervorheben------------------*/
 #navigation1 li strong
   {
    background:url(nana2.jpg) no-repeat 0px -44px;
}

/*-----------:hover und:focus-Zustand der Links-----------*/
 #navigation1 li a:hover,
 #navigation1 li a:focus,
 #navigation1 li a:active
   {
    color:#2e5c89;
    background:url(../images/navi.jpg) no-repeat 0px -44px;
    font-weight:bold;
}

<span> und alle ID's bis auf #navigation1 sind so nicht notwendig.
Die Positionsangaben habe ich entfernt.

Sollte der aktuelle Menüpunkt nicht mit <strong> hervorgehoben werden sondern wie alle anderen punkte <a> behalten, fände ich die Idee mit der body-ID gut.

Eigentlich sollte <ul> noch gecleart werden:

/* moderne Browser */
#navigation1:after  {
    content: "floatende"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* IE6 */
* html #navigation1  {
    height: 1%;
}

/*IE7*/
* +html #navigation1  {
    min-height: 1%;
}

 

[littleHtml Freak]

ich bemühe mich mal nach euren tipps meine hp zu verbessern habe jetzt nur erstmal keine zeit mehr da wir jetzt bei uns in heidelberg regatta;heart haben und ich nen haufen helfen muss ;)

@efchen: ist nur meine private hp mit der ich ein wenig spass haben möchte und auch ein wenig übe und für mich neue sachen teste;
bin gerade auch an einer anderen hp für die praxis meiner mutter da habe ich das mit hintergrundgrafs und schrift drüber gemacht.
da war auch mein ziel die benutzerfreundlichkeit und übersuchtlichkeit. andere zielgruppe eben.
bei meiner hp ist das ziel das design hab auch keine zielgruppe, wer will sich schon meine hp angucken...
ah und das mit dem elfchen.. sry hab das irgendwie immer falsch gelesen bzw. irgendwann den namen gemerkt und mit dem avatar verbunden... (eigendlich doch dann äfchen oder?)
mfg

 

[csstester]

ich bemühe mich mal nach euren tipps meine hp zu verbessern

Allein dafür lohnt es sich schon dir zu helfen;)

ist nur meine private hp mit der ich ein wenig spass haben möchte und auch ein wenig übe und für mich neue sachen teste;

bei meiner hp ist das ziel das design hab auch keine zielgruppe, wer will sich schon meine hp angucken...

Na ich hoffe doch das sich ausser uns auch noch andere auf dein "Testobjekt" verirren;)
Aber leider, oder gottseidank, es gibt keine "private"hp im Internet.. naja ausser du sicherst sie via passwort;)
Ist aber gut das du so etwas hast zum testen deiner Ideen und wünsche wie es denn mal aussehen könnte, denn wie schon meine sig sagt... nur üben übt.
Geht mir auch jeden Tag aufs neue so, ich weiß zwar einiges, aber lange nicht alles und so ist es hier auch für mich ein Klasse "übungsforum" wenn ich versuche anderen bei ihren Problemen zu helfen.

gruß
csstester

 

[koslowski]

Hi,

Zitat von Neuroleptika:
#hannes #georg und #stefan sind die ID's des jeweiligen <body> aber der aktuelle Menüpunkt enthält im html schon ein anderes Tag (<strong>) und bräuchten keine eigene ID.
Es reicht dann auch strong über die ID der Navigation anzusprechen.

kann man machen, muß man aber nicht. Ob die Selektoren noch eins weiter verschachtelt werden spielt ja eigentlich keine Rolle.

Zitat von Neuroleptika:
<span> und alle ID's bis auf #navigation1 sind so nicht notwendig.

Warum span in dem Fall für mich notwendig war, schrieb ich schon.

Eine eindeutige id für jeden Listenpunkt einer navi setze ich standardmäßig, um sie bei Bedarf ansprechen zu können.
Das löst sicher jeder anders für sich.

Zitat von Neuroleptika:
Die Positionsangaben habe ich entfernt.

Korrekt. Sind nicht notwendig.

Zitat von Neuroleptika:
Sollte der aktuelle Menüpunkt nicht mit <strong> hervorgehoben werden sondern wie alle anderen punkte <a> behalten, fände ich die Idee mit der body-ID gut.

strong in Verbindung mit einer body-ID ist durchaus üblich, um den aktuellen Menüpunkt hervorzuheben.

Das a wird beim aktuellen Menüpunkt durch strong ersetzt, damit der Link nicht auf sich selber zeigt, aber das schrieb ich auch schon.

Zitat von Neuroleptika:
Eigentlich sollte <ul> noch gecleart werden:

Richtig, gecleart werden muss, aber ob direkt nach der ul das muss offenbleiben, weil es ja nur Codeteile waren, die ich gepostet habe.
Wenn ich aber cleare dann nicht mit "easyclearing", da bin ich kein Freund von.

Ist aber eigentlich auch uninteressant, da es mir um die Funktionsweise eines grafischen Menüs ging und nicht um float/clear.

Ach ja, #navigation1 braucht kein Layout für den IE, das hat es schon durch die Angabe einer Breite (stand auch in meinem Code ).

koslowski

 

[neuroleptika]

Hi,
kann man machen, muß man aber nicht. Ob die Selektoren noch eins weiter verschachtelt werden spielt ja eigentlich keine Rolle.
.....
Warum span in dem Fall für mich notwendig war, schrieb ich schon.
.....
Eine eindeutige id für jeden Listenpunkt einer navi setze ich standardmäßig, um sie bei Bedarf ansprechen zu können.
Das löst sicher jeder anders für sich.

Ich hab das alles rausgenommen weil es in diesem Fall nicht nötig ist und littleHtml Freak der Code zu lang (kompliziert) war.

strong in Verbindung mit einer body-ID ist durchaus üblich, um den aktuellen Menüpunkt hervorzuheben.

Ja ist so üblich.
In deinem Beispiel enthält der aktuelle Menüpunkt als einziger <strong>.
Deswegen braucht man die body-ID nicht unbedingt und muß das css nicht nach einer Navigationserweiterung anpassen.

Das a wird beim aktuellen Menüpunkt durch strong ersetzt, damit der Link nicht auf sich selber zeigt, aber das schrieb ich auch schon.

Das hab ich auch so stehen gelassen. Meistens mache ich das auch so.

.....
Ist aber eigentlich auch uninteressant, da es mir um die Funktionsweise eines grafischen Menüs ging und nicht um float/clear.
Ach ja, #navigation1 braucht kein Layout für den IE, das hat es schon durch die Angabe einer Breite
...

Das (min-) height habe ich mit aufgenommen um das floatproblem für IE6 / IE7 zu umgehen. Die Internet Explorer clearen automatisch wenn das Elternelement eine (mindest-) Höhe hat.
Damit währe es z.B. möglich <ul> eine background-color ohne feste Höhenangabe zu geben.
Wenn erst das nachfolgende Blockelement clear:both; bekommt, würde das nicht funktionieren und ein Element zwischen dem letzten <li> und </ul> ist nicht erlaubt.
Wenn man das nicht braucht kann man natürlich auch später clearen.

Mein Beispiel ist nicht auf alle css-Möglichkeiten vorbereitet dafür aber etwas einfacher zu verstehen.

 

[Efchen]

@efchen: ist nur meine private hp mit der ich ein wenig spass haben möchte und auch ein wenig übe und für mich neue sachen teste

Naja, was Du privat für Dich machst, geht niemanden etwas an.
Aber ich finde es immer befremdlich, dass man auf der einen Seite eine anständige, moderne, barrierefreie, leichter zu wartende Site macht, und bei sogenannten "privaten" Sites dann wieder die alten Sünden auspackt und eine Site bastelt, die schwieriger zu erstellen, barrierebehaftet und schwieriger zu warten ist, also kurz gesagt mehr Aufwand macht, obwohl man es besser kann. Diese Einstellung habe ich schon oft beobachtet, verstehe sie aber nicht.
Ich will Dir damit keinen Vorwurf machen, ich will das nur erklären, wie ich das sehe. Das gilt eigentlich für noch viele andere Webmaster mehr.

da war auch mein ziel die benutzerfreundlichkeit und übersuchtlichkeit. andere zielgruppe eben.

Aber eine Site, die öffentlich zugänglich im Netz steht (also einen Teledienst darstellt, um das mal in der "Impressumssprache" zu formulieren), ist nicht privat.
Und bei so einem Teledienst ist die Zielgruppe immer "jeder".

Diese Ausrede über die "Zielgruppe" hört man auch so oft, und immer noch kann ich das nicht verstehen. Eine Website ist doch nicht wie ein Produkt. Die Zielgruppe bei einem Herrenschuh sind Herren, zweifellos. Aber die Zielgruppe für die Website zum Verkauf von Herrenschuhen sind doch nicht bloß Herren, sondern jeder! Gehbehinderte sind sicher nicht die Zielgruppe für Skateboards, aber in die Zielgruppe für die Website zum Bewerben oder für den Verkauf von Skateboards gehören die Gehbehinderten doch auch mit rein! Dürfen Gehbehinderte nicht Skateboards für ihre Neffen kaufen?

Deswegen verstehe ich das nicht, wie so viele Webmaster ihre Tabellenlayouts damit verteidigen dass "Blinde eh nicht zur Zielgruppe meiner Website gehören". Klar, wenn sie die Site am Ende nicht nutzen können, werden Blinde in keiner Besucherstatistik auftauchen.

bei meiner hp ist das ziel das design hab auch keine zielgruppe, wer will sich schon meine hp angucken.

Stell Dir vor, Du machst eine besch* Website (ist nur Theorie :-)) und stellst die öffentlich und dauerhaft ins Netz. Web-Anfänger kommen und kopieren sich diesen Schrott. Und vererben ihr "Wissen" weiter. Da haben wir den Salat. Solange eine Website öffentlich ist, kann man sich manchmal schon wundern, wer alles zu einem findet.
Alternativ kann man sowas auf seinem eigenen Server auf dem heimischen PC lassen oder per Zugangsschutz sichern.

ah und das mit dem elfchen.. sry hab das irgendwie immer falsch gelesen bzw. irgendwann den namen gemerkt und mit dem avatar verbunden... (eigendlich doch dann äfchen oder?)

Ist ja nicht schlimm :-)
Aber der Name kommt nicht vom Affen, sondern der Affe resultiert aus dem Namen. Und der ist nur eine ausgeschriebene Form von "F-chen" mit "F" wie "Buchstabe F". Mehr will ich hier darüber nicht erzählen, das würde zu weit gehen :-D

Gruß,
-Efchen

 

[littleHtml Freak]

habe mal ein wenig weitr gemacht.. hänge aber an einer stelle...
ich will das der link dessen ziel im moment aktiv ist das bild hat das ich auch bei :hover habe.
ich dachte das geht mit :active; geht aber nicht:!::?:
mein code:

    #navi_home a span{
        background-image: url(bilder/home.png);
                    }
    #navi_home a:hover span,
    #navi_home a:active span,
    #navi_home a:focus span {
        background-image: url(bilder/home:hover.png);
                    }

<li id="navi_home">
        <a href="index.php"><span class="link_home">&nbsp;</span></a>
    </li>

:hover funktioniert aber :active nicht
könnte es daran liegen, dass ich die navigation mit dem php befehl include in jede seite eingebaut habe?
mfg