Ergebnis 1 bis 8 von 8
  1. #1
    Philidor ist offline Eroberer
    registriert
    12-05-2010
    Beiträge
    70

    <p> und margin-bottom => denkfehler?

    Anstelle eines <br /> Nach einem <p>, möchte ich ein margin-bottom für p setzen:

    css:
    Code:
    p { margin-bottom: 17px; }
    html:
    Code:
    <h1>Überschrift 1</h1>
    <p>Absatz 1</p>
    <h1>Überschrift 2</h1>
    <p>Absatz 2</p>
    .
    .
    Zwischen p und h1 ist aber nicht der gewünschte Abstand. Wo liegt mein Denkfehler?
    Danke

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: <p> und margin-bottom => denkfehler?

    vielleicht sind noch die default-Einstellungen des Browsers aktiv?

  3. #3
    siriussmarty ist offline Grünschnabel
    registriert
    08-06-2010
    Beiträge
    5

    AW: <p> und margin-bottom => denkfehler?

    Wo liegt den deine Stylesheet?
    Hast du mehrere "p" Angaben in der Stylesheet? vielelicht für eine Seite 2?
    versuche mal


    <div id="content"><h1>Überschrift 1</h1>
    <p>Absatz 1</p>
    <h1>Überschrift 2</h1>
    <p>Absatz 2</p>
    </div>


    STYLESHEET
    #content p { margin-bottom: 17px; }

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <p> und margin-bottom => denkfehler?

    ein h1 hat im FF einen Standardmargin von 21px...

  5. #5
    Philidor ist offline Eroberer
    registriert
    12-05-2010
    Beiträge
    70

    AW: <p> und margin-bottom => denkfehler?

    Ich weiß nicht was mein Fehler war, aber als ich die entsprechenden Teile erneut eingerichtet habe, hat es funktioniert. Ein Problem besteht jedoch weiterhin:
    Auf der folgenden Seit, wird gegenüber den anderen der Text um eine Zeile tiefer angezeigt. Warum kann ich mir nicht erklären:
    http://www.julian-urabl.com/biography/

    Code:
    <!DOCTYPE html>
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JULIAN URABL</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content="Content: Julian Urabl, Design: Julian Urabl" />
    <meta name="description" content="Julian Urabl, Guitarist Composer | Informationen rund um Julian Urabls musikalische Arbeit" />
    <link rel="stylesheet" href="/css/stylesheet.css" type="text/css" media="screen" />
    <link rel="shortcut icon" href="/grafics/icon.ico" type="image/x-icon">
    </head>
    <body>
    <div id="belt">
     <div id="frame">
      <div id="content-section">
       <div id="content">
        <p><div id="biography_left-columne">
         03.03.1990<br />
         1995-1998<br />
         <br />
         1997-2003<br />
         2000-2009<br />
         2001-2002<br />
         <br />
         2004-2008<br />
         <br />
         2006<br />
         <br />
        </div>
        <div id="biography_right-columne">
         geboren in Salzburg, &Ouml;sterreich<br />
         Schlagzeugunterricht in Salzburg, Mitglied einer Jugend-Schlagzeuggruppe am Mozarteum<br />
         Gitarrenunterricht in Salzburg<br />
         Musisches Gymnasium Salzburg, Matura<br />
         Vertonung eines Werbeclips f&uuml;r die Sportmesse &quot;Ispo&quot;, Gewinner des &quot;Ispo-Rookie-Awards&quot; in der Kategorie &quot;Brand New&quot;<br />
         Unterricht und Workshops bei Thomas Wallisch, Pedro Tagliani, Peter Herbert und Wolfgang Muthspiel<br />
         Ver&ouml;ffentlichung der Debut-CD &quot;Cosmetic Blue&quot;, im Anschluss bis dato Unterricht bei Wolfgang Pointner
        </div></p>
       </div>
      </div>
      <div id="menu-section">
        <ul id="menu">
         <li><a id="biography_site" class="menu-item_row-1" href="/biography/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Biographie" /></a></li>
         <li><a id="projects" class="menu-item_row-1" href="/projects/1/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Projekte" /></a></li>
         <li><a id="calendar" class="menu-item_row-1" href="/calendar/1/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Kalender" /></a></li>
         <li><a id="audio" class="menu-item_row-1" href="/audio/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Audio" /></a></li>
         <li><a id="pictures-videos" class="menu-item_row-2" href="/pictures-videos/1/"><img src="/grafics/transparent.gif" class="menu-item_row-2" alt="Bilder &amp; Videos" /></a></li>
         <li><a id="links" class="menu-item_row-1" href="/links/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Links" /></a></li>
         <li><a id="contact" class="menu-item_row-1" href="/contact/"><img src="/grafics/transparent.gif" class="menu-item_row-1" alt="Kontakt" /></a></li>
         <li><a id="credits-imprint" class="menu-item_row-2" href="/credits-imprint/"><img src="/grafics/transparent.gif" class="menu-item_row-2" alt="Credits &amp; Impressum" /></a></li>
        </ul>
      </div>
     </div>
    </div>
    <div id="logo"></div>
    </body>
    </html>
    Code:
    /* RESET */
    html,body,div,table,tr,th,td,ul,li,h1,input { margin: 0; padding: 0; }
    ul,li { display: inline; list-style: none; }
    img { border: none; }
    table,td { border:none; border-collapse: collapse; border-spacing: 0; }
    
    /* GENERAL */
    html,body { position: fixed; width: 100%; height: 100%; background-color: #fff; line-height: 17px; letter-spacing: 0.5px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #3e3e3e; }
    h1 { display: block; line-height: 24px; letter-spacing: 1px; font-size: 12px; font-weight: bold; color: #b8a58a; }
    p { margin: 0 0 17px 0; padding: 0 }
    textarea { margin: 0; padding: 5px; }
    a { color: #632300; text-decoration: none; outline: none; }
    a:hover	{ text-decoration: underline; }
    a img { border: none; }
    .hide { display:none }
    
    /* LAYOUT */
    #belt { position: fixed; width: 100%; height: 480px; top: 50%; margin-top: -240px; background-color: #f7f6ee; }
    #frame { position: absolute; width: 800px; height: 480px; left: 50%; margin-left: -400px; background-color: #cfc8b7; }
    #menu-section { position: absolute; width: 100px; height: 480px; margin-left: 10px; background-color: #6f6052; }
    #content-section { position: absolute; width: 682px; height: 480px; margin-left: 110px; background-color: #fff; }
    #content { position: absolute; width: 550px; height: 404px; margin: 38px 0px 0px 64px; text-align: justify; }
    #content_error { position: absolute; width: 100%; margin-left: -15px; text-align: center; }
    #logo { position:fixed; width:380px; height:45px;  top: 50%; left: 50%; margin: -295px 0px 0px -290px; background: transparent url('../grafics/logo.png'); }
    
    /* MENU */
    ul#menu { position: absolute; margin-top: 25px; }
    a.menu-item_row-1 { display: block; width: 100px; height: 28px; text-align: center; color: #fff; }
    a.menu-item_row-2 { display: block; width: 100px; height: 42px; text-align: center; color: #fff; }
    a#biography { background: transparent url('../grafics/menu/biography.png'); background-position: top; }
    a#projects { background: transparent url('../grafics/menu/projects.png'); background-position: top; }
    a#calendar { background: transparent url('../grafics/menu/calendar.png'); background-position: top; }
    a#audio { background: transparent url('../grafics/menu/audio.png'); background-position: top; }
    a#pictures-videos { background: transparent url('../grafics/menu/pictures-videos.png'); background-position: top; }
    a#links { background: transparent url('../grafics/menu/links.png'); background-position: top; }
    a#contact { background: transparent url('../grafics/menu/contact.png'); background-position: top; }
    a#credits-imprint { background: transparent url('../grafics/menu/credits-imprint.png');	background-position: top; }
    a#biography:hover,a#projects:hover,a#calendar:hover,a#audio:hover,a#pictures-videos:hover,a#links:hover,a#contact:hover,a#credits-imprint:hover { background-position:center }
    a#biography_site { background: transparent url('../grafics/menu/biography.png'); background-position: bottom; }
    a#projects_site { background: transparent url('../grafics/menu/projects.png'); background-position: bottom; }
    a#calendar_site { background: transparent url('../grafics/menu/calendar.png'); background-position: bottom; }
    a#audio_site { background: transparent url('../grafics/menu/audio.png'); background-position: bottom; }
    a#pictures-videos_site { background: transparent url('../grafics/menu/pictures-videos.png'); background-position: bottom; }
    a#links_site { background: transparent url('../grafics/menu/links.png'); background-position: bottom; }
    a#contact_site { background: transparent url('../grafics/menu/contact.png'); background-position: bottom; }
    a#credits-imprint_site { background: transparent url('../grafics/menu/credits-imprint.png'); background-position: bottom; }
    a#back { position: fixed; display: block; width: 18px; height: 32px; top: 50%; left: 50%; margin: 205px 0px 0px 331px; background: transparent url('../grafics/back.gif'); background-position: top; }
    a#forward { position: fixed; display: block; width: 18px; height: 32px; top: 50%; left: 50%; margin: 205px 0px 0px 349px; background: transparent url('../grafics/forward.gif'); background-position: top; }
    a#back:hover,a#forward:hover { background-position:bottom }
    #back-alt { position: fixed; display: block; width: 18px; height: 32px; top: 50%; left: 50%; margin: 205px 0px 0px 331px; }
    #forward-alt { position: fixed; display: block; width: 18px; height: 32px; top: 50%; left: 50%; margin: 205px 0px 0px 349px; }
    
    /* SITE */
    #biography_left-columne { float: left; width: 80px; height: 420px; }
    #biography_right-columne { float: right; width: 460px; height: 420px; }
    #calendar_left-columne { position: absolute; margin-left: 10px; }
    #calendar_right-columne { position:absolute; margin-left: 300px; }
    table.pictures_table { width:100%; }
    table.pictures_table th { padding:5px; text-align:center; }
    #contact_name-left { float: left; width: 100px; height: 30px; }
    #contact_email-left { float: left; width: 100px; height: 30px; }
    #contact_message-left { float: left; width: 100px; }
    #contact_name-right { float: right; width: 440px; height: 30px; }
    #contact_email-right { float: right; width: 440px; height: 30px; }
    #contact_message-right { float: right; width: 440px; height: 180px; }
    #contact_buttons { padding-left: 100px; }
    #welcome { position: fixed; width: 540px; height: 400px; top: 50%; left: 50%; margin: -200px 0px 0px -220px; }
    
    /* WINDOW OPEN */
    #audio_object { position: fixed;  width: 300px; height: 15px; top: 50%; left: 50%; margin: -7.5px 0px 0px -150px; }
    #audio_close-window { position: fixed; left: 50%; top: 50%; margin: 20px 0px 0px 75px; }
    #video_object { position: absolute; width: 500px; height: 405px; top: 50%; left: 50%; margin: -208px 0px 0px -250px; }
    #video_close-window { position: fixed; top: 50%; left: 50%; margin: 210px 0px 0px 175px; }
    #video_embed { width: 500px; height: 405px; }
    #show_picture_border { vertical-align: bottom; }
    #show_picture_image { float: left; }
    #show_picture_imformations { margin-left: 16px; }

  6. #6
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.311

    AW: <p> und margin-bottom => denkfehler?

    weil da eine Leerzeile ist (<p></p>)

  7. #7
    Philidor ist offline Eroberer
    registriert
    12-05-2010
    Beiträge
    70

    AW: <p> und margin-bottom => denkfehler?

    Ich glaube ich bin blind - welche Leerzeile?

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: <p> und margin-bottom => denkfehler?

    Wie kommt man auf die Idee, zwei divs in ein p zu stecken?

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •