| Autor |
Nachricht |
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: 
|
Verfasst Di 04.10.2005 11:17
Titel [CSS] div chaos |
  |
|
Ich spiele nun schon seit Stunden mit den Abständen herum ohne eine Lösung zu bekommen. Vielleicht kann mir hier jemand helfen - bei spotleid scheinbar nicht.
Das Szenario ohne drumherum:
http://www.pixelfehler.com/html/example.gif
div1 div2 div3 besitzten gemeinsam diese Eigenschaften:
#box {
width: 190px;
background: #ffffff;
float: left;
padding: 15px;
margin-top: 30px;
margin-left: 40px;
color: #000000;
}
div1 div2 div3 sind jeweils also 220px Breit.
Der Innenabstand zum Rand beträgt 15px (was uns jetzt aber nicht weiter interessiert).
Diese div1 div2 div3 sind innerhalb von div positioniert und zwar links (float: left;).
Der Abstand von div1 div2 div3 ist links jeweils auf 40px festgelegt.
Nach Adam Riese beträgt die Gesamtbreite der drei divs inklusive margin 780px. div ist 820px breit. Es sind also für div1 und div3 nach links - bzw. rechts noch 20px Platz, um auch hier einen Abstand von 40px zum Rand hinzubekommen.
Nun pappt der ganze Spass im IE rechtsbündig am Rand vom übergeordneten div.
Im Mozilla alles bestens.
Achja und btw: div1 geht jetzt über die in div festgelegte höhe von 100% hinaus. wie geht das denn?
Anschaubar hier: http://www.pixelfehler.com/html/index-nav.html
|
|
| |
   |
 |
funkeffekt
Dabei seit: 31.03.2005
Ort: -
Alter: 40
Geschlecht: 
|
Verfasst Di 04.10.2005 11:53
Titel
|
|
|
mir ist nicht ganz schlüssig, warum ein Div von 190px Breite und 40px margin, insgesamt 220px breit sein soll ...
und zu dem Problem würde ich jetzt spontan sagen, dass das der typische IE Bug (doppelter margin) ist.
Versuchs mal mit dem IE-Hack
| Code: |
* html #box {
margin-left: 20px;
} |
allerdings irrtiert es mich etwas, dass nur der erste margin breiter ist (wirkt verdoppelt).
|
|
| |
|
|
|
Anzeige
|
|
|
mcbethy
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Di 04.10.2005 12:12
Titel
|
|
|
Mal was anderes. Du hast die ID mehrfach vergeben. Eine ID sollte in einem Dokument jedoch nur einmal vergeben werden. Ändere das mal besser in class um.
Kannst das auch hier nachlesen: http://dciwam.de/faq/css/unterschied-id-class
|
|
| |
|
|
sanna
Dabei seit: 04.02.2003
Ort: Rodgau
Alter: 40
Geschlecht:
|
Verfasst Di 04.10.2005 12:24
Titel
|
|
|
Das mit den 220px für die boxbreite stimmt schon. Man nehme hierzu die definierte Breite und das padding links und rechts von jeweils 15px und schon hat man 220px (zuzüglich des Außenabstands von 40px) 
Weiter gehts mit den doppelten ids, wie mcbethy schon bemerkt hat. Bitte, bitte ändern.
| Zitat: | | Achja und btw: div1 geht jetzt über die in div festgelegte höhe von 100% hinaus. wie geht das denn? |
Das liegt an deiner Höhenangabe in #seite. Die 100% beziehen die Geckos nur auf den sichtbaren Bildschirmbereich. Somit hört dieses div dann einfach auf.
Versuchs mal mit einem div4 nach deinem div3 und setz dieses auf float: none und clear: both. Sollte helfen, die #seite auf die Höhe des größten Elements innerhalb aufzuziehen.
*puh* Hoffe, durch dieses Gewurschtel steigt noch jemand durch 
|
|
| |
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.10.2005 13:16
Titel
|
|
|
Ich schieb das grad mal » Allgemeines - Nonprint, weil mit
Programmierung hat's ja jetzt nun mal nix zu tun, wa? 
|
|
| |
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Di 04.10.2005 13:20
Titel
|
|
|
| sanna hat geschrieben: | Das mit den 220px für die boxbreite stimmt schon. Man nehme hierzu die definierte Breite und das padding links und rechts von jeweils 15px und schon hat man 220px (zuzüglich des Außenabstands von 40px)
Weiter gehts mit den doppelten ids, wie mcbethy schon bemerkt hat. Bitte, bitte ändern.
| Zitat: | | Achja und btw: div1 geht jetzt über die in div festgelegte höhe von 100% hinaus. wie geht das denn? |
Das liegt an deiner Höhenangabe in #seite. Die 100% beziehen die Geckos nur auf den sichtbaren Bildschirmbereich. Somit hört dieses div dann einfach auf.
Versuchs mal mit einem div4 nach deinem div3 und setz dieses auf float: none und clear: both. Sollte helfen, die #seite auf die Höhe des größten Elements innerhalb aufzuziehen.
*puh* Hoffe, durch dieses Gewurschtel steigt noch jemand durch |
Das mit den doppelten IDs muss ich noch ändern, aber wenn ich das hier einfach in class umbenenne sind div1-3 alle links am übergeordneten div drangeklatscht. Wie mache ich als CSS und DIV Neuling das am dümmsten?
Danke - das mit dem div4 hat geklappt. der fehler lag zusätzlich wohl an der angabe height: 100% im body. die gleiche angabe kam im css für #seite vor. Es ist ja korrekt, dass ich in dieses div ein nbsp einfüge - laut W3C darf es ja keine leeren Tags geben - korrekt?
Zuletzt bearbeitet von Xaven am Di 04.10.2005 13:29, insgesamt 2-mal bearbeitet
|
|
| |
|
|
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Di 04.10.2005 14:04
Titel
|
|
|
|
Hm, das weiß ich auch gar nicht. Ich fürchte aber schon um die nächste Frage: Wie mach ich die DIVs gleich hoch? Antwort: geht nur mit Javascript oder Fake columns.
|
|
| |
|
|
bongo553810
Dabei seit: 02.11.2004
Ort: ffm
Alter: 47
Geschlecht:
|
Verfasst Di 04.10.2005 14:07
Titel
|
|
|
|
Falls ich dich recht verstehe: Du kannst mit min-height arbeiten (für den IE allerdings nur mit Workaround möglich)
|
|
| |
|
|
| |
|
|
Willkommen auf dem Portal für Mediengestalter
