Vertikale Navigation

NiAlMa · 18.08.2010

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

fexx · 18.08.2010

AW: Vertikale Navigation

hi, schick mal bitte den link per pm

SvenBrnn · 18.08.2010

AW: Vertikale Navigation

Wenn du sowas meinst:
WebDesign - Tips und Tricks: Dynamische Navigationsleisten

Dazu brauchste nur CSS und ne Gute anleitung

cebito · 18.08.2010

AW: Vertikale Navigation

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

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.

NiAlMa · 19.08.2010

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

ArtiHl · 19.08.2010

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.

NiAlMa · 19.08.2010

AW: Vertikale Navigation

ArtiHl schrieb:
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.

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:

<?php
 // Including necessary Files
   require_once('data/config/config.inc.php');
   require_once('data/config/constructr_define.inc.php');
   require_once('data/config/constructr_settings.inc.php');
   require_once('backend/helper_func.inc.php');
    require_once('data/php/constructr.class.php');
 // Defining some Vars and Paths
   $host      = $_SERVER['HTTP_HOST'];
   $uri       = rtrim(dirname($_SERVER['PHP_SELF']), '/');
   $ROOT_PATH = 'http://' . $host . $uri;
   $IMG_PATH  = 'http://' . $host . $uri . '/data/workspace/pix/';
   $CSS_PATH  = 'http://' . $host . $uri . '/data/workspace/css/';
   $JS_PATH   = 'http://' . $host . $uri . '/data/workspace/js/';
   $UPL_PATH  = 'http://' . $host . $uri . '/data/workspace/uploads/';
    $db        =& new constructr($HOST,$USER,$PASSWD,$DATABASE);
 // A Function to redirect to Section /404/
 function redirect_404()
 {
  @header("Location: http://$host$uri/404");
 }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="utf-8" />
<?php
 // Drawing Page Title
 if(!isset($_GET['show_page']))
 {
  echo '<title>SC Sun-Moon</title>';
 }
 else
 {
  $SHOW_PAGE = $db -> prepare($_REQUEST['show_page']);
  echo '<title>SC Sun-Moon - ' . strtoupper($SHOW_PAGE) . '</title>'; 
 }
    // Building RSS 2.0-FEED Link
    if(isset($_GET['show_page']))
    {
  $SHOW_PAGE = $db -> prepare($_REQUEST['show_page']);
        $feed_identifier = $SHOW_PAGE;
        $get_page_feed = $db -> query("
           SELECT *
           FROM $DB_TABLE_CONSTRUCTR_PAGES
           WHERE page_alias = '$feed_identifier'
        LIMIT 1
       ");
 
        $act_page_id = $db -> fetch_array($get_page_feed);
     $page_id  = $act_page_id['page_id'];
        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 . '" />';
    }
?>
<script src="<?php echo $JS_PATH; ?>jquery.min.js" type="text/javascript"></script>
<script src="<?php echo $JS_PATH; ?>jquery.cookie.js" type="text/javascript" /></script>
<link rel="stylesheet" type="text/css" href="<?php echo $CSS_PATH; ?>style.css" />
<link rel="shortcut icon" href="<?=$IMG_PATH?>constructr.ico" type="image/x-icon">
</head>
<body>
<?php
 if(isset($_SESSION['visual']))
 {
  echo '<p class="visual">Visual editing Mode | <a href="?destroy_visual=true">Logout</a></p>';
 }
?>
<?php
 // To make hidden Content and Pages visible in Preview Mode
 if(isset($_REQUEST['preview']))
 {
  define('CONSTRUCTR_PREVIEW','TRUE');
 
  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;">';
  echo 'Preview-Mode: hidden Pages and Content are visible';
  echo '</div>';
 }
 else
 {
  define('CONSTRUCTR_PREVIEW','FALSE');
 }
?>
<div id="body_container">
 
<!-- Header -->
<div id="head_section">
<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>    
</div><!--EOF DIV ID HEAD SECTION-->
<div id="nav_section">
<?php
 if(CONSTRUCTR_PREVIEW == 'TRUE')
 {
     $get_pages = $db -> query("
         SELECT *
         FROM $DB_TABLE_CONSTRUCTR_PAGES
         ORDER BY page_lft ASC
     ");
 }
 else
 {
     $get_pages = $db -> query("
         SELECT *
         FROM $DB_TABLE_CONSTRUCTR_PAGES
         WHERE page_visibility = '1'
         ORDER BY page_lft ASC
     ");
 }
 echo '<ul>';
 
    while ($all_pages = $db -> fetch_array($get_pages))
    {
  $page_id = $all_pages['page_id'];
  $page_name  = $all_pages['page_name'];
  $page_name  = explode('{:|:}',$page_name); 
  $page_name  = $page_name[$_COOKIE['FE_LANG']];
  $page_alias = $all_pages['page_alias'];
  $page_lft   = $all_pages['page_lft'];
  $page_class = $all_pages['page_class'];
 
    if(!isset($_SESSION['visual']))
  {
     if($_GET['show_page'] == $page_alias)
   {
    if($page_lft == '1')
    {
     echo '<li class="active"><a href="http://' . $host . $uri . '/" title="http://' . $host . $uri . '/">' . $page_name . '</a></li>';
    }
    else
    {
     echo '<li class="active"><a href="http://' . $host . $uri . '/' . $page_alias . '/" title="http://' . $host . $uri . '/' . $page_alias . '/">' . $page_name . '</a></li>';
    }
   }
   else
   {
    if($page_lft == '1')
    {
     echo '<li><a href="http://' . $host . $uri . '/" title="http://' . $host . $uri . '/">' . $page_name . '</a></li>';
    }
    else
    {
     echo '<li><a href="http://' . $host . $uri . '/' . $page_alias . '/" title="http://' . $host . $uri . '/' . $page_alias . '/">' . $page_name . '</a></li>';
    }
   }
  }
  else
  {
   echo '<li><a href="?show_page=' . $page_name . '&visual_mode=true" title="?show_page=' . $page_name . '">' . $page_name . '</a></li>';
  }
 }
 echo '</ul>';
?>
</div><!--EOF DIV ID NAV SECTION-->
 
<div id="content_section">
<?php
   if(!isset($_GET['show_page']))
   {
       $get_page_id = $db -> query("
           SELECT *
           FROM $DB_TABLE_CONSTRUCTR_PAGES
           WHERE page_lft = '1'
     LIMIT 1
       ");
 
       $act_page_id = $db -> fetch_array($get_page_id);
     $page_id  = $act_page_id['page_id'];
     $page_name  = $act_page_id['page_name'];
     $page_class  = $act_page_id['page_class'];
 
     if(CONSTRUCTR_PREVIEW == 'TRUE')
     {
         $get_page_content = $db -> query("
             SELECT *
             FROM $DB_TABLE_CONSTRUCTR_CONTENT
             WHERE page_id = '$page_id'
             ORDER BY sort ASC
         ");
     }
     else
     {
         $get_page_content = $db -> query("
             SELECT *
             FROM $DB_TABLE_CONSTRUCTR_CONTENT
             WHERE page_id = '$page_id'
             AND visibility = '1'         
             ORDER BY sort ASC
         ");
     }
 
     $content_counter = $db -> num_rows($get_page_content);
 
     if($content_counter != 0)
     {
         while ($act_content = $db -> fetch_array($get_page_content))
         {
             $id            = $act_content['id'];
             $page_id       = $act_content['page_id'];
             $content       = $act_content['content'];
    $content_array = explode('{:|:}',$content);
             $visibility    = $act_content['visibility'];
             $sort          = $act_content['sort'];
    if(isset($_SESSION['visual']))
    {
     echo '<div class="visual_element" title="[Element ID: ' . $id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
    }
    else
    {
     echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));    
    }
      }
     }
     else
    {
   echo '404 Not Found';
   redirect_404();
  }
   }
 else if($_GET['show_page']=='kotakt')
 {
  require_once('kontakt.inc.php');
 }
   else
   {
       $db        =& new constructr($HOST,$USER,$PASSWD,$DATABASE);
     $host     = $_SERVER['HTTP_HOST'];
     $uri       = rtrim(dirname($_SERVER['PHP_SELF']), '/');
  $show_page = $db -> prepare($_REQUEST['show_page']);
 
       $get_page_id = $db -> query("
           SELECT *
           FROM $DB_TABLE_CONSTRUCTR_PAGES
           WHERE page_alias = '$show_page'
     LIMIT 1
       ");
 
       $act_page_id = $db -> fetch_array($get_page_id);
     $page_id  = $act_page_id['page_id'];
     $page_name  = $act_page_id['page_name'];
 
        if(CONSTRUCTR_PREVIEW == 'TRUE')
        {
            $get_page_content = $db -> query("
                SELECT *
                FROM $DB_TABLE_CONSTRUCTR_CONTENT
                WHERE page_id = '$page_id'
                ORDER BY sort ASC
            ");
        }
        else
        {
            $get_page_content = $db -> query("
                SELECT *
                FROM $DB_TABLE_CONSTRUCTR_CONTENT
                WHERE page_id = '$page_id'
                AND visibility = '1'
                ORDER BY sort ASC
            ");
        }
 
        $content_counter = $db -> num_rows($get_page_content);
 
        if($content_counter != 0)
        {
   while ($act_content = $db -> fetch_array($get_page_content))
         {
             $id            = $act_content['id'];
             $page_id       = $act_content['page_id'];
             $content       = $act_content['content'];
    $content_array = explode('{:|:}',$content);
             $visibility    = $act_content['visibility'];
             $sort          = $act_content['sort'];
    if(isset($_SESSION['visual']))
    {
     echo '<div class="visual_element" title="[Element ID: ' . $id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
    }
    else
    {
     echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));    
    }
           }
     }
     else
     {
   echo '404 Not Found';
   redirect_404();
      }
   }
?>
</div><!--EOF DIV ID CONTENT SECTION-->
 
<div id="footer_section">
<?php
 // Example for grabbing Content with defined Sticky ID
 $get_sticky_666 = $db -> query("
     SELECT *
        FROM $DB_TABLE_CONSTRUCTR_CONTENT
        WHERE sticky_id = '666'
  LIMIT 1
 ") or die(mysql_error());
 $sticky666 = $db -> num_rows($get_sticky_666);
 
    if($sticky666 != 0)
    {
  $act666        = $db -> fetch_array($get_sticky_666);
  $id            = $act666['id'];
  $sticky_id     = $act666['id'];
  $content       = $act666['content'];
  $content_array = explode('{:|:}',$content);
 
  if(isset($_SESSION['visual']))
  {
   echo '<div class="visual_element" title="[Element ID: ' . $id . ' // Sticky-ID: ' . $sticky_id . ']">' . unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']])) . '</div>';
  }
  else
  {
    echo unhtmlentities(base64_decode($content_array[$_COOKIE['FE_LANG']]));
  }
 }
?>
</div><!--EOF DIV ID FOOTER SECTION-->
</div><!--EOF DIV ID BODY CONTAINER-->
<?php
//******************************************************************************************************************************
?>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() 
{
 // Auto-Language Selection
 if (!$.cookie('FE_LANG')) {
  $.cookie('FE_LANG','0',{ expires: 365 });
  window.open('./','_self','');
 }
 // Fullscreen View
 $('a.lang').click(
  function() 
  {
   var lang = this.id;
 
   if($.cookie('FE_LANG'))
   {
    $.cookie('FE_LANG', null);
   } 
   else 
   {
    $.cookie('FE_LANG',lang,{ expires: 365 });
   }
   $.cookie('FE_LANG',lang,{ expires: 365 });
   window.open('./','_self','');
   return false;
  }
 );
});
// ]]>
</script>
</body>
</html>
<?php
$db -> close();
?>

und der
style.css

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
a
{
text-decoration: none;
background-color: #171717;
color: #f8f8f8;
text-decoration: none;
}
:focus 
{
outline: 0;
}
body 
{
line-height: 1;
color: yellow;
background: #171717;
}
ol, ul 
{
list-style: none;
color: yellow;
background: #171717;
}
table 
{
/*border-collapse: separate; 
border-spacing: 0; */
color: yellow;
background: #171717;
}
caption, th, td 
{
text-align: left;
font-weight: normal;
color: yellow;
background: #171717;
}
blockquote:before, blockquote:after,
q:before, q:after 
{
content: "";
}
blockquote, q 
{
quotes: "" "";
}
/*FE STYLING*/
body{
background-color: #171717;
background-image:url('http://xxx/data/workspace/pix/bg.jpg');
}
#body_container{
margin: 16px auto 55px auto;
width: 980px;
background-color: #171717;
/*border: 1px solid #f8f8f8; */
}
div#languages{
margin: 18px 10px 10px 10px;
}
#languages a:link,
#languages a:active,
#languages a:visited {
background-color: #101010;
color: #ff0066;
line-height: 20px;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 10px 10px 10px 10px;
}
#languages a:hover {
background-color: #101010;
color: #fff;
line-height: 20px;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 10px 10px 10px 10px;
}
#head_section{
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 228px;
width: 100%;
background-color: #171717;
}
#nav_section{
margin: 0 0 0 0;
background-color: #171717;
width: 25%;
}
#nav_section{
font-family: Helvetica, sans-serif;
font-size: 15px;
line-height: 30px;
}
#nav_section ul{
width: 25%;
color: #f8f8f8;
background: #171717;
}
#nav_section ul li{
display: inline;
float: left;
color: #f8f8f8;
background: #171717;
width: 25%;
}
#nav_section ul li a:link,
#nav_section ul li a:active,
#nav_section ul li a:visited{
display: block;
height: 30px;
width: 25%; 
text-align: center;
overflow: hidden;
color: #f8f8f8;
background-color: #171717;
}
* html #nav_section ul li a{
float: left;
}
#nav_section ul li a:hover{
display: block;
height: 30px;
width: 25%; 
text-align: center;
overflow: hidden;
background-color: #171717;
color: #f8f8f8;
}
.active{
display: block;
height: 30px;
width: 25%;  
text-align: center;
overflow: hidden;
background-color: #171717;
color: #f8f8f8;
}
#content_section{
 clear: left;
 margin: 0 0 0 0;
 padding: 20px 10px 10px 10px;
 background-color: #171717;
 color:#f8f8f8;/*border-top: 1px solid #f8f8f8;*/
 width: 75%;
}
#content_section{
font-family: Helvetica, sans-serif;
font-size: 15px;
line-height: 20px;
color: yellow;
background-color: #171717;
width: 75%;
}
#content_section h1{
font-family: Helvetica, sans-serif;
font-size: 20px;
line-height: 40px;
color: red;
background-color: #171717;
}
#content_section a:link,
#content_section a:active,
#content_section a:visited
{
color: #b22222;
background-color: #171717;
}
#content_section a:hover
{
color: #b22222;
background-color: #171717;
}
#footer_section{
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
background-color: #b22222;
/*border-top: 1px solid #f8f8f8; */
color: yellow;
text-align: center;
width: 980px;
}
#footer_section{
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
text-align: justify;
color: #f8f8f8;
background-color: #171717;
width: 980px;
}
#footer_section a:link,
#footer_section a:active,
#footer_section a:visited
{
background-color: red;
color: #f8f8f8;
 font-weight: bold;
 font-style: italic;
 text-shadow: black;
 text-decoration: dotted;
}
#footer_section a:hover
{
background-color: red;
color: #f8f8f8;
 font-weight: bold;
 font-style: italic;
 text-shadow: black;
 text-decoration: blink;
}
p._footer{
margin-top: 10px;
text-align: center;
background-color: red;
color: #f8f8f8;
 font-style: italic;
 text-shadow: black;
 text-decoration: blink;
 width: 980px;
}
/*Visual editing Mode*/
div.visual_element:hover
{
 border: 2px solid red;
 padding: 5px;
 background-color: #171717;
 color: #f8f8f8;
}
.visual
{
 width: 100%;
 text-align: center;
 height: 20px;
 line-height: 20px;
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 11px;
 color: #f8f8f8;
 background-color: #f8f8f8;
}

ArtiHl · 19.08.2010

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.

netbandit · 19.08.2010

AW: Vertikale Navigation

NiAlMa schrieb:
Quellcode bringt nichts, da es sich um eine php handet

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

NiAlMa · 19.08.2010

AW: Vertikale Navigation

netbandit schrieb:
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

Online kann man es unter 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

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="utf-8" />
<title>Constructr</title><script src="http://knuddlwoelkchen.de/data/workspace/js/jquery.min.js" type="text/javascript"></script>
<script src="http://knuddlwoelkchen.de/data/workspace/js/jquery.cookie.js" type="text/javascript" /></script>
<link rel="stylesheet" type="text/css" href="http://knuddlwoelkchen.de/data/workspace/css/style.css" />
<link rel="shortcut icon" href="http://knuddlwoelkchen.de/data/workspace/pix/constructr.ico" type="image/x-icon">
</head>
<body>
 
<div id="body_container">
<div id="languages">
<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-->
<div id="head_section">
<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>    
</div><!--EOF DIV ID HEAD SECTION-->
<div id="nav_section">
<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-->
 
<div id="content_section">
<p>Inhalt der Startseite</p>
<p>&nbsp;</p>
<p>Die index.php -&gt; <a href="http://knuddlwoelkchen.de/data/workspace/uploads/c88ced1fb07dc676cd048e843c8b4a75.rar">index.php</a></p>
<p>die style.css -&gt; <a href="http://knuddlwoelkchen.de/data/workspace/uploads/b75df25bf845f6463f5829548b2dffd1.rar">css</a></p></div><!--EOF DIV ID CONTENT SECTION-->
 
<div id="footer_section">
<br /><br />
 
<p class="_footer">
Copy knuddlwoelkchen<br />
<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>
</p>
</div><!--EOF DIV ID FOOTER SECTION-->
</div><!--EOF DIV ID BODY CONTAINER-->
 
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() 
{
 // Auto-Language Selection
 if (!$.cookie('FE_LANG')) {
  $.cookie('FE_LANG','0',{ expires: 365 });
  window.open('./','_self','');
 }
 // Fullscreen View
 $('a.lang').click(
  function() 
  {
   var lang = this.id;
 
   if($.cookie('FE_LANG'))
   {
    $.cookie('FE_LANG', null);
   } 
   else 
   {
    $.cookie('FE_LANG',lang,{ expires: 365 });
   }
   $.cookie('FE_LANG',lang,{ expires: 365 });
   window.open('./','_self','');
   return false;
  }
 );
});
// ]]>
</script>
</body>
</html>

ArtiHl · 19.08.2010

AW: Vertikale Navigation

Im Css:

HTML:

#nav_section ul{
width: 100px;
}

#nav_section ul li{
display: block;
float: left;
}

Ausserdem im:
#content_section {
das clear:left; löschen.

Danach mit padding und margin alles richtig schieben.

Schaue dir:
SELFHTML: Stylesheets (CSS)
und
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

sowie die Doku des CMS,welches du benutzt, an.

NiAlMa · 20.08.2010

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....

Die style.css sieht nun wie folgt aus:

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
*{
padding:0;
margin:0;
font-family: arial,helcetica,sans-serife;
font-weight:normal;
}   
a
{
text-decoration: none;
}
:focus 
{
outline: 0;
}
body 
{
line-height: 1;
color: black;
background: white;
}
ol, ul 
{
list-style: none;
}
table 
{
border-collapse: separate;
border-spacing: 0;
}
caption, th, td 
{
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after 
{
content: "";
}
blockquote, q 
{
quotes: "" "";
}
/*FE STYLING*/
body{
background-color: #101010;
}
#body_container{
margin: 55px auto 55px auto;
width: 980px;
background-color: #fff;
border: 10px solid #ff0066;
}
#head_section{
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 228px;
background-color: #fff;
}
#nav_section{
margin: 0 0 0 0;
background-color: #ff0066;
float: left;
width: 120px;
padding:10px;
text-align:left;
font-family: Helvetica, sans-serif;
font-size: 15px;
line-height: 30px;
display:block;
}
#nav_section ul{
width: 120px;
list-style-type: none;
display: block;
}
#nav_section ul li{
display: block;
float: left;
list-style-type:none;
}
#nav_section ul li a:link,
#nav_section ul li a:active,
#nav_section ul li a:visited{
display: block;
height: 30px;
text-align: center;
overflow: hidden;
color: #3f3f3f;
}
* html #nav_section ul li a{
float: left;
display: block;
}
#nav_section ul li a:hover{
display: block;
height: 30px;
text-align: center;
overflow: hidden;
background-color: #ff0066;
color: #fff;
}
.active{
display: block;
height: 30px;
text-align: center;
overflow: hidden;
background-color: #ff0066;
color: #ffffff;
}
#content_section{
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
background-color: #fff;
border-top: 10px solid #ff0066;
font-family: Helvetica, sans-serif;
font-size: 15px;
line-height: 20px;
color: #808080;
}
#content_section h1{
font-family: Helvetica, sans-serif;
font-size: 20px;
line-height: 40px;
color: #808080;
}
#content_section a:link,
#content_section a:active,
#content_section a:visited
{
color: #ff0066;
}
#content_section a:hover
{
color: #000;
}
#footer_section{
margin: 0 0 0 0;
padding: 10px 10px 10px 10px;
background-color: #fff;
border-top: 10px solid #ff0066;
}
#footer_section{
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
text-align: justify;
color: #808080;
}
#footer_section a:link,
#footer_section a:active,
#footer_section a:visited
{
color: #ff0066;
}
#footer_section a:hover
{
color: #000;
}
p._footer{
margin-top: 10px;
text-align: center;
}
/*Visual editing Mode*/
div.visual_element:hover
{
 border: 2px solid #ff0066;
 padding: 5px;
}
.visual
{
 width: 100%;
 text-align: center;
 height: 20px;
 line-height: 20px;
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 11px;
 color: #3f3f3f;
 background-color: #fff;
}

Chriss1987 · 20.08.2010

AW: Vertikale Navigation

Hi,

noch ne Anmerkung zur Funktion:

PHP:

function redirect_404()
 {
  @header("Location: http://$host$uri/404");
 }

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

NiAlMa · 20.08.2010

ERLEDIGT: Vertikale Navigation

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

Gruß

netbandit · 20.08.2010

AW: Vertikale Navigation

Warum sagt mir keiner, daß ich horizontal und vertikal vertauscht/verwechselt habe?

:uhm:

Chriss1987 · 20.08.2010

AW: Vertikale Navigation

@netbandit: du hast vertikal und horizontal vertauscht!

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

Schöne Grüße aus dem Sauerland!
Chriss