XHTMLforum - Einzelnen Beitrag anzeigen

Cybertronic · #1 (**permalink**) 26.08.2009, 17:35

Aaaaaalso =) ich bastel grad an einer neuen HP nur leider verstehe ich nicht wie ich die Balken oben rechts und links neben dem header bis an den bildschrim rand bekomme... versuche es mit divs aber die werden als nich richtig positioniert... da ich eine div um die ganze page gelegt hab die dafür sorgt das die webseite centriert ist, ist mir klar so weit das ich die div für den linken querbalken vor dem:


<div id="ID_PageCenter">


im header, reinhauen muss und die div für rechts nach dem:


</div>


im footer...

damit ihr eine bessere vorstellung davon habt hier ein screenshot vom design und der code

Header

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>One-Piece-Anime.de</title>
<link href="onepiecestyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div  style=" background-image:url(bg_balken.png); background-repeat:repeat-x; height:134px; position:absolute; left: 0px;"></div>
<!---PAGE CENTER DIV--->
<div id="ID_PageCenter">
<!---PAGE CENTER DIV--->
<!---HEADER ANFANG--->
<table width="1250" height="226" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="105" background="header_links.png">&nbsp;</td>
    <td width="1040" background="header.png">&nbsp;</td>
    <td width="105" background="header_rechts.png">&nbsp;</td>
  </tr>
</table>
<!---HEADER ENDE--->
<!---WERBEFLÄCHE ANFANG--->
<table width="1250" height="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="werbefleache.png">&nbsp;</td>
  </tr>
</table>
<!---WERBEFLÄCHE ENDE--->
<!---LOGIN ANFANG--->
<table width="1250" height="50" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="login.png">&nbsp;</td>
  </tr>
</table>
<!---LOGIN ENDE--->
<!---NAVI ANFANG--->
<table border="0" cellpadding="0" cellspacing="0" id="DivId_Navi_Links">
  <tr>
    <td width="380" background="navi.png">&nbsp;</td>
    <td width="17" background="navi_rechts_daneben.png">&nbsp;</td>
  </tr>
</table>
<!---NAVI ENDE--->

Index

Code:

<?php include ($_SERVER['DOCUMENT_ROOT'].'/header.php'); ?>

<!-----NEWS: ANFANG---->
<!---MAIN TEXTFELD--->
<div id="DivId_Main">So Liebe Leute hier entsteht eine Neue One Piece Home Page! Und
            macht euch darauf gefasst! Denn diese Home Page Sprengt alle eure
            vorstellungen &uuml;ber One Piece ^.^ Ich bin gerade dabei eine bestimmte
            Person zu &uuml;berreden mir mit dieser Page zu helfen. Wie das gehen
            soll das 2 Personen an einer Home Page arbeiten fragt ihr euch? Kein
            problem, der baba erkl&auml;rt es euch ;)<br />
            <br />
Also ich &uuml;bernehme Arbeiten an dem Interface (Codes, Bildbearbeitung,
            Design und so weiter und sofort) und die andere Person (die ich hoffentlich
            &uuml;bereden kann das sie mir hilft ^.^) kn&ouml;pft sich die Inhalte
            vor.<br />
            <br />
Also liebe leute... Ich hoffe das ihr ab und zu mal vorbei schaut
und irgendwann gefallen an dieser Home Page findet.</div>
<!---MAIN TEXTFELD--->
<?php include ($_SERVER['DOCUMENT_ROOT'].'/footer.php'); ?>

Footer:

Code:

<!----Tabelle: Menü Rechts---->
<table width="129" height="609" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" background="rechter_seitenabschnitt.png">&nbsp;</td>
  </tr>
</table>
<!----Tabelle: Menü Rechts ENDE---->
</td>
</tr>
</table>
<!----Tabelle: Ausentabelle, Navigation, Grundstruktur ENDE---->
</tr>
</td>
</table>
<!----Tabelle: Ausentabelle, Roter Rahmen ENDE---->
<!----Tabelle: Footer---->
<div id="DivId_Footer"></div>
<!----Tabelle: Footer ENDE---->
<!---PAGE CENTER DIV--->
</div>
<!---PAGE CENTER DIV--->
</body>
</html>

CSS

Code:

body {
    font-family:Verdana, Arial, Helvetica;
    font-size:12px;
    color:#ffffff;
    background-color: #1185AE;
    padding:0;
    margin:0;
    }
    
Table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }

a:link {
    color:#FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    }

a:visited {
    color:#FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    }

a:hover {
     color:#DCDCDC;
     }

a:active {
     color:#FFFFFF;
     }
    
#ID_PageCenter {
    margin: 0 auto;
    width: 1250px;
}

#DivId_Main {
    margin: 25px 50px;
    text-align: center;
    float: left;
    width: 624px;
    border-style: dashed;
    border-width: 0px;
}

#DivId_Footer {
    margin: 0px;
    width: 1250px;
    height: 13px;
    background-image: url(footer.png);
}

#DivId_Navi_Links {
    float: left;
    width: 397px;
    height: 609px;
}

Fertig zusammengestetzer Code aus FireFox

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>One-Piece-Anime.de</title>
<link href="onepiecestyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div  style=" background-image:url(bg_balken.png); background-repeat:repeat-x; height:134px; position:absolute; left: 0px;"></div>
<!---PAGE CENTER DIV--->
<div id="ID_PageCenter">
<!---PAGE CENTER DIV--->
<!---HEADER ANFANG--->
<table width="1250" height="226" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="105" background="header_links.png">&nbsp;</td>
    <td width="1040" background="header.png">&nbsp;</td>
    <td width="105" background="header_rechts.png">&nbsp;</td>
  </tr>
</table>
<!---HEADER ENDE--->
<!---WERBEFLÄCHE ANFANG--->
<table width="1250" height="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="werbefleache.png">&nbsp;</td>
  </tr>
</table>
<!---WERBEFLÄCHE ENDE--->
<!---LOGIN ANFANG--->
<table width="1250" height="50" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="login.png">&nbsp;</td>
  </tr>
</table>
<!---LOGIN ENDE--->
<!---NAVI ANFANG--->
<table border="0" cellpadding="0" cellspacing="0" id="DivId_Navi_Links">
  <tr>
    <td width="380" background="navi.png">&nbsp;</td>
    <td width="17" background="navi_rechts_daneben.png">&nbsp;</td>
  </tr>
</table>
<!---NAVI ENDE--->
<!-----NEWS: ANFANG---->
<!---MAIN TEXTFELD--->
<div id="DivId_Main">So Liebe Leute hier entsteht eine Neue One Piece Home Page! Und
            macht euch darauf gefasst! Denn diese Home Page Sprengt alle eure
            vorstellungen &uuml;ber One Piece ^.^ Ich bin gerade dabei eine bestimmte
            Person zu &uuml;berreden mir mit dieser Page zu helfen. Wie das gehen
            soll das 2 Personen an einer Home Page arbeiten fragt ihr euch? Kein
            problem, der baba erkl&auml;rt es euch ;)<br />
            <br />
Also ich &uuml;bernehme Arbeiten an dem Interface (Codes, Bildbearbeitung,
            Design und so weiter und sofort) und die andere Person (die ich hoffentlich
            &uuml;bereden kann das sie mir hilft ^.^) kn&ouml;pft sich die Inhalte
            vor.<br />
            <br />
Also liebe leute... Ich hoffe das ihr ab und zu mal vorbei schaut
und irgendwann gefallen an dieser Home Page findet.</div>
<!---MAIN TEXTFELD--->
<!----Tabelle: Menü Rechts---->
<table width="129" height="609" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" background="rechter_seitenabschnitt.png">&nbsp;</td>
  </tr>
</table>
<!----Tabelle: Menü Rechts ENDE---->
</td>
</tr>
</table>
<!----Tabelle: Ausentabelle, Navigation, Grundstruktur ENDE---->
</tr>
</td>
</table>
<!----Tabelle: Ausentabelle, Roter Rahmen ENDE---->
<!----Tabelle: Footer---->
<div id="DivId_Footer"></div>
<!----Tabelle: Footer ENDE---->
<!---PAGE CENTER DIV--->
</div>
<!---PAGE CENTER DIV--->
</body>
</html>