Frage zu absoluter/relativer Adressierung

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FreddyS

Neues Mitglied
31 Juli 2009
293
0
0
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)
 
Werbung:

Asipak4You

Mitglied
19 Juli 2005
577
8
18
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
Code:
<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:

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

Aktives Mitglied
29 August 2008
3.280
17
38
41
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.
 
Werbung:

FreddyS

Neues Mitglied
31 Juli 2009
293
0
0
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:
Code:
<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

Mitglied
19 Juli 2005
577
8
18
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_

Aktives Mitglied
29 August 2008
3.280
17
38
41
Ich wollte dich nicht vertreiben, nur klar stellen, dass ein div nicht das neue Wundertag ist und es noch andere Tags gibt.
 
Werbung:

FreddyS

Neues Mitglied
31 Juli 2009
293
0
0
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

Mitglied
19 Juli 2005
577
8
18
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

Neues Mitglied
31 Juli 2009
293
0
0
Es handelt sich um Abstammungen (von Pferden), die z. T. mehrere Jahrhunderte zurückgehen.

Also Pferd, Vater Pferd, Mutter Pferd usw....
 
Werbung:

_Thor_

Aktives Mitglied
29 August 2008
3.280
17
38
41
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

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

Mitglied
19 Juli 2005
577
8
18
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 :D
 

FreddyS

Neues Mitglied
31 Juli 2009
293
0
0
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.
 
Werbung:

FreddyS

Neues Mitglied
31 Juli 2009
293
0
0
Also padding left und padding top

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