nicht angemeldet
CSS Problem mit DIVs
Hallo Forum,
Hier ein sehr merkwürdiges Problem:
Das Logo DIV wird im Firefox um Daumensdicke nach unten gedrückt. Im IE 6 ist es ganz rechts oben auf der Seite.
Kann mir das nicht erklären. Versuche schon seit 2 Stunden das problem zu erkennen. Sieht jemand wo es liegt?
<body>
<div class="top1">
<a name="top"><img id="logo" src="/languages/{$smarty.session.lang}/img/logo.png" alt="{$aTrans.slogan}" /></a>
</div>
.top1 {
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 1px solid #000;
}
body {
background-color: #fff;
background-image: url('/images/round_arrow.gif');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
-
Hallo
ich frag mich grad warum du einen div angiebst aber gar keinen gemacht hast.
mfg
allen
-
ich frag mich grad warum du einen div angiebst aber gar keinen
??? Wovon redest du?
Hier noch das CSS für das Logo.
#logo {
float: right;
margin: 0 0 0 0;
padding: 0 0 0 0;
}-
hi,
??? Wovon redest du?
und wovon redest du?
src="/languages/{$smarty.session.lang}/img/logo.png"
alt="{$aTrans.slogan}" /></a>das zeug in klammern ist doch vermutlich irgendein serverseitig auszuwertender krempel.
wenn du ein clientseitiges problem diskutieren möchtest, gib bitte _immer_ den code so an, wie er beim client ankommt.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
wenn du ein clientseitiges problem diskutieren möchtest, gib bitte _immer_ den code so an, wie er beim client ankommt.
...
<script src="/javascripts/pulldownmenu.js" type="text/javascript"></script>
</head><body>
<a name="top"><img id="logo" src="/languages/de/img/logo.png" alt="logo" /></a><div class="top2">
...
-
PS: Hier ohne das DIV. Das Logo ist trotzdem nicht in der oberen Rechten Ecke. Sondern 1cm weuit nach unten gedrückt.
-
hi,
PS: Hier ohne das DIV.
ist es vielleicht möglich, dass du jetzt endlich mal den _gesamten relevanten code_ in _einem_ posting herzeigst?
ich glaube kaum, dass irgendjemand lust hat, sich aus mehreren postings zusammenzusuchen, was genau du jetzt eigentlich meinst.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Code:
<body>
<div class="top1">
<a name="top"><img id="logo" src="/languages/de/img/logo.png" alt="logo" /></a>
</div>.top1 {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}#logo {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}body {
background-color: #fff;
background-image: url('/images/round_arrow.gif');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}-
hi,
<div class="top1">
<a name="top"><img id="logo" src="/languages/de/img/logo.png" alt="logo" /></a>
</div>wozu floatest du den div nach links, wenn du ihm gar keine breitenangabe gibst?
wozu floatest du das img im a, wenn a nach wie vor ein inline-element bleibt?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
wozu floatest du den div nach links, wenn du ihm gar keine breitenangabe gibst?
Stimmt! Das float: left ist überflüssig.
wozu floatest du das img im a, wenn a nach wie vor ein inline-element bleibt?
Damit des ganz rechts in dem DIV erscheint?
-
Habe das float nun rausgenommen und das Logo ist tatsächlich nach oben gerutscht. Herrlich!
Jetzt noch eine Erklärung dafür. *grübel* und ich kann beruhigt ins WE.-
Ach du dickes Ei! Jetzt habe ich absolutes Chaos im IE.
Der packt mir nun alles links neben das Logo. :( Hilfe.
-
Problem gelöst. Ich habe im Css für "top2" ein clear: right; eingefügt wo vorher ein float: left; stand.
Was ich nicht verstehe ich, warum das "clear: right;" benötigt wird.
Im Css für das Logo steht "float: right;"
Wird dieses "float: right;" nicht mit dem schließenden </div> vom class="top1" div aufgehoben? *verwirrt*. Oder ist das wieder ein IE bug?<div class="top1">
<a name="top"><img id="logo" src="/languages/de/img/logo.png" alt="logo" /></a>
</div><div class="top2">
<div id="product_menu"><div class="top2">
-
-
-
Hallo,
wozu floatest du den div nach links, wenn du ihm gar keine breitenangabe gibst?
Stimmt! Das float: left ist überflüssig.Nein, das hat wahsaga nicht gemeint. Das float ist wichtig, damit das DIV-Element weiterhin der umgebende Block für das Bild bleibt. Es ist nur _zwingend_ eine Breitenangabe erforderlich.
Vergleiche:
<body style="margin:0; padding:0;">
<div style="width:100%; float:left; border:1px solid black; margin:0; padding:0;">
<a name="a" href="#"><img src="back01.jpg" width="50" height="50" border="0" alt="Bild" style="float:right;"></a>
</div>
<p style="clear:both;">vs.</p>
<div style="border:1px solid black; margin:0; padding:0;">
<a name="b" href="#"><img src="back01.jpg" width="50" height="50" border="0" alt="Bild" style="float:right;"></a>
</div>
</body>viele Grüße
Axel
-
Nein, das hat wahsaga nicht gemeint. Das float ist wichtig, damit das DIV-Element weiterhin der umgebende Block für das Bild bleibt. Es ist nur _zwingend_ eine Breitenangabe erforderlich.
Das verstehe ich nun überhaupt nicht. Das float gibt doch nur an wo das Element in bezug auf das ELternelemt angeordnet ist. Ein div nimmer doch immr 100% des umgebenden Elements ein. In meinem Fall das body element. Das Problem ist nur, dass du recht hast wie ich sehe.
Aber nun bin ich echt platt. Ist das ein bug? Oder offiziell?
Du hast mir mein WE versaut. :)Vergleiche:
<body style="margin:0; padding:0;">
<div style="width:100%; float:left; border:1px solid black; margin:0; padding:0;">
<a name="a" href="#"><img src="back01.jpg" width="50" height="50" border="0" alt="Bild" style="float:right;"></a>
</div>Ja aber diese Version ist auch nicht am oberen Bildschirmrand angeordnet. Sonders sie hat das gleiche Problem, das ich vorher
<p style="clear:both;">vs.</p>
<div style="border:1px solid black; margin:0; padding:0;">
<a name="b" href="#"><img src="back01.jpg" width="50" height="50" border="0" alt="Bild" style="float:right;"></a>
</div>
</body>-
hi,
Das verstehe ich nun überhaupt nicht. Das float gibt doch nur an wo das Element in bezug auf das ELternelemt angeordnet ist. Ein div nimmer doch immr 100% des umgebenden Elements ein.
nur so lange man es nicht beispielsweise ... floatet.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em." -
Hallo,
Das verstehe ich nun überhaupt nicht. Das float gibt doch nur an wo das Element in bezug auf das ELternelemt angeordnet ist.
Nein. Float gibt an, dass sich das Element in Bezug auf den nachfolgenden Elementfluss _anders_ verhält, als normal. Normalerweise braucht ein DIV 100% der Fensterbreite. Mit float wird es auf die angegebene Breite beschränkt. Die Angaben float:left; bzw. float:right; zeigen an, wo das Element sich zum nachfolgenden Inhalt positionieren soll. Als nachfolgender Inhalt, der um das Element fließt, wird alles das betrachtet, was nicht speziell float oder clear angegeben hat.
Eine Besonderheit bei float ist die Veränderung des containing blocks. Elemente mit float akzeptieren nur Elemente mit ebenfalls explizit angegebenem float als sie umgebende Elemente. Alle anderen Elemente solle sie ja umfließen.
<body style="margin:0; padding:0;">
<div style="width:100%; float:left; border:1px solid black; margin:0; padding:0;">
<a name="a" href="#"><img src="back01.jpg" width="50" height="50" border="0" alt="Bild" style="float:right;"></a>
</div>
</body>
Ja aber diese Version ist auch nicht am oberen Bildschirmrand angeordnet. Sonders sie hat das gleiche Problem, das ich vorherSo, wie es jetzt da steht, schon ;-)). Es darf nur nichts nachfolgen.
Das scheint ein Firefox-Bug zu sein. Was man da oben sieht, ist margin des dem float nachfolgenden Elementes, im Beispiel des
<p style="clear:both;">vs.</p>
Mach daraus ein
<p style="clear:both; margin:0;">vs.</p>
und alles rutscht wieder nach oben.
viele Grüße
Axel
-
Mach daraus ein
<p style="clear:both; margin:0;">vs.</p>
und alles rutscht wieder nach oben.Leider tut es das nicht! Unerklärlich warum. :( Es sieht nun so aus:
<body>
<div class="top1"><a name="top"><img id="logo" src="/languages/de/img/logo.png" alt="logo" /></a>
</div><p style="clear: both; margin:0; padding:0;"></p>
<div class="top2l"></div>
<div class="top2r">
<div id="product_menu">
<ul class="menu"> Hier das Menu
</ul>
</div>
</div>body {
background-color: #fff;
background-image: url('/images/round_arrow.gif');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}.top2l {
float: left;
background-color: #d61008;
height: 70px;
width: 50%;
}.top2r {
background-color: #d61008;
background-image: url("../images/design/edge_white_right.png");
background-position: top right;
background-repeat: no-repeat;
float: right;
height: 70px;
width: 50%;
}#logo { float: right; margin: 0; padding: 0; }
-
Hallo,
Leider tut es das nicht! Unerklärlich warum. :( Es sieht nun so aus:
Mit genau diesem Code steht das Logo bei mir im Firefox ganz oben. Oder was meintest Du? Hast Du noch andere CSS-Einstellungen eventuell für .top1?
Übrigens brauchst Du das extra P-Element nicht. Folgendes sollte reichen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[Titel]</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #fff;
background-image: url('canva.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}.top2l {
clear: right;
float: left;
background-color: yellow;
height: 70px;
width: 50%;
margin:0;
}.top2r {
background-color: red;
background-image: url('canva.jpg');
background-position: top right;
background-repeat: no-repeat;
float: right;
height: 70px;
width: 50%;
}#logo {
float: right;
margin: 0;
}
-->
</style>
</head>
<body>
<div class="top1"><a name="top"><img id="logo" src="b01.gif" alt="logo">Text in Top1</a></div><div class="top2l">Text in Top2l</div>
<div class="top2r">
<div id="product_menu">
<ul class="menu">
<li>Hier das Menu in Top2r</li>
</ul>
</div>
</div></body>
</html>Hier brauchtest Du das margin:0 für .top2l gar nicht, weil .top2l ja selbst wieder float: setzt.
Übrigens: Wenn top1, top2l und top2r in _diesem_ Dokument nur einmal vorkommen, sollten es IDs sein, keine Klassen. Das Selektieren von IDs geht schneller, weil diese einmalig sein _müssen_.
viele Grüße
Axel
-
Hi,
wo ist aber nun das css für top1 in deinem Beispiel? Hast du das weggelassen? Vielleicht klappt es deswegen.
Bei mir ist über dem Logo 1 cm Platz.
Habe sonst keine weiteren css Angaben. Komisch.-
Hallo,
wo ist aber nun das css für top1 in deinem Beispiel? Hast du das weggelassen? Vielleicht klappt es deswegen.
Du bist gut. Da https://forum.selfhtml.org/?t=101025&m=621256 ist keins und meine Glaskugel ist in der Reinigung.
viele Grüße
Axel
-
-
-
-
-
-
-
-
-
Das komische ist, dass wenn ich zwischen <body> und dem <div> einen Buchstaben einfüge rutscht das Logo etwas nach oben.
-
-
-
-
-
-
margin: 0 0 0 0;
padding: 0 0 0 0;servus
versuchs mal mit
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;das gehört zum sauberen Programmierstiel und bessere Browser wollen einen guten stiel wie z.b. firefox
IE dagegen interpretiert auch schlampigen code bessergrüsse
allen
-
Hi,
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;das gehört zum sauberen Programmierstiel und bessere Browser wollen einen guten stiel wie z.b. firefox
Nein, einen Stiel braucht man zum Programmieren nicht - egal wie stilvoll man programmiert.
CSS hat aber sowieso nichts mit Programmierung zu tun.Wenn schon anders, dann m.E. margin:0; padding:0;
Bei Längen mit Wert 0 ist die Angabe einer Einheit in CSS optional, weil 0px genauso lang sind wie 0cm.
IE dagegen interpretiert auch schlampigen code besser
Nein, nicht besser, sondern abweichend vom Standard, der vorschreibt, daß fehlerhafte Werte ignoriert werden müssen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-