mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 15:52 Benutzername: Passwort: Auto-Login

Thema: [CSS] div chaos vom 04.10.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] div chaos
Seite: 1, 2  Weiter
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Di 04.10.2005 10:17
Titel

[CSS] div chaos

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
funkeffekt

Dabei seit: 31.03.2005
Ort: -
Alter: 33
Geschlecht: Weiblich
Verfasst Di 04.10.2005 10:53
Titel

Antworten mit Zitat Zum Seitenanfang

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).
  View user's profile Private Nachricht senden
Anzeige
Anzeige
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Di 04.10.2005 11:12
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
sanna

Dabei seit: 04.02.2003
Ort: Rodgau
Alter: 33
Geschlecht: Weiblich
Verfasst Di 04.10.2005 11:24
Titel

Antworten mit Zitat Zum Seitenanfang

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) Lächel

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 *zwinker*
  View user's profile Private Nachricht senden
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 04.10.2005 12:16
Titel

Antworten mit Zitat Zum Seitenanfang

Ich schieb das grad mal » Allgemeines - Nonprint, weil mit
Programmierung hat's ja jetzt nun mal nix zu tun, wa? * Ööhm... ja? *
  View user's profile Private Nachricht senden
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 34
Geschlecht: Männlich
Verfasst Di 04.10.2005 12:20
Titel

Antworten mit Zitat Zum Seitenanfang

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) Lächel

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 *zwinker*


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 12:29, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
13pixelchen
Account gelöscht


Ort: -

Verfasst Di 04.10.2005 13:04
Titel

Antworten mit Zitat Zum Seitenanfang

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: 39
Geschlecht: Männlich
Verfasst Di 04.10.2005 13:07
Titel

Antworten mit Zitat Zum Seitenanfang

Falls ich dich recht verstehe: Du kannst mit min-height arbeiten (für den IE allerdings nur mit Workaround möglich)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS Frage : Body div /div div ?
[CSS] DIV im DIV - Grafik rechts unten postionieren?
CSS - DIV scrollen
CSS - was ist ein div-container?
[CSS] DIV ausrichten
[CSS] Div zentrieren
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.