nicht angemeldet
breite und schmale Navigations-lis
Auge
Matthias ApselHallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren. Vielleicht kann mal jemand einen Blick werfen. Hier die
testseiteHier der Code für den Bereich:
* {
margin:0;
padding:0;
text-decoration:none;
}
ul#navi {
position: relative;
float: left;/*
background:#990000;*/
width:100%; /* geändert von 150px auf 100% */
/* min-width:80% !important; /*
/* overflow: hidden;*/
}
ul#navi a {
/*display: inline;
padding:14px 5px 15px 14px;
*/
color:#000;
font-weight:bold;
text-align:left;
}
.aktiv
{background: #fff;}
.small{
list-style:none;
position:relative;
float:left;
/* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
/* width:10.975em Hinzugefügt 150px / 16 = 9.375em*/
width: 70px;
}
.small:hover{
list-style:none;
position:relative;
float:left;
/* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
/* width:10.975em Hinzugefügt 150px / 16 = 9.375em*/
width: 70px;
background:#a33;
color:#fff;
}
ul#navi li {
list-style:none;
position:relative;
float:left;
/* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
/* width:10.975em Hinzugefügt 150px / 16 = 9.375em*/
width: 9.375em;
}
/* Alle Ebenen ausblenden */
ul#navi ul ,
ul#navi li:hover ul ul ,
ul#navi li:hover ul ul ul {
list-style:none;
position:absolute;
left:-9999px;
background:#000;
}
ul#navi li:hover ul {
list-style:none;
background:#d8d8d8;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
ul#navi li:hover ul ul {
list-style:none;
background:#929292;
}
ul#navi li:hover ul ul ul {
list-style:none;
background:#696969;
}
ul#navi ul {
list-style:none;
top:auto; /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}
/* Einzelne Ebenen einblenden */
ul#navi li:hover ul {
left:0;
}
/* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul li:hover ul ,
ul#navi ul ul li:hover ul {
position:absolute;
left:100%;
top:0;
}
ul#navi li:hover ul li {
border-top:1px solid #fff;;
}
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi ul li:hover > a, ul#navi ul ul li:hover > a, ul#navi ul ul ul li:hover > a {
background:#a33;
width: 103px;
color:#fff;
}
ul#navi a span {
float:right;
font-weight:normal;
}
Und hier das html
<ul id="navi">
<li><a class="aktiv small" href="#">Home </a></li>
<li><a class="titel" href="#kat1">RESSORTS </a>
<ul id="knoten1">
<li><a href="#">Aktuelles </a></li>
<li><a href="#">Wirtschaft </a></li>
<li><a href="#">Kultur </a></li>
<li><a href="#">Wissen </a></li>
<li><a href="#">Medien </a></li>
<li><a href="#">Sport </a></li>
</ul>
</li>
<li><a class="titel" href="#kat3">REGIONEN </a>
<ul id="knoten2">
<li><a href="#">Nord </a></li>
<li><a href="#">Ost</a></li>
<li><a href="#">Süd</a></li>
<li><a href="#">West</a></li>
</ul>
</li>
<li><a class="titel" href="#kat2">AUSLAND </a>
<ul id="knoten3">
<li><a href="#">EUROPA</a>
<ul>
<li><a href="#">ÜBERBLICK </a></li>
<li><a href="#">NORD </a>
<ul>
<li><a href="#">Dänemark </a></li>
<li><a href="#">Schweden </a></li>
<li><a href="#">Norwegen </a></li>
</ul>
</li>
<li><a href="#">OST </a></li>
<li><a href="#">SÜD </a></li>
<li><a href="#">WEST </a></li>
</ul>
</li>
<li><a href="#">NORDAMERIKA </a>
<ul>
<li><a href="#">ÜBERBLICK </a></li>
<li><a href="#">USA </a></li>
<li><a href="#">CANADA </a></li>
</ul>
</li>
<li><a href="#">ASIEN </a>
<ul>
<li><a href="#">ÜBERBLICK </a></li>
<li><a href="#">INDIEN </a></li>
<li><a href="#">JAPAN </a></li>
<li><a href="#">THAILAND </a></li>
</ul>
</li>
<li><a href="#">AFRIKA </a>
<ul>
<li><a href="#">ÜBERBLICK </a></li>
<li><a href="#">ÄGYPTEN </a></li>
<li><a href="#">LIBANON </a></li>
</ul>
</li>
</ul>
</li>
<li class = "small"><a class="titel" href="#">S/L/XL </a>
<ul id="knoten_4" class="small">
<li class="small"><a href="#">S </a></li>
<li class="aktiv small"><a href="#">L </a></li>
<li class="small"><a href="#">XL </a></li>
</ul>
</li>
Gruß und Dank
pto
-
Hallo
Hallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren.
Ich vermute, dass deine Links beim hovern nicht gleich breit erscheinen. Wenn ich richtig liege …
Vielleicht kann mal jemand einen Blick werfen. Hier die
testseiteHier der Code für den Bereich:
ul#navi a {
/*display: inline;
padding:14px 5px 15px 14px;
*/color:#000;
font-weight:bold;
text-align:left;
}… ist das richtig so. Links (`<a>`{:.language-html}) sind per Definition Inline-Elemente. Sie nehmen also nur den für ihren Inhalt (meist Text) benötigten Platz ein. … > ~~~css /* Hover Hinter- und Vordergrundfarbe für alle Ebenen */ > ul#navi li:hover > a , ul#navi ul li:hover > a, ul#navi ul ul li:hover > a, ul#navi ul ul ul li:hover > a { > background:#a33; > width: 103px; > color:#fff; > }… Keine deiner CSS-Regeln ändert am Inline-Status des Inline-Elements
<a>etwas.
Um eine gleichmäßige Größe der Links zu erreichen, müssen Inline-Elemente zu (Inline-)Blockelementen werden (siehe dazu: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Doku, Wiki). Damit kannst du ihnen eine vom Inhalt abweichende Dimensionierung zuweisen.Zum stöbern: Listamatic: one list, many options
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3 -
Om nah hoo pez nyeetz, pto!
… finde ich sehr gelungen.
Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.
Matthias
-
Om nah hoo pez nyeetz, pto!
… finde ich sehr gelungen.
Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.
Matthias
Danke! Es wird inzwischen auch recht ordentlich genutzt. Der Wunsch nach einer individuellen Konfigurierbarkeit kam schon mal von einem Nutzer. Aber da ich das Ganze vor ca. zwei Jahren nur mit ein bisschen HTML-Kenntnissen begonnen habe, um mir und vielen Nachrichten-Kollegen den Überblick zu erleichtern (was machen eigentlich die anderen so?), kann ich nur sehr langsam voranschreiten. Schon der jetzige "Relaunch" mit schönen Tooltips und möglichst responsivem Design kostet den größten Teil meiner Freizeit. Aber ich weiß, ich werde das dann auch mal demnächst in Angriff nehmen - und hier mit vielen Fragen zu Datenbanken, Sessions etc. auftauchen...
Bis dann,
Qapla' -
Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.
Matthias
Wäre es so recht?
-
Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.
Matthias
Wäre es so recht?
Ja, ist doch auch sehr gut. Lassen sich die Einstellungen speichern und lässt sich die Reihenfolge ändern? Für meine mehr beruflichen Zwecke brauche ich halt viele News auf einen Blick in der schnellen Übersicht nebeneinander, deswegen habe ich mich dann selbst rangemacht. Es gab ja auch noch diverse feedreader und newstral.com und die verdienen (weil sie in den Niederlanden sitzen, wo andere Urheberrechtsregelungen herrschen) über die Werbung sogar Geld damit...
-
Lassen sich die Einstellungen speichern
Ja. Ein einfaches Cookie.
und lässt sich die Reihenfolge ändern?
Noch nicht. Wenn ich eine brauchbare Lösung finde, wie man mit Drag & Drop und Javascript lösen kann und Zeit finde, dann wäre das eine Idee.
Die nächste wäre dann "was mit Login" zu machen um die gespeicherten Kanäle auf mehreren Geräten zur Verfügung zu haben.
Die übernächste wäre dann daran zu arbeiten, dass man selbst Feeds (oder Webseiten, die dann den Metalink enthalten) eintragen kann...
Jörg Reinholz
-
-
Om nah hoo pez nyeetz, Jörg Reinholz!
Wäre es so recht?
http://www.fastix.org/news.phpJa, so wäre es recht. Schade, dass das CSS nicht so ganz frisch aussieht.
Wie ist das eigentlich auf der Serverseite umgesetzt?
Matthias
-
Moin moin!
Wie ist das eigentlich auf der Serverseite umgesetzt?
Konfiguration: simple Textdatei in ini-Format.
Daten: aus Feeds mit Bibliothek (magpierss)
Filter/Verarbeitung: pures PHP
Caching: Ja. Ein HTML-Sniplet pro Quelle (Feed). Gilt 5 Minuten.
Auswahl wird in Cookie gespeichert.Schade, dass das CSS nicht so ganz frisch aussieht.
Ich bin Tekki und gerade kein "Designer".
Jörg Reinholz
-
-
-
-
Om nah hoo pez nyeetz, pto!
Inzwischen habe ich auch die »mehr«–Links entdeckt. Die sollten eine andere Farbe bekommen.
Matthias
