Problem mit CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
augenblick
ausblenden
auto
bedenken
beginn
boxen
code
container
ende
http
inhalt
kopf
layout
list
pack
rechts beginn
sichtbarer teil
text
url
vorzeichen
-
Ich programmiere im Augenblick eine Webseite mit CSS und HTML.
Ich will im Augenblick mit float ein Menü rechts und eine Newsanzeige links neben den Inhalt stellen. Der Inhalt, die Newsanzeige und das Menü haben einen Hintergrung und der Text steht mittig.
Das sieht jetz erst mal so aus:
http://trik.lima-city.de/bf1.jpg
http://trik.lima-city.de/bf1.jpg
1. Problem:
Der Text ist nicht mehr mittig. Wie kann ich das verhindern?
2. Problem:
Können die Boxen an den Seiten mitwachsen? Wenn ja, wie?
Danke im Vorraus.
EDIT: Der Code:
/* Browsereinstellungen zurücksetzen */ * { /* Abstand zum Rand */ margin: 0px; } /* Body */ body { /* Background */ background: white; /* Größe */ margin: 40px; /* Text */ font: 1em arial; } /* Container */ #container { /* Background */ background: blue; } /* Kopf */ #kopf { /* Background */ background: Fuchsia; /* Text */ text-align: center; } #menu { /* Bachground */ background: white; /* Float */ float: left; /* Größe */ padding: 20px; width: auto; height: auto; /* Text */ text-align: center; color: blue; text-decoration: underline; } #menu>ul { /* Vorzeichen ausblenden */ list-style-type: none; margin: 0px; padding: 0px; } #menu>li { margin: 0px; padding: 0px; } #rechts { /* Background */ background: white; /* Float */ float: right; /* Größe */ padding: 20px; width: auto; height: auto; /* Text */ text-align: center; color: Blue; } #inhalt { /* Background */ background: aqua; /* Größe */ margin: 0px; /* Text */ text-align: center; } #fus { /* Background */ background: white; /* Clear */ clear: both; /* Text */ color: blue; font-size: 0.8em; text-align: right; }
und
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Startseite der Bluefaces</title> <meta name="robots" content="index" /> <meta name="language" content="de" /> <meta name="description" content="Eine neue Band: Die Bluefaces..." /> <meta http-equiv="date" content="06.05.2009" /> <meta name="keywords" content="bluefaces, blue, face, band, musik" /> <meta http-equiv="author" content="Tristan Kretzer und die Bluefaces" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="CSS/bfscreen.css" /> </head> <body> <!-- Bebinn sichbarer Teil --> <!-- Beginn Container --> <div id="container"> <!-- Beginn Kopf --> <div id="kopf"> <h1>Die Bluefaces</h1> </div> <!-- Ende Kopf --> <!-- Beginn Menü --> <div id="menu"> <ul> <li>Integer<br /><br /></li> <li>Bibendum<br /><br /></li> <li>Porttitor<br /><br /></li> <li>Commodo<br /><br /></li> <li>Nam</li> </ul> </div> <!-- Ende Menü --> <!-- Beginn Rechts --> <div id="rechts"> <h2>News</h2> <p> Es gibt noch keine News </p> </div> <!-- Ende Rechts --> <!-- Beginn Inhalt --> <div id="inhalt"> <h1>Inhalt</h1><br /><br /> <p> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> ......... </p> </div> <!-- Ende Inhalt --> <!-- Beginn Fuß --> <div id="fus"> <h4>|Kontakt|Impressum|</h4> </div> <!-- Ende Fuß --> </div> <!-- Ende Container --> <!-- Ende sichtbarer Teil --> </body> </html>
Beitrag zuletzt geändert: 7.5.2009 18:37:48 von trik -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
evil-devil schrieb: Pack den Content mal in einen eigenen Container und setz für diesen dann entsprechend ein text-align.
Sorry, aber ich kenne mich nicht sehr gut aus.Was ist der Content und soll ich den neuen Container im alten erstellen??? -
Der "Content" ist der Inhalt den du auf deiner Seite darstellen willst. Also Artikel und so nen Gedöhns.
Ja, den neuen würde ich im alten platzieren.
Meistens erzeuge ich bei neuen Seiten die Grundstruktur wie folgt.
<div id="page"> <div id="header"> <div id="logo"></div> </div> <div id="navigation"></div> <div id="content"></div> <div id="footer"></div> </div>
oder so
<div id="page"> <div id="header"> <div id="navigation"></div> <div id="logo"></div> </div> <div id="content"></div> <div id="footer"></div> </div>
Das richtet sich eigentlich nur danach ob die Navigationsleiste oben oder an der Seite steht und an welcher Stelle innerhalb der Seite. Man ist mit DIVs ja sehr flexibel. -
Meine Quelltexte sehen jetzt so aus:
/* Browsereinstellungen zurücksetzen */ * { /* Abstand zum Rand */ margin: 0px; } /* Body */ body { /* Background */ background: white; /* Größe */ margin: 40px; /* Text */ font: 1em arial; } /* Container */ #container { /* Background */ background: blue; } #containerkopf{ background: blue; } #containerlinks { background: white; float: left; } #conteinerrechts { background: white; float: right; } #containerinhalt { background: aqua; } #containerfus { background: white; clear: both; } /* Kopf */ #kopf { /* Background */ background: Fuchsia; /* Text */ text-align: center; } /* Menü */ #menu { /* Bachground */ background: white; /* Float */ float: left; /* Größe */ padding: 20px; width: auto; height: auto; /* Text */ text-align: center; color: blue; text-decoration: underline; } #menu>ul { /* Vorzeichen ausblenden */ list-style-type: none; margin: 0px; padding: 0px; } #menu>li { margin: 0px; padding: 0px; } /* Rechts */ #rechts { /* Background */ background: white; /* Float */ float: right; /* Größe */ padding: 20px; width: auto; height: auto; /* Text */ text-align: center; color: Blue; } /* Inhalt */ #inhalt { /* Background */ background: aqua; /* Größe */ margin: 0px; /* Text */ text-align: center; } /* Fuß */ #fus { /* Background */ background: white; /* Clear */ clear: both; /* Text */ color: blue; font-size: 0.8em; text-align: right; }
und
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Startseite der Bluefaces</title> <meta name="robots" content="index" /> <meta name="language" content="de" /> <meta name="description" content="Eine neue Band: Die Bluefaces..." /> <meta http-equiv="date" content="06.05.2009" /> <meta name="keywords" content="bluefaces, blue, face, band, musik" /> <meta http-equiv="author" content="Tristan Kretzer und die Bluefaces" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="CSS/bfscreen.css" /> </head> <body> <!-- Bebinn sichbarer Teil --> <!-- Beginn Container --> <div id="container"> <!-- Beginn Kopf --> <div id="containerkopf"> <div id="kopf"> <h1>Die Bluefaces</h1> </div> </div> <!-- Ende Kopf --> <!-- Beginn Menü --> <div id="containerlinks"> <div id="menu"> <ul> <li>Integer<br /><br /></li> <li>Bibendum<br /><br /></li> <li>Porttitor<br /><br /></li> <li>Commodo<br /><br /></li> <li>Nam</li> </ul> </div> </div> <!-- Ende Menü --> <!-- Beginn Rechts --> <div id="containerrechts"> <div id="rechts"> <h2>News</h2> <p> Es gibt noch keine News </p> </div> </div> <!-- Ende Rechts --> <!-- Beginn Inhalt --> <div id="containerinhalt"> <div id="inhalt"> <h1>Inhalt</h1><br /><br /> <p> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> </p> <br /><br /><br /> <p> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> Sed eget augue in mauris dictum pulvinar. Sed rhoncus augue.<br /> </p> </div> </div> <!-- Ende Inhalt --> <!-- Beginn Fuß --> <div id="containerfus"> <div id="fus"> <h4>|Kontakt|Impressum|</h4> </div> </div> <!-- Ende Fuß --> </div> <!-- Ende Container --> <!-- Ende sichtbarer Teil --> </body> </html>
Aber es klappt immer noch nicht.
Ich habe auch schon viele eigene Sachen die ich kann probiert aber nichts klappt.
Die Boxen wachsen immer noc nicht mit und mache damit das Layout kaputt. -
Naja, ohne jetzt an deinem CSS herumzuspielen...du musst bedenken das du bei Floats nach Möglichkeit eine Breite mitgeben musst, damit das LAyout stimmt. In welche Richtung soll deine Seite denn dynamisch sein?
-
evil-devil schrieb: Naja, ohne jetzt an deinem CSS herumzuspielen...du musst bedenken das du bei Floats nach Möglichkeit eine Breite mitgeben musst, damit das LAyout stimmt. In welche Richtung soll deine Seite denn dynamisch sein?
Verstehe ich, glaub ich, nicht...
Oben ein Banner,
links darunter ein mit dem Content mitwachendes Menü, in der mitte der Content, rechts daneben eine Newsbox
und unten eine Fußzeile.
War das, dass was du gemeint hast?? -
In dem Fall würde ich für die Grundstruktur auf Tabellen zurückgreifen. DIVs haben die Angewohnheit nicht mitzuwachsen. Vor allem nicht, wenn sie gefloatet wurden. Per se haben DIVs nur die Höhe die ihr Inhalt ihnen aufzwingt.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
