Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag06.03.2012 um 12:17 (UTC)    
Titel: Navi teilen

Hallo zusammen.
Ich habe mal eine Frage: Kann man mit CSS die Navi Leiste so teilen das nach 5 Buttons soviel Platz ist um ein Bild einzufügen??

Wäre toll wenn es ginge.
MFG Marcel
Beitrag06.03.2012 um 15:26 (UTC)    
Titel:

Hallo,

am besten erstellst du einen Menüpunkt ohne Link. Diesen schiebst du dann an die richtige stelle.

Per CSS kannst du ihn dann mit Hilfe der CSS3 Pseudoklasse nth-of-type selektieren:
Zitat:
td.edit_navi_bg > table > tbody > tr:nth-of-type(X) > td


Das x musst du mit einer Zahl ersetzen. Dazu musst du zählen, der wie vielte Menüpunkt das ist. Vor jedem Menüpunkt ist allerdings noch eine weitere Tabellenreihe, deshalb musst du immer + 2 machen. Da auch die Überschrift mitgezält werden muss machst du das dann noch + 1.

Bsp. für den 3. Menüpunkt:
Zitat:
td.edit_navi_bg > table > tbody > tr:nth-of-type(7) > td

2 * 3 + 1 = 7

Jetzt kannst du das ganze formatieren. Damit die Schrift nicht zu sehen ist, machst du die Schriftfarbe transparent:
Zitat:
td.edit_navi_bg > table > tbody > tr:nth-of-type(X) > td{
color:transparent;
}


Für das Bild musst du eine Höhe setzen:
Zitat:
td.edit_navi_bg > table > tbody > tr:nth-of-type(X) > td{
color:transparent;
height:XXpx;
}

Höhe des Bildes in Pixel

Jetzt kannst du das Bild als Hintergrund einrichten:
Zitat:
td.edit_navi_bg > table > tbody > tr:nth-of-type(X) > td{
color:transparent;
height:xxpx;
background:transparent url(Url des Bildes) no-repeat;
}

______________
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 06.03.2012, 16:26, insgesamt einmal bearbeitet
Beitrag06.03.2012 um 16:55 (UTC)    
Titel:

Hallo, also es geht prima.nur wenn der Punkt noch unterpunkte hat dann teilt er diesen Punkt wenn er angklickt wird.

kann man das umgehen.

mfg Marcel
Beitrag06.03.2012 um 20:03 (UTC)    
Titel:

Mist, daran habe ich nicht gedacht. Embarassed

Dann mache es wie folgt:

Erstelle als erste wieder einen Menüpunkt ohne Link. Als Seitennamen fügst du dann ein div-Element mit einer Id ein:
Zitat:
<div id="irgendwas"></div>


Jetzt kannst du über die Id dieses Element direkt ansprechen:
Zitat:
#irgendwas


Da vor die Navipunkte aus 2 Tabellenzellen bestehen, von denen eine als Platzhaltzer nach links dient, musst du das div-Element um 11% nach links verschieben:
Zitat:
#irgendwas{
position:relative;
left:-11%;
}


Die Breite des Elementes, beträgt demzufolge dann 111%:
Zitat:
#irgendwas{
position:relative;
left:-11%;
width:111%;
}


Jetzt wieder die Höhe des Bildes festlegen und das Bild als Hintergrund definieren:
Zitat:
#irgendwas{
position:relative;
left:-11%;
width:111%;
height:xxpx;
background-image:url(Hier die Bildurl);
background-repeat:no-repeat;
}


Falls das Bild nicht über die gesamte Breite geht, kannst du noch eine Hintergrundfarbe festlegen, damit des Navibutton nicht zusehen ist.
______________
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 06.03.2012, 21:03, insgesamt einmal bearbeitet
Beitrag07.03.2012 um 09:10 (UTC)    
Titel:

Hallo also ich hab das jetzt mal so gemacht.
Es zeigt zwar die Breide an nur nicht das Bild.
Ich stell mal den Code hier rein, eventuell sieht man dann was ich falsch gemacht habe.
MFG Marcel




<style type="text/css">
<!--
#irgendwas{
position:relative;
left:-11%;
width:111%;
height:74px;
background:transparent background-image:url(http://img.webme.com/pic/r/rabenhorde/zwischenbuttonnavi.png);
background-repeat:no-repeat;
}
-->
</style>
Beitrag07.03.2012 um 11:42 (UTC)    
Titel:

Hallo ich nochmal.

Habe es hinbekommen.Der Css Code lautet so.

<style type="text/css">
<!--
#irgendwas{
position:relative;
left:-11%;
width:111%;
height:xxpx;
color:transparent;
background-image:url(bild);
background-repeat:no-repeat;
}
-->
</style>


Dankeschön für deine Hilfe.
MFG Marcel
Beitrag07.03.2012 um 12:21 (UTC)    
Titel:

Hättest du den Code direkt aus meinem letzten Beitrag kopiert, hättest du dir einen doppel Post erspart. Wink
Verwende das nächste mal bitte den Edit-Button.

Danke für die Rückmeldung.

- CLOSED -
______________
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
Beiträge der letzten Zeit anzeigen:   


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