Custom CSS - Metall Design

[Gringo885]

Hallo,

ich hab ein kleines Problem hoffe jemand der CSS kundig ist kann mir da helfen. Ich bin dabei meine Visu zu verfeinern ... für meine Idee muss ich aber zwangsläufig ans CSS ran. Da hab ich nun mal so gar keine Ahnng von bisher und bin gerade dabei mich ein wenig rein zu arbeiten. Funktioniert so "lala"

Anbei mal der aktuelle, sehr übersichtliche Stand der Custom CSS

/*
 * custom local css to overload declarations in each design (basic.css)
 */
 .strftime { font-size: 0.7em; }
#navbarTop .navbar .widget {
            font-size: 0.7em;
            height: 1em;
            width: auto;
            white-space: nowrap;
            
           }   
#navbarTop {
                height: 1.5em;
}
/*
#navbarBottom .widget {
            font-size: 0.7em;
            } */

Der letzte Block ist bewusst auskommentiert.


Was ich haben möchte ist unten und oben eine Navbar, die obere mit Infos, die untere teils mit Pagejumps (Untergeordnete Seiten), teils mit Pagejumps und Infos(Hauptmenü) . Die Obere soll dabei einzeilig sein und die untere die normale Höhe der Pagejumps behalten, aber die Schriftgröße der Widgets auf die der Pagejumps angleichen.

Die Probleme seht ihr in den Bildern.

1. Die Schriftgröße der Top Navbar zu ändern geht, aber es ist immer noch zweizeilig... den Umbruch bekomme ich nicht weg. (Auch mit white_space: nowrap)

2. Ändere ich die Höhe der Top Navbar auf 1,5 em versinkt meine untere Navbar irgendwie bzw. wir auch kleiner.

3. Ändere ich die Schritgröße der Bottom Navbar, betrifft es nicht nur die Widgets, sonder auch die Pagejumps Zusätzlich zerschießt es mir irgendwie die ganze config, also sie Läuft noch aber sieht gar nicht mehr nach dem aus was sein soll.


Kann mir da jemand helfen.


Gruß

Gringo

[peuter]

Eine Lösung kann ich Dir nicht anbieten, da ich im Moment nicht allzuviel Zeit für die CometVisu habe. Nur vielleicht ein wenig Hilfe zur Selbsthilfe.

Zumindest bei meinen Pagejumps in der Topnavbar bekommen ich den Zeilenumbruch durch

.navbar .pagejump .label > img { display: inline; }

weg. Ansonsten hilft Dir Firefox mit installiertem Firebug weiter. Da kannst Du die CSS-Einstellungen on-the-fly ändern und siehst sofort die Auswirkungen.

Gruß
Tobias

[Chris M.]

Mit dem Metal-Design hast Du aber nicht gerade was für CSS Einsteiger gewählt
(Zum Glück ist's nicht das Planet-Design, da wären noch ein paar fiese Tricks drinnen...)

Bei Metal kann ich leider auch nicht wirklich weiterhelfen - aber der Tipp von Tobias ist genau der entscheidende: nimm FireBug oder ein anderes Debug-Werkzeug über ändere erst mal das CSS live im Browser.
Was Du da herausgefunden hast kannst Du dann in die Custom.css schreiben.

Übrigens: wenn Du live was änderst, kann bei manchen Änderungen es notwendig sein z.B. die Fenstergröße kurz zu ändern. Manche Größen werden nämlich dynamisch in Abhängigkeit von anderen Größen berechnet - und das wird durch ein Resize getriggert.