Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS und seine Eigenheiten“

GeneralFabi

Nicht mehr ganz neu hier

Hi,
ich habe ein ziemlich nerviges Problem mit CSS. Ich arbeite mit parent- und child-divs und es gibt nur Probleme. Das treibt mich noch zum Wahnsinn...

Ich will ein Layout haben, bei dem es einen allesumgebenden div gibt, darin einen header-, body- und footer-Bereich und inerhalb des body- und footer-Bereich jeweils immer einen linken und rechten Bereich gibt.

Das Problem ist, dass die body- und footer-divs nicht die entsprechenden linken und rechten divs umschließen. Die Folge davon ist, dass das gesamte Layout völlig missgestaltet erscheint.
Solange ich den umschließenden body- und footer-divs keine Höhe gebe (was bei dem Body-Bereich nicht geht; dynamischer Inhalt), besitzen diese die Normalhöhe eines divs und umschließen ihre linken und rechten Bereiche nicht mehr.

HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="common.css" media="screen" rel="stylesheet" title="Espadon Online-Basic" type="text/css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Startseite | Espadon Online</title>
</head>
<body>
<div id="wrap">
  <div id="page-header">
    <h1>Espadon Online ? Startseite</h1>
    <p><a class="external" href="http://blog.espadon-online.eu/">Espadon Online-Blog</a> ? <a href="forum/">Espadon Online-Forum</a></p>
  </div>
  <div id="page-body">
    <div id="page-body-left"></div>
    <div id="page-body-right">Hallo Welt!</div>
  </div>
  <div id="page-footer">
    <div id="page-footer-left">Copyright &copy; 2008 Cowade Studios. Alle Rechte vorbehalten.<br/>
      XHTML 1.0 transitional ? CSS Level 2.1 ? Barrierefreiheit</div>
    <div id="page-footer-right">Nach oben ? Samstag, 27. September 2008<br/>
      Deutsch ? English</div>
  </div>
</div>
<div id="wrap-after">
  <!-- height: 10px;  -->
</div>
</body>
</html>
CSS-Code:
Code:
@charset "utf-8";
/* CSS Document */

*
{
    font-size: 100%;
    margin: 0;
    padding: 0;
}

a:link, a:visited
{
    color: #323232;
    text-decoration: none;
}

a:hover
{
    color: #FF9944;
    text-decoration: underline;
}

a:active
{
    color: #FF9944;
    text-decoration: none;
}

body
{
    background-color: #F0F0F0;
    color: #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 72.5%;
    margin: 10px;
    padding: 0;
}

h1
{
    color: #333333;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.30em;
    font-weight: normal;
}

html
{
    background-color: #F0F0F0;
    color: #000;
    height: 100%;
    margin: 0 0 10px 0;
}

img { border: 0; }

p
{
    font-size: 1.00em;
    line-height: 1.40em;
    margin: 0 0 0.7em 0;
}

div#wrap
{
    background-color: #FFF;
    border: 1px solid #CCCCCC;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 950px;
}

divwrap-after
{
    clear: both;
    height: 10px;
}

div#page-header
{
    background: url("site-logo.png") top left no-repeat;
    clear: both;
    height: 125px;
    margin: 0 0 10px 0;
    padding: 5px;
    text-align: right;
    width: 940px;
}

div#page-header h1
{
    margin: 0;
    padding: 0;
}

div#page-header p
{
    color: #323232;
    margin: 0;
    padding: 0;
}

div#page-body
{
    clear: both;
    height: 100%;
    margin: 0;
    padding: 5px;
    width: 940px;
}

div#page-body-left
{
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    width: 600px;
}

div#page-body-right
{
    float: left;
    margin: 0;
    padding: 0;
    width: 330px;
}

div#page-footer
{
    clear: both;
    height: 34px;
    margin: 0;
    padding: 5px;
    width: 940px;
}

div#page-footer-left
{
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    width: 600px;
}

div#page-footer-right
{
    float: left;
    margin: 0;
    padding: 0;
    width: 330px;
    text-align: right;
}
Wenn jemand eine Lösung meines Problems oder eine bessere Umsetzung der Idee hat, bitte schreiben, ist echt wichtig!
Danke im Voraus!
 
H

Heddy

Guest

AW: CSS und seine Eigenheiten

du musst das float vom body und vom footer auch noch mit clear löschen
also bei mir war es so!
MfG
Heddy
 

toxictoon

Pixelpatriot

AW: CSS und seine Eigenheiten

Wenn ich dich richtig verstanden habe sollte es so gehen...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" media="screen" rel="stylesheet" title="Espadon Online-Basic" type="text/css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Startseite | Espadon Online</title>
</head>
<body>
<div id="wrap">
  <div id="page-header">
    <h1>Espadon Online ? Startseite</h1>
    <p><a class="external" href="http://blog.espadon-online.eu/">Espadon Online-Blog</a> ? <a href="forum/">Espadon Online-Forum</a></p>
  </div>
  <div id="page-body">
    <div id="page-body-left">
      <p>Linker page bereich</p>
      <p>asdf</p>
      <p>sdas</p>
      <p>dsdad</p>
    </div>
    <div id="page-body-right">
      <p>Rechter Page BEreich</p>
      <p>dsfjdsfjkldsjf</p>
      <p>sdfdsflhdsf</p>
      <p>&nbsp;</p>
      <p>sadasd</p>
      <p>asd</p>
    </div>
  </div>
  <div id="page-footer">
    <div id="page-footer-left">Copyright &copy; 2008 Cowade Studios. Alle Rechte vorbehalten.<br/>
      XHTML 1.0 transitional ? CSS Level 2.1 ? Barrierefreiheit</div>
    <div id="page-footer-right">Nach oben ? Samstag, 27. September 2008<br/>
      Deutsch ? English</div>
  </div>
</div>
<div id="wrap-after">
  <!-- height: 10px;  -->
</div>
</body>
</html>


Code:
@charset "utf-8";
/* CSS Document */

*
{
    font-size: 100%;
    margin: 0;
    padding: 0;
}

a:link, a:visited
{
    color: #323232;
    text-decoration: none;
}

a:hover
{
    color: #FF9944;
    text-decoration: underline;
}

a:active
{
    color: #FF9944;
    text-decoration: none;
}

body
{
    background-color: #F0F0F0;
    color: #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 72.5%;
    margin: 10px;
    padding: 0;
}

h1
{
    color: #333333;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.30em;
    font-weight: normal;
}

html
{
    background-color: #F0F0F0;
    color: #000;
    height: 100%;
    margin: 0 0 10px 0;
}

img { border: 0; }

p
{
    font-size: 1.00em;
    line-height: 1.40em;
    margin: 0 0 0.7em 0;
}

div#wrap
{

    background-color: #FFF;
    border: 1px solid #CCCCCC;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 950px;
}

divwrap-after
{
    clear: both;
    height: 10px;
}

div#page-header
{
    background: url("site-logo.png") top left no-repeat;
    height: 125px;
    margin: 0 0 10px 0;
    padding: 5px;
    text-align: right;
    width: 940px;
}

div#page-header h1
{
    margin: 0;
    padding: 0;
}

div#page-header p
{
    color: #323232;
    margin: 0;
    padding: 0;
}

div#page-body
{
    height: 100%;
    margin: 0;
    padding: 5px;
    width: 940px;
}

div#page-body-left
{
    float: left;
       margin: 0 10px 0 0;
    padding: 0px;
    width: 600px;
}

div#page-body-right
{
    float:left;
    margin: 0;
    padding: 0x;
    width: 320px;
}

div#page-footer
{
    clear: both;
    height: 34px;
    margin: 0;
    padding: 5px;
    width: 940px;
}

div#page-footer-left
{
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    width: 600px;
}

div#page-footer-right
{
    float: left;
    margin: 0;
    padding: 0;
    width: 330px;
    text-align: right;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben