Breadcrumb-Navigation mit CSS formatieren

[goesta]

Hallo zusammen,

ich habe vor kurzem meinen Job gewechselt und soll mich bei meiner neuen Firma nun auch ein bischen um den Web-Auftritt kümmern. Ich beschäftige mich nun auch schon seit ein paar Tagen mit Redaxo und CSS und behaupte, dass ich mir bereits ein paar Grundlagen angeeignet habe.
HTML-Grundkenntnisse sind schon seit längerem vorhanden, mit PHP bin ich vorher allerdings leider noch nie in Berührung gekommen.

Ich habe mir mal die Templates/CSS unseres bisherigen Web-Auftrittes angesehen und kam zu der Einschätzung, dass die 4 eingebundenen CSS-Dateien relativ chaotisch aufgebaut sind. Außerdem habe ich festgestellt, dass sie sich teilweise sehr ähneln bzw. bis zu einer gewissen Zeile sogar identisch sind. Muss das so sein? Oder kann ich mich auch auf eine einzige CSS-Datei beschränken? (Wer es sich mal ansehen möchte: http://www.goesta.de)

Also habe ich mir gedacht, dass ich mich besser von Grund auf mal mit der ganzen Angelegenheit befasse und versuche nun, das Template "nachzubauen" bzw. auch ein wenig "umzubauen". Meine ersten Versuche sind hier zu sehen:http://www.goesta.de/testredaxo

Nun bin ich an der Stelle angelangt, an der ich die Breadcrumb-Navigation formatieren möchte, habe allerdings keine Ahnung, wie ich das anstellen soll und wo ich nachsehen kann, welche Klassen oder IDs für das Breadcrumb-Template definiert sind!

Hier mal das Breadcrumb-Template:

Code: Alles auswählen

<?php

// ---------- BREADCRUMB

// Beginne in der Wurzelkategorie
// 1 Ebene Tief
// Nicht aufklappen (hier egal da nur 1 Ebene)
// Offline ausblenden 

$category_id = 0;
$includeCurrent = TRUE;

// navigation generator erstellen
$nav = rex_navigation::factory();

echo '<div id="breadcrumb">';
if ($REX['CUR_CLANG'] == 1)
{
  echo '<p>You are here:</p>'. $nav->getBreadcrumb('Startpage', $includeCurrent, $category_id);
}
else
{
  echo '<p>Sie befinden sich hier:</p>'. $nav->getBreadcrumb('Startseite', $includeCurrent, $category_id);
}
echo '</div>';
?>

Hier meine CSS (einige Einträge, z.B. die Klasse "kursiv", wurde nur zum Testen angelegt):

Code: Alles auswählen

#background-image
{
width:100%;
position:fixed;
top:0;
left:0;
}



/* <<<<<<<<<<<<<<<< Definition der Pseudo-Klassen >>>>>>>>>>>>>>>> */

a:link
{
color:#99cc99;
}

a:visited
{
color:#99cc99;
}

a:active
{
color:#99cc99;
}

a:hover
{
color:#99cc99;
font-style:italic;
}



/* <<<<<<<<<<<<<<<<< Definition der IDs (Formatierung der DIVs) >>>>>>>>>>>>>>>>>> */

#site
{
width:950px;
margin: 0 auto;
position: relative;
}


#header
{
width:950px;
color:#0000ff;
position: relative;
}

#hauptbereich
{
width:950px;
position: relative;
}

#navigation
{
float:left;
background:#ffffcc;
width:200px;
position: relative;
}

#content
{
width:730px;
background:#dcdcdc;
padding-left: 10px;
padding-right: 10px;
position: relative;
}

#footer
{
clear:both;
text-align:center;
width:950px;
color:#ffffff;
background:#6600ff;
position: relative;
}

#breadcrumb
{
list-style: none;
}



/* <<<<<<<<<<<<<<< Definition der Klassen >>>>>>>>>>>>>>>>> */

.kursiv
{
font-style:italic;
}




/* <<<<<<<<<<<<< Definition der Selektoren >>>>>>>>>>>>>>> */




*
{
color:#ff0000;
font-size:12px;
font-family:verdana, helvetica, arial, sans-serif;
}


h2
{
color:#0000ff;
font-size:20px;
}

Kann mir jemand Tipps geben, wie ich hier weitermachen kann und wo ich die gewünschten Informationen finde bzw. wo ich die angesprochenen Formatierungen durchführen kann?

Vielen Dank für Eure Unterstützung

Viele Grüße

Mario

[rkemmere]

Im Quellcode stehen die IDs oder Classes der Navigation.
Diese kannst Du dann per CSS ansprechen.

Beispiele:

div#breadcrumb ul.rex-breadcrumb li.rex-lvl1 {float: left;margin-right: 20px;}
div#breadcrumb ul.rex-breadcrumb li.rex-lvl1 a {color: #00777F;text-decoration: none;}

[goesta]

Vielen Dank für die schnelle Antwort.

Bedeutet das dann, dass ich mich aus dem durch Redaxo generierten Quelltext meiner eigenen Seite erst mal schlau machen muss, welche Klassen und IDs Redaxo an sich verwendet? Und an diese Klassen und IDs muss ich mich dann halten und meine Formatierungen in der CSS-Datei unterbringen? Ist das korrekt?

[Cheffchen]

Hallo,

im grunde ja, das trift aber nur bei der Navigation zu, denn sonst überall legst das selber fest.

Die entscheidung das von null neu zu machen ist die richtige.
Bevor weiter machst such mal nach einer reset.css und füge die als erstes ein und dann machst nichts mehr an dieser.
Die Frage ist nur wie weit du dich am alten halten musst/möchtest?
Ein klein Facelift kann das vertragen wie selber schon festgestellt hast.
(grauer hintergrund *schüttelts*, etwas Schatten mit css, kopfbereich etwas anders gestallten und schon sieht das ganz moderner aus und das aller beste der Inhalt bleibt unberührt da nur am Template rumbauen brauchst)

Cheffchen

[goesta]

Super, danke für den Tipp mit der reset.css. Ich habe mich sofort auf die Suche gemacht und sie entsprechend eingebunden.
Ist die Reihenfolge bei der Einbindung von CSS-Files von Bedeutung? Werden die Formatierungen aus der main.css wieder zurückgesetzt, wenn diese vor der reset.css eingebunden wird? Oder ist die Reihenfolge egal?

Zu einem bestimmten Grad sollte ich mich natürlich an die Vorgabe halten. Die Hauptgründe, warum ich das Template komplett neu aufsetzen möchte ist zum Einen, dass ich dadurch gezwungen bin, mich mit der ganzen Thematik inteniv zu beschäftigen. Zum Anderen sind spätere Modifikationen um ein Vielfaches einfacher durchzuführen, da man sich nicht in was komplett Fremdes einarbeiten muss.

Wenn es dann mal so weit ist, können auch Änderungen durchgeführt werden, die jetzt noch wie ein riesiges Problem aussehen!

[Cheffchen]

Hallo,

die Reihenfolge ist sehr wichtig.
Von oben nach unten.
Deswegen muss die Reset als erstes eingebunden sein und danach kommt deine, sonnst würde die Reset wieder sachen zurücksetzen die du vorher gesagt hast.

Cheffchen