✔ Erklärungsbedarf CSS

hume1991

hume1991

Erfahrenes Mitglied
Guten Morgen zusammen,

habe derzeit einen kleinen Konflikt bezüglich CSS und komme nicht darauf.

Wenn ich 2 Div Elemente mache und Sie bei CSS eine bestimmte Höhe und Breite gebe, werden Sie ohne Abstand angezeigt.

Html

HTML: 
<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>

<body>

<div id="test">

</div>

<div id="test1">

</div>

</body>
</html>

CSS

Code: 
  div#test
  {
      height: 100px;
      width: 100px;
      background: green;
  }

  div#test1
  {
      height: 200px;
      width: 100px;
      background: red;

  }

Dies ist aber nicht mehr der Fall wenn es um die Navigation geht

Html

HTML: 
<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>

<body>

<div id="test">
<img src="../Website/test.gif"  alt="" />
</div>


<div id="navi">

<ul>
<li> <a href="index.html">Test1 </a> </li>
<li> <a href="test2.html">Test2 </a> </li>
<li> <a href="test3.html">Test3 </a> </li>
<li> <a href="test4.html">Test4 </a> </li>
<li> <a href="test5.html">Test5 </a> </li>
<li> <a href="test6.html">Test6 </a> </li>
<li> <a href="test7.html">Test7 </a> </li>

</ul>

</div>

</body>
</html>


Css

HTML: 
div#test

{
background: no-repeat;
height: 130px;
width: 1004px;


}

div#navi ul
{
    width: 1004px;
    float: left;
    clear: both;
}


div#navi li
{
    display: block;
    background: yellow;
    padding: 10px;
    float: left;
    clear: right;

}

div#navi A:link
{
background: yellow;
color: black;
text-decoration: none;

}

Was muss ich verändern oder besser gesagt was mas ich falsch, bei der 2 Variante, es soll ohne Abstand angezeigt werden.
 
Ich habe mir jetzt das Ergebnis nicht angeschaut aber da du bei der Navigation padding: 10px; angegeben hast würde ich sagen es liegt daran!?

Oder du schaust ob es ohne die Angabe height: 130px; besser wird.
 
Zuletzt bearbeitet:
Hallo tombe,

bezüglich height und padding hab ich dies schon ausprobiert, Problem glaube ich bezieht sich auf die Navigation
 
Dann anders gefragt, welchen Abstand meinst du genau? Vielleicht kannst du ja mal ein Bild machen und es da markieren.
 
Dann anders gefragt, welchen Abstand meinst du genau? Vielleicht kannst du ja mal ein Bild machen und es da markieren.
Zum Vergrößern anklicken....

Hallo tombe,

es soll kein Abstand vom Header zum Menü sein, in diesem Fall ist ein Abstand.
 

Anhänge

  • Snap_2013.03.06_11h40m10s_001_.png
    Snap_2013.03.06_11h40m10s_001_.png
    45,9 KB · Aufrufe: 12
Hallo,

jeder Browser versieht bestimmte HTML-Elemente mit einer initialen Formatierung, wenn nichts anderes angegeben wurde. Leider machen die Browser das nicht einheitlich.
Für die äußere Auspolsterung eines Elements ist die MARGIN-Eigenschaft und für die innere Auspolsterung ist die PADDING-Eigenschaft zuständig. Wenn du also beim UL-Element beides auf Null setzt, dann hast du die initiale Formatierung gelöscht:
CSS: 
div#navi ul {
  width: 1004px;
  float: left;
  clear: both;
  margin: 0;
  padding: 0;
}
 
... bei mir mit oben gezeigtem Quelltext nicht.
Vielleicht musst du erst den Browsercache löschen.
 
Habe den Browserverlauf gelöscht, Problem besteht weiterhin. Mit welchen Browser hast du dies getestetet?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück