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

hilfe beim clearen

  • Ersteller Ersteller Html-Profi
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
H

Html-Profi

Guest
hi @ all,

Die Box zeigt einen Fehler wegen fehlenden clearing falsch an! Kann mir jemand beim clearen helfen? bekomme es nicht hin!

style.css
body{
font-size:14px;
font-family:Tahoma;
}
.header{
width:100%;
background-color:#00B359;
height:16%;
text-align:right;
border-bottom:1px solid;
border-color:#4c4c4c;
}
.navi{
padding-top:10px;
float:left;
background-color:#00B359;
height:84%;
width:15%;
border-right:1px solid;
border-color:#4c4c4c;
font-family:Verdana;
font-size:17px;
}
.content{
float:left;
width:69%;
background-color:white;
height:84%;
padding-left:5px;
padding-top:5px;
font-size:14px;
font-family:Tahoma;
}
ul{
list-style-image: url('pfeil.png');
}
.sidebartop{
padding-top:12px;
text-align:center;
font-size:24px;
float:right;
background-image: url(images/top.gif);
height:48px;
width:16%;
}
.sidebartext{
float:right;
background-image: url(images/mitte.gif);
width:16%;
padding-left:13px;
padding-top:13px;
}

.sidebarschluss{
float:right;
background-image: url(images/schluss.gif);
width:16%;
padding-left:13px;
height:26px;
}
Zum Vergrößern anklicken....

index.html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="header"><img src="stats.png" alt="Ihr Banner"></div>
<div class="navi">
<ul><li>Menüpunkt 1</li><li>Menüpunkt 2</li><li>Menüpunkt 3</li></ul>
</div>
<div class="content">Das ist ein Test! Einfach nur ein sinnloser Text im Raum!</div>

<div class="sidebartop">Eine Box</div>
<div class="sidebartext"><p>TEXT TEXT TEXT</p><p>Noch ein TEXT TEXT</p></div>
<div class="sidebarschluss"></div>

</body>
</html>
Zum Vergrößern anklicken....
 
Hi,

wenn du die Gesamtbreite berechnest mußt du natürlich padding, margin und border hinzurechnen nur so bekommst du die wahre Gesamtbreite.

Wenn ich richtig rechne sind das bei dir deswegen mehr als 100%.

Für den content in der Mitte wird eigentlich kein width angegeben.
Hau doch mal width für den .content raus und gib ihm rechts und links entsprechendes margin (padding + border in Rechnung miteinbeziehen!) das er dazwischenpaßt.

Fürs clearen würde ich um alles einen div#wrapper legen und das ganz unten vor </div#wapper> eine <hr class="clear" /> einfügen.
Code: 
.clear  {
   clear:both;
   height:0;
    width:0;
    visibility:hidden;
}

Vielleicht auch mit Easy Clearing arbeiten.

koslowski
 
HTML: 
.clear {
    clear:both;
    height: 0px;
    font-size:0px;
    line-height:0px;
}

<br class="clear" />

das sollte reichen, anstelle des divs
 
HTML: 
body{
font-size:14px;
font-family:Tahoma;
}
.header{
width:100%;
background-color:#00B359;
height:16%;
text-align:right;
border-bottom:1px solid;
border-color:#4c4c4c;
}
.navi{
float : left;
padding-top:10px;
background-color:#00B359;
height:84%;
width:15%;
border-right:1px solid;
border-color:#4c4c4c;
font-family:Verdana;
font-size:17px;
}
.content{
float : left;
width:69%;
background-color: #F9FF8F;
height:80%;
padding-left:5px;
padding-top:5px;
font-size:14px;
font-family:Tahoma;
}
ul{
list-style-image: url('pfeil.png');
font-size:14px;
}
#rechts {
float : left;
}
.sidebartop {
padding-top:12px;
text-align:center;
font-size:14px;
background-image: url(images/top.gif);
height:48px;

}
.sidebartext{

background-image: url(images/mitte.gif);

padding-left:13px;
padding-top:13px;
}

.sidebarschluss{

background-image: url(images/schluss.gif);
background-color : #760000;
width:100%;
padding-left:13px;
height:26px;
}
HTML: 
<div class="header">
<img src="stats.png" alt="Ihr Banner">
</div>

<div id="spalten">

<div class="navi">
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
</ul>
</div>

<div class="content">
Das ist ein Test! Einfach nur ein sinnloser Text im Raum!
</div>


<div id="rechts">
<div class="sidebartop">
<p>r oben</p>
</div>

<div class="sidebartext">
<p>r unten</p>

</div>
</div>

<br style="clear : both;" />

</div>


<div class="sidebarschluss">
<p>unten</p>

</div>
 
so siehts jetzt aus:
http://www.imgimg.de/uploads/ffbb8ada7cjpg.jpg

Was muss ich jetzt clearen? Also wo muss ich euren Code einfügen?

HTML:
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="header"><img src="stats.png" alt="Ihr Banner"></div>
<div class="navi">
<ul><li>Menüpunkt 1</li><li>Menüpunkt 2</li><li>Menüpunkt 3</li></ul>
</div>
<div class="content">Das ist ein Test! Einfach nur ein sinnloser Text im Raum!</div>

<div class="sidebar">
<div class="sidebartop">Eine Box</div>

<div class="sidebartext"><p>TEXT TEXT TEXT</p><p>Noch ein TEXT TEXT</p></div>

<div class="sidebarschluss"></div>
</div>
</body>
</html>

CSS:
Code: 
body{
font-size:14px;
font-family:Tahoma;
}
.header{
width:100%;
background-color:#00B359;
height:16%;
text-align:right;
border-bottom:1px solid;
border-color:#4c4c4c;
}
.navi{
padding-top:10px;
float:left;
background-color:#00B359;
height:84%;
width:15%;
border-right:1px solid;
border-color:#4c4c4c;
font-family:Verdana;
font-size:17px;
}
.content{
float:left;

background-color:white;
height:84%;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
padding-top:5px;
font-size:14px;
font-family:Tahoma;
}
ul{
list-style-image: url('pfeil.png');
}
.sidebar{
float:right;
width:16%;
padding-left:13px;
padding-top:13px;

}
.sidebartop{
padding-top:12px;
text-align:center;
font-size:24px;
background-image: url(images/top.gif);
height:48px;
width:200px;
}
.sidebartext{
background-image: url(images/mitte.gif);
padding-left:13px;
padding-top:13px;
width:200px;
}

.sidebarschluss{
background-image: url(images/schluss.gif);
padding-left:13px;
height:26px;
width:200px;
}
 
entferne mal alle padding und margin :
* {
margin : 0px;
padding : 0px;
}

Die Abstände in der rechten Box kommen durch die voreingestellten margin im Browser
 
Code: 
body{
font-size:14px;
font-family:Tahoma;
}
* {
margin : 0px;
padding : 0px;
}
.header{
width:100%;
background-color:#00B359;
height:16%;
text-align:right;
border-bottom:1px solid;
border-color:#4c4c4c;
}
.navi{
padding-left:5px;
padding-top:10px;
float:left;
background-color:#00B359;
height:84%;
width:15%;
border-right:1px solid;
border-color:#4c4c4c;
font-family:Verdana;
font-size:17px;
}
.content{
float:left;

background-color:white;
height:84%;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
padding-top:5px;
font-size:14px;
font-family:Tahoma;
}
ul{
list-style-image: url('pfeil.png');
}
.sidebar{
margin : 0px;
padding : 0px;
float:right;
width:16%;
padding-left:13px;
padding-top:13px;

}
.sidebartop{
margin : 0px;
padding : 0px;
padding-top:12px;
text-align:center;
font-size:24px;
background-image: url(images/top.gif);
height:48px;
width:200px;
}
.sidebartext{
margin : 0px;
padding : 0px;
background-image: url(images/mitte.gif);
padding-left:13px;
padding-top:13px;
width:200px;
}

.sidebarschluss{
margin : 0px;
padding : 0px;
background-image: url(images/schluss.gif);
padding-left:13px;
height:26px;
width:200px;
}
 
ich könnte mir vorstellen, das das mit dem padding zusammenhängt. im grunde ist deine div nun 213px breit. FF macht das so, im gegensatz zu ie

edit: vielleicht mal margin auf content anwenden?
 
mach mal deine css clean
nimm alle margin:0px und padding:0px raus, machst du ja schon mit *{}
ortne layout und format ein wenig, dann ists übersichtlicher und um einiges einfacher, die ursache zu erörtern

dann poste nochmals dein css dein html und ein screenshot vom ergebnis plus nochmals ganz klar definieren, was dein ziel ist

ps: ich sehe neben deiner rechten seite (edit: spalte) eine wiederholung deines bgimage
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben