Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Menü immer auf 100%
#1
Hallo,
habe eine ganz normale css Liste (horizontal) als Menü die ich immer auf die volle Breite z.B. 960px bringen und die li immer gleich groß sind.
Das ist ja noch einfachWink

Kommt aber irgendwan ein weiterer Menüpunkt im Typo dazu bin ich gezwungen wieder im css herumzubasteln und das halte ich für keine gute Lösung...

Weis jemand einen Ansatz oder eine Lösung für mich?
Hier noch ein Link zur Betrachtung

Danke schon mal jetzt für Eure Hilfe!
Zitieren
#2
hm - hab zwar nicht so die Erfahrung aber meine Idee wäre ein paar Dummies zu machen und die nicht benutzten mit visible: hidden unsichtbar zu machen.
Kommt was neues dazu machst Du aus hidden - visible

....aber vielleicht ist das zu naiv ?

nu gut,- Versuch wars wert...

Grüße
__________ Nick
Zitieren
#3
Danke für Deine schnelle Antwort!
Die Lösung ist zu unflexibel da muß ich dan auch immer eingreifen und das will ich ja vermeiden...
Ich habe schon einiges versucht und glaube es ist nicht mit css machbar bzw. ich weis darüber nicht bescheid Confused
Glaube das ich bei diesem Problem auf JS ausweichen muß was ich eigentlich vermeiden wollte.
Zitieren
#4
naja - das versteh ich schon.
Ich würde auch JS bis zum Schluß versuchen auszuschließen,- aber nur weil ich das nicht durchschaue.
Aber vielleicht geht sowas mit PHP ? - das könnt ich mir noch vorstellen - aber da bin ich einfach schon an meiner Grenze.
Ich kann leider nur "Kästen" aus CSS und HTML - halt für den Hausgebrauch.

Aber hier gibts mit Sicherheit noch den einen oder anderen Spezialist, der genaueres weiß.

gr. Nick
Zitieren
#5
PHP? das glaub ich nicht...
Und ist auch zu aufwändig, da müsste man wieder eine eigene Extension für Typo machen.
Habe mir schon mal einen Ansatz für JS überlegt der aber noch nicht greift weil er mir ausgibt das die Breite 0 ist Sad
Code:
$(document).ready(function(){
    var breite = 0;
    $('div.navcontainer ul li a').each(function(){
    breite +- $(this).width();    
    });
                    
    $('div.navcontainer ul li a').css('width', breite / 3);
});
Zitieren
#6
hm... da bist Du weiter als ich.

Für mich ist das irgenwie klingonisch ;-)

Hätt Dir ja gerne geholfen - aber ......

Bis denne mal

Grüßle
_________ Nick
Zitieren
#7
Vielleicht etwas umständlich, aber vielleicht mal so probieren:

im HMENU ein:
    TYPOSCRIPT Programming
  1. stdWrap.datawrap = <ul class="menu-items-{register:count_menuItems}">|</ul>


damit hast du nun immer die Anzahl der Unterseiten in der Klasse stehen, nun könntest du hingehen und per CSS die LI's entsprechend der größe anpassen.

Ich würde also empfehlen einfach im CSS den Fall bis zu einer Gewissen grenze vorzubereiten; also "menu-items-1" bis "menu-items-10" oder so.

Ansonsten bleibt dir nur noch JavaScript übrig.

[Edit]: Hach... mal wieder nicht geschaut, sind ja gar nicht im TYPO3 Forum Big Grin

also bleibt doch nur JS übrig Wink

So wäre mein JS Vorschlag:
    JAVASCRIPT Programming
  1. $(document).ready(function(){
  2. var items = $('div.navcontainer ul li').length;
  3. var breite = $('div.navcontainer').width();
  4.  
  5. $('div.navcontainer ul li a').css('width', Math.floor(breite / items));
  6. });



[Edit2]: Klammern bei "length()" entfernt Wink
MfG René
Systemadministrator, Webentwickler

pantanet.de - pantamedia.com - gosna.de

Wishlist
Zitieren
#8
Hmmm... da stimmt irgendwas nicht am Code.
.length is not a function
Zitieren
#9
Jap, nimm mal die Klammern weg, ist keine Funktion, nur ein Wert, sorry
MfG René
Systemadministrator, Webentwickler

pantanet.de - pantamedia.com - gosna.de

Wishlist
Zitieren
#10
Ja der Code stimmt jetzt, aber wenn ich einen weiteren Menüpunkt hinzufüge wird der in die nächste Zeile unterhalb verschoben mach ich das padding raus .navcontainer ul li a {padding: .2em 8.41em;} ist es zwar oben aber wird auf den Container nicht ausgebreitet.
Ist doch schwieriger als ich zu Anfang dachte.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste