Frage zu absoluter/relativer Adressierung

[FreddyS]

Ich habe ein (zentriertes) Formular mit 760 px Breite, in dem ich feldere absolut definiert habe.

Dies möchte ich jetzt ändern (in relative Adressierung), bin mir aber nicht sicher, wie sich dies auswirkt.

Wenn ich z.B. position absolut 111 px für ein Feld hatte, wie muss ich dies abändern, damit das Feld auch relativ an der gleichen Stelle positioniert ist.

Wie wirkt sich die relative Positionierung bei verschiedenen Bildschirm-Auflösungen aus (Ziel ist es, das Erscheinungsbild der form bei verschiedensten Auflösungen einheitlich zu gestalten)

 

[Asipak4You]

position:relative; bzw. position:absolute; solltest du zur Positionierung vermeiden. Einen Grund dafür hast du seblst kennengelernt. Wenn man die Positionierung ändern möchte, hat man eine Menge zu rechnen.

Mit

<div style="margin:0px auto; width:800px; border:1px solid #aaa;">Inhaltbox</div>

definierst du dir z.B. eine 800 Pixel breite Box mit grauem Rahmen, die rechts und links den gleichen Abstand zum Bildschirmrand hat, also zentriert ist. In dieser Box kannst du dann weitere Bereiche mit <div> - Tags definieren, in denen du z.B. eine Navigation und den Seiteninhalt packst:

<div style="margin:0px auto; width:800px; border:1px solid #aaa;">
  <div style="float:left; width:200px; border:1px solid #aaa;">
    Navigation
  </div>
  <div style="margin-left:200px; border:1px solid #aaa;">
    Inhalt
  </div>
</div>

Ungetestet!

 

[_Thor_]

Wobei natürlich eine Navigation in einem div unsinnig ist, da ein div ja nur zum gruppieren mehrerer Elemente vorgesehen ist und eine Liste ebenso formatiert werden kann, wie ein div.

Dieses Beispiel vermittelt mal wieder den Eindruck, dass alles als <div> ausgezeichnet werden sollte, was falsch ist. Ein div ist ein neutrales Element und da HMTL ja nur für die Semantik zuständig ist, ist es für die Auszeichnung von Inhalt völlig ungeeignet.

 

[FreddyS]

meine form sieht - in Auszügen - so aus:

html, body
{
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #bdb76b;
}

div.rahmen
{
width: 764px;
height: 975px;
margin: 0px auto;
/*border: 1px solid #000;*/
color: #808000;
background-color: #bdb76b;
/*background-color: #808000;*/
}

Danach folgen verschiedene divs, z. B.

div.inhalt
{
padding: 5px; 5px; 5px; 5px;
width: 452px;
height: 809px;
margin-right: 1px;
/*border: 1px solid color: #fffacd;; /* nur zur Anschauung*/
background-color: #fffacd;
float:left;
}

In dieser div "Inhalt " sind zig-Felder definiert, alle so:

<style type="text/css">
#text1 { position:absolute; top:295px; left:470px;            
  width:110px; height:17px; }

Was, z. B. folgende Darstellung ergibt:

Feld D
Feld B
Feld E
Feld A
Feld F
Feld C
Feld G

Wie kann ich dies ohne position absolute (und lt. asipak auch ohne position relative)
so darstellen, dass es bei verschiedenen Bildschirm-Auflösungen richtig dargestellt ist

 

[Asipak4You]

Wobei natürlich eine Navigation in einem div unsinnig ist, da ein div ja nur zum gruppieren mehrerer Elemente vorgesehen ist und eine Liste ebenso formatiert werden kann, wie ein div.

Dieses Beispiel vermittelt mal wieder den Eindruck, dass alles als <div> ausgezeichnet werden sollte, was falsch ist. Ein div ist ein neutrales Element und da HMTL ja nur für die Semantik zuständig ist, ist es für die Auszeichnung von Inhalt völlig ungeeignet.

Hmm, ja, das macht Sinn. Werd ich gleich ausprobieren und mich jetzt lieber raushalten. Aber wie gesagt, position:relative; sollte eigentlich nicht notwendig sein.

;)

Gruß

 

[_Thor_]

Ich wollte dich nicht vertreiben, nur klar stellen, dass ein div nicht das neue Wundertag ist und es noch andere Tags gibt.

 

[FreddyS]

sorry, die Einrückung/Positionierung ist nicht angekommen, habe die leerstellen jetzt durch x ersetzt:

xxxxxxxxxxxxxxxxxxxxxxxxxFeld D
xxxxxxxxxxxxxxxFeld B
xxxxxxxxxxxxxxxxxxxxxxxxxFeld E
Feld A
xxxxxxxxxxxxxxxxxxxxxxxxxFeld F
xxxxxxxxxxxxxxFeld C
xxxxxxxxxxxxxxxxxxxxxxxxxFeld G

 

[Asipak4You]

Ich wollte dich nicht vertreiben[...]

Hast du nicht ;) Du hast Recht und kennst dich besser aus.

Ich muss das jetzt erstmal für mich ausprobieren.

Wobei natürlich eine Navigation in einem div unsinnig ist, da ein div ja nur zum gruppieren mehrerer Elemente vorgesehen ist[...]

Wenn ich jetzt eine Grafik in der Navigation habe und eine Linkliste. Sollte ich deiner Meinung nach einen <div> - Container um beide Elemente <img> und <ul> legen oder das <img> in <li> einbetten und ist das überhaupt erlaubt/semantisch korrekt?

'Tschuldigung FreddyS, wenn ich deinen Thread ein wenig fülle. Ist die Sache mit der Positionierung denn etwas klarer geworden?

Gruß

// edit

sorry, die Einrückung/Positionierung ist nicht angekommen, habe die leerstellen jetzt durch x ersetzt:

Du könntest den <li> - Tags ein padding-left verpassen! Oder was stellen diese Felder dar?

 

[FreddyS]

Es handelt sich um Abstammungen (von Pferden), die z. T. mehrere Jahrhunderte zurückgehen.

Also Pferd, Vater Pferd, Mutter Pferd usw....

 

[_Thor_]

Wenn ich jetzt eine Grafik in der Navigation habe und eine Linkliste. Sollte ich deiner Meinung nach einen <div> - Container um beide Elemente <img> und <ul> legen oder das <img> in <li> einbetten und ist das überhaupt erlaubt/semantisch korrekt?

Eine Hintergrundgrafik kannst du der <ul> direkt geben, dafür muss da kein <div> drum, wenn jedes Listenelement eine Hintergrundgrafik haben soll, gibst du den <li> eine Hintergrundgrafik. Soll das Bild den Link darstellen, schreibst du es so

<ul>
  <li><a href=""><img src="" alt="" title="" /></a></li>
  <li><a href=""><img src="" alt="" title="" /></a></li>
  <li><a href=""><img src="" alt="" title="" /></a></li>
  <li><a href=""><img src="" alt="" title="" /></a></li>
</ul>

 

[Asipak4You]

Es handelt sich um Abstammungen (von Pferden), die z. T. mehrere Jahrhunderte zurückgehen.

Also Pferd, Vater Pferd, Mutter Pferd usw....

Ja, dann kannst du es doch mit padding-left machen. Je weiter das Element eingerückt sein soll, desto größer ist der Abstand zum linken Rand.

Eine Hintergrundgrafik kannst du der <ul> direkt geben, dafür muss da kein <div> drum, wenn jedes Listenelement eine Hintergrundgrafik haben soll, gibst du den <li> eine Hintergrundgrafik. Soll das Bild den Link darstellen, schreibst du es so

Hmm, ja klar, logisch. Ich denk zu kompliziert

 

[FreddyS]

Jetzt bin ich es noch einmal.

Die Mühe mit dem Rechnen habe ich mir schon gemacht, eigentlich ist das Programm fertig, aber:

Auf meinem Bildschirm (17 Zoll) passt alles wunderbar, aber was passiert bei anderer Bildschirm-Auflösung, verschient sich bei position absolut die Positionierung

Wahrscheinlich eine ziemlich dumme Frage, aber ich bin mir nicht sicher, wie sich das "position absolut" bei verschiedenen Bildschirmauflösungen auswirkt und will sichergehen, bevor ich das Ganze ins Netz stelle.

 

[FreddyS]

Also padding left und padding top

Dann müsste die Positionierung innerhalb der div doch immer gleich bleiben, egal welche Bildschirmauflösung