• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

html element p funktioniert nicht innerhalb von div

C

Corraggiouno

Mitglied
Hallo,

kann mir jemand sagen warum im folgenden Code das <p> element bei NET nicht funktioniert?
Code: 
div#box1 {
width:240px;
float:left;
margin-top:10px;
margin-left:6px;
}

h2 {
background: url(../images/box1_head.gif) no-repeat;
font-size:14px;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <ul id="navigation">
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
  </ul> 
  <div id="maintext">
   <div id="box1">
    <h2>Kontakt</h2>
    <p>NET</p>
    Teststr. 30<br />
    88888 Teststadt<br />
    Telefon: 999999<br />
    Mobil: 893256
   </div>
  </div>  
</div>  
</body>
</html>
Ergebnis: NET
Normalerweise müsste doch ein Absatz entstehen, oder?
 
hab meinen code etwas erweitert:
Code: 
<div id="wrapper">
<h1>NET</h1>
  <ul id="navigation">
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
  </ul> 
  <div id="maintext">
   <div id="box1">
    <h2>Kontakt</h2>
    <p class="middle">NETCN
    Teststr. 30<br />
    88888 Teststadt<br />
    Telefon: 999999<br />
    Mobil: 893256</p>
    <p class="bottom"></p>
   </div>
  </div>  
</div>  
</body>
</html>
css-code
Code: 
h2 {
background: url(../images/box1_head.gif) no-repeat;
font-size:14px;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
}


p.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
margin-top:-10px;
padding-top:5px;
padding-left:15px;
}

p.bottom {
background: url(../images/box1_bottom.gif) repeat-y;
width:240px;
height:30px;
padding-left:15px;
}
Wie kann ich nun einen Absatz zwischen der Stadt und der Telefonnummer einbauen? Muss dazu das margin bzw. padding oben aufgehoben werden?
NET
 
Was heißt aufgehoben? Du musst den von dir gewünschten Abstand definieren, deshalb hast du ja dieses Reset gemacht oder warum sonst?
 
Du hast jetzt auch die Absätze falsch verschachtelt.

HTML: 
<p> <p>
Das sind zwei Absätze, die Browser schliessen automatisch einen Absatz wenn ein neue Absatz kommt.
 
Code: 
<p class="middle">NETCN
    Teststr. 30<br />
    88888 Teststadt
    </p>
    <p>
    Telefon: 999999<br />
    Mobil: 893256
    </p>
 
Du musst den <p>-Tag schließen. struppi hat dein Code nicht verbessert gehabt. Also korrekt wäre es so:

HTML: 
<p></p>
 
leider hat dies nicht funktioniert. Meine Box ist dadurch immer noch verzogen.
http://mh.netcn.de/kontakt.php
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <ul id="navigation">
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
  </ul> 
  <div id="maintext">
   <div id="box1">
    <h2>Kontakt</h2>
    <p class="middle">
    NETCN<br />
    Teststr. 30<br />
    88888 Teststadt
    </p>
    <p>
    Telefon: 999999<br />
    Mobil: 893256
    </p>
    <p class="bottom"></p>
   </div>
  </div>  
</div>  
</body>
</html>
css-code:
Code: 
div#box1 {
width:240px;
float:left;
margin-top:10px;
margin-left:6px;
}

h2 {
background: url(../images/box1_head.gif) no-repeat;
font-size:14px;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
}

p.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
margin-top:-10px;
padding-top:5px;
padding-left:15px;
}

p.bottom {
background: url(../images/box1_bottom.gif) repeat-y;
width:240px;
height:30px;
padding-left:15px;
}
Kann mir jemand sagen, wie ich es besser machen kann?
 
sorry, wenn ich address nehme, dann bekomme ich das selbe Ergebnis:
Meine Box1 hat dann eine Lücke: NET
Zudem wird die Adresse noch kursiv dargestellt, was ich eigentlich nicht möchte!
 
Gestalte das ganze mal anders: Zwei Divs verschachtelt für die oberen und unteren Ecken mit den Ecken als Hintergrundbild. Das Adress nimmt dann den Hintergrund für den Rahmen links/rechts auf.

HTML: 
<div>
    <div>
        <address>
        </address>
     </div>
</div>
 
Corraggiouno schrieb:
sorry, wenn ich address nehme, dann bekomme ich das selbe Ergebnis
Zum Vergrößern anklicken....
Nein. Dann bekommst Du aus Sicht von HTML ein ganz anderes Ergebnis!

Vorher hast Du einen Textabsatz, hinterher hast Du eine Adresse.

Ihr Anfänger müsst Euch unbedingt angewöhnen, HTML und CSS strikt voneinander zu trennen, auch in Gedanken. Euch muss klar sein, was HTML eigentlich ist, nämlich die Definition der Semantik des Inhalts, und dass HTML nicht für die Ausgabe im Browser da ist!

Wenn Ihr diese essenziellen Basics beachtet, dann stellen sich einige Probleme erst gar nicht! Dann haut Ihr nicht HTML- und CSS-Probleme ständig durcheinander und alles wird viel übersichtlicher und logischer!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben