Positionierung von Elementen

[halifax123]

Guten Tag,

ich bin schon seit längerem dabei eine Website für einen Freundeskreis zu erstellen. Ich habe jedoch einige Probleme bei der Positionierung von Elementen. Ich verwende zum Positionieren externe Stylesheets und habe auch schon einiges an erfahrung damit. Ich positioniere Elemente mit der Eigenschaft

--> position : absolute/relative und den Eigenschaften top, bottom, left und right

Ich will, dass die Elemente sich zwar an die Auflösung des entsprechenden Computers anpassen aber fest positioniert sind. Mich stört die Vererbung von Größen bei den Eltern-/ und Kindelementen. Aufgrund deren Einfluss muss ich häufig negative Größeneinheiten benutzen (em, px ...etc).

Ich suche nach einer Möglichkeit, Elemente so zu positionieren, dass alles bündig erscheint und möglichst kompatibel zu anderen Auflösungen erscheint.

Welche Eigenschaften von CSS sollte ich nutzen, von welchen sollte ich die Finger lassen ?

mfg halifax123

 

[Gilles]

Also ich würde dir raten ganz von den absoluten Größen weg zu gehen. Es gibt Margin und padding. Die sind super für alle Seiten :) Der einzige Grund wieso man absolute einsetzen sollte ist javascript ;)
Würde auch auf jeden Fall mit em arbeiten. Und am besten nie px und em vermischen Das erschwert nämlich die Rechnerei :)
Du kannst eigentlich alles genau so gut ohne absolute umsetzen. Dann musst du auch keine negativen Werte benutzen. :)
hast du dir auch schon mal das Boxmodell angeguckt?
CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell
Kannst ja vielleicht mal einen Link zur Seite oder den Quelltext posten.

 

[halifax123]

#nav {
margin-top : 0.5em; /* Abstand um Header-Bild */
float : left; /* Umfluss Links */
margin-left : -2.5em; /* Abstand zum Linken Rand [Negativ */
}
#nav ul {
white-space : nowrap;
}
#nav li {
display : inline; /*Darstellungsform Inline [entfernten des Abstandes zum Rand] */
list-style-type : none; /* Ausblenden der Listpunkte */
}
#nav a {
text-decoration : none; /* Ausblenden der Link-Unterstreichung */
text-align : center; /* Zentrieren des Link-Textes */
font-family : Arial;
font-size : 90%;
white-space : nowrap;
background-color: #E2E2E2; /* Festlegen des Link-Hintergrundes */
Color : #000000; /* Festlegen der Schriftfarbe des Links */
width : 12em; /* Breite des Links */
height : 1.5em; /* Höhe des Links */
float : left;
border-right : 1px solid #C0C0C0; /* Rechter Rand einfügen */
}
#nav a:hover {
background-color: #727177; /* Hintergrundfarbe des Hover-Effekts */
}
#nav li a#current {
text-decoration : underline; /* Aktuelles ITEM Unterstrichen */
}
/* CONTENT ID = CONT */
#cont {
clear : left; /* Beenden des Textumflusses verursacht durch "float : left" */
margin-top : 4em; /* Abstand zur Navigation */
width : 56%; /* Breite des Inhalts */
height : 20em; /* Höhe des Inhalts */
background-color : #FFFCB9; /* Hintergrundfarbe des Inhalts */
}
/* INFORMATION ID = INFO */
#info {
float : right;
width :25%;
height: 20em;
margin-top: -20em;
background-color:#C0C0C0;
}
/* NAVIGATION RECHTS ID = NAV_RIGHT */
#nav_right {
clear : right;
float : right;
margin-top : -23.5em;
width : 25%;
height: 1.35em;
background-color:#8080FF;
}
body { margin : 0.5em; }

Danke für die Antwort :)
So sieht mein Stylesheet momentan aus... Wie man erkennen kann hab ich mich teilweise mit meinem Auge orientiert ( Kommazahlen der Größeneinheiten :)), nur das halte ich für ziemlich unprofessionell.

Die negativen Größeneinheiten hängen denke ich mal an der Vererbung !? Vermutlich orientiert sich das Element an einem anderen...

mfg halifax123

 

[Efchen]

Ich will, dass die Elemente sich zwar an die Auflösung des entsprechenden Computers anpassen

Da kannst Du wollen, soviel Du willst, das wird nie geschehen.
Die Auflösung des Bildschirms ist für Webseiten irrelevant.
Das merkst Du auch daran, dass CSS diese Größe nicht kennt.

Mich stört die Vererbung von Größen bei den Eltern-/ und Kindelementen.

Das ändert aber nicht daran, dass es nunmal so definiert ist ;-)

Aufgrund deren Einfluss muss ich häufig negative Größeneinheiten benutzen (em, px ...etc).

Womöglich machst Du irgendwas falsch!? Negative Größen muss man eigentlich gar nicht benutzen.

 

[halifax123]

Ich werde mal einen neuen versuch starten, das Layout zu gestalten mit den erhaltenen Infos. Was hat es eigentlich mit der größe em auf sich? Sollte man vollständig auf pixelangaben verzichten?
mfg halifax123

 

[Efchen]

Pixelgenaue Angaben passen halt nicht zu einem Medium, in dem jeder andere Einstellungen hat.
Die Einheit "em" bezieht sich auf die aktuelle Schriftgröße. Dein Fließtext sollte z.B. immer in der Größe "1em" sein, das ist das Optimum für jeden Benutzer, der kann das ja in den Browsereinstellungen einstellen. Damit kann man die Größe jedes Elements bestimmen, nicht nur von Schrift. Die wachsen dann halt bei Schriftvergrößerung mit.