Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag19.07.2012 um 16:55 (UTC)    
Titel: Piktogramme/Bilder in die Navigation ?

Ich hab mal eine Frage, also ich würde gerne in meine Navigation, vor den anzuklickenden Seitennamen, noch kleine Bilder einfügen und wollte die Experten einfach mal fragen, ob sie wüssten ob und wie dies funktioniert.!

Danke im Voraus. Shocked
Beitrag19.07.2012 um 22:35 (UTC)    
Titel:

Hallo,

1. Möglichkeit:
Du fügst das Bild direkt im Seitennamen mit ein:

Arrow Eigene Seiten Editieren
Arrow Seite auswählen
Arrow Vor dem Seitennamen gibst du folgendes ein:
Zitat:
<img src="URL zum Bild" alt="Alternativ Text" style="width:XXpx;height:XXpx;">

Breite in Pixel
Höhe in Pixel

Ganz großer Nachteil: Der Code steht dann auch in der URL der Seite:

und in dem Balken über deinem Content wird ebenfalls das Bild eingefügt.
Ersteres lässt sich in vernünftigen Browsern mit der Html5 History-API beheben. Bei letzterem kann das Bild per CSS einfach ausgeblendet werden.



2. Möglichkeit:
Du machst all deine Seiten zu Seiten, die nicht in der Navigation sichtbar sind (siehe FAQ). Dann legst du für jede Seite eine Seite ohne Link an. Im Seiteneditor:
Arrow "Neue Seite hinzufügen"
Arrow "Optionen anzeigen"
Arrow In Text Box "Normale Seite" klicken
Arrow "Menüpunkt ohne Link" auswählen

Im Feld "Titel der neuen Seite" gibst du dann obigen Code mit einer kleinen Änderung ein. Die normale Navigation soll simuliert werden, daher verlinkst du einfach die entsprechenden Seiten:
Zitat:
<a href="URL der Seite, auf die verlinkt wird"><!-- Code von Möglichkeit 1 -->Name der Seite, auf die verlinkt wird</a>


Nachteil: Du musst dir die Unterseitenfunktion selbst per Javascript programmieren.



3. Möglichkeit:
Du fügst die Bilder dynamisch per Javascript ein.



4. Möglichkeit:
Du gibst all deinen Navigationspunkten eine ID und fügst die Bilder per CSS ein. Das ID vergeben funktioniert genauso, wie ich es in folgendem Thread für das Design Red gemacht habe:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=133210



5. Möglichkeit: (und die wirds dann wohl auch werden Wink )
Der selektierst jeden deiner Menüpunkte über den Attribut-Selektor. Hierfür bietet sich das href Attribut an. Die Links in deiner Navi haben die Klasse menu:
Zitat:
a.menu[href="/Name der Seite (Case-Sensitive!!!).htm"]


Jetzt kannst du über die Pseudoklasse before vor dem Link ein Pseudoelement einfügen:
Zitat:
a.menu[href="/Name der Seite wie er in der URL steht (Case-Sensitive!!!).htm"]:before{
content:url(URL des Bildes);
position:absolute;
top:-Xpx;
left:0;
}

Verschieben des Bildes um X Pixel nach oben, um den Text vertikal auszurichten.


Um ein wandern des Pseudoelementes zu verhindern, muss es sich trotz absolute Positionierung am Element ausrichten, auf welches es angewendet wird. Dazu muss dieses relative positioniert werden:
Zitat:
a.menu[href="/Name der Seite wie er in der URL steht (Case-Sensitive!!!).htm"]{
position:relative;
padding-left:XXpx;
}

Der Text muss noch um die Breite des Bildes nach rechts verschoben werden, da der Text ansonsten verdeckt wird.

Das ganze musst du dann natürlich noch für jede Seite wiederholen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 23.07.2012, 11:02, insgesamt 3-mal bearbeitet
Beitrag20.07.2012 um 06:33 (UTC)    
Titel:

o-4-n hat Folgendes geschrieben:
Hallo,

1. Möglichkeit:
Du fügst das Bild direkt im Seitennamen mit ein:

Arrow Eigene Seiten Editieren
Arrow Seite auswählen
Arrow Vor dem Seitennamen gibst du folgendes ein:
Zitat:
<img src="URL zum Bild" alt="Alternativ Text" style="width:XXpx;height:XXpx;">

Breite in Pixel
Höhe in Pixel

Ganz großer Nachteil: Der Code steht dann auch in der URL der Seite:

und in dem Balken über deinem Content wird ebenfalls das Bild eingefügt.
Ersteres lässt sich in vernünftigen Browsern mit der Html5 History-API beheben. Bei letzterem kann das Bild per CSS einfach ausgeblendet werden.



2. Möglichkeit:
Du machst all deine Seiten zu Seiten, die nicht in der Navigation sichtbar sind (siehe FAQ). Dann legst du für jede Seite eine Seite ohne Link an. Im Seiteneditor:
Arrow "Neue Seite hinzufügen"
Arrow "Optionen anzeigen"
Arrow In Text Box "Normale Seite" klicken
Arrow "Menüpunkt ohne Link" auswählen

Im Feld "Titel der neuen Seite" gibst du dann obigen Code mit einer kleinen Änderung ein. Die normale Navigation soll simuliert werden, daher verlinkst du einfach die entsprechenden Seiten:
Zitat:
<a href="URL der Seite, auf die verlinkt wird"><!-- Code von Möglichkeit 1 -->Name der Seite, auf die verlinkt wird</a>


Nachteil: Du musst dir die Unterseitenfunktion selbst per Javascript programmieren.



3. Möglichkeit:
Du fügst die Bilder dynamisch per Javascript ein.



4. Möglichkeit:
Du gibst all deinen Navigationspunkten eine ID und fügst die Bilder per CSS ein. Das ID vergeben funktioniert genauso, wie ich es in folgendem Thread für das Design Red gemacht habe:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=133210



5. Möglichkeit: (und die wirds dann wohl auch werden Wink )
Der selektierst jeden deiner Menüpunkte über den Attribut-Selektor. Hierfür bietet sich das href Attribut an. Die Links in deiner Navi haben die Klasse menu:
Zitat:
a.menu[href="/Name der Seite (Case-Sensitive!!!).htm"]


Jetzt kannst du über die Pseudoklasse before vor dem Link ein Pseudoelement einfügen:
Zitat:
a.menu[href="/Name der Seite wie er in der URL steht (Case-Sensitive!!!).htm"]:before{
content:".";
color:transparent;
}

Der Punkt als Content muss sein, sonst wird das Pseudoelement nicht angezeigt. Ist aber kein Problem, da du einfach die Schriftfarbe auf transparent setzen kannst.

Jetzt definierst du noch eine Breite und eine Höhe und weist dem Pseudoelement das Bild als Hintergrund-Grafik zu:
Zitat:
a.menu[href="/Name der Seite wie er in der URL steht (Case-Sensitive!!!).htm"]:before{
content:".";
color:transparent;
width:XXpx;
height:XXpx;
background-image:url(URL des Bildes);
}

Breite des Bildes in Pixel
Höhe des Bildes in Pixel

Das ganze musst du dann natürlich noch für jede Seite wiederholen.


Wow, Danke erstmal ... das hilft mir richtig weiter.
Eine Frage hätte ich aber noch : Wieviele Pixel wären für Höhe und Breite denn am besten.?
Beitrag20.07.2012 um 09:16 (UTC)    
Titel:

http://fussballfans-in-leipzig.de.tl/%3Cimg-src%3D-g-http-d--s--s-www-.-fc45-.-de-s-images-s-manufacturers-s-SG_Rotation_Leipzig-.-jpg-g--alt%3D-g-Home-g--style%3D-g-width-d-25px%3Bheight-d-25px%3B-g-%3E-G.ae.stebuch.htm

Hab jetzte die Erste Möglichkeit gewählt (vorläufig). Wie bekomme ich die Schrift nun in in die Mitte der Zeile ... und nicht so unten an den Rand gedrückt.?
Beitrag20.07.2012 um 22:21 (UTC)    
Titel:

Ich dachte eigentlich, du willst jedem Menüpunkt ein anderes Bild geben. Smile
So hättest du das auch einfacher haben können, in dem du das Bild einfach auf die Hintergrundgrifk der Buttons gesetzt und die Hintergrundgrafik dann einfach ausgetauscht hättest.

fussballfans-in-leipzig hat Folgendes geschrieben:

Eine Frage hätte ich aber noch : Wieviele Pixel wären für Höhe und Breite denn am besten.?

Das musst du probieren, so wie es dir halt gefällt.

fussballfans-in-leipzig hat Folgendes geschrieben:
Wie bekomme ich die Schrift nun in in die Mitte der Zeile ... und nicht so unten an den Rand gedrückt.?

Am besten wäre es, wenn du meinen Tipp beherzigst und Möglichkeit 5 verwendest oder jetzt wo ich weiß, dass du immer das gleiche Bild möchtest, es so machst, wie oben beschrieben.
Für Möglichkeit 5 reicht dann auch das einmalige einfügen, da ja unabhängig vom href-Attribut:
Zitat:
a.menu:before{
content:".";
color:transparent;
width:XXpx;
height:XXpx;
background-image:url(URL des Bildes);
}

Breite des Bildes
Höhe des Bildes

Wenn du es unbedingt so lassen möchtest, musst du den Code nochmal etwas anpassen. Ich mach das jetzt mal Beispielhaft für dein Gästebuch. Der Titel sieht momentan so aus:

Zitat:
<img src="http://www.fc45.de/images/manufacturers/SG-Rotation-Leipzig.jpg" alt="Home" style="width:25px;height:25px;"> Gästebuch

Als erstes musst du die vertical-align Eigenschaft des Bildes auf middle setzen:
Zitat:
<img src="http://www.fc45.de/images/manufacturers/SG-Rotation-Leipzig.jpg" alt="Home" style="width:25px;height:25px;vertical-align:middle;"> Gästebuch


Und dann braucht auch der Text die vertical-align Eigenschaft und den Wert middle. Dazu musst du ein span Element um den Text legen:
Zitat:
<img src="http://www.fc45.de/images/manufacturers/SG-Rotation-Leipzig.jpg" alt="Home" style="width:25px;height:25px;vertical-align:middle;"> <span style="vertical-align:middle;">Gästebuch</span>


Wie gesagt, ich würde einfach entweder die Hintergrundgrafik des Buttons bearbeiten oder Möglichkeit 5 verwenden.

Und gleich noch ein Tipp: Nimm die Farb und Fett Formatierung im Seitentitel raus und mach das per CSS!
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag21.07.2012 um 20:20 (UTC)    
Titel:

Brauche wieder mal Hilfe ... Smile

http://fussballfans-in-leipzig.de.tl/ <<< Ich wollte die Schriftgröße der Navigation ändern, aber diese hat sich leicht nach oben verschoben.

Code ist :


Code:
<span style="vertical-align:middle;"><img src="http://www.fc45.de/images/manufacturers/SG-Rotation-Leipzig.jpg" alt="Home" style="width:25px;height:25px;vertical-align:middle;"> <span style="vertical-align:middle;"><span style="font-size: medium;">Home</span></span>


Wie kann ich die Schrift wieder zntral kriegen.?
Beitrag22.07.2012 um 00:05 (UTC)    
Titel:

Erstmal finde ich es super von dir, dass du das wieder rausnimmst und dir denkst, die sollen das doch mal selbst eingeben, damit sie mein Problem nachvollziehen und mir dann anschließend helfen können. Rolling Eyes

Nach dem ich die Schriftgröße bei dir jetzt mal geändert habe, sieht es für mich so aus, als wäre es immer noch in der Mitte. Naja, ich habe das jetzt nicht abgemessen, bin mir aber doch relativ sicher.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag22.07.2012 um 05:40 (UTC)    
Titel:

o-4-n hat Folgendes geschrieben:
Erstmal finde ich es super von dir, dass du das wieder rausnimmst und dir denkst, die sollen das doch mal selbst eingeben, damit sie mein Problem nachvollziehen und mir dann anschließend helfen können. Rolling Eyes

Nach dem ich die Schriftgröße bei dir jetzt mal geändert habe, sieht es für mich so aus, als wäre es immer noch in der Mitte. Naja, ich habe das jetzt nicht abgemessen, bin mir aber doch relativ sicher.


Ja ich habe es geändert, nachdem meine 'home'-Seite nicht mehr funktionierte.

Und ich sehe gerade keine Vergrößerung.?
Beitrag22.07.2012 um 12:54 (UTC)    
Titel:

Er hat es wohl einfach kurz Clientseitig (zb. mit Firebug) bei sich geändert.
Davon bekommst du selber nichts mit.

Auch ich habs mal kurz bei mir vergrößert und auch da ist es genau in der Mitte.

Du trägst aber auch nicht unbedingt zur Problemlösung etwas bei:
- Die Rechtsklick-Sperre bringt nichts und behindert uns eher, als sie etwas nützt
- Wenn wir nicht sehen, was du siehst können wir dir nicht helfen:
Also entweder Screenshot und markieren, wo das Problem liegt oder das Problem auf der Website lassen.

mfg Philipp
______________
Forenregeln, FAQ, Suchfunktion
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de