| Cybertronic |
26.08.2009 17:35 |
Probleme mit Design
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:
<!---PAGE CENTER DIV--->
<div id="ID_PageCenter">
<!---PAGE CENTER DIV--->
im header, reinhauen muss und die div für rechts nach dem:
<!---PAGE CENTER DIV--->
</div>
<!---PAGE CENTER DIV--->
im footer...
damit ihr eine bessere vorstellung davon habt hier ein screenshot vom design und der code
http://hellsing-anime.de/design.png
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"> </td>
<td width="1040" background="header.png"> </td>
<td width="105" background="header_rechts.png"> </td>
</tr>
</table>
<!---HEADER ENDE--->
<!---WERBEFLÄCHE ANFANG--->
<table width="1250" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="werbefleache.png"> </td>
</tr>
</table>
<!---WERBEFLÄCHE ENDE--->
<!---LOGIN ANFANG--->
<table width="1250" height="50" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="login.png"> </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"> </td>
<td width="17" background="navi_rechts_daneben.png"> </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 über One Piece ^.^ Ich bin gerade dabei eine bestimmte
Person zu ü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ärt es euch ;)<br />
<br />
Also ich übernehme Arbeiten an dem Interface (Codes, Bildbearbeitung,
Design und so weiter und sofort) und die andere Person (die ich hoffentlich
übereden kann das sie mir hilft ^.^) knö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"> </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"> </td>
<td width="1040" background="header.png"> </td>
<td width="105" background="header_rechts.png"> </td>
</tr>
</table>
<!---HEADER ENDE--->
<!---WERBEFLÄCHE ANFANG--->
<table width="1250" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="werbefleache.png"> </td>
</tr>
</table>
<!---WERBEFLÄCHE ENDE--->
<!---LOGIN ANFANG--->
<table width="1250" height="50" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="login.png"> </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"> </td>
<td width="17" background="navi_rechts_daneben.png"> </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 über One Piece ^.^ Ich bin gerade dabei eine bestimmte
Person zu ü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ärt es euch ;)<br />
<br />
Also ich übernehme Arbeiten an dem Interface (Codes, Bildbearbeitung,
Design und so weiter und sofort) und die andere Person (die ich hoffentlich
übereden kann das sie mir hilft ^.^) knö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"> </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>
|
