kostenloser Webspace werbefrei: lima-city


Problem mit CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    trik

    trik hat kostenlosen Webspace.

    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&uuml; -->
          <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&uuml; -->
          <!-- 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&szlig; -->
          <div id="fus">
            <h4>|Kontakt|Impressum|</h4>
          </div>
          <!-- Ende Fu&szlig; -->
        </div>
        <!-- Ende Container -->
        <!-- Ende sichtbarer Teil -->  
      </body>
    </html>


    Beitrag zuletzt geändert: 7.5.2009 18:37:48 von trik
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. e********l

    Pack den Content mal in einen eigenen Container und setz für diesen dann entsprechend ein text-align.
  4. Autor dieses Themas

    trik

    trik hat kostenlosen Webspace.

    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???
  5. e********l

    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.
  6. Autor dieses Themas

    trik

    trik hat kostenlosen Webspace.

    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&uuml; -->
          <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&uuml; -->
          <!-- 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&szlig; -->
          <div id="containerfus">
            <div id="fus">
              <h4>|Kontakt|Impressum|</h4>
            </div>
          </div>
          <!-- Ende Fu&szlig; -->
        </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.
  7. e********l

    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?
  8. Autor dieses Themas

    trik

    trik hat kostenlosen Webspace.

    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??
  9. e********l

    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.
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!