Navi mit 3 Ebenen - 2 Horizontal / 1 Vertikal

Wie verwendet man Templates oder erstellt Navigationen und passt diese an.

Beitragvon Nic » 8. Feb 2006, 15:35

Die Url zur Ansicht ist http://www.time42.de
Nic
 
Beiträge: 82
Registriert: 18. Jan 2006, 15:20
Wohnort: Steinfurt/Westf.

Beitragvon Markus.Staab » 8. Feb 2006, 15:40

Hi Nic,

welche Artikel auf der Seite haben das gleiche Template, welches nicht gleich aussieht?

Gruß,
Markus
Benutzeravatar
Markus.Staab
Entwickler
 
Beiträge: 9781
Registriert: 29. Jan 2005, 14:50
Wohnort: Aschaffenburg/Germany

Beitragvon Nic » 8. Feb 2006, 16:01

Mit den Artikeln iss alles ok. Es geht nur um die Navi.
So wie ichs vorher beschrieben hab. Und jetzt seh ich das im IE alle Schriften viel größer dargestellt werden. AAAAAHHHHHHHHHHHH.....
Ich steck noch in den Kinderschuhen was css, php usw. betrifft. Aber Redaxo sah gegenüber allen andderen cms so "einfach" und trotzdem leistungsfähig aus dass ich meinem Bruder gesagt hab ich mach die dir Seite und jetzt krieg ich einen Anfall nach dem nächsten. Aber nützt ja nix. Versprochen iss versprochen...

Weißt du was ich mein mit meiner Beschreibung des Navi-Problems oder iss das doof beschrieben?
Nic
 
Beiträge: 82
Registriert: 18. Jan 2006, 15:20
Wohnort: Steinfurt/Westf.

Beitragvon svenalbert » 8. Feb 2006, 16:30

das problem liegt in der formatierung mit den listen.

die subpunkte werden ja mit in den oberpunkt integriert.
vielleicht solltest du dir einfach für die zweite ebene auch eine weitere variable "ausdenken" und dieses dann einfach unter der ersten navi darstellen.

vielleicht hat der thomas ja auch noch ne idee, wie man das evtl. per css formatieren kann. ich könnte mir vorstellen, daß man über die postion-angabe die zweite ebene aus der ersten quasi rausnehmen könnte.

Sven
Benutzeravatar
svenalbert
 
Beiträge: 1295
Registriert: 24. Nov 2005, 16:21
Wohnort: Clausthal-Zellerfeld / lower saxony

Beitragvon Nic » 8. Feb 2006, 16:47

:-) jaja, so meine ich das eigentlich auch. Nur ich kanns nich umsetzen :-( Wär dankbar für jede Hilfe!!!

THX
Nic
 
Beiträge: 82
Registriert: 18. Jan 2006, 15:20
Wohnort: Steinfurt/Westf.

Beitragvon svenalbert » 8. Feb 2006, 23:17

css für nav1st nav2nd und nav3rd mußte aber evtl. noch anpassen.


Code: Alles auswählen
<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = $PATH[1];
$path2 = $PATH[2];
$path3 = $PATH[3];


/* START 1st level categories */
$nav1 .= '<ul class="nav1st">';
foreach (OOCategory::getRootCategories() as $lev1) {
     
   if ($lev1->isOnline(true)):
      if ($lev1->getId() == $path1) {
         $nav1 .= '<li class="active"><a class="current" href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
      }
      // 2nd level - no active link
      else {
         $nav1 .= '<li><a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
      }
         
      // 1st level had categories? -> go on
      $lev1Size = sizeof($lev1->getChildren());
   
      if ($lev1->getId() == $path1) {
         if ($lev1Size != "0") {
            $nav2 .= '<ul class="nav2nd">';

            // START 2nd level categories
            foreach ($lev1->getChildren() as $lev2):
               if ($lev2->isOnline(true)) {
                  // 2nd level - active link
                  if ($lev2->getId() == $path2) {
                     $nav2 .= '<li class="active"><a class="current" href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
                  }
                  // 2nd level - no active link
                  else {
                     $nav2 .= '<li><a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a>';
                  }
                 
                  // 2nd level had categories? -> go on
                  $lev2Size = sizeof($lev2->getChildren());
   
                  if ($lev2->getId() == $path2) {
                     if ($lev2Size != "0") {
                        $nav3 .= '<ul class="nav3rd">';

                        // START 3rd level categories
                        foreach ($lev2->getChildren() as $lev3):
                           if ($lev3->isOnline(true)) {
                              // 3rd level - active link
                              if ($lev3->getId() == $path3) {
                                 $nav3 .= '<li class="active"><a class="current" href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
                              }
                              // 3rd level - no active link
                              else {
                                 $nav3 .= '<li><a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
                              }
                           }
                        endforeach;
                        // END 3rd level categories
     
                        $nav3 .= '</ul>';

                     } // END by if ($lev2Size != "0"):
                  }
                  $nav2 .= '</li>';
               }
            endforeach;
            // END 2nd level categories
     
            $nav2 .= '</ul>';
         } // END by if ($lev1Size != "0"):
      }
      $nav1 .= '</li>';

   endif; // END by if ($lev1->isOnline())
}
$nav1 .= '</ul>';
// END 1st level categories


// wenn du das als template in dein default template einbindest (so wie in der demo)
// dann kannst du in deinem default template an den stellen, wo du die navi haben willst
// über die folgenden variablen auf deine 3 ebenen zugreifen.
print $nav1; // nav1st
print $nav2; // nav2nd
print $nav3; // nav3rd
?>
Benutzeravatar
svenalbert
 
Beiträge: 1295
Registriert: 24. Nov 2005, 16:21
Wohnort: Clausthal-Zellerfeld / lower saxony

Beitragvon Thomas.Blum » 9. Feb 2006, 07:51

Hej,

svenalbert hat geschrieben:die subpunkte werden ja mit in den oberpunkt integriert.
vielleicht solltest du dir einfach für die zweite ebene auch eine weitere variable "ausdenken" und dieses dann einfach unter der ersten navi darstellen.


So würde ich das machen. Man bekommt drei separate Listen. Wenn du das umgesetzt hast schreibe nochmal. Vielleicht ein Zugang. Dann könnte man schneller helfen.

vg Thomas
blumbeet - web.studio - Dresden - 0351 217 6225
webbude - Blog über CSS.XHTML.REX
Ein Wunschzettel
Benutzeravatar
Thomas.Blum
Entwickler
 
Beiträge: 4670
Registriert: 24. Aug 2004, 21:11
Wohnort: Dresden

Beitragvon Nicolaus » 9. Feb 2006, 10:21

Danke schon mal für die Hilfe!!

Habs versucht umzusetzen. Aber sobald ich die Variable umbenenne ist die Navi nicht mehr zu sehen. Muss ich ausser in der Default und der main.css noch irgendwo was ändern?

Die css-Datei sieht so aus:
Code: Alles auswählen
:link,:visited { text-decoration:none; }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; font-weight:normal; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd { margin:0; padding:0 }
img, a img,:link img,:visited img, fieldset { border:none }
img { margin:0; padding:0; vertical-align:bottom; }
address { font-style:normal }

table {   border:none; padding:0px; margin:0px; border-spacing:0px; font-size:1em;}
tr { border:none; padding:0px; margin:0px; }
td { border:none; padding:0px; margin:0px; vertical-align:top; border-spacing:0px; }


legend { display:none; }

body, div,p,li { background-repeat:no-repeat; }

/*   reset some basic style
*******************************************************************************/
dl         {margin: 0 0 0 0;}
dl dt      {margin: 0 0 0 0;}
dl dd+dt   {margin-top: 0;}
dl dd      {margin: 0 0 0 0;}

ol         {list-style: none;}
ol li      {margin: 0 0 0 0;}
ol li ol   {margin: 0 0 0 0;}
ol li ul   {margin: 0 0 0 0;}

p         {margin-bottom: 0em;}

ul         {list-style: none;}
ul li      {margin: 0 0 0 0;}
ul li ul   {margin: 0 0 0 0; list-style: none;}
ul li ol   {margin: 0 0 0 0;}

pre         {font-size:1.2em; }

a:hover { text-decoration:none; }

/*   html
*******************************************************************************/
html {
   min-height: 100%;
   margin-bottom: 1px;
}

/*   body
*******************************************************************************/
body {
   background-image:url(bg_body.jpg);
   font-family:verdana, arial, helvetica, sans-serif;
   font-size: xx-small;
   voice-family: "\"}\"";
   voice-family: inherit;
   font-size: x-small;
}

.clearer {
   display:block;
   clear:both;
   line-height:0;
   height:1px;
   font-size:0;
   visibility:hidden;
}

.clear {
   clear:both;
}

.flLeft { float:left; }
.flRight { float:right; }

.warning { color:#f00; }


/*   website
*******************************************************************************/
#website {
   position:relative;
   display:block;
   margin:0;
   padding:0;
   height:100%;
   width:790px;
   color:#000;
   text-align:left;
}

/*   header
*******************************************************************************/
#header {
   position:relative;
   margin:0;
   padding:0;
   height:153px;
   background-image:url(bg_header.jpg);
}

/*   logo / breadcrumb
*******************************************************************************/
#logo {
   position:absolute;
   top:0px;
   left:0px;
}

#logo a {
   display:block;
   height:100px;
   width:170px;
   text-indent:-700em;
}


#breadcrumb {
   position:absolute;
   bottom:1px;
   left:150px;
}

#breadcrumb a,
#breadcrumb a:link {
   color:#999999;
}

#breadcrumb a:hover {
   text-decoration:underline;
}
/*   content
*******************************************************************************/


#content, #content2 {
   display:block;
   clear:both;
   position:relative;
   padding:10px 0 20px 0;
}


/* hide from IE/MAC \*/
* html #content, * html #content2 {
   height:1px;
}
/* end hide */


#content {}

#content2 {
   background-image:url(bg_content.jpg);
   background-repeat:repeat-y;
}

#main {
   float:left;
   width:560px;
    margin-left:-62px;
}

#main-block {}

#main-block2 {
   padding:14px;
}


/*   Navigation 1   
------------------------------------------------------------------------------*/

#header-nav1 {
   position:absolute;
   bottom:24px;
   left:150px;
   width:460px;
   background:#FFFFFF;
}

#header-nav1 ul.nav1st {
}


#header-nav1 ul.nav1st li {
   display:block;
   float:left;
   padding:5px 7px 5px 7px;
}

#header-nav1 ul.nav1st li.active {
   background:#ffcc00;
}

#header-nav1 ul.nav1st li.active a,
#header-nav1 ul.nav1st li.active a:link {
   color:#090;
}

#header-nav1 ul.nav1st a,
#header-nav1 ul.nav1st a:link {
   color:#606060;
   font-size:1.2em;
   font-weight:bold;
}

#header-nav1 ul.nav1st a:hover {
   color:#090;
}

/*   Navigation 2 
------------------------------------------------------------------------------*/

#header-nav2 {
   position:absolute;
   bottom:24px;
   left:150px;
   width:460px;
   background:#FFFFFF;
}

#header-nav2 ul.nav1st {
}


#header-nav2 ul.nav1st li {
   display:block;
   float:left;
   padding:5px 7px 5px 7px;
}

#header-nav2 ul.nav1st li.active {
   background:#ffcc00;
}

#header-nav2 ul.nav1st li.active a,
#header-nav2 ul.nav1st li.active a:link {
   color:#090;
}

#header-nav2 ul.nav1st a,
#header-nav2 ul.nav1st a:link {
   color:#606060;
   font-size:1.2em;
   font-weight:bold;
}

#header-nav2 ul.nav1st a:hover {
   color:#090;
}

/*   Navigation 3 
------------------------------------------------------------------------------*/

#navigation {
   float:left;
   width:200px;
   padding:20px 0;
}

#navigation ul.nav2nd li {
   padding:0;
   margin-left:14px;
   font-size:1.1em;
   font-weight:normal;
}

#navigation ul.nav2nd a,
#navigation ul.nav2nd a:link {
   display:block;
   padding:4px 60px 4px 0;
   color:#606060;
}

#navigation ul.nav2nd a.current,
#navigation ul.nav2nd a.current:link,
#navigation ul.nav2nd a:hover {
   color:#090;
   text-decoration:underline;
}


/*   firefox Werbebanner
------------------------------------------------------------------------------*/
#firefox {
   margin:2em 0 0 14px;
}

#firefox a,
#firefox a:link {
   display:block;
   width:120px;
   height:60px;
   background-image:url(ff_120x60_2.gif);
   text-indent:-1000em;
}
/*   Headlines
------------------------------------------------------------------------------*/

/* Headline 1 */
#main-block h1 {
   color:#090;
   font-family:arial, helvetica, verdana, sans-serif;
   font-size:1.7em;
   font-weight:bold;
   line-height:1.8em;
}

#main-block .teaser h1 {
   font-size:1.4em;
}

/* Headline 2 */
#main-block h2 {
   color:#000;
   font-family:arial, helvetica, verdana, sans-serif;
   font-size:1.4em;
   font-weight:bold;
   line-height:1.4em;
}


/*   Paragraphs / Lists
------------------------------------------------------------------------------*/
#main-block p,
#main-block ul,
#main-block ol {
   margin-bottom:1.2em;
   font-size:1.2em;
   line-height:1.6em;
}
#main-block ul li ul,
#main-block ul li ol,
#main-block ol li ol,
#main-block ol li ul {
   font-size:1em;
}

#main-block ul {
   margin-left:14px;
   list-style-type:square;
}

#main-block ol {
   list-style-type:decimal-leading-zero;
}


/*   Hyperlinks
------------------------------------------------------------------------------*/
#main-block a, #main-block a:link {
   color:#090;
   text-decoration:underline;
}

#main-block a:hover {
   color:#000;
}



/*   Images
------------------------------------------------------------------------------*/
#main-block div.image {
   margin-bottom:0;
}
#main-block div.image p {
   margin:0;
   font-size:0.9em;
}
#main-block div.flLeft {
   margin-right:14px;
}
#main-block div.flRight {
   margin-left:14px;
}


/*   footer
------------------------------------------------------------------------------*/
.footer {
   display:block;
   width:100%;
   background-image:url(bg_footer.jpg);
   background-position:0 -100px;
   position:fixed;
    left:0;
    bottom:0;
}
.footer2 {
   padding:0 150px;
}
.footer p {
   margin:0;
   padding:9px 0;
   font-size:10px;
   text-transform:uppercase;
}

.footer p,
.footer p a,
.footer p a:link {
   color:#555555;
}
.footer p a:hover {
   text-decoration:underline;
}

.footer .col-left {
   float:left;
   width:186px;
}
.footer .col-right {
   float:left;
}


/* form-module
*******************************************************************************/
#form-module * {
   padding:0px;
   margin:0px;
}

#form-module {
   margin:0px;
   padding:0px;
   width:520px;
   background-color:#f7f7f7;
   color:#666;
   font-family:verdana, arial, helvetica, sans-serif;
   font-size:1.2em;
}

#form-module fieldset {
   border:0px solid #fff;
}

#form-module legend {
   display:none;
}


#form-module p {
   margin:0;
   padding:5px;
   font-size:1em;
   font-weight:bold;
}

#form-module .element {
   display:block;
   clear:both;
   background-color:#f7f7f7;
   border-top:2px solid #fff;
}

#form-module label {
   display:block;
   float:left;
   padding:5px;
   width:120px;
   border-right:2px solid #fff;
}

#form-module label.checkbox {
   width:372px;
   border-left:2px solid #fff;
   border-right:none;
}

#form-module input,
#form-module select,
#form-module textarea {
   float:left;
   margin:5px;
   width:295px;
   border:1px solid #333;
}

#form-module input.text {
   height:20px;
}

#form-module input.checkbox {
   width:120px;
   padding:0;
   border:none;
}

#form-module input.submit {
   margin:5px 5px 5px 137px;
   padding:2px 5px;
   border:1px solid #333;
   background-color:#fff;
   color:#666;
   font-family:verdana, arial, helvetica, sans-serif;
   text-align:center;
   cursor:pointer;
}

#form-module input.submit:hover {
   background-color:#f7f7f7;
   color:#000;
}

#form-module label.textarea,
#form-module textarea.textarea {
   height:96px;
}

#form-module-thanks {
   display:block;
   color:#666;
   font-family:verdana, arial, helvetica, sans-serif;
   font-size:1.2em;
}


/* download
*******************************************************************************/
#main-block .download-hdl p,
#main-block .download-file p,
#main-block .download-desc p {
   margin:0;
}
#main-block .download-hdl p {
   padding:5px 7px;
   background-color:#393;
   font-weight:bold;
   color:#fff;
}

#main-block .download-file {
   padding:1.2em 7px;
   border-left:2px solid #393;
   border-right:2px solid #393;
}

#main-block .download-desc {
   margin-bottom:1.2em;
   padding:1.2em 7px;
   background-color:#e5ffe5;
   border-left:2px solid #393;
   border-right:2px solid #393;
   border-bottom:2px solid #393;
}

#main-block .download-without-desc {
   margin-bottom:1.2em;
   border-top:2px solid #393;
}


Zugang iss: ******* / ********

EDIT: Habe deinen Zugang rausgenommen. Zugangsdaten sollten immer per PM versendet werden und nicht allen zur Sicht gegeben werden. tbaddade
Nicolaus
 

Beitragvon Thomas.Blum » 9. Feb 2006, 11:11

Hej,

habe dir einmal die Navis gesetzt. Du solltest nun das eingebettet Style in die CSS-Datei übertragen. Das Aussehen der Links darfst du gern übernehmen.


vg Thomas

Bild -> http://redaxo.de ->rechte Seite
blumbeet - web.studio - Dresden - 0351 217 6225
webbude - Blog über CSS.XHTML.REX
Ein Wunschzettel
Benutzeravatar
Thomas.Blum
Entwickler
 
Beiträge: 4670
Registriert: 24. Aug 2004, 21:11
Wohnort: Dresden

Beitragvon Nicolaus » 9. Feb 2006, 11:29

Genau so meinte ich es. SUPER!! Mist, muss jetzt erst weg. Schau mir alles später an. Bin echt neugierig woran es gelegen hat!!!!

Super heißen Dank! *jubel*

Bis später

*glücklicher* Nikolaus
Nicolaus
 

Vorherige

Zurück zu Templates/Navigationen [R3]

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast