div = kompliziert?! @ tutorials.de: Tutorials, Forum & Hilfe

Eiszwerg · 02.11.05 20:28

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-Code:

<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;
  }

Eiszwerg · 02.11.05 20:36

Hab scheinbar den Fehler beim Attribut margin gemacht. Eine Antwort auf die Fragen wäre mir trotzdem lieb.
Danke!

Maik · 02.11.05 21:21

Zitat von Eiszwerg

Hab scheinbar den Fehler beim Attribut margin gemacht.

margin ist in dem Stylesheet style.css kein Attribut, sondern eine CSS-Eigenschaft.

Wenn du das Problem gelöst hast, dann markiere das Thema bitte auch als 'erledigt'.

Vielen Dank

Gumbo · 02.11.05 21:30

margin ist in dem Stylesheet style.css kein Attribut, sondern eine CSS-Eigenschaft.

Auch wenn ein Attribut nichts anderes als eine Eigenschaft oder ein Merkmal ist, ist das Wort „Eigenschaft“ im Zusammenhang mit CSS doch besser gewählt.

Eiszwerg · 02.11.05 22:45

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!

Inspector · 03.11.05 07:51

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.

Eiszwerg · 03.11.05 18:52

Nun, ich habe nun tatsächlich mal den oberen Abstand in px umgewandelt und siehe da:
selbes Problem.

Habe einen Screen angehängt.

Maik · 03.11.05 20:16

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-Code:

<!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

Eiszwerg · 03.11.05 20:57

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

Aber vielleicht kannst Du mich ja vom Gegenteil überzeugen und mir pro's für das Verwenden von fixen Grössen geben.

Eiszwerg · 03.11.05 21:16

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>?

Maik · 03.11.05 21:32

In meinem zuletzt demonstrierten CSS-Modell kann ich auch ein p-Element problemlos vor den DIVs einfügen

***hela*** · 03.11.05 21:37

... Warum beeinflusst aber das <p> das <div>?

Warum, warum ... warum zeigst du nicht etwas mehr als die beiden Codeschnipsel, damit man dir u.U. eine vernünftige Antwort geben anstatt nur Vermutungen anstellen kann.

Eiszwerg · 03.11.05 23:28

Weil ich wohl kaum den Code nochmal posten muss, wenn man sich aus meiner Beschreibung denken kann, dass es so:

HTML-Code:

<p>
 Here some Text
</p>
<div id="inhalt">
...
..
.

aussieht.

Mittlerweile liegt'S aber wohl daran, dass ich einfach zwischen </p> und <div> ein <br /> vergessen habe...

Trotzdem danke...

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

SELECT Abfrage - kompliziert?

Logintracker - kompliziert und anders

LAN ganz schön kompliziert !

Logodesign... bissel kompliziert !

Navigation mit Variabeln (kompliziert)

E-Mail:

Abonnieren Abbestellen