<p> und margin-bottom => denkfehler?

Philidor · 08. Juni 2010

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

Dormilich · 08. Juni 2010

vielleicht sind noch die default-Einstellungen des Browsers aktiv?

siriussmarty · 08. Juni 2010

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; }

kkapsner · 08. Juni 2010

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

Philidor · 10. Juni 2010

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, Ö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ür die Sportmesse "Ispo", Gewinner des "Ispo-Rookie-Awards" in der Kategorie "Brand New"<br />
     Unterricht und Workshops bei Thomas Wallisch, Pedro Tagliani, Peter Herbert und Wolfgang Muthspiel<br />
     Veröffentlichung der Debut-CD "Cosmetic Blue", 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 & 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 & 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; }

Dormilich · 10. Juni 2010

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

Philidor · 10. Juni 2010

Ich glaube ich bin blind - welche Leerzeile?

dkdenz · 10. Juni 2010

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

<p> und margin-bottom => denkfehler?

Philidor

New member

Dormilich

New member

siriussmarty

New member

kkapsner

Super Moderator

Philidor

New member

Dormilich

New member

Philidor

New member

dkdenz

New member