Hallo,
kann mir jemand sagen warum im folgenden Code das
element bei NET nicht funktioniert?
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;
}<!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
system
7. Januar 2010 um 11:56
2
Nein, du kennst deine CSS Datei? Da steht drin, dass alle Elemente keinen Abstand haben.
hab meinen code etwas erweitert:
<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
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
system
7. Januar 2010 um 12:52
6
Was heißt aufgehoben? Du musst den von dir gewünschten Abstand definieren, deshalb hast du ja dieses Reset gemacht oder warum sonst?
wenn ich nun den folgenden Abstand definiere:
<p>
Telefon: 999999<br />
Mobil: 893256
</p>…dann wird die Box verzerrt: NET
system
7. Januar 2010 um 13:14
8
Du hast jetzt auch die Absätze falsch verschachtelt.
[HTML]
[/HTML]Das sind zwei Absätze, die Browser schliessen automatisch einen Absatz wenn ein neue Absatz kommt.
ich steh irgendwie auf dem Schlauch. Wie müsste es denn richtig sein?
hi struppi,
kannst du mir nicht einen Tipp, geben was ich bei diesem Absatz falsch gemacht habe?
system
7. Januar 2010 um 19:35
11
[CODE]
NETCN
Teststr. 30
Telefon: 999999
[/CODE]
Silar
7. Januar 2010 um 19:40
12
Du musst den
-Tag schließen. struppi hat dein Code nicht verbessert gehabt. Also korrekt wäre es so:
[HTML]
[/HTML]
leider hat dies nicht funktioniert. Meine Box ist dadurch immer noch verzogen.http://mh.netcn.de/kontakt.php
<!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:
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:NET
crash
8. Januar 2010 um 10:19
16
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]
[/html]
system
11. Januar 2010 um 12:20
17
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!
