✔ div = kompliziert?!

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo liebe Community,

ich habe mir schon mehrere Threads hier durchgelesen und auch selfHTML wurde von mir beackert, aber ich verstehe das Geheimnis um div einfach nicht.

Mein Problem ist, dass ich 3 div nebeneinander haben möchte, mit einem gewissen Abstand zueinander in verschiedenen Grössen.
Soweit so gut. Sie liege halbwegs nebeneinander und haben auch einen Rahmen, aber die Abstände zwischen den einzelnen div bekomme ich nicht koordiniert.
Vielleicht liegt dies aber auch an meinem Unvermögen die Einheit "em" richtig zu interpretieren und einzusetzen.

Meine Fragen also:

Wie verhalten sich mehrere div zueinander?
Wie kann ich diese genau positionieren?
Wie kann ich "em" abschätzen und sinnvoll einsetzen?


Quellcode zur Seite:
HTML: 
<div id="inhalt">
  Hier ein wenig Inhalt
</div>
<div id="info">
  Hier ein wenig Infos
</div>
<div id="bilder">
 Hier ein paar Bilder
</div>


Quellcode der style.css:
Code: 
div#info {
    float: right; width: 12em;
    font-size: 0.9em;
    margin: 0 0 5em 0;
    padding: 1em;
    background-color: #eee; border: 1px solid black;
  }
div#bilder {
    font-size: 1em;
    margin: 0 0 0 33em;
    padding: 1em;
    border: 1px solid black;
  }
div#inhalt {
    float: left; width:30em;
    margin: 0 0 1em 0;
    padding: 1em;
    border: 1px solid black;
  }
 
Hab scheinbar den Fehler beim Attribut margin gemacht. Eine Antwort auf die Fragen wäre mir trotzdem lieb.
Danke!
 
Okay, nun haben wir also geklärt, dass Attribut und Eigenschaft kontextmässig das gleiche (das selbe) sind, aber irgendwie ein wenig OT, oder?

Das Thema habe ich deshalb noch nicht "geclosed", weil die Fragen nach wie vor offen sind.
Mittlerweile ergibt sich auch eine neue Herausforderung für mich:

Quelltext der style.css:
Code: 
div#info {
    float: right; width: 12em;
    font-size: 1em;
    margin: 1em 0em 1em 0;
    padding: 1em;
    background-color: #eee; border: 1px solid black;
  }
div#bilder {
    font-size: 1em;
    margin: 1em 15em 1em 33em;
    padding: 1em;
    border: 1px solid black;
  }
div#inhalt {
    float: left; width:30em;
    margin: 1em 1em 1em 0em;
    padding: 1em;
    border: 1px solid black;
  }

Das div mit der id="bilder" hängt weiter oben, als die beiden äusseren.
Hat jemand eine Anregung?

Danke!
 
Hi,

eieiei! Wenn Du Margins mit der Größe em angibst, dann kann das u.U. in verschiedenen divs verschieden ausfallen. Je nachdem halt. Eine Größe in em bezieht sich auf die Größe des Buchstabens "M", in der gerade gewählten Schriftgröße eben. Was ich jetzt nicht weiß, ist, wie wird eine Größe in em appliziert, wenn so ein div gar keine Buchstaben enthält (also z.B. nur bilder)? Theoretisch müsste das unabhängig davon sein. Aber in der Praxis ist die Theorie oft anders :)

Nur mal so zum ausprobieren: Versuch mal zunächst, die diversen Größen fest in Pixel anzugeben. Mal sehen, wie es dann aussieht. Danach könnte man auch mal eine Größenangabe in % ausprobieren, insbesondere was die linken und rechten Ränder resp. die horizontale Ausdehnung angeht. Angaben in em sind eher für innere Breite und/oder Höhe geeignet.
 
Nun, ich habe nun tatsächlich mal den oberen Abstand in px umgewandelt und siehe da:
selbes Problem. :(

Habe einen Screen angehängt.
 

Anhänge

  • bla.jpg
    bla.jpg
    27,1 KB · Aufrufe: 69
Warum stellst du nicht einfach das komplette CSS-Modell auf die Einheit Pixel um, also für die CSS-Eigenschaften width,margin und padding?


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#inhalt {
    float: left;
    width: 390px;
    margin: 0;
    padding: 10px;
    border: 1px solid black;
  }

div#bilder {
    margin: 0 195px 0 425px;
    padding: 10px;
    border: 1px solid black;
  }

div#info {
    float: right;
    width: 160px;
    margin: 0;
    padding: 10px;
    background-color: #eee;
    border: 1px solid black;
  }
-->
</style>

</head>
<body>

<div id="inhalt">
  Hier ein wenig Inhalt
</div>
<div id="info">
  Hier ein wenig Infos
</div>
<div id="bilder">
  Hier ein paar Bilder
</div>

</body>
</html>
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Weil ich
a) der Meinung bin, dass es auch mit relativen Angaben gehen muss
und
b) finde ich relative Angeben praktischer (Fenstergrösse, Auflösung ect)

[editpost]
und
c) weil es auch dann nicht geht :confused:

Aber vielleicht kannst Du mich ja vom Gegenteil überzeugen und mir pro's für das Verwenden von fixen Grössen geben.
 
Zuletzt bearbeitet:
Okay, ich habe etwas festgestellt.
Über den 3 <div> habe ich noch ein <p>Navigation</p>.
Wenn ich das weglasse, dann stimmt wieder alles.
Warum beeinflusst aber das <p> das <div>?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück