Probleme mit Content

wingman · 4. September 2004

Hallo

Habe ein Scrip erstellt. Das Problem ist wenn ich auf Test drücke dan kommt immer eine neue Webseite das will ich aber nicht, ich will das nur der Content ändert

Scrip

Code:

<?xml version="1.0" encoding="UTF-8"?> 
<!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"> 
<html> 
<head> 
<title>Div-Design</title> 
<meta name="author" content="Quaese" /> 
<style type="text/css"> 
  <!-- 
 
html {height: 100%; 
   width: 100%;} 
body {font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 9pt; 
      padding: 0px; 
      margin:5px; 
      height: 100%; 
      width: 100%; 
      background-color: #ffffff;} 
 
 
/* ++++++++++++++++++++++++++++++++++++++++++++ */ 
/* +++++++++++++ Seiten-Layout ++++++++++++++++ */ 
/* ++++++++++++++++++++++++++++++++++++++++++++ */ 
 
/* Container um den gesamten Contentbereich */ 
.mainDiv{ text-align: left; 
          width:974px;} 
/* Container für den SeitenHeader */ 
.headDiv{ width: 968px; 
     height: 100px; 
          margin: 0px 0px 2px 0px; 
          border: 1px solid black; 
          background-color: ghostwhite;} 
/* Navigations-Container */ 
.navDiv{ width: 968px; 
     height: 50px; 
         margin: 0px 0px 2px 0px; 
         border: 1px solid black; 
         background-color: mintcream;} 
 
/* Die Spalten werden mit "float: left" in den Textfluss aufgenommen und nebeneinander */ 
/* positioniert. Da der IE bei einer solchen Positionierung aufgrund des sogenannten   */ 
/* 3-Pixel-Bugs zwischen die Spalten einen nicht erwünschten Zwischenraum erstellt,    */ 
/* muss manipulativ eingegriffen werden.                                               */ 
/* Linke Spalte */ 
.leftDiv{ float: left; 
     margin-right: 2px; 
          width: 200px; 
          height: 200px;} 
*html .leftDiv{ margin-right: 0px;}    /* Korrektur für IE */ 
/* Mittlere Spalte */ 
.contentDiv{ float: left; 
        margin-left: 0px; 
             width: 568px;} 
*html .contentDiv{ margin-right: 0px;}  /* Korrektur für IE */ 
/* Rechte Spalte */ 
.rightDiv{ float: left; 
           margin-left: 0px; 
           width: 200px;} 
 
/* Anzeigebereich für den Content im mittleren Teil (oben) */ 
.innerDivTop{ clear: both; 
             width: 562px; 
              margin: 0px 2px 2px 2px; 
             border: 1px dashed black; 
             background-color: aliceblue;} 
*html .innerDivTop{width: 564px;}     /* Korrektur für IE */ 
/* Anzeigebereich für den Content (mitte, mit Scrollbar bei übergrossem Inhalt) */ 
.innerDivMid{ width: 562px; 
              height: 200px; 
              margin: 0px 2px 2px 2px; 
              overflow: auto; 
             border: 1px solid black; 
             background-color: ivory;} 
*html .innerDivMid{width: 564px;}     /* Korrektur für IE */ 
/* Anzeigebereich für den Content (unten) */ 
.innerDivBot{ width: 562px; 
              margin: 0px 2px; 
             border: 1px solid black; 
             background-color: ivory;} 
*html .innerDivBot{width: 564px;}     /* Korrektur für IE */ 
 
/* Anzeigebreich für die linke Spalte mit fester Höhe */ 
.innerLeftDiv{ width: 200px; 
               height: 200px; 
                margin-bottom: 2px; 
               border: 1px solid black; 
               background-color: red;} 
 
/* Anzeigebereich für die linke Spalte mit variabler Höhe */ 
.innerLeftDivFlexible{ width: 200px; 
                       margin-bottom: 2px; 
                       border: 1px solid black; 
                       background-color: red;} 
 
/* Anzeigebereich für die reche Spalte*/ 
.innerRightDiv{ width: 198px; 
               height: 200px; 
                margin-bottom: 2px; 
               border: 1px solid black; 
               background-color: aliceblue;} 
*html .innerRightDiv{width: 200px;}    /* Korrektur für den IE */ 
 
/* Anzeigebereich für die rechte Spalte mit variabler Höhe */ 
.innerRightDivFlexible{ width: 198px; 
                       margin-bottom: 2px; 
                       border: 1px solid black; 
                       background-color: red;} 
*html .innerRightDivFlexible{width: 200px;}    /* Korrektur für den IE */ 
 
/* Box für die linke Spalte (Schatten rechts) */ 
.boxTopLeft{ width: 200px; 
            height: 15px; 
            background-image: url(bilder/background/box_top.jpg); 
            background-repeat: no-repeat;} 
.boxMidLeft{ width: 200px; 
            background-image: url(bilder/background/box_mid.jpg); 
            background-repeat: repeat-y;} 
.boxBottomLeft{ width: 200px; 
               height: 25px; 
               background-image: url(bilder/background/box_bottom.jpg); 
               background-repeat: no-repeat; 
               margin-bottom: 5px;} 
 
/* Box für die rechte Spalte (Schatten links) */ 
.boxTopRight{ width: 200px; 
       height: 15px; 
             background-image: url(bilder/background/box_top_right.jpg); 
             background-repeat: no-repeat;} 
.boxMidRight{ width: 200px; 
             background-image: url(bilder/background/box_mid_right.jpg); 
             background-repeat: repeat-y;} 
.boxBottomRight{ width: 200px; 
                 height: 25px; 
                 background-image: url(bilder/background/box_bottom_right.jpg); 
                 background-repeat: no-repeat; 
                 margin-bottom: 5px;} 
 
/* Der Innenabstand zu den Rahmen der Anzeigebereiche wird mit Hilfe von margin vorgenommen, da  */ 
/* es bei der Verwendung von padding zu Anzeigeproblemen käme. Weil der IE das Boxmodell anders  */ 
/* interpretiert, hätten die angezeigten Breiten in den verschiedenen Browsern unterschiedliche  */ 
/* Werte. */ 
.innerPadding{ margin: 5px;}         /* Abstand zur Border in Anzeigebereichen ohne Box */ 
.boxPaddingLeft{ margin: 0px 25px 0px 13px;} /* Abstand zur Border in Boxen der linken Spalte   */ 
.boxPaddingRight{ margin: 0px 13px 0px 25px;} /* Abstand zur Border in Boxen der rechten Spalte  */ 
 
 
/* ++++++++++++++++++++++++++++++++++++++++++++ */ 
/* ++++++++++++++ Text-Layout +++++++++++++++++ */ 
/* ++++++++++++++++++++++++++++++++++++++++++++ */ 
 
/* Linke Spalte */ 
.leftDiv{ font-size: 8pt;} 
/* Rechte Spalte */ 
.rightDiv{ font-size: 8pt; 
     line-height: 135%;} 
 
/* Minimaler Textbereich um Inhalte schaffen zu können (ähnlich einem transparenten GIF) */ 
.dummy{ font-size: 0pt; 
    line-height: 0%; 
        height: 1px;} 
 
/* Link-Formatierung für Navigation */ 
a.navigation { font-weight: bold; 
         color: #000000; 
               text-decoration: none; 
               line-height: 180%;} 
a:hover.navigation { color: red;} 
 
  --> 
</style> 
</head> 
<body> 
<div class="mainDiv"> 
 <div class="headDiv">Head</div> 
 <div class="navDiv">Navigation</div> 
 <div class="leftDiv"> 
   <div class="boxTopLeft"><div class="dummy">&nbsp;</div></div> 
   <div class="boxMidLeft"> 
     <div class="boxPaddingLeft"> 
       <a class="navigation" href="#">Startseite</a><br> 
       <a class="navigation" href="test.html">Test</a><br> 
       <a class="navigation" href="#">Intern</a><br> 
       <a class="navigation" href="#">&Uuml;ber mich</a><br> 
       <a class="navigation" href="#">Gr&uuml;sse</a><br> 
       <a class="navigation" href="#">Forum</a><br> 
       <a class="navigation" href="#">Kontakt</a><br> 
       <a class="navigation" href="#">G&auml;stebuch</a><br> 
       <a class="navigation" href="#">Links</a> 
      </div> 
    </div> 
   <div class="boxBottomLeft"><div class="dummy">&nbsp;</div></div> 
   <div class="innerLeftDivFlexible"> 
     linker Container 2 
    <table style="height: 500px;"><tr><td>Tabelle zum Erzwingen von H&ouml;he</td></tr></table> 
    </div> 
  </div> 
  <div class="contentDiv"> 
   <div class="innerDivTop"> 
     <div class="innerPadding"> 
       innerer Container 
      </div> 
    </div> 
   <div class="innerDivTop"> 
     <div class="innerPadding"> 
       innerer Container (Seite drucken etc.) 
        <br />innerer Container (Seite drucken etc.) 
        <br />innerer Container (Seite drucken etc.) 
        <br />innerer Container (Seite drucken etc.) 
      </div> 
    </div> 
   <div class="innerDivMid"> 
     <div class="innerPadding"> 
       innerer Container f&uuml;r den Content<br /> 
       mit overflow-Eigenschaft f&uuml;r den Fall, dass der Text zu lang wird<br /> 
       Beispiel: 
       <table style="height: 500px;"><tr><td>Tabelle</td></tr></table> 
       noch etwas Text 
      </div> 
    </div> 
   <div class="innerDivBot">innerer Container f&uuml;r Symbole</div> 
  </div> 
  <div class="rightDiv"> 
   <div class="boxTopRight"><div class="dummy">&nbsp;</div></div> 
   <div class="boxMidRight"> 
     <div class="boxPaddingRight"> 
       Hall&ouml;chen,<br> 
        ich bin Inhalt in der rechten Spalte. 
      </div> 
    </div> 
   <div class="boxBottomRight"><div class="dummy">&nbsp;</div></div> 
  </div> 
</div> 
</body> 
</html>

Besten Dank

Grusss

Fabian H · 4. September 2004

Kurz und knapp:
Geht nicht.

Wenn es unbedingt sein muss, dann kannst du IFrames (<-- Stichwort) verwenden.
Sind aber imo, wie Frames, kein schoener Stil.

Gumbo · 5. September 2004

Du wirst wohl auf eine serverseitige Lösung zurückgreifen müssen.

Mit PHP oder einer ähnlichen Programmiersprache ist solch ein „Austausch“ der Inhalte möglich.

wingman · 5. September 2004

Hallo

Habe nicht so viel Erfahrung mit PHP

das ist die css Datei

Code:

th {
 color : #000000;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
}
input, select {
 color : #000000;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.px {
 padding-top : 0px;
 padding-bottom : 0px;
 padding-left : 0px;
 padding-right : 0px;
 margin-top : 2px;
 margin-bottom : 0px;
 margin-left : 0px;
 margin-right : 0px;
}
.px5 {
 padding-top : 0px;
 padding-bottom : 0px;
 padding-left : 0px;
 padding-right : 0px;
 margin-top : 5px;
 margin-bottom : 0px;
 margin-left : 0px;
 margin-right : 0px;
}
.title01 {
 color : #FFFFFF;
 margin-top : 10px;
 padding-bottom : 10px;
 margin-bottom : 0px;
 margin-left : 15px;
 margin-right : 15px;
 font-size : 13px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
 font-style: italic;
}
.title {
 color : #FFFFFF;
 margin-top : 1px;
 padding-bottom : 1px;
 margin-bottom : 1px;
 margin-left : 37px;
 margin-right : 10px;
 font-size : 10px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.title a {
 color : #EF6D00;
}
.title a:hover {
 color : #C25A02;
}
.list {
 color : #FFFFFF;
 margin-top : 3px;
 padding-bottom : 3px;
 margin-bottom : 0px;
 margin-left : 10px;
 margin-right : 10px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.right {
 color : #000000;
 margin-top : 5px;
 padding-bottom : 10px;
 margin-bottom : 0px;
 margin-left : 15px;
 margin-right : 15px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.right a, .list a {
 color : #FF7500;
}
.right a:hover {
 color : #AAAAAA;
}
.left {
 color : #000000;
 margin-top : 5px;
 padding-bottom : 5px;
 margin-bottom : 0px;
 margin-left : 15px;
 margin-right : 25px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.left b {
 color : #FF6600;
}
.left a {
 color : #FF6600;
}
.left a:hover {
 color : #FF0000;
}
p {
 color : #000000;
 margin-top : 5px;
 padding-bottom : 10px;
 margin-bottom : 0px;
 margin-left : 20px;
 margin-right : 20px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
}
p a {
 color : #000000;
}
p a:hover {
 color : #294A7B;
}
.menu01 {
 color : #000000;
 margin-top : 1px;
 padding-bottom : 1px;
 margin-bottom : 0px;
 margin-left : 10px;
 margin-right : 10px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
}
.menu01 a {
 color : #000000;
 text-decoration: none;
}
.menu01 a:hover {
 color : #555555;
}
.menu02 {
 color : #FFFFFF;
 margin-top : 5px;
 padding-bottom : 5px;
 margin-bottom : 0px;
 margin-left : 20px;
 margin-right : 20px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
 font-weight: bold;
}
.menu02 a {
 color : #FFFFFF;
 text-decoration: none;
}
.menu02 a:hover {
 color : #DDDDDD;
}
.bar01 {
 color: #OOOOOO;
 margin-top: 1px;
 padding-bottom: 1px;
 margin-bottom: 0px;
 margin-left: 5px;
 margin-right: 20px;
 font-size: 18px;
 font-family: Arial,Tahoma,Verdana;
 font-weight: bold;
}
.b01 {
 color : #000000;
 margin-top : 2px;
 padding-bottom : 1px;
 margin-bottom : 1px;
 margin-left : 20px;
 margin-right : 0px;
 font-size : 11px;
 font-family : Tahoma,Verdana,Arial;
}
.b01 a {
 color : #000000;
 text-decoration: none;
}
.b01 a:hover {
 color : #333333;
}

Das ist meine Menu führung

Code:

<td>
<p class="b01"><img src="images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle">&nbsp;&nbsp;<a href="">Home </b></p>
<div align="center"><img src="images/hr01.gif" width="137" height="3" alt="" border="0"></div>
<p class="b01"><img src="images/e02.gif" width="6" height="5" alt="" border="0" align="absmiddle">&nbsp;&nbsp;<a href="">Konatkt</a></p>
<div align="center"><img src="images/hr01.gif" width="137" height="3" alt="" border="0"></div>

Gruss Dave

Fabian H · 5. September 2004

Und, was jetzt?

Erwartest du, dass wir dir ein Beispiel in PHP machen?

Beispiele dazu gibt's genug im PHP Forum.

Tim C. · 5. September 2004

Einstellung des Users ist zu 100% inkompatibel mit dem, wofür tutorials.de steht.

(-closed-)

-temp reopened-

wingman · 5. September 2004

Sorry

Meine Problem ist

Habe ein Design gemacht mit css. Zur meinen Problem. Habe Links das Menu wenn ich im Menu einen Link mache, dann geht einfach eine neue Seite auf und von Design ist nichts zu sehen. Ich will aber wenn ich im Menu einen Link machen einfach nur der Content wechselt nicht das ganze Design.

Vielen Dank

für eurer Hilfe

Thomas Lindner · 5. September 2004

Gibt es eigentlich nur drei Möglichkleiten, wie bereits erwähnt:

a) Frameset oder einen IFrame

b) Include serverseitig, z.B. mit PHP

c) jeden Seiteninhalt per Div Ebene in einer einzigen (großen) Datei und immer nur die notwendige Ebene einblenden und alle anderen ausblenden

*welches Schweinerl hättens den gern?*

wingman · 5. September 2004

Gibt es irgenwie ein Beispiel wo das erklärt wird

Gruss Dave

Thomas Lindner · 5. September 2004

Entscheidend wäre zu wissen wie du es jetzt lösen willst ... ?

Aber mal ein paar Links:

Aus der Webmaster FAQ :

Wie man Ebenen ein-/ausblenden kann.

Informationen zu Frames :

http://de.selfhtml.org/html/frames/index.htm

Und zu PHP, schau am besten mal im PHP Forum

Probleme mit Content

wingman

Erfahrenes Mitglied

Fabian H

Gumbo

Erfahrenes Mitglied

wingman

Erfahrenes Mitglied

Fabian H

Tim C.

Erfahrenes Mitglied

wingman

Erfahrenes Mitglied

Thomas Lindner

Erfahrenes Mitglied

wingman

Erfahrenes Mitglied

Thomas Lindner

Erfahrenes Mitglied

Neue Beiträge