Individuelle Navigation gestalten

Hi @ all,

bin vor kurzem erst zu contao gekommen und absoluter neuling !
Bastele gerade an meiner zweiten webseite herum und würde gerne der Individuelle Navigation farben bzw bilder zuweisen (Hintergrundbild etc. ) habe mich jetzt durch einige posts gelesen und auch getestet aber leider nichts passendes gefunden wäre schön wenn ihr mir auf die sprünge helfen könntet .

Code:

---

#left div.mod_navigation {
    width:170px;
    font-size:12px;
}

#left .mod_navigation h1 {
    margin:0 0 1em;
    font-size:14px;
    font-weight:bold;
}

#left .mod_navigation ul {
    margin:0;
    padding:0;
    background-color:#fff;
}

#left .mod_navigation li {
    margin:0;
    list-style-type:none;
}
#left .mod_navigation a,
#left .mod_navigation span {
    display:block;
    padding:15px;
    border-collapse:collapse;
    font-size:12pt;
    text-decoration:none;
    color:#000;
    border-right:2px solid rgba(242,19,19,0.75);
    background: #FFFFFF;
}

#left .mod_navigation a:hover,
#left .mod_navigation a:focus {
    font-weight:bold;
    color:#030303;
}

#left .mod_navigation span.active,
#left .mod_navigation .trail {
    font-weight:bold;
    color:#030303;
}

#left .mod_navigation li li a,
#left .mod_navigation li li span {
    margin-left:18px;
}

#left .mod_navigation li li a:hover,
#left .mod_navigation li li a:focus {
    background-color:#D87702;
    color:#fff;
}

#left .mod_navigation .submenu a {
    background-color:#fff;
    color:#333;
}

* html #left .mod_navigation ul,
* html #left .mod_navigation a,
* html #left .mod_navigation span {
    height:1%;
}

#main .mod_customnav li.first {
    background-color:#f00;
}

---

#main .mod_customnav li.first {
background-color:#f00;} funkrioniert leider nur beim ersten egal was ich jetzt versucht habe um den anderen eine neue farbe zuzuweisen hatt leider nicht geklappt

HTML-Code:

---

<div id="container">

<div id="main">
<div class="inside">

<!-- indexer::stop -->
<nav class="mod_customnav block">

<a class="invisible" href="index.php/kanzlei.html#skipNavigation4">Navigation überspringen</a>

<ul class="level_1">
<li class="first"><a class="first" title="123" href="index.php/123.html">123</a></li>
<li><a title=123" href="index.php/123.html">123</a></li>
<li><a title="Team" href="index.php/team.html">Team</a></li>
<li><a title="Rechtsgebiete" href="index.php/rechtsgebiete.html">Rechtsgebiete</a></li>
<li><a title="Service" href="index.php/service.html">Service</a></li>
<li class="last"><a class="last" title="Kontakt" href="index.php/kontakt.html">Kontakt</a></li>
</ul>

<a class="invisible" id="skipNavigation4">&nbsp;</a>

</nav>
<!-- indexer::continue -->


---

Danke schon einmal im vorraus
Gruß manu

Hallo,

wenn ich dich richtig verstehe, dann sprichst du mit li.first ja auch nur den ersten Eintrag der Liste an.
Probier mal

Code:

---

#main .mod_customnav li {
    background-color:#f00;
}

---

Damit sollten alle Li's angesprochen sein

Hi,

danke dir für deine antwort sry wnn ich mich unverständlich ausgedrückt habe ich versuche es nochmal konkreter zu beschreiben :

Code:

---

#main .mod_customnav li {
    background-color:#f00;
}

---

dass ich damit an alle rann komme ind was hinterlegen kann ist mir klar .... womit ich probleme habe ist dass ich z.b bei

<li><a title=123" href="index.php/123.html">123</a></li> eine andere farbe haben möchte als bei <li><a title="Team" href="index.php/team.html">Team</a></li> ..... sprich jeder link bzw menüfenster soll einen eigenen hintergrund bekommen z.b mit unterschiedlichen bildern

gib den verlinkten seiten eine eigene ID/class, dann kannst du für jede einen anderen hintergrund/farbe über css erstellen

Code:

---

#main .mod_customnav li.Seite1 {
    background-color:#f00;
}
#main .mod_customnav li.Seite2 {
    background-color:#fff;
}

---

Danke euch für eure tipps habe es hinbekommen !!!


Leider stehe ich jetzt noch vor einem größeren rätsel .... meine menükästchen haben jetzt eine größe von 180x180px mit einem hintergrundbild und dem Seitennamen jetzt verhält es sich gerade so: wenn ich mit der maus auf eines dieser kästchen fahre kann ich es nicht anklicken erst wenn ich auf die schrift des seitentitels gehe. Was müsste ich ändern damit den ganzen kasten anklicken kann ?

Danke schon mal im vorraus

Hallo,

hier wäre jetzt ein Link hilfreich ...
Aber ich würde mal tippen, dass du mit display:block; und einer Höhen- und Breitenangabe des Links zum Ziel kommst.

Code:

---

#id li a{
width: 180px;
height: 180 px;
}

---

könnte auch funktionieren

Hi,

sry hab gestern Abend gepennt als ich die Frage eingestellt habe, hätte das css mitposten sollen !

Code:

---

#main .mod_customnav {
    left:1px;
    position:absolute;
    font-size:12px;
}

#main .mod_customnav li {
    width:150px;
    height:40px;
    position:relative;
    float:left;
    margin:10px 2.5px;
    padding-top:110px;
    border:1px solid #050505;
    border-radius:2px;
    font-size:14pt;
    list-style-type:none;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
}

#main .mod_customnav a,
#main .mod_customnav span {
    display:block;
    margin-left:5px;
    padding:4px;
    text-decoration:none;
    color:#030303;
    border: none;
}

#main .mod_customnav a:hover,
#main .mod_customnav a:focus {
    font-weight:bold;
    color:#000;
    background: #fff;
}

#main .mod_customnav span.active {
    font-style:italic;
    color:#333;
}

#main .mod_customnav li.RA1 {
    background-color:#f00;
}

#main .mod_customnav li.RA2 {
    background-color:#7880cf;
}

#main .mod_customnav li.Team {
    background-color:#40ff00;
}

#main .mod_customnav li.Rechtsgebiete {
    background-image:url("files/Layoutbilder/Gesetzesbuecher.jpg");
}

#main .mod_customnav li.Service {
    background-color:#acbdb8;
}

#main .mod_customnav li.Kontakt {
    background-color:#cc58c8;
}

---

& noch das html

HTML-Code:

---

<div id="container">
<div id="main">
<div class="inside">
<div id="kanzlei" class="mod_article block">
<nav class="mod_customnav block">
<a class="invisible" href="#skipNavigation4">Navigation überspringen</a>
<ul class="level_1">
<li class="RA1">
<a class="RA1 first" title="RA1" href="index.php/RA1.html">RA1</a>
</li>
<li class="RA2">
<a class="RA2" title="RA2" href="index.php/RA2.html">RA2</a>
</li>
<li class="Team">
<a class="Team" title="Team" href="index.php/team.html">Team</a>
</li>
<li class="Rechtsgebiete">
<a class="Rechtsgebiete" title="Rechtsgebiete" href="index.php/rechtsgebiete.html">Rechtsgebiete</a>
</li>
<li class="Service">
<a class="Service" title="Service" href="index.php/service.html">Service</a>
</li>
<li class="Kontakt last">
<a class="Kontakt last" title="Kontakt" href="index.php/kontakt.html">Kontakt</a>
</li>
</ul>
<a id="skipNavigation4" class="invisible"> </a>
</nav>

---

Danke für eure Hilfe & Tipps

Hi
hat jemand eine ide wie ich das feld das in ------>#main .mod_customnav a,#main .mod_customnav span <----------- auf prsition von z.b. #main .mod_customnav li.Rechtsgebiete bringe und zugleich die gleiche größe einstelle wie das hinterlegte bild hatt (150x150) hab schon einiges versucht aund mir zerreist es jedes mal alles im frontend

wäre für jeden tip dankbar

HTML-Code:

---

<div id="main">
<div class="inside">
<div id="kanzlei" class="mod_article block">
<h1 class="ce_headline">infos kanzlei[/I]</h1>
<div class="ce_text block">
<p style="text-align: left;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</p>
<p style="text-align: left;">sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p style="text-align: left;">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
<p style="text-align: left;">
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
<br>
<br>
</p>
</div>
</div>
<nav class="mod_customnav block">
<a class="invisible" href="#skipNavigation4">Navigation überspringen</a>
<ul class="level_1">
<li class="123">
<a class="123 first" title="123" href="index.php/123.html">123</a>
</li>
<li class="1234">
<a class="1234" title="1234" href="index.php/1234.html">1234</a>
</li>
<li class="Team">
<a class="Team" title="Team" href="index.php/team.html">Team</a>
</li>
<li class="Rechtsgebiete">
<a class="Rechtsgebiete" title="Rechtsgebiete" href="index.php/rechtsgebiete.html">Rechtsgebiete</a>
</li>
<li class="Service">
<a class="Service" title="Service" href="index.php/service.html">Service</a>
</li>
<li class="Kontakt last">
<a class="Kontakt last" title="Kontakt" href="index.php/kontakt.html">Kontakt</a>
</li>
</ul>
<a id="skipNavigation4" class="invisible"> </a>
</nav>
</div>
</div>
</div>

---

Code:

---

#main .mod_customnav {
    left:1px;
    overflow:visible;
    font-size:12px;
}

#main .mod_customnav li {
    width:150px;
    height:40px;
    left:10px;
    position:relative;
    float:left;
    margin:10px 2.5px;
    padding-top:110px;
    border:1px solid #050505;
    border-radius:2px;
    font-size:14pt;
    list-style-type:none;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
}

#main .mod_customnav a,
#main .mod_customnav span {
    overflow:visible;
    display:block;
    margin-left:5px;
    padding:4px;
    border:1px solid #00ffea;
    text-decoration:none;
    color:#030303;
}

#main .mod_customnav span.active {
    font-style:italic;
    color:#333;
}

#main .mod_customnav li.Seeger {
    background-color:#f00;
}

#main .mod_customnav li.Würthner {
    background-color:#7880cf;
}

#main .mod_customnav li.Team {
    background-color:#40ff00;
}

#main .mod_customnav li.Rechtsgebiete {
    background-image:url("files/Layoutbilder/Gesetzesbuecher.jpg");
}

#main .mod_customnav li.Service {
    background-color:#acbdb8;
}

#main .mod_customnav li.Kontakt {
    background-color:#cc58c8;
}

---

es wäre wesentlich einfacher, wenn man zur seite einen link hätte, damit man mit firebug und co nachschauen könnte, aber vermutlich entwickelst du die seite lokal. genaue anweisungen kann man so leider nicht machen, aber mich wundert es schon, das du li eine größe von 150*40 gönnst, dein hintergrundbild aber 150+150 groß ist.

Hi,

ja leider noch lokal werde die Seite aber die tage hosten, sobald ich zugang zum server bekomme

dann kann ich auch mal ein link posten ... muss mal schaun was ich da für ein quark bei li gebaut habe danke für den tip ab und zu ist es verhext und man bemerkt die simpelsten dinge nicht!

Gruß

manu