Layout-Problem

davidos_no.1

Wie man auf meiner Seite, ist der Abstand zwischen der Überschrift und dem darunter liegenden Text auf der linken Seite größer, als auf der rechten Seite.
Kann es daran liegen, dass ich rechts eine Liste verwende oder woran liegt das?

Meine .css

Code

body {
margin: 0px;
padding: 0px;
background: black;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; }


#header {
width: 100%;
height: 35px;
background: red; }


#page {
width: 100%;
height: auto;
background: #222222; }


    #content {
    width: 70%;
    height: auto;
    float: left;
    padding: 15px 10px 15px 15px;
    text-align: right;
    font-size: x-small;
    font-weight: normal;
    color: #CCCCCC; }

        .post {
        width: auto;
        height: auto; }

            .post h2 {
            font-size: small;
            font-weight: normal;
            margin-bottom: 5px; }

            .post h2 a:link, .post h2 a:visited, .post h2 a:active, .post h2 a:hover {
            text-decoration: none;
            color:#999999; }

            .post a:link, .post a:visited, .post a:active, .post a:hover {
            text-decoration: none;
            color:#999999; } 

        .info {
        width: auto;
        height: auto; }

            .info a:link, .info a:visited, .info a:active, .info a:hover {
            text-decoration: none;
            color:#999999; }

        .navi {
        width: auto;
        height: auto; }

            .navi a:link, .navi a:visited, .navi a:active, .navi a:hover {
            text-decoration: none;
            color:#666666; }

    #sidebar {
    width: 20%;
    height: auto;
    float: left;
    padding: 15px 15px 15px 10px;
    text-align: left;
    font-size: x-small;
    font-weight: normal; }

        #sidebar h2 {
        font-size: small;
        font-weight: normal;
        color: #999999;
        margin-bottom: 5px; }

        #sidebar .h3 {
        font-size: x-small;
        font-weight: normal; }

        #sidebar .h3 a:link, #sidebar .h3 a:visited, #sidebar .h3 a:active, #sidebar .h3 a:hover {
        text-decoration: none;
        color: #777777; }

        #sidebar ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none; }

        #sidebar li a:link, #sidebar li a:visited, #sidebar li a:active, #sidebar li a:hover {
        text-decoration: none;
        color: #CCCCCC; }

    #clear {
    width: auto;
    height: auto;
    clear: both; }

#footer {
width: 100%;
height: 35px;
background: red; }

Alles anzeigen

koslowski

Tach,

nimm mal das padding:0; und margin:0 für body raus und schreibe in die erste Zeile deiner CSS:

Code

*  {
   padding:0;
   margin:0;
}

dann sollte es passen.

koslowski

edit. nur für body die Abstände auf null zu setzen reicht oft nicht, dafür ist der *-Selektor besser geeignet.

davidos_no.1

Zitat von koslowski
Tach,

nimm mal das padding:0; und margin:0 für body raus und schreibe in die erste Zeile deiner CSS:
Code
*  {
   padding:0;
   margin:0;
}
dann sollte es passen.

koslowski

Stimmt! Aber jetzt nochmal für mich...was ist der Unterschied zwischen * und body? Ich dachte, das ist Ein und das Selbe?!

sejuma

Danach ggf. die Abstände für p, h, ul und li neu definieren.
http://www.ohne-css.gehts-gar.net/0037.php

sejuma

* ist der Universalselektor und gilt für alle Elemente.
body gilt eben nur für den body.

davidos_no.1

Zitat von sejuma

* ist der Universalselektor und gilt für alle Elemente.
body gilt eben nur für den body.

Sorry, wenn ich das jetzt frage, aber im body sind doch alle Elemente platziert oder bin nicht?

koslowski

Hi,

Zitat von davidos_no.1

Stimmt! Aber jetzt nochmal für mich...was ist der Unterschied zwischen * und body? Ich dachte, das ist Ein und das Selbe?!

wie sejuma schon sagte der *-Selektor gilt für ausnahmslos alle Elemente auf der Seite.

Für body definierte Eigenschaften vererben sich nicht unbedingt an alle seine Nachfahren.

sejuma

Ja, das ist richtig, innerhalb body sind die anderen Elemente enthalten oder platziert.
Aber der für body hinterlegte margin-Wert bezieht sich nur auf den body.
Er wird insofern nicht vererbt, weil Elemente wie p oder h eigene, zunächst browserspezifische Margin-Werte haben. Diese kann man mit dem Universalselektor * "resetten".

davidos_no.1

Zitat von sejuma

Ja, das ist richtig, innerhalb body sind die anderen Elemente enthalten oder platziert.
Aber der für body hinterlegte margin-Wert bezieht sich nur auf den body.
Er wird insofern nicht vererbt, weil Elemente wie p oder h eigene, zunächst browserspezifische Margin-Werte haben. Diese kann man mit dem Universalselektor * "resetten".

Ahja, ok...ich dachte immer, dass * gleich body ist, aber ok, dann bin ich jetzt wieder schlauer! Danke!

Layout-Problem

Tags

Benutzer online in diesem Thema