Nina: Verweise innerhalb von CSS basierten Layouts definieren

SELF-Forum

Verweise innerhalb von CSS basierten Layouts definieren

Nina Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi ihrs,

ich mal wieder. Ich stehe schon wieder vor einem Problem bei der Seitengestaltung mit CSS komplett ohne Frames.

Ich möchte ein Menü auf der linken Seite haben, das Verweise zu den Unterseiten enthält, die dann im Bereich "inhalt" geöffnet werden:

http://filderchins.chinchillasucht.com/index2.php

Meine index2.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<link rel="stylesheet" href="css1.css" type="text/css">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Filderchins.de</title>
</head>

<body>
<div id="header" text-align: center;>
<img id="imgheader" style="vertical-align:middle;" border=1 src="./bilder/bspheader.png" alt="Die Headergrafik kann leider nicht angezeigt werden.">
</div>
<div id="menu"><?php include("menue2.php"); ?></div>
<div id="inhalt">Inhalt</div>
<div id="right">rechts</div>
<div id="footer">Hier kommt die Fußzeile</div>

</body>
</html>

Ich finde einfach nicht raus (und ich hab jetzt mehrere Stunden SelfHTML und andere Seiten im Netz durchsucht), wie ich das umsetzen kann, was ich bei Frames mit "target" gemacht hätte.

Bin dankbar für jeden Tipp.

LG,
Nina

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Verweise innerhalb von CSS basierten Layouts definieren

    Gonzo
    – Informationen zu den Bewertungsregeln

    ich mal wieder. Ich stehe schon wieder vor einem Problem bei der Seitengestaltung mit CSS komplett ohne Frames.

    Ich möchte ein Menü auf der linken Seite haben, das Verweise zu den Unterseiten enthält, die dann im Bereich "inhalt" geöffnet werden:

    Ich finde einfach nicht raus (und ich hab jetzt mehrere Stunden SelfHTML und andere Seiten im Netz durchsucht), wie ich das umsetzen kann, was ich bei Frames mit "target" gemacht hätte.

    Grundsätzlich gar nicht. Wenn du anfängst, Frames-Funktionalität mittels <div>s nachzubauen, solltest du besser gleich bei den Frames bleiben, die sind zur Außenwelt kompatibler (und du kennst dich damit aus).

    Im Speziellen ist es zwar via DOM und AJAX möglich, den Inhalt eines Seitenelements auszutauschen, aber das ist für die allgemeine Anwendung restlos kontraproduktiv, weil keine Suchmaschine damit umgehen kann (da Javascript-basiert) und ein Gutteil der Besucher auch nicht (da Javascript-basiert).

    Was du möchtest, ist, das Menü in eine eigene Datei auszulagern, etwa menue.inc.php, und diese mittels require_once() in jede Seite einzubinden.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Verweise innerhalb von CSS basierten Layouts definieren

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Gonzo:

      Was du möchtest, ist, das Menü in eine eigene Datei auszulagern, etwa menue.inc.php, und diese mittels require_once() in jede Seite einzubinden.

      In den meisten Fällen ist stattdessen readfile() angebracht. Oder SSI.

      Live long and prosper,
      Gunnar

      --
      „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Verweise innerhalb von CSS basierten Layouts definieren

        Nina Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Huhu ihr,

        danke schon mal.

        Ich versteh leider rein gar nichts von php. Am liebsten wäre mir ja eine HTML Lösung ohne PHP oder SSI. Und ja: ich hab versucht, beides zu verstehen, aber es ist wirklich aussichtslos.

        Gibts denn gar keine Möglichkeit, das mit HTML zu machen ?

        LG,
        Nina

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Verweise innerhalb von CSS basierten Layouts definieren

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Nina:

          Gibts denn gar keine Möglichkeit, das mit HTML zu machen ?

          Doch, du baust das Menü selbst in jedes deiner HTML-Dokumente ein. Es gibt auch Editoren, die das für dich erledigen können. Siehe FAQ.

          Live long and prosper,
          Gunnar

          --
          „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Verweise innerhalb von CSS basierten Layouts definieren

            Nina Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Huhu ihr,

            und schon steh ich wieder vor dem nächsten Problem *grummel*.

            Ich habe jetzt an dem Template noch einige Änderungen gemacht:

            http://filderchins.chinchillasucht.com/index3.php

            Wie ihr seht, funktioniert das auf der Startseite auch einwandfrei.

            Nur wenn ich auf einen anderen Verweis im Menü klicke, zerschiesst es mir das Layout und das rechte Menü wird total verschoben dargestellt, wie man hier sieht:

            http://filderchins.chinchillasucht.com/index3.php?seite=news

            Ich habe nun mehrere Stunden alles mögliche versucht, aber ich finde keine Lösung dafür. Das Problem entsteht, sobald ich die PHP codes in meine index3 einfüge.

            Hier mal meine CSS Datei:

              
/* *** css by miss monorom www.intensivstation.ch *** */  
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */  
  
body {  
background-color: #e1ddd9;  
font-size: 11px;  
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;  
color:#564b47;  
padding:0;  
margin:0;  
}  
a {color: #DB7093;}  
a:visited {color:#DB7093;}  
a:hover {color: #564b47;}  
a:active { color:#000000;}  
  
h1 {  
font-size: 11px;  
text-transform:uppercase;  
background-color: #E0A3B7;  
border-top:1px solid #564b47;  
border-bottom:1px solid #564b47;  
padding:5px 15px;  
margin:0 }  
  
h2 {  
font-size:20px;  
font-weight: normal;  
padding: 5px 10px;  
margin:0px;}  
  
img.download {vertical-align:middle;}  
  
/* ----------container zentriert das layout-------------- */  
#container {  
width: 900px;  
margin-bottom: 10px;  
margin:10px auto auto auto;  
background-color: #564b47;  
}  
  
/* ----------banner for logo-------------- */  
#banner {  
background-color: #840000;  
text-align: right;  
padding: 0px;  
margin: 0px;  
}  
#banner img {padding:10px 0px;}  
  
/* -----------------Inhalt--------------------- */  
#content {  
float: top left;  
background-color: #ffffff;  
}  
  
div#content {  
height:400px;  
max-width: 500px;  
overflow:scroll;  
}  
  
p, pre{  
padding: 5px 10px;  
margin:0;  
}  
  
/* --------------left navigavtion------------- */  
#left {  
float: left;  
width: 200px;  
height:400px;  
margin: 0px;  
padding: 0px;  
background-color: #840000;  
}  
#right {  
 float:right;  
 height:400px;  
      width:200px;  
 margin:0;  
 padding: 0;  
 background-color: #840000;  
  
}  
/* -----------footer--------------------------- */  
#footer {  
clear: both;  
margin: 0px;  
padding: 0px;  
text-align: center; }

            Und die index3:

              
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
          "http://www.w3.org/TR/html4/loose.dtd">  
<head>  
<link type="text/css" href="1-3col.css" rel="stylesheet" media="screen" />  
<title>Filderchins.de</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
</head>  
<body>  
<div id="container">  
 <div id="banner" ><p align="center"><img src="./bilder/bspheader.png" alt="Headergrafik"  border="1" /></a></p>  
</div>  
  
 <div id="mainnavi" >  
   <p><code>Plaltzhalter Hauptnavigation</code></p>  
</div>  
 <div id="left">  
 <P align=center>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=home" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_home.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=news" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_news.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=about" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_about.png border=0></a><br>  
<br><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=stammtiere" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_stammtiere.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=nachwuchs" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_nachwuchs.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=abgabe" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_abgabe.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=diekatzen" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_katzen.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index3.php?seite=videos" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_videos.png border=0></a><br>  
<br>  
</font></p>  
  
</div>  
 <div id="right">  
<P align=center>  
<a href="http://filderchins.chinchillasucht.com/index2.php?seite=links" ><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_links.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index2.php?seite=gbook"><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_gb.png border=0></a><br>  
<a href="http://filderchins.chinchillasucht.com/index2.php?seite=impresssum"><IMG src=http://filderchins.chinchillasucht.com/bilder/buttonsneu/b_impressum.png border=0></a></p>  
<br><br><br><br><br>  
<?php  
$chCounter_visible = 1;  
$chCounter_status = 'active';  
include( '/WWWROOT/125424/htdocs/chCounter/counter.php' );  
?>  
</div>  
  
 <div id="content">  
<?php include '_center.php'; ?>  
  
</div>  
  <div id="footer"><img align="center" src="./bilder/unten.png"></div>  
</div>  
</body>  
</html>

            Wie gesagt, ich hab so ziemlich alles, was mir einfiel, durchprobiert, hatte erst readfile im div=left stehen, hatte im div=content erst kein include, sondern die Angaben direkt eingefügt, hab im CSS alles mögliche und unmögliche mit margin und sonstwas probiert, aber all das ändert nichts an meinem Problem.

            Hat jemand eine Idee ?

            Ich bedank mich schon mal für Eure Geduld.

            LG,
            Nina

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Verweise innerhalb von CSS basierten Layouts definieren

              Ingo Turski Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,

              Nur wenn ich auf einen anderen Verweis im Menü klicke, zerschiesst es mir das Layout und das rechte Menü wird total verschoben dargestellt, wie man hier sieht:

              vergleiche selbst:
               <div id="content">
              <link rel="stylesheet" href="http://filderchins.chinchillasucht.com/css.css" type="text/css" media="screen" />
              mit:
               <div id="content">
              <link rel="stylesheet" href="http://filderchins.chinchillasucht.com/css1.css" type="text/css" media="screen" />
              <body id="fixedbg">

              Abgesehen davon, weder <link> noch <body> sind innerhalb des Body-Elements zulässig.

              freundliche Grüße
              Ingo

              --
              [barrierefreie Ingo Webdesign » Suchmaschinenoptimierung | em? | IE7 - Bugs]
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Verweise innerhalb von CSS basierten Layouts definieren

                Nina Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hi Ingo,

                äääh, ich glaube, du hast da was durcheinander gebracht......

                index3.php ist die Datei, um die es hier geht.

                Und diese greift auf ein Stylesheet namens 1-3col.css zu.

                In keiner der beiden Framefreien Versionen (index2 und index3) kommt einer dieser Ausdrücke vor.

                LG,
                Nina

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Verweise innerhalb von CSS basierten Layouts definieren

                  Nina Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Oke, ich stand eben echt auf dem Schlauch - wie immer :D. Jetzt weiss ich, was du meinst.
                  Danke !

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

        2. Verweise innerhalb von CSS basierten Layouts definieren

          Gonzo
          – Informationen zu den Bewertungsregeln

          Am liebsten wäre mir ja eine HTML-Lösung ohne PHP

          Warum verwendest du dann ein PHP-Skript?

          SSI. Und ja: ich hab versucht, beides zu verstehen, aber es ist wirklich aussichtslos.

          Aussichtslos? Die Anweisung <!--#include virtual="/menue.html" --> an der Stelle der Seite einzufügen, an der das Menü erscheinen soll, ist nun nicht wirklich so schwer.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Verweise innerhalb von CSS basierten Layouts definieren

            Nina Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            ihr habt bestimmt meinen zweiten Beitrag weiter oben überlesen.... Nach dem ersten Panikanfall beim Wort php hab ich mich dann daran gewagt, Snafus Lösung auszuprobieren und das funktioniert auch sehr gut.
            Ich kann kleine Sachen mit PHP schon machen, allerdings nur Codes kopieren, nicht selber schreiben - überfordert mich einfach ;).

            Danke für Eure Hilfe. Ganz besonders an Snafu :).

            LG,
            Nina

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Verweise innerhalb von CSS basierten Layouts definieren

    Snafu
    – Informationen zu den Bewertungsregeln

    Hallo!
    Du hast die Seiteninhalte in irgendwelchen Dateien gespeichert, z.B. im Ordner "content".
    In der "index.php" (oder wie du sie nennst) hast du das Grundgerüst deiner Seite drinnen mit den entsprechenden Befehlen um die Inhalte die dynamisch eingefügt werden sollen (und eventuell von Variablen abhängen) einzufügen.

    --------------------

      
<html>  
<head>  
<title>bla</title>  
</head>  
<body>  
<div id="menu">
~~~`<?php readfile('./menu.html'); ?>`{:.language-php}~~~html
</div>  
<div id="inhalt">
~~~~~~php
  
<?php  
 $inhalt = '';  
 switch($_GET['seite']) {  
  case 'impressum':  
   $inhalt = './content/impressum.html';  
   break;  
  case 'kontakt':  
   $inhalt = './content/kontakt.html';  
   break;  
  default:  
   $inhalt = './content/home.html';  
 }  
 readfile($inhalt);  
?>
~~~~~~html
  
</div>  
...  
</body>  
</html>

    --------------------
    Falls die dynamisch nachgeladenen Seiten php-Skripte verwende include(), bei "statischem Inhalt" solltest du readfile() verwenden.

    Um jetzt z.b. den Inhalt von content/kontakt.html anzeigen zu lassen musst du die URI http://www.example.com/index.php?seite=kontakt aufrufen (statt www.example.com natürlich deine domain). Standardmäßig (default) wird der Inhalt von content/home.html eingefügt.

    Hoffe das war jetzt verständlich.

    --
    LG,
    Snafu
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Verweise innerhalb von CSS basierten Layouts definieren

      Nina Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi Snafu,

      na, da hab ich wohl beim Wort php erstmal Panik bekommen :) (siehe mein Post ganz unten).

      Danke für deine Hilfe ! Das sieht ja wirklich machbar für nen PHP-Unverständigen wie mich aus....

      (5 min später)

      UND ES FUNKTIONIERT AUCH !!!

      VIELEN, VIELEN LIEBEN DANK!!

      LG

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln