zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit Design

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.08.2009, 18:35
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard 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



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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2009, 22:13
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

bitte antworte einer... heute ist mein einziger freier tag... diesen monat =( möchte das problem wenigstens heute beseitigen...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.08.2009, 22:53
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

wie sieht es denn mit
Code:
width="100%"
aus?
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
  #4 (permalink)  
Alt 26.08.2009, 23:02
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

^^" komm schon.... ^^" mir ist klar das ich der div den wert 100% geben muss.... aber es geht doch darum das ich absolut keine ahnung hab wie ich überhaupt eine div da oben hin bekomme.. hab überall im code div eingegeben aber die war entweder unsichtbar oder über dem header....
Mit Zitat antworten
  #5 (permalink)  
Alt 27.08.2009, 09:31
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

wenn es über dem header war kann man ja vielleicht auch mal versuchen etwas mit z-index zu machen?
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 Probleme mit meinem CSS Design leibnitz CSS 15 08.05.2008 11:01
probleme mit css design tooltonic CSS 3 19.03.2007 16:23
Liquid Design und Float Probleme Adde CSS 0 16.04.2006 12:13
CSS Design Probleme Hawklan CSS 5 12.08.2004 12:45
Probleme mit XHTML und CSS Design un dem IE 5.0/5.5 plubird CSS 1 19.02.2004 22:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:35 Uhr.