Anzeige

Vertikale Navigation

Vertikale Navigation | PSD-Tutorials.de

Erstellt von NiAlMa, 18.08.2010.

  1. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    Hallo,

    ich habe nun soweit mein HP konfiguriert und nun musste ich feststellen, dass ich zu viel Seiten für die Navigation habe - ergo benötige ich die Navigation vertikal...bekomm das allerdings nicht hin *schäm*

    Habe eine index.php und die dazugehörige style.css.

    Würde sich das evtl. jemand ansehen und mir entsprechend anpassen? Wäre echt super nett...

    Kann die Dateien via Email oder FTP bereitstellen
     
    #1      
  2. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    Vertikale Navigation
    AW: Vertikale Navigation

    hi, schick mal bitte den link per pm :)
     
    #2      
  3. SvenBrnn

    SvenBrnn Noch nicht viel geschrieben

    Dabei seit:
    16.02.2010
    Beiträge:
    9
    Geschlecht:
    männlich
    Software:
    Netbeans, PSPad, Photoshop
    Vertikale Navigation
    #3      
  4. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Vertikale Navigation
    AW: Vertikale Navigation

    Wäre vielleicht nett, aber was hast du davon? Eine (vielleicht) im Moment funktionierende Navi, doch was ist wenn du sie ändern willst/musst oder anderes damit anstellen willst? Warum postest du es nicht einfach hier rein? So bekommst du viel mehr Hilfe, als wenn du mit jedem der "hier" schreit per PM korrespondierst.
     
    #4      
  5. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    AW: Vertikale Navigation

    Kann die den Inhalt der index.php..nur daran liegt es, gerne hier verlinken bzw. posten


    Auf Wunsch geänder - siehe weiter unten
     
    Zuletzt bearbeitet: 19.08.2010
    #5      
  6. ArtiHl

    ArtiHl Nicht mehr ganz neu hier

    Dabei seit:
    27.06.2010
    Beiträge:
    140
    Geschlecht:
    männlich
    Ort:
    Hansestadt Lübeck
    Software:
    CS4,Notepad++,Eclipse
    Vertikale Navigation
    AW: Vertikale Navigation

    ruf bitte deine seite auf, rechtsklick, quellcode anzeigen und kopiere bitte diesen quell code hier rein, deinen apload nimmst du bitte wieder raus, es hat keinen zu interressieren was auf deinem Server passiert(jedenfalls nicht in diesem fall) ausserdem hab ich(und ich denke auch kein anderer) bock den enstehenden quelltext aus deiner php zu ziehen.
    Benutzte bitte zum posten von code den <> button im editor 2.reihe 2ter von links zu finden. dann in den [ html] tag den code einfügen.Danke.
    Das gleiche mit dem css code.
     
    #6      
  7. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    AW: Vertikale Navigation

    Quellcode bringt nichts, da es sich um eine php handet

    Ich habe keinen <> Button-gehabt!

    Die index.php ist aber doch im Original als rar angefügt und da passiert nichts auf dem Server ausser dass du eine Datei herunterläds...aber hier die Inhalte der

    index.php

    PHP:
    1. <?php
    2.  // Including necessary Files
    3.    require_once('data/config/config.inc.php');
    4.    require_once('data/config/constructr_define.inc.php');
    5.    require_once('data/config/constructr_settings.inc.php');
    6.    require_once('backend/helper_func.inc.php');
    7.     require_once('data/php/constructr.class.php');
    8.  // Defining some Vars and Paths
    9.    $host      = $_SERVER['HTTP_HOST'];
    10.    $uri       = rtrim(dirname($_SERVER['PHP_SELF']), '/');
    11.    $ROOT_PATH = 'http://' . $host . $uri;
    12.    $IMG_PATH  = 'http://' . $host . $uri . '/data/workspace/pix/';
    13.    $CSS_PATH  = 'http://' . $host . $uri . '/data/workspace/css/';
    14.    $JS_PATH   = 'http://' . $host . $uri . '/data/workspace/js/';
    15.    $UPL_PATH  = 'http://' . $host . $uri . '/data/workspace/uploads/';
    16.     $db        =& new constructr($HOST,$USER,$PASSWD,$DATABASE);
    17.  // A Function to redirect to Section /404/
    18.  function redirect_404()
    19.  {
    20.   @header("Location: http://$host$uri/404");
    21.  }
    22. ?>
    23. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    24.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    25. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    26. <head>
    27. <meta http-equiv="content-type" content="utf-8" />
    28. <?php
    29.  // Drawing Page Title
    30.  if(!isset($_GET['show_page']))
    31.  {
    32.   echo '<title>SC Sun-Moon</title>';
    33.  }
    34.  else
    35.  {
    36.   $SHOW_PAGE = $db -> prepare($_REQUEST['show_page']);
    37.   echo '<title>SC Sun-Moon - ' . strtoupper($SHOW_PAGE) . '</title>';
    38.  }
    39.     // Building RSS 2.0-FEED Link
    40.     if(isset($_GET['show_page']))
    41.     {
    42.   $SHOW_PAGE = $db -> prepare($_REQUEST['show_page']);
    43.         $feed_identifier = $SHOW_PAGE;
    44.         $get_page_feed = $db -> query("
    45.           SELECT *
    46.           FROM $DB_TABLE_CONSTRUCTR_PAGES
    47.           WHERE page_alias = '$feed_identifier'
    48.        LIMIT 1
    49.       ");
    50.  
    51.         $act_page_id = $db -> fetch_array($get_page_feed);
    52.      $page_id  = $act_page_id['page_id'];
    53.         echo '<link rel="alternate" type="application/rss+xml" title="' . $host . ' ' . strtoupper($SHOW_PAGE) . ' RSS 2.0 Feed" href="http://' . $host . $uri . '/xmlOutput/rss.php?feed=' . $page_id . '" />';
    54.     }
    55. ?>
    56. <script src="<?php echo $JS_PATH; ?>jquery.min.js" type="text/javascript"></script>
    57. <script src="<?php echo $JS_PATH; ?>jquery.cookie.js" type="text/javascript" /></script>
    58. <link rel="stylesheet" type="text/css" href="<?php echo $CSS_PATH; ?>style.css" />
    59. <link rel="shortcut icon" href="<?=$IMG_PATH?>constructr.ico" type="image/x-icon">
    60. </head>
    61. <body>
    62. <?php
    63.  if(isset($_SESSION['visual']))
    64.  {
    65.   echo '<p class="visual">Visual editing Mode | <a href="?destroy_visual=true">Logout</a></p>';
    66.  }
    67. ?>
    68. <?php
    69.  // To make hidden Content and Pages visible in Preview Mode
    70.  if(isset($_REQUEST['preview']))
    71.  {
    72.   define('CONSTRUCTR_PREVIEW','TRUE');
    73.  
    74.   echo '<div style="height: 50px; text-align: center; line-height: 50px; font-family: Georgia; font-size: 20px; font-weight: 600;width: 100%; background-color: #ff0066; color: #fff;">';
    75.   echo 'Preview-Mode: hidden Pages and Content are visible';
    76.   echo '</div>';
    77.  }
    78.  else
    79.  {
    80.   define('CONSTRUCTR_PREVIEW','FALSE');
    81.  }
    82. ?>
    83. <div id="body_container">
    84.  
    85. <!-- Header -->
    86. <div id="head_section">
    87. <a href="<?php echo $ROOT_PATH; ?>"><img src="<?=$IMG_PATH?>logo.jpg" alt="Swingerclub Sun-Moon - Bertha-Benz-Str. 5 - 74343 Sachsenheim" title="Swingerclub Sun-Moon - Bertha-Benz-Str. 5 - 74343 Sachsenheim" class="image" /></a>    
    88. </div><!--EOF DIV ID HEAD SECTION-->
    89. <div id="nav_section">
    90. <?php
    91.  if(CONSTRUCTR_PREVIEW == 'TRUE')
    92.  {
    93.      $get_pages = $db -> query("
    94.         SELECT *
    95.         FROM $DB_TABLE_CONSTRUCTR_PAGES
    96.         ORDER BY page_lft ASC
    97.     ");
    98.  }
    99.  else
    100.  {
    101.      $get_pages = $db -> query("
    102.         SELECT *
    103.         FROM $DB_TABLE_CONSTRUCTR_PAGES
    104.         WHERE page_visibility = '1'
    105.         ORDER BY page_lft ASC
    106.     ");
    107.  }
    108.  echo '<ul>';
    109.  
    110.     while ($all_pages = $db -> fetch_array($get_pages))
    111.     {
    112.   $page_id = $all_pages['page_id'];
    113.   $page_name  = $all_pages['page_name'];
    114.   $page_name  = explode('{:|:}',$page_name);
    115.   $page_name  = $page_name[$_COOKIE['FE_LANG']];
    116.   $page_alias = $all_pages['page_alias'];
    117.   $page_lft   = $all_pages['page_lft'];
    118.   $page_class = $all_pages['page_class'];
    119.  
    120.     if(!isset($_SESSION['visual']))
    121.   {
    122.      if($_GET['show_page'] == $page_alias)
    123.    {
    124.     if($page_lft == '1')
    125.     {
    126.      echo '<li class="active"><a href="http://' . $host . $uri . '/" title="http://' . $host . $uri . '/">' . $page_name . '</a></li>';
    127.     }
    128.     else
    129.     {
    130.      echo '<li class="active"><a href="http://' . $host . $uri . '/' . $page_alias . '/" title="http://' . $host . $uri . '/' . $page_alias . '/">' . $page_name . '</a></li>';
    131.     }
    132.    }
    133.    else
    134.    {
    135.     if($page_lft == '1')
    136.     {
    137.      echo '<li><a href="http://' . $host . $uri . '/" title="http://' . $host . $uri . '/">' . $page_name . '</a></li>';
    138.     }
    139.     else
    140.     {
    141.      echo '<li><a href="http://' . $host . $uri . '/' . $page_alias . '/" title="http://' . $host . $uri . '/' . $page_alias . '/">' . $page_name . '</a></li>';
    142.     }
    143.    }
    144.   }
    145.   else
    146.   {
    147.    echo '<li><a href="?show_page=' . $page_name . '&visual_mode=true" title="?show_page=' . $page_name . '">' . $page_name . '</a></li>';
    148.   }
    149.  }
    150.  echo '</ul>';
    151. ?>
    152. </div><!--EOF DIV ID NAV SECTION-->
    153.  
    154. <div id="content_section">
    155. <?php
    156.    if(!isset($_GET['show_page']))
    157.    {
    158.        $get_page_id = $db -> query("
    159.           SELECT *
    160.           FROM $DB_TABLE_CONSTRUCTR_PAGES
    161.           WHERE page_lft = '1'
    162.     LIMIT 1
    163.       ");
    164.  
    165.        $act_page_id = $db -> fetch_array($get_page_id);
    166.      $page_id  = $act_page_id['page_id'];
    167.      $page_name  = $act_page_id['page_name'];
    168.      $page_class  = $act_page_id['page_class'];
    169.  
    170.      if(CONSTRUCTR_PREVIEW == 'TRUE')
    171.      {
    172.          $get_page_content = $db -> query("
    173.             SELECT *
    174.             FROM $DB_TABLE_CONSTRUCTR_CONTENT
    175.             WHERE page_id = '$page_id'
    176.             ORDER BY sort ASC
    177.         ");
    178.      }
    179.      else
    180.      {
    181.          $get_page_content = $db -> query("
    182.             SELECT *
    183.             FROM $DB_TABLE_CONSTRUCTR_CONTENT
    184.             WHERE page_id = '$page_id'
    185.             AND visibility = '1'        
    186.             ORDER BY sort ASC
    187.         ");
    188.      }
    189.  
    190.      $content_counter = $db -> num_rows($get_page_content);
    191.  
    192.      if($content_counter != 0)
    193.      {
    194.          while ($act_content = $db -> fetch_array($get_page_content))
    195.          {
    196.              $id            = $act_content['id'];
    197.              $page_id       = $act_content['page_id'];
    198.              $content       = $act_content['content'];
    199.     $content_array = explode('{:|:}',$content);
    200.              $visibility    = $act_content['visibility'];
    201.              $sort          = $act_content['sort'];
    202.     if(isset($_SESSION['visual']))
    203.     {
    204.      echo '<div class="visual_element" title="[Element ID: ' . $id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
    205.     }
    206.     else
    207.     {
    208.      echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));    
    209.     }
    210.       }
    211.      }
    212.      else
    213.     {
    214.    echo '404 Not Found';
    215.    redirect_404();
    216.   }
    217.    }
    218.  else if($_GET['show_page']=='kotakt')
    219.  {
    220.   require_once('kontakt.inc.php');
    221.  }
    222.    else
    223.    {
    224.        $db        =& new constructr($HOST,$USER,$PASSWD,$DATABASE);
    225.      $host     = $_SERVER['HTTP_HOST'];
    226.      $uri       = rtrim(dirname($_SERVER['PHP_SELF']), '/');
    227.   $show_page = $db -> prepare($_REQUEST['show_page']);
    228.  
    229.        $get_page_id = $db -> query("
    230.           SELECT *
    231.           FROM $DB_TABLE_CONSTRUCTR_PAGES
    232.           WHERE page_alias = '$show_page'
    233.     LIMIT 1
    234.       ");
    235.  
    236.        $act_page_id = $db -> fetch_array($get_page_id);
    237.      $page_id  = $act_page_id['page_id'];
    238.      $page_name  = $act_page_id['page_name'];
    239.  
    240.         if(CONSTRUCTR_PREVIEW == 'TRUE')
    241.         {
    242.             $get_page_content = $db -> query("
    243.                SELECT *
    244.                FROM $DB_TABLE_CONSTRUCTR_CONTENT
    245.                WHERE page_id = '$page_id'
    246.                ORDER BY sort ASC
    247.            ");
    248.         }
    249.         else
    250.         {
    251.             $get_page_content = $db -> query("
    252.                SELECT *
    253.                FROM $DB_TABLE_CONSTRUCTR_CONTENT
    254.                WHERE page_id = '$page_id'
    255.                AND visibility = '1'
    256.                ORDER BY sort ASC
    257.            ");
    258.         }
    259.  
    260.         $content_counter = $db -> num_rows($get_page_content);
    261.  
    262.         if($content_counter != 0)
    263.         {
    264.    while ($act_content = $db -> fetch_array($get_page_content))
    265.          {
    266.              $id            = $act_content['id'];
    267.              $page_id       = $act_content['page_id'];
    268.              $content       = $act_content['content'];
    269.     $content_array = explode('{:|:}',$content);
    270.              $visibility    = $act_content['visibility'];
    271.              $sort          = $act_content['sort'];
    272.     if(isset($_SESSION['visual']))
    273.     {
    274.      echo '<div class="visual_element" title="[Element ID: ' . $id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
    275.     }
    276.     else
    277.     {
    278.      echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));    
    279.     }
    280.            }
    281.      }
    282.      else
    283.      {
    284.    echo '404 Not Found';
    285.    redirect_404();
    286.       }
    287.    }
    288. ?>
    289. </div><!--EOF DIV ID CONTENT SECTION-->
    290.  
    291. <div id="footer_section">
    292. <?php
    293.  // Example for grabbing Content with defined Sticky ID
    294.  $get_sticky_666 = $db -> query("
    295.     SELECT *
    296.        FROM $DB_TABLE_CONSTRUCTR_CONTENT
    297.        WHERE sticky_id = '666'
    298.  LIMIT 1
    299. ") or die(mysql_error());
    300.  $sticky666 = $db -> num_rows($get_sticky_666);
    301.  
    302.     if($sticky666 != 0)
    303.     {
    304.   $act666        = $db -> fetch_array($get_sticky_666);
    305.   $id            = $act666['id'];
    306.   $sticky_id     = $act666['id'];
    307.   $content       = $act666['content'];
    308.   $content_array = explode('{:|:}',$content);
    309.  
    310.   if(isset($_SESSION['visual']))
    311.   {
    312.    echo '<div class="visual_element" title="[Element ID: ' . $id . ' // Sticky-ID: ' . $sticky_id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
    313.   }
    314.   else
    315.   {
    316.     echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));
    317.   }
    318.  }
    319. ?>
    320. </div><!--EOF DIV ID FOOTER SECTION-->
    321. </div><!--EOF DIV ID BODY CONTAINER-->
    322. <?php
    323. //******************************************************************************************************************************
    324. ?>
    325. <script type="text/javascript">
    326. // <![CDATA[
    327. $(document).ready(function()
    328. {
    329.  // Auto-Language Selection
    330.  if (!$.cookie('FE_LANG')) {
    331.   $.cookie('FE_LANG','0',{ expires: 365 });
    332.   window.open('./','_self','');
    333.  }
    334.  // Fullscreen View
    335.  $('a.lang').click(
    336.   function()
    337.   {
    338.    var lang = this.id;
    339.  
    340.    if($.cookie('FE_LANG'))
    341.    {
    342.     $.cookie('FE_LANG', null);
    343.    }
    344.    else
    345.    {
    346.     $.cookie('FE_LANG',lang,{ expires: 365 });
    347.    }
    348.    $.cookie('FE_LANG',lang,{ expires: 365 });
    349.    window.open('./','_self','');
    350.    return false;
    351.   }
    352.  );
    353. });
    354. // ]]>
    355. </script>
    356. </body>
    357. </html>
    358. <?php
    359. $db -> close();
    360. ?>
    und der
    style.css

    Code (Text):
    1. html, body, div, span, applet, object, iframe,
    2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    3. a, abbr, acronym, address, big, cite, code,
    4. del, dfn, em, font, img, ins, kbd, q, s, samp,
    5. small, strike, strong, sub, sup, tt, var,
    6. dl, dt, dd, ol, ul, li,
    7. fieldset, form, label, legend,
    8. table, caption, tbody, tfoot, thead, tr, th, td
    9. {
    10. margin: 0;
    11. padding: 0;
    12. border: 0;
    13. outline: 0;
    14. font-weight: inherit;
    15. font-style: inherit;
    16. font-size: 100%;
    17. font-family: inherit;
    18. vertical-align: baseline;
    19. }
    20. a
    21. {
    22. text-decoration: none;
    23. background-color: #171717;
    24. color: #f8f8f8;
    25. text-decoration: none;
    26. }
    27. :focus
    28. {
    29. outline: 0;
    30. }
    31. body
    32. {
    33. line-height: 1;
    34. color: yellow;
    35. background: #171717;
    36. }
    37. ol, ul
    38. {
    39. list-style: none;
    40. color: yellow;
    41. background: #171717;
    42. }
    43. table
    44. {
    45. /*border-collapse: separate;
    46. border-spacing: 0; */
    47. color: yellow;
    48. background: #171717;
    49. }
    50. caption, th, td
    51. {
    52. text-align: left;
    53. font-weight: normal;
    54. color: yellow;
    55. background: #171717;
    56. }
    57. blockquote:before, blockquote:after,
    58. q:before, q:after
    59. {
    60. content: "";
    61. }
    62. blockquote, q
    63. {
    64. quotes: "" "";
    65. }
    66. /*FE STYLING*/
    67. body{
    68. background-color: #171717;
    69. background-image:url('http://xxx/data/workspace/pix/bg.jpg');
    70. }
    71. #body_container{
    72. margin: 16px auto 55px auto;
    73. width: 980px;
    74. background-color: #171717;
    75. /*border: 1px solid #f8f8f8; */
    76. }
    77. div#languages{
    78. margin: 18px 10px 10px 10px;
    79. }
    80. #languages a:link,
    81. #languages a:active,
    82. #languages a:visited {
    83. background-color: #101010;
    84. color: #ff0066;
    85. line-height: 20px;
    86. font-family: Helvetica, Arial, Verdana, sans-serif;
    87. padding: 10px 10px 10px 10px;
    88. }
    89. #languages a:hover {
    90. background-color: #101010;
    91. color: #fff;
    92. line-height: 20px;
    93. font-family: Helvetica, Arial, Verdana, sans-serif;
    94. padding: 10px 10px 10px 10px;
    95. }
    96. #head_section{
    97. margin: 0 0 0 0;
    98. padding: 0 0 0 0;
    99. height: 228px;
    100. width: 100%;
    101. background-color: #171717;
    102. }
    103. #nav_section{
    104. margin: 0 0 0 0;
    105. background-color: #171717;
    106. width: 25%;
    107. }
    108. #nav_section{
    109. font-family: Helvetica, sans-serif;
    110. font-size: 15px;
    111. line-height: 30px;
    112. }
    113. #nav_section ul{
    114. width: 25%;
    115. color: #f8f8f8;
    116. background: #171717;
    117. }
    118. #nav_section ul li{
    119. display: inline;
    120. float: left;
    121. color: #f8f8f8;
    122. background: #171717;
    123. width: 25%;
    124. }
    125. #nav_section ul li a:link,
    126. #nav_section ul li a:active,
    127. #nav_section ul li a:visited{
    128. display: block;
    129. height: 30px;
    130. width: 25%;
    131. text-align: center;
    132. overflow: hidden;
    133. color: #f8f8f8;
    134. background-color: #171717;
    135. }
    136. * html #nav_section ul li a{
    137. float: left;
    138. }
    139. #nav_section ul li a:hover{
    140. display: block;
    141. height: 30px;
    142. width: 25%;
    143. text-align: center;
    144. overflow: hidden;
    145. background-color: #171717;
    146. color: #f8f8f8;
    147. }
    148. .active{
    149. display: block;
    150. height: 30px;
    151. width: 25%;  
    152. text-align: center;
    153. overflow: hidden;
    154. background-color: #171717;
    155. color: #f8f8f8;
    156. }
    157. #content_section{
    158.  clear: left;
    159.  margin: 0 0 0 0;
    160.  padding: 20px 10px 10px 10px;
    161.  background-color: #171717;
    162.  color:#f8f8f8;/*border-top: 1px solid #f8f8f8;*/
    163.  width: 75%;
    164. }
    165. #content_section{
    166. font-family: Helvetica, sans-serif;
    167. font-size: 15px;
    168. line-height: 20px;
    169. color: yellow;
    170. background-color: #171717;
    171. width: 75%;
    172. }
    173. #content_section h1{
    174. font-family: Helvetica, sans-serif;
    175. font-size: 20px;
    176. line-height: 40px;
    177. color: red;
    178. background-color: #171717;
    179. }
    180. #content_section a:link,
    181. #content_section a:active,
    182. #content_section a:visited
    183. {
    184. color: #b22222;
    185. background-color: #171717;
    186. }
    187. #content_section a:hover
    188. {
    189. color: #b22222;
    190. background-color: #171717;
    191. }
    192. #footer_section{
    193. margin: 0 0 0 0;
    194. padding: 10px 10px 10px 10px;
    195. background-color: #b22222;
    196. /*border-top: 1px solid #f8f8f8; */
    197. color: yellow;
    198. text-align: center;
    199. width: 980px;
    200. }
    201. #footer_section{
    202. font-family: Helvetica, sans-serif;
    203. font-size: 10px;
    204. line-height: 15px;
    205. text-align: justify;
    206. color: #f8f8f8;
    207. background-color: #171717;
    208. width: 980px;
    209. }
    210. #footer_section a:link,
    211. #footer_section a:active,
    212. #footer_section a:visited
    213. {
    214. background-color: red;
    215. color: #f8f8f8;
    216.  font-weight: bold;
    217.  font-style: italic;
    218.  text-shadow: black;
    219.  text-decoration: dotted;
    220. }
    221. #footer_section a:hover
    222. {
    223. background-color: red;
    224. color: #f8f8f8;
    225.  font-weight: bold;
    226.  font-style: italic;
    227.  text-shadow: black;
    228.  text-decoration: blink;
    229. }
    230. p._footer{
    231. margin-top: 10px;
    232. text-align: center;
    233. background-color: red;
    234. color: #f8f8f8;
    235.  font-style: italic;
    236.  text-shadow: black;
    237.  text-decoration: blink;
    238.  width: 980px;
    239. }
    240. /*Visual editing Mode*/
    241. div.visual_element:hover
    242. {
    243.  border: 2px solid red;
    244.  padding: 5px;
    245.  background-color: #171717;
    246.  color: #f8f8f8;
    247. }
    248. .visual
    249. {
    250.  width: 100%;
    251.  text-align: center;
    252.  height: 20px;
    253.  line-height: 20px;
    254.  font-family: Helvetica, Arial, Verdana, sans-serif;
    255.  font-size: 11px;
    256.  color: #f8f8f8;
    257.  background-color: #f8f8f8;
    258. }
     
    #7      
  8. ArtiHl

    ArtiHl Nicht mehr ganz neu hier

    Dabei seit:
    27.06.2010
    Beiträge:
    140
    Geschlecht:
    männlich
    Ort:
    Hansestadt Lübeck
    Software:
    CS4,Notepad++,Eclipse
    Vertikale Navigation
    AW: Vertikale Navigation

    Der php code ist bei deinem Problem völlig uninteressant und eigendtlich sehr nutzlos, ausser du findest jmd. der alle echos auswertet, wer weiß was die includes noch so alles auswerfen.
    Also bitte seite im browser laden, rechte maustaste quellcode sichern und hierher kopieren.
    Wir müssen wissen wie der generierte html-quellcode aussieht.

    Um <> zu bekommen musst du auf antworten, nicht auf direkt antworten klicken.
     
    #8      
  9. netbandit

    netbandit Aktives Mitglied

    12
    Dabei seit:
    18.05.2008
    Beiträge:
    1.145
    Geschlecht:
    männlich
    Vertikale Navigation
    AW: Vertikale Navigation

    Falsch, es geht wohl eher um die Darstellung also um Html und Css. Grundsätzlich sollte es bereits eine vertikale Navigation werden, hast ja beim li schon float: left angegeben. Was allerdings die Breitenangaben von 25% überall sollen, verstehe ich noch nicht so ganz; demnach kannst Du theoretisch max. 4 Navigationspunkte nebeneinander darstellen. :uhm:

    Wäre schön wenn man sich das irgendwo online betrachten könnte

    Grüße :)
     
    #9      
  10. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    AW: Vertikale Navigation

    Online kann man es unter www.knuddlwoelkchen.de sehen, allerdings ist dort die Navi horizontal und noch ohne die 25%-Angaben. IMHO stimmt da was mit der verschachtelung der DIV nicht und das müsste dann doch die index.php sein und nicht die css.

    Hier der geneerierte Code von www.knuddlwoelkchen.de

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    5. <meta http-equiv="content-type" content="utf-8" />
    6. <title>Constructr</title><script src="http://knuddlwoelkchen.de/data/workspace/js/jquery.min.js" type="text/javascript"></script>
    7. <script src="http://knuddlwoelkchen.de/data/workspace/js/jquery.cookie.js" type="text/javascript" /></script>
    8. <link rel="stylesheet" type="text/css" href="http://knuddlwoelkchen.de/data/workspace/css/style.css" />
    9. <link rel="shortcut icon" href="http://knuddlwoelkchen.de/data/workspace/pix/constructr.ico" type="image/x-icon">
    10. </head>
    11.  
    12. <div id="body_container">
    13. <div id="languages">
    14. <a href="#" id="0" class="lang" title="Select Deutsch as default Language">Deutsch</a> <a href="#" id="1" class="lang" title="Select English as default Language">English</a> </div><!--EOF DIV ID LANGUAGES-->
    15. <div id="head_section">
    16. <a href="http://knuddlwoelkchen.de"><img src="http://knuddlwoelkchen.de/data/workspace/pix/banner.gif" alt="ConstructrCMS - Create whatever You like" title="Constructr - Create whatever You like" class="image" /></a>    
    17. </div><!--EOF DIV ID HEAD SECTION-->
    18. <div id="nav_section">
    19. <ul><li><a href="http://knuddlwoelkchen.de/" title="http://knuddlwoelkchen.de/">Startseite</a></li><li><a href="http://knuddlwoelkchen.de/impressum/" title="http://knuddlwoelkchen.de/impressum/">Impressum</a></li><li><a href="http://knuddlwoelkchen.de/about/" title="http://knuddlwoelkchen.de/about/">Über Uns</a></li></ul></div><!--EOF DIV ID NAV SECTION-->
    20.  
    21. <div id="content_section">
    22. <p>Inhalt der Startseite</p>
    23. <p>&nbsp;</p>
    24. <p>Die index.php -&gt; <a href="http://knuddlwoelkchen.de/data/workspace/uploads/c88ced1fb07dc676cd048e843c8b4a75.rar">index.php</a></p>
    25. <p>die style.css -&gt; <a href="http://knuddlwoelkchen.de/data/workspace/uploads/b75df25bf845f6463f5829548b2dffd1.rar">css</a></p></div><!--EOF DIV ID CONTENT SECTION-->
    26.  
    27. <div id="footer_section">
    28. <br /><br />
    29.  
    30. <p class="_footer">
    31. Copy knuddlwoelkchen<br />
    32. <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
    33. </p>
    34. </div><!--EOF DIV ID FOOTER SECTION-->
    35. </div><!--EOF DIV ID BODY CONTAINER-->
    36.  
    37. <script type="text/javascript">
    38. // <![CDATA[
    39. $(document).ready(function()
    40. {
    41. // Auto-Language Selection
    42. if (!$.cookie('FE_LANG')) {
    43.  $.cookie('FE_LANG','0',{ expires: 365 });
    44.  window.open('./','_self','');
    45. }
    46. // Fullscreen View
    47. $('a.lang').click(
    48.  function()
    49.  {
    50.   var lang = this.id;
    51.  
    52.   if($.cookie('FE_LANG'))
    53.   {
    54.    $.cookie('FE_LANG', null);
    55.   }
    56.   else
    57.   {
    58.    $.cookie('FE_LANG',lang,{ expires: 365 });
    59.   }
    60.   $.cookie('FE_LANG',lang,{ expires: 365 });
    61.   window.open('./','_self','');
    62.   return false;
    63.  }
    64. );
    65. });
    66. // ]]>
    67. </body>
    68. </html>
    69.  
     
    Zuletzt bearbeitet: 19.08.2010
    #10      
  11. ArtiHl

    ArtiHl Nicht mehr ganz neu hier

    Dabei seit:
    27.06.2010
    Beiträge:
    140
    Geschlecht:
    männlich
    Ort:
    Hansestadt Lübeck
    Software:
    CS4,Notepad++,Eclipse
    Vertikale Navigation
    #11      
  12. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    AW: Vertikale Navigation

    Danke das hat mir schon sehr geholfen.

    Allerdings habe ich noch ein kleines Problem, denn es werden einige Navipunkte nebeneinander gelistet...entweder habe ich was übersehen oder bin einfach nur doof....

    [​IMG]

    Die style.css sieht nun wie folgt aus:

    Code (Text):
    1.  
    2. html, body, div, span, applet, object, iframe,
    3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    4. a, abbr, acronym, address, big, cite, code,
    5. del, dfn, em, font, img, ins, kbd, q, s, samp,
    6. small, strike, strong, sub, sup, tt, var,
    7. dl, dt, dd, ol, ul, li,
    8. fieldset, form, label, legend,
    9. table, caption, tbody, tfoot, thead, tr, th, td
    10. {
    11. margin: 0;
    12. padding: 0;
    13. border: 0;
    14. outline: 0;
    15. font-weight: inherit;
    16. font-style: inherit;
    17. font-size: 100%;
    18. font-family: inherit;
    19. vertical-align: baseline;
    20. }
    21. *{
    22. padding:0;
    23. margin:0;
    24. font-family: arial,helcetica,sans-serife;
    25. font-weight:normal;
    26. }  
    27. a
    28. {
    29. text-decoration: none;
    30. }
    31. :focus
    32. {
    33. outline: 0;
    34. }
    35. body
    36. {
    37. line-height: 1;
    38. color: black;
    39. background: white;
    40. }
    41. ol, ul
    42. {
    43. list-style: none;
    44. }
    45. table
    46. {
    47. border-collapse: separate;
    48. border-spacing: 0;
    49. }
    50. caption, th, td
    51. {
    52. text-align: left;
    53. font-weight: normal;
    54. }
    55. blockquote:before, blockquote:after,
    56. q:before, q:after
    57. {
    58. content: "";
    59. }
    60. blockquote, q
    61. {
    62. quotes: "" "";
    63. }
    64. /*FE STYLING*/
    65. body{
    66. background-color: #101010;
    67. }
    68. #body_container{
    69. margin: 55px auto 55px auto;
    70. width: 980px;
    71. background-color: #fff;
    72. border: 10px solid #ff0066;
    73. }
    74. #head_section{
    75. margin: 0 0 0 0;
    76. padding: 0 0 0 0;
    77. height: 228px;
    78. background-color: #fff;
    79. }
    80. #nav_section{
    81. margin: 0 0 0 0;
    82. background-color: #ff0066;
    83. float: left;
    84. width: 120px;
    85. padding:10px;
    86. text-align:left;
    87. font-family: Helvetica, sans-serif;
    88. font-size: 15px;
    89. line-height: 30px;
    90. display:block;
    91. }
    92. #nav_section ul{
    93. width: 120px;
    94. list-style-type: none;
    95. display: block;
    96. }
    97. #nav_section ul li{
    98. display: block;
    99. float: left;
    100. list-style-type:none;
    101. }
    102. #nav_section ul li a:link,
    103. #nav_section ul li a:active,
    104. #nav_section ul li a:visited{
    105. display: block;
    106. height: 30px;
    107. text-align: center;
    108. overflow: hidden;
    109. color: #3f3f3f;
    110. }
    111. * html #nav_section ul li a{
    112. float: left;
    113. display: block;
    114. }
    115. #nav_section ul li a:hover{
    116. display: block;
    117. height: 30px;
    118. text-align: center;
    119. overflow: hidden;
    120. background-color: #ff0066;
    121. color: #fff;
    122. }
    123. .active{
    124. display: block;
    125. height: 30px;
    126. text-align: center;
    127. overflow: hidden;
    128. background-color: #ff0066;
    129. color: #ffffff;
    130. }
    131. #content_section{
    132. margin: 0 0 0 0;
    133. padding: 10px 10px 10px 10px;
    134. background-color: #fff;
    135. border-top: 10px solid #ff0066;
    136. font-family: Helvetica, sans-serif;
    137. font-size: 15px;
    138. line-height: 20px;
    139. color: #808080;
    140. }
    141. #content_section h1{
    142. font-family: Helvetica, sans-serif;
    143. font-size: 20px;
    144. line-height: 40px;
    145. color: #808080;
    146. }
    147. #content_section a:link,
    148. #content_section a:active,
    149. #content_section a:visited
    150. {
    151. color: #ff0066;
    152. }
    153. #content_section a:hover
    154. {
    155. color: #000;
    156. }
    157. #footer_section{
    158. margin: 0 0 0 0;
    159. padding: 10px 10px 10px 10px;
    160. background-color: #fff;
    161. border-top: 10px solid #ff0066;
    162. }
    163. #footer_section{
    164. font-family: Helvetica, sans-serif;
    165. font-size: 10px;
    166. line-height: 15px;
    167. text-align: justify;
    168. color: #808080;
    169. }
    170. #footer_section a:link,
    171. #footer_section a:active,
    172. #footer_section a:visited
    173. {
    174. color: #ff0066;
    175. }
    176. #footer_section a:hover
    177. {
    178. color: #000;
    179. }
    180. p._footer{
    181. margin-top: 10px;
    182. text-align: center;
    183. }
    184. /*Visual editing Mode*/
    185. div.visual_element:hover
    186. {
    187.  border: 2px solid #ff0066;
    188.  padding: 5px;
    189. }
    190. .visual
    191. {
    192.  width: 100%;
    193.  text-align: center;
    194.  height: 20px;
    195.  line-height: 20px;
    196.  font-family: Helvetica, Arial, Verdana, sans-serif;
    197.  font-size: 11px;
    198.  color: #3f3f3f;
    199.  background-color: #fff;
    200. }
    201.  
     
    #12      
  13. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    Vertikale Navigation
    AW: Vertikale Navigation

    Hi,

    noch ne Anmerkung zur Funktion:
    PHP:
    1. function redirect_404()
    2.  {
    3.   @header("Location: http://$host$uri/404");
    4.  }
    die kannst du eigentlich weg lassen, da du sie immer nur aufrufst, NACHDEM du schon eine Ausgabe gemacht hast. Die Funktion header() funktioniert nur, wenn zuvor noch kein Text oder irgendwelche anderen Angaben ausgegeben wurden. Sie funktioniert sogar schon nicht, wenn eine php-Datei UTF8 mit BOM formatiert wurde, da die BOM beim Dateiaufruf fälschlicherweise an den Client gesendet wird...

    Schöne Grüße aus dem Sauerland!
    Chriss
     
    #13      
  14. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    Vertikale Navigation
    ERLEDIGT: Vertikale Navigation

    Danke für die Unterstützung - habe es nun hinbekommen...nu ist nur noch Finetuning angesagt..

    Gruß
     
    #14      
  15. netbandit

    netbandit Aktives Mitglied

    12
    Dabei seit:
    18.05.2008
    Beiträge:
    1.145
    Geschlecht:
    männlich
    Vertikale Navigation
    AW: Vertikale Navigation

    Warum sagt mir keiner, daß ich horizontal und vertikal vertauscht/verwechselt habe? :D:uhm:
     
    #15      
  16. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    Vertikale Navigation
    AW: Vertikale Navigation

    @netbandit: du hast vertikal und horizontal vertauscht! ;) :p :D

    @NiAlM: hast du die php-Datei auch angepasst, oder hast du die Weiterleitung per header() gelassen?

    Schöne Grüße aus dem Sauerland!
    Chriss
     
    #16      
x
×
×