Margin für <p>: Div verschiebt sich.

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen!
Ich find einfach nicht heraus woran das liegt, sowas hatte ich noch nie.

Ich habe einen Div-Container mit Namen content. Wenn ich jetzt einem Textabsatz, also

per css einen margin zuweise, damit der text nicht oben am Rand klebt, verschiebt sich der ganze Container mit nach unten… Das soll aber nicht so sein.

Der Link zur Seite: index
Und hier nochmal den CSS-Code:

/* top elements */
* { padding: 0; margin: 0; }

body {
    margin: 0px;     padding: 0;
    font: normal .72em/1.5em 'Segoe Print Bold', sans-serif;
    color: #ffffff;
    background-color: #000000;
    text-align: left;
    height: 100%;
         width: 100%;
}

/* links */
a { background: inherit; color: #ffffff; text-decoration: none; }
a:hover { background: inherit; color: #254CF7; text-decoration: underline; }

/* headers */
h1, h2, h3 {
    font: bold 1em 'Segoe Print Bold';
    color: #254CF7;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; text-transform: uppercase;}
h3 { font-size: 1.2em; }

p, h1, h2, h3 {
    margin: 20px 15px;
}

/* container */

#header {
  margin: 0px auto;
  margin-top: 50px;
  width: 800px;
  height: 80px;
  background-color: #000000;
}

#content {
  margin: 0px auto;
  width: 800px;
  height: 400px;
  background-image: url(../images/home_bg.jpg);
}

/*logo*/

img.logo {
  width: 150px;
  height: 80px;
  float: left;
}

/*navigation*/

#navigation {
  background-color: #000000 ;
  line-height: 80px;

}

#navigation li {
  margin: 30px;
  display: inline;
}

#navigation li a {
  font-size: 1.5em;
  font-family: 'Segoe Print Bold';
}

#navigation li a:hover {
  text-decoration: none;
  color: #254CF7;
  border-bottom: 2px solid #254CF7;
}

Html:

<!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>index</title>
<meta name="description" content="beschreibung" />
<meta name="author" content="Marius" />
<meta name="keywords" content="bla" />
<link rel="stylesheet" href="styles/style.css" type="text/css" />
</head>
<body>
<div id="header">
 <img class="logo" src="images/logo.jpg" alt="Marius Margraf Webdesign" />
 <ul id="navigation">
  <li><a href="">Home</a></li>
  <li><a href="">Über mich</a></li>
  <li><a href="">Portfolio</a></li>
  <li><a href="">Kontakt</a></li>
 </ul>
</div>
<div id="content">
 <p>Ein Beispieltext</p>
</div>
</body>
</html>

Bitte um Hilfe!

LG Majo

2

bin selbst noch Anfänger, ist nur ein Versuch. Margin ist der Außenabstand des Absatzes, versuch doch bitte mal padding-top vom container.

oder

Ein Beispieltext

so klappt es bei mir wenn ich's eingebe. Hoffe es klappt.

Hawa

3

Was ist denn das für ein Host, auf dem die Site liegt? Avira meldet da „Die angeforderte URL wurde als potentiell gefährliche Webseite identifiziert.“

Wenn ich jetzt einem Textabsatz, also

per css einen margin zuweise, damit der text nicht oben am Rand klebt, verschiebt sich der ganze Container mit nach unten.

Kann ich mir nicht vorstellen. Dadurch wird div#content natürlich größer, ja, schließlich vergrößerst Du auch „div#content p“, aber div#content verschiebt sich dadurch nicht nach unten.

4

[QUOTE=Efchen]
Was ist denn das für ein Host, auf dem die Site liegt? Avira meldet da „Die angeforderte URL wurde als potentiell gefährliche Webseite identifiziert.“

[/QUOTE]
Scheint Ohost.de zu sein. Vielleicht hängt es damit zusammen, dass gleich nach dem Laden der Seite ein dicker fetter PopUp Banner erscheint.

5

Ja, habe die Seite auf ohost.de. Als Test reicht ohost aus.

Kann ich mir nicht vorstellen. Dadurch wird div#content natürlich größer, ja, schließlich vergrößerst Du auch „div#content p“, aber div#content verschiebt sich dadurch nicht nach unten.

Ja eben, konnte ich mir auch nicht vorstellen, ist aber passiert. Deshalb frage ich ja.

6

das sind Collapsing Margins, ein wichtiges CSS-Prinzip.

Coll. Marg. kannst du vermeiden indem du entweder padding statt margin vergibst, oder dem geeigneten Element (div#text) einen border in der Farbe des Hintergrundes verpaßt.