XHTMLforum - CSS/PHP Seite in die Mitte setzten??

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS/PHP Seite in die Mitte setzten?? (http://xhtmlforum.de/showthread.php?t=66554)

CSS/PHP Seite in die Mitte setzten??

Ich hab da ein kleines problem:

http://xhtmlforum.de/attachment.php?...1&d=1325851019

CSS Code:

Code:

@charset "UTF-8";



html, body {

background-image: url(../img/bg.png);

background-repeat: repeat;

text-align: left;

width: 850px;

font-family: Arial;

font-size: 11pt;

}



#navi-top {

background-image: url(../img/navi-top.png);

background-repeat: no-repeat;

text-align: center;

width: 120px;

height: 30px;

font-family: Curier New;

margin-top: -3px;

}



#navi-content {

padding: 0 6px 0 6px;

background-image: url(../img/navi-content.png);

background-repeat: repeat-y;

width: 120px;

height: auto;

}



#navi-bottom {

background-image: url(../img/navi-bottom.png);

background-repeat: no-repeat;

width: 120px;

height: 5px;

}



#content-top {

background-image: url(../img/content-top.png);

background-repeat: no-repeat;

text-align: center;

width: 730px;

height: 30px;

font-family: Curier New;

margin-top: -3px;

}



#content {

padding: 0 6px 0 6px;

background-image: url(../img/content.png);

background-repeat: repeat-y;

width: 730px;

height: auto;

}



#content-bottom {

background-image: url(../img/content-bottom.png);

background-repeat: no-repeat;

width: 730px;

height: 5px;

}

PHP Code:

PHP-Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Layout 1</title>

  <link href="css/style.css" type="text/css" rel="stylesheet" media="all" />

  </head>

  <body>

    <div id="navi-top">Navigation</div>

    <div id="navi-content"><?php chdir("menu/"); include("navi.html"); ?></div>

    <div id="navi-bottom"></div><br />

    <div id="content-top">Content Head</div>

    <div id="content">Content Text</div>

    <div id="content-bottom"></div>

  </body>

</html>

P.S. Ist noch nicht fertig^^

Dem Titel zu folge willst du den Inhalt deiner Seite also zentrieren? Sowas geht z.B. so:

Code:

body{

    margin: 0 auto;

}

Aber mal ehrlich, schreib doch bitte 1-2 Sätze zu deinem Problem. Du willst doch schließlich etwas von uns, da will ich nicht noch raten müssen worum es geht.

Danke^^ Ja ok nächstes mal schreibe ich mehr :D

Jetzt noch das Problem mit der Navigation neben dem Content :/

Verstehe nix :/ wo muss ich im css code die floats hinmachen?

Zitat:

Zitat von Dima (Beitrag 508613)

Verstehe nix :/

vielleicht ist es hier etwas besser erklärt! ;)

Jetzt sieht's so aus:

ohne float:
http://xhtmlforum.de/attachment.php?...1&d=1325862655

float bei navi-top:
http://xhtmlforum.de/attachment.php?...1&d=1325862716

float bei navi-content:
http://xhtmlforum.de/attachment.php?...1&d=1325862763

float bei navi-bottom:
http://xhtmlforum.de/attachment.php?...1&d=1325862801

Wo muss ich das float bzw. die floats hinmachen? css code [ohne floats]:

Code:

@charset "UTF-8";



html, body {

background-image: url(../img/bg.png);

background-repeat: repeat;

text-align: left;

width: 850px;

font-family: Arial;

font-size: 11pt;

margin: 0 auto;

}



A { text-decoration: none; font-weight: bold; color: #6d6d6d; }



#header {

background-image: url(../img/header.png);

background-repeat: no-repeat;

width: 850px;

height: 100px;

}



#navi-top {

background-image: url(../img/navi-top.png);

background-repeat: no-repeat;

text-align: center;

width: 120px;

height: 33px;

font-weight: bold;

color: white;

}



#navi-content {

padding: 0 6px 0 6px;

background-image: url(../img/navi-content.png);

background-repeat: repeat-y;

width: 120px;

height: auto;

}



#navi-bottom {

background-image: url(../img/navi-bottom.png);

background-repeat: no-repeat;

width: 120px;

height: 7px;

}



#content-top {

background-image: url(../img/content-top.png);

background-repeat: no-repeat;

text-align: center;

width: 730px;

height: 33px;

font-weight: bold;

color: white;

margin-left: 10px;

}



#content {

padding: 0 6px 0 6px;

background-image: url(../img/content.png);

background-repeat: repeat-y;

width: 730px;

height: auto;

margin-left: 10px;

}



#content-bottom {

background-image: url(../img/content-bottom.png);

background-repeat: no-repeat;

width: 730px;

height: 7px;

margin-left: 10px;

}

du wirst nicht umhin kommen das mit dem Float zu verstehen.
Links dazu hast du bekommen.

Foren bieten vor allem Hilfe zur Selbsthilfe!!

Üblicherweise bekommen html und body keine Breite und werden nicht horizontal zentriert.
Das übernimmt ein Element was alle anderen Elemente umschließt (div#wrapper z.B.).
pt ist eine absolute Einheit für den Printbereich und fürs Web ungeeignet.

Little Boxes ist zum Erarbeiten der Grundlagen bestens geeignet. ;)

Ja eigentlich bin ich ganz schön weit mit der Seite aber das mit den floats versteh ich nicht hab alles versucht :(

Floats kann man nicht innerhalb von 2 Stunden verstehen. Dazu ist ein ruhiger und unhektischer (d.h. kein "ich wills jetzt endlich schaffen") Lernvorgang nötig. Der erfordert vielleicht mal ne Nacht drüber zu schlafen, aber es ist nicht wirklich kompliziert, wenn man sich etwas Zeit dafür nimmt.

Zwei Quellen wurden dir bereits dazu genannt, float und clear werden aber im Web bis zum erbrechen beschrieben.