1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Layout-Problem

  • davidos_no.1
  • 8. Dezember 2008 um 16:57
  • davidos_no.1
    Kaiser(in)
    Beiträge
    2.314
    • 8. Dezember 2008 um 16:57
    • #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
    Meister(in)
    Beiträge
    267
    • 8. Dezember 2008 um 17:35
    • #2

    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.

    :arrow: Mein Blog

    Einmal editiert, zuletzt von koslowski (8. Dezember 2008 um 17:39)

  • davidos_no.1
    Kaiser(in)
    Beiträge
    2.314
    • 8. Dezember 2008 um 17:39
    • #3
    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
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 8. Dezember 2008 um 17:40
    • #4

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

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 8. Dezember 2008 um 17:40
    • #5

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

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • davidos_no.1
    Kaiser(in)
    Beiträge
    2.314
    • 8. Dezember 2008 um 17:44
    • #6
    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
    Meister(in)
    Beiträge
    267
    • 8. Dezember 2008 um 17:50
    • #7

    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.

    :arrow: Mein Blog

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 8. Dezember 2008 um 17:53
    • #8

    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".

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • davidos_no.1
    Kaiser(in)
    Beiträge
    2.314
    • 8. Dezember 2008 um 17:56
    • #9
    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! :)

Tags

  • color
  • http
  • style
  • text
  • linke
  • layout
  • post
  • problem
  • code
  • auto
  • navi
  • bot
  • bottom
  • abstand
  • liste
  • info
  • header
  • align
  • hover
  • float
  • margin-bottom
  • sidebar
  • unicode
  • content

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern