| Autor |
Nachricht |
-
rabenhorde
Wohnort: im dunklem Walde
|
 06.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 |
|
|
↑
|
|
 |
|
|
06.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;
}
Zuletzt bearbeitet von o-4-n am 06.03.2012, 16:26, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
rabenhorde
Wohnort: im dunklem Walde
|
06.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 |
|
|
↑
|
|
|
|
|
06.03.2012 um 20:03 (UTC)
Titel: |
|
|
Mist, daran habe ich nicht gedacht. 
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:
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
|
|
|
↑
|
|
|
-
rabenhorde
Wohnort: im dunklem Walde
|
07.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> |
|
|
↑
|
|
|
-
rabenhorde
Wohnort: im dunklem Walde
|
07.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 |
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
|
