✔ Ich bin zu blöd!

Paulischroeder · 14. April 2007

Supiii hat geklappt

kannst du mir noch erklären wie ich das ganz genau in die mitte bekome?

Grüße
Paul

Maik · 14. April 2007

Hierfür musst du das bestehende Layout in ein DIV wrapper mit den folgenden CSS-Formatierungen packen:

Code:

#wrapper {
position: absolute;
left: 50%;
margin-left: -398px;
width: 796px;
top: 0;
}

Code:

<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand -->
    </div>
</body>

Paulischroeder · 14. April 2007

habs verstanden

Nun klebt das design aber an der rechten seite :-( *Hilfe*

Grüßle
Paul

Hier der Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:243px;
	height:94px;
	z-index:1;
	left: 12px;
	top: 15px;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:101px;
	z-index:2;
	left: 242px;
	top: 15px;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:103px;
	z-index:3;
	left: 506px;
	top: 15px;
}
#Layer4 {
	position:absolute;
	width:200px;
	height:47px;
	z-index:4;
	left: 601px;
	top: 117px;
}
#Layer5 {
	position:absolute;
	width:51px;
	height:47px;
	z-index:5;
	left: 553px;
	top: 117px;
}
#Layer6 {
	position:absolute;
	width:185px;
	height:47px;
	z-index:6;
	left: 368px;
	top: 117px;
}
#Layer7 {
	position:absolute;
	width:127px;
	height:22px;
	z-index:7;
	left: 190px;
	top: 117px;
}
#Layer8 {
	position:absolute;
	width:179px;
	height:29px;
	z-index:8;
	left: 12px;
	top: 117px;
}
#Layer9 {
	position:absolute;
	width:165px;
	height:0px;
	z-index:9;
	left: 601px;
	top: 178px;
}
#Layer10 {
	position:absolute;
	width:208px;
	height:323px;
	z-index:10;
	left: 601px;
	top: 199px;
	background-color: #0F594C;
}
#Layer11 {
	position:absolute;
	width:198px;
	height:7px;
	z-index:11;
	left: 601px;
	top: 522px;
}
#Layer12 {
	position:absolute;
	width:789px;
	height:15px;
	z-index:12;
	left: 12px;
	top: 561px;
}
#Layer13 {
	position:absolute;
	width:589px;
	height:393px;
	z-index:13;
	left: 12px;
	top: 169px;
	background-color: #FFFFFF;
}
body {
	background-image: url(../Bilder/bg.jpg);
}
#Layer14 {
	position:absolute;
	width:208px;
	height:26px;
	z-index:14;
	left: 601px;
	top: 536px;
	background-color: #FFFFFF;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Für moderne Browser */
height: auto !important; /* Für moderne Browser */
height: 100%; /* Für IE */
background: #e9e9e9;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

div#footer {
position: absolute;
bottom: -64px;
left: 8px;
width:100%;
background: #cacaca;
}
-->
#Content {        position:absolute;
        width:570px;
        min-height:288px; /* Mindesthöhe für moderne Browser */
        height:auto !important; /* Für moderne Browser */
        height:288px; /* Mindesthöhe für IE */
        z-index:2;
        left: 12px;
        top: 169px;
        background-color: #FFFFFF;
}
#Copyright {        width:795px;
        height:23px;
}
.Navi {color: #FFFFFF;
	font: Verdana;
	font-size: 9pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.stufflink:link, a.stufflink:active, a.stufflink:visited {
	color: #FFFFFF;
	text-decoration: none;
}
	#wrapper {
position: absolute;
left: 50%;
margin-left: -398px;
width: 796px;
top: 0;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="Layer1"><img src="Bilder/neu_01.jpg" width="230" height="102" /></div>
  <div id="Layer2"><img src="Bilder/neu_02.jpg" width="264" height="102" /></div>
  <div id="Layer3"><img src="Bilder/neu_03.jpg" width="303" height="102" /></div>
  <div id="Layer4"><img src="Bilder/neu_08.jpg" width="208" height="61" /></div>
  <div id="Layer5"><img src="Bilder/neu_07.jpg" width="48" height="52" /></div>
  <div id="Layer6"><img src="Bilder/neu_06.jpg" width="185" height="52" /></div>
  <div id="Layer7"><img src="Bilder/neu_05.jpg" width="178" height="52" /></div>
  <div id="Layer8"><img src="Bilder/neu_04.jpg" width="178" height="52" /></div>
  <div id="Layer9"><img src="Bilder/neu_10.jpg" width="208" height="21" /></div>
  <div id="Layer10">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100%" height="" valign="top" bgcolor="0F594C"><div align="right">
          <p class="Navi"><a href="index.php?page=willkommen" class="stufflink">Startseite -</a><br />
                <a href="index.php?page=Abteilungen" class="stufflink">Abteilungen -</a><br />
                <a href="index.php?page=Fahrten" class="stufflink">Fahrten einsenden -</a><br />
            Einstieg -<br />
            Partner -<br />
            <a href="index.php?page=Fuhrpark" class="stufflink">Fuhrpark -</a><br />
            <br />
            G&auml;stebuch -<br />
            <a href="http://www.Paul-Schroeder.com/VVP/Forum" target="_blank" class="stufflink">Forum -</a></p>
        </div></td>
        <td width="3%">&nbsp;</td>
      </tr>
    </table>
  </div>
  <div id="Layer11"><img src="Bilder/neu_12.jpg" width="208" height="16" /></div>
  <div id="Content">
    <div id="include">
      <p>
        <?php
error_reporting(E_ALL);
if(isset($_GET['page']))  {
$page = $_GET['page'];
include($page.".php");
}  else  {
include("http://Paul-Schroeder.com/VVP/willkommen.php");
}
?>
        <br />
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><br />
      </p>
      <table width="100%" border="0" cellspacing="2" cellpadding="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="2" cellspacing="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="1" cellspacing="0" class="infolink" id="body_templ">
        <tr></tr>
        <tr class="Stil2"></tr>
      </table>
    </div>
    <!-- END DIV include -->
    <div id="Copyright"><img src="http://www.paul-schroeder.com/VVP/Bilder/footer.jpg" width="797" height="21" /></div>
  </div>
</div>
</body>
</html>

Maik · 14. April 2007

Nimm mal diesen Quellcode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#Layer1 {
        position:absolute;
        width:243px;
        height:94px;
        z-index:1;
        left: 12px;
        top: 15px;
}
#Layer2 {
        position:absolute;
        width:200px;
        height:101px;
        z-index:2;
        left: 242px;
        top: 15px;
}
#Layer3 {
        position:absolute;
        width:200px;
        height:103px;
        z-index:3;
        left: 506px;
        top: 15px;
}
#Layer4 {
        position:absolute;
        width:200px;
        height:47px;
        z-index:4;
        left: 601px;
        top: 117px;
}
#Layer5 {
        position:absolute;
        width:51px;
        height:47px;
        z-index:5;
        left: 553px;
        top: 117px;
}
#Layer6 {
        position:absolute;
        width:185px;
        height:47px;
        z-index:6;
        left: 368px;
        top: 117px;
}
#Layer7 {
        position:absolute;
        width:127px;
        height:22px;
        z-index:7;
        left: 190px;
        top: 117px;
}
#Layer8 {
        position:absolute;
        width:179px;
        height:29px;
        z-index:8;
        left: 12px;
        top: 117px;
}
#Layer9 {
        position:absolute;
        width:165px;
        height:0px;
        z-index:9;
        left: 601px;
        top: 178px;
}
#Layer10 {
        position:absolute;
        width:208px;
        height:323px;
        z-index:10;
        left: 601px;
        top: 199px;
        background-color: #0F594C;
}
#Layer11 {
        position:absolute;
        width:198px;
        height:7px;
        z-index:11;
        left: 601px;
        top: 522px;
}
#Layer12 {
        position:absolute;
        width:789px;
        height:15px;
        z-index:12;
        left: 12px;
        top: 561px;
}
#Layer13 {
        position:absolute;
        width:589px;
        height:393px;
        z-index:13;
        left: 12px;
        top: 169px;
        background-color: #FFFFFF;
}
body {
        background-image: url(../Bilder/bg.jpg);
}
#Layer14 {
        position:absolute;
        width:208px;
        height:26px;
        z-index:14;
        left: 601px;
        top: 536px;
        background-color: #FFFFFF;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#footer {
position: absolute;
bottom: -64px;
left: 8px;
width:100%;
background: #cacaca;
}

#Content {        position:absolute;
        width:570px;
        min-height:288px; /* Mindesthöhe für moderne Browser */
        height:auto !important; /* Für moderne Browser */
        height:288px; /* Mindesthöhe für IE */
        z-index:2;
        left: 12px;
        top: 169px;
        background-color: #FFFFFF;
}
#Copyright {        width:795px;
        height:23px;
}
.Navi {color: #FFFFFF;
        font: Verdana;
        font-size: 9pt;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.stufflink:link, a.stufflink:active, a.stufflink:visited {
        color: #FFFFFF;
        text-decoration: none;
}
#wrapper {
position: absolute;
left: 50%;
margin-left: -398px;
width: 796px;
top: 0;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="Layer1"><img src="Bilder/neu_01.jpg" width="230" height="102" /></div>
  <div id="Layer2"><img src="Bilder/neu_02.jpg" width="264" height="102" /></div>
  <div id="Layer3"><img src="Bilder/neu_03.jpg" width="303" height="102" /></div>
  <div id="Layer4"><img src="Bilder/neu_08.jpg" width="208" height="61" /></div>
  <div id="Layer5"><img src="Bilder/neu_07.jpg" width="48" height="52" /></div>
  <div id="Layer6"><img src="Bilder/neu_06.jpg" width="185" height="52" /></div>
  <div id="Layer7"><img src="Bilder/neu_05.jpg" width="178" height="52" /></div>
  <div id="Layer8"><img src="Bilder/neu_04.jpg" width="178" height="52" /></div>
  <div id="Layer9"><img src="Bilder/neu_10.jpg" width="208" height="21" /></div>
  <div id="Layer10">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100%" height="" valign="top" bgcolor="0F594C"><div align="right">
          <p class="Navi"><a href="index.php?page=willkommen" class="stufflink">Startseite -</a><br />
                <a href="index.php?page=Abteilungen" class="stufflink">Abteilungen -</a><br />
                <a href="index.php?page=Fahrten" class="stufflink">Fahrten einsenden -</a><br />
            Einstieg -<br />
            Partner -<br />
            <a href="index.php?page=Fuhrpark" class="stufflink">Fuhrpark -</a><br />
            <br />
            Gästebuch -<br />
            <a href="http://www.Paul-Schroeder.com/VVP/Forum" target="_blank" class="stufflink">Forum -</a></p>
        </div></td>
        <td width="3%">&nbsp;</td>
      </tr>
    </table>
  </div>
  <div id="Layer11"><img src="Bilder/neu_12.jpg" width="208" height="16" /></div>
  <div id="Content">
    <div id="include">
      <p>
        <?php
error_reporting(E_ALL);
if(isset($_GET['page']))  {
$page = $_GET['page'];
include($page.".php");
}  else  {
include("http://Paul-Schroeder.com/VVP/willkommen.php");
}
?>
        <br />
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><br />
      </p>
      <table width="100%" border="0" cellspacing="2" cellpadding="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="2" cellspacing="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="1" cellspacing="0" class="infolink" id="body_templ">
        <tr></tr>
        <tr class="Stil2"></tr>
      </table>
    </div>
    <!-- END DIV include -->
    <div id="Copyright"><img src="http://www.paul-schroeder.com/VVP/Bilder/footer.jpg" width="797" height="21" /></div>
  </div>
</div>
</body>
</html>

Paulischroeder · 14. April 2007

Funktioniert :-D

Darf man fragen wodran es lag? (will mich auch weiterbilden *g*)

Vielen...Vielen Dank

greetz
Paul

Maik · 14. April 2007

Zum einen hattest du den Selektor div#wrapper doppelt im Stylesheet, aber mit unterschiedlichen CSS-Formatierungen, und zum anderen war da mittendrin der abschliessende HTML-Kommentar -->, weshalb das Stylesheet ab dieser Stelle vom Browser nicht weitergelesen wurde:

Code:

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Für moderne Browser */
height: auto !important; /* Für moderne Browser */
height: 100%; /* Für IE */
background: #e9e9e9;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

div#footer {
position: absolute;
bottom: -64px;
left: 8px;
width:100%;
background: #cacaca;
}
-->
#Content {        position:absolute;
        width:570px;
        min-height:288px; /* Mindesthöhe für moderne Browser */
        height:auto !important; /* Für moderne Browser */
        height:288px; /* Mindesthöhe für IE */
        z-index:2;
        left: 12px;
        top: 169px;
        background-color: #FFFFFF;
}

Paulischroeder · 14. April 2007

Achso!

Hier das Endergebnis http://www.sw-verkehrsbetriebDEvu

Nur wenn man jetzt auf Links klickt die ich via include eingebunden habe erscheint untern immer der Balken zum nach rechts und nach links schieben wie bekomm ich das weg?

Maik · 14. April 2007

Das könnte evtl. daran liegen, dass du, wie schon von mir gestern kritisch angemerkt, ein komplettes HTML-Dokument in das DIV include lädst.

Stattdessen wird nur das reingeladen, was im Dokumentkörper, sprich zwischen <body> ... </body> notiert ist, und die rotmarkierten Abschnitte entfallen.

Code:

<div id="Content">
    <div id="include">
      <p>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.Stil11 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.Stil12 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Stil14 {
	font-size: 6px;
	color: #e0e0e0;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td colspan="2" background="Bilder/bg.jpg"><span class="Stil11"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /></strong> Fuhrpark </span></td>
  </tr>
  <tr>
    <td bgcolor="E0E0E0"><span class="Stil14">f</span></td>
  </tr>
  <tr>
    <td bgcolor="E0E0E0"><div align="center"><img src="http://paul-schroeder.com/VVP/Busse/CitaroGSWTextur1.jpg" border="0" /></div></td>
  </tr>
  <tr>
    <td bgcolor="E0E0E0"><div align="center"><img src="http://paul-schroeder.com/VVP/Busse/CitaroGSWTextur2.jpg" width="554" height="389" border="0" /><br />
    </div></td>
    </tr>
  <tr>
    <td bgcolor="E0E0E0"><div align="center"><span class="Stil12">Bus: <strong>Citaro G</strong> | Textur: <strong>S&amp;W</strong> | Anzahl: <strong>xx </strong></span></div></td>
  </tr>
  <tr>
    <td bgcolor="E0E0E0"><div align="center"></div></td>
  </tr>
  <tr>
    <td bgcolor="E0E0E0"><div align="center"><img src="http://paul-schroeder.com/VVP/Busse/CitaroNewSWTextur.jpg" width="554" border="0" /></div></td>
  </tr>
  <tr>
    <td width="50%" bgcolor="E0E0E0"><div align="center" class="Stil12">Bus: <strong>Citaro New </strong> | Textur: <strong>S&amp;W</strong> | Anzahl: <strong>xx </strong></div></td>
  </tr>
</table>
</body>
</html>
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp; </p>
      <table width="100%" border="0" cellspacing="2" cellpadding="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="2" cellspacing="2">
        <tr></tr>
        <tr></tr>
      </table>
      <table width="100%" border="0" cellpadding="1" cellspacing="0" class="infolink" id="body_templ">
        <tr></tr>
        <tr class="Stil2"></tr>
      </table>
    </div>
    <!-- END DIV include -->
    <div id="Copyright"><img src="Bilder/neu_14.jpg" width="797" height="21" /></div>
  </div>

Paulischroeder · 15. April 2007

geht nicht ich glaub ich muss wohl leider Gottes wieder auf Tabellen umsteigen!

In Opera is das Design total kaputt!
In IE is ein Scrollbalken da

Hieer der Link http://www.SW-Verkehrsbetrieb(DEvU)

Grüße Paul :-(

Maik · 15. April 2007

Ich kann da auch keine Verbesserungen im Quellcode entdecken - siehe hierzu meinen letzten Post.

✔ Ich bin zu blöd!

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Neue Beiträge