Navigation im Footer einrichten - Anfänger

[DR7]

Hallo zusammen!

Ich bin neu hier und genauso neu auch in der Materie Contao! :-)

In Sachen HTML habe ich schon ganz gutes Wissen - würde ich mal behaupten. Nun möchte ich eine Webseite komplett selbst zusammenstellen, mit Hilfe von Contao.

Ich "hänge" nun am Einrichten der Navigation im Fußbereich. Denn diese wird mir Vertikal und nicht Horizontal angezeigt.
Bisher habe ich bereits dieses Tut durchgemacht: http://de.contaowiki.org/Die_erste_Webseite

Leider habe ich kein Thema mit einem solchen Problem gefunden. Ich hoffe, ihr könnt mir weiterhelfen!!


Vielen Dank,
DR7

[treudoof]

Hallo DR7,

das Stichwort hier lautet CSS. Vielleicht hilft dir für einen ersten Ansatz die Little Boxes Webseite von Peter Müller http://little-boxes.de/lb1/9.1-horiz...ay-inline.html

vg
Stefan

[pmmueller]

Ich "hänge" nun am Einrichten der Navigation im Fußbereich. Denn diese wird mir Vertikal und nicht Horizontal angezeigt.

Grundlage für Navigationen sind in der Regel ungeordnete Listen im HTML. Das HTML erzeugt Contao für dich. Wie dieses HTML aussehen soll, das regelt CSS.

Solange du kein CSS für das Aussehen deiner Navigation definierst, nimmt der Browser sein eigenes Browser-Stylesheet, und da stehen Listenelemente in der Regel untereinander. Wie das mit dem CSS geht, steht sowohl in meinem Contao-Buch (nur nebenbei, ohne Erklärung) als auch im brandneuen Little Boxes-Buch (ausführlich erklärt). Einen Link zur Online-Version von Little Boxes ist ja schon gepostet worden. Da kannst du reinschauen, ob dir das gefällt und ob du das verstehst.

Bei konkreten Fragen zu HTML und CSS ist ein Link zu deiner Beispielseite hilfreich. Ohne bleibt das oft Kaffeesatzleserei

[ways2web]

Hallo zusammen!
Ich "hänge" nun am Einrichten der Navigation im Fußbereich. Denn diese wird mir Vertikal und nicht Horizontal angezeigt.
DR7

dann geb mal der klasse die du deinem navigation-footer-modul verpasst hast nen float:left;
das war es dann schon

gruss.. und wenns hilft... links gibts danekschön-buttons

[DR7]

Erstmal vielen Dank für die schnelle Hilfe!!!

Hab nur leider gleich einen Termin und muss dann los.
Werde mich aber gegen Abend mal hinsetzen und mich umschauen bzw. euren Tipps folgen!


Also nochmal, vielen Dank! Werde dann posten, ob es geklappt hat! :-)

Grüße, DR7.

[DR7]

Nochmal ein nettes HALLO an alle! :-)

Also, irgendwie stehe ich auf dem Schlauch...

Ich habe im Contao-Menü unter dem Punkt "Themes" mein Theme angelegt. Dort kann ich nun versch. Optionen auswählen zum bearbeiten. Hier wähle ich dann "CSS-Stylesheets bearbeiten". Nun habe ich die Auswahl zwischen "base" (basic konnte ich es nicht nennen) oder "layout". Wenn ich nun das Stylesheet "Layout" bearbeiten will, gibts es wiederum Unterpunkte:
header - left - main - footer

In jedem dieser Stylesheets wurde jeweils nur eine Hintergrundfarbe (Backgroundcolor) festgelegt.


Hier müsste ich dann also ein neues Stylesheet, das "Navi" heißt erstellen? Aber dieses müsste ich ja dann irgendwie, irgendwo noch verlinken oder nicht?



Grüße, DR7.

[treudoof]

Hallo DR7,

theoretisch könntest du ein neues CSS File anlegen, macht aber imho gar keinen Sinn. Pack es doch einfach in das bestehende rein. Du kannst dort ja beliebig viele Selektoren anlegen. Dort müsste dann z.b. für dich in etwa das hier rein:

#footer li {
float: left
}

Natürlich solltest du ggf. die Ids oder die Klassen etwas genauer spoezifieren. Firebug kann hier oft Wunder helfen. Alternativ kannst du auch einfach mal deine Seite hier posten, dann kann man dir mit Sicherheit etwas gezielter weiterhelfen.

vg
Stefan

[MiTsch]

Hallo DR7,

Hier müsste ich dann also ein neues Stylesheet, das "Navi" heißt erstellen? Aber dieses müsste ich ja dann irgendwie, irgendwo noch verlinken oder nicht?

Jaein!
Zuerst einmal musst Du ja eine Navigation in deine Seite einfügen.
Dies machst Du in dem Du ein neues Modul "Navigation" anlegst und dann dieses in deinem Seitenlayout (z.B. in den Kopfbereich oder wo auch immer Du es haben möchtest) einfügst.

Dann kannst Du dieses Navigationsmodul über CSS Stylen.
Die Meisten Module bringen schon ID´s oder Classen mit. Über diese Selectoren kannst Du dann das Aussehen anpassen.

Zur Analyse der Zusammenhänge in deiner Webseite und zum herausfinden welche Classen und ID`s vorhanden sind kannst Du das kostenlose Addon Firebug für den Webbrowser Firefox benutzen.

Eventuell hilft Dir diesbezüglich auch dieses Tutorial weiter.

Viele Grüße
MiTsch

[DR7]

Okay, soweit ich weiß, bin ich ja schon auf dem richtigen Weg.

Muss ich die CSS-Selektoren im Navi-Modul oder in dem Theme-Stylesheet einfügen?

[kos]

Hallo DR7,

wenn Du der Empfehlung von MiTsch bezügl. Firbug folgst, dann kannst Du mit diesem nützlichen Tool feststellen, welche Selektoren von Contao verwendet werden. Nehmen wir als Beispiel die Navigation der "Music-Academy". Hier wird vom Navigationsmodul der folgende Code generiert

<div class="mod_navigation block">
<a class="invisible" href="#skipNavigation1">Skip navigation</a>
<ul class="level_1">
<li class="active first">
<span class="active first">Home</span>
</li>
<li class="submenu sibling">
<li class="sibling">
<li class="submenu sibling last">
</ul>
<a id="skipNavigation1" class="invisible" name="skipNavigation1">&nbsp;</a>
</div>

Hieraus lassen sich die IDs oder die Klassen ablesen, die dann in Deinem Stylesheet angesprochen werden müssen.

Beispiel-CSS für <li class="submenu sibling last">

.mod_navigation a, .mod_navigation li, .mod_navigation span {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

Dies kannst Du dann nach Deinen Vorstellungen anpassen.

[DR7]

Vielen Dank für eure Hilfe, es hat nun endlich geklappt! Aber keine Angst, ich war auch eine Zeit im Urlaub und kam erst vor kurzem dazu! ;-)

Wie gesagt: vielen Dank nochmal!!!