www.mediencommunity.de 
Besuchen Sie auch
Damit ist entweder die allgemeine Positionierung von Elementen mit CSS gemeint oder die Hintergrundbildpositionierungen mit CSS.
Positionierung von Elementen mit CSS
de.selfhtml.org/css/eigenschaften/positionierung.htm
Hier einige kurze Beispiele dafür:
1. Beweglich (Thumbnails, etc.)
img#Galeriebild{
float:left;
display:inline;
margin:11px;
border:0px;
}
2. Fest ( z.B. Buttons über irgendwas drüber )
img#Logo{
position:absolute;
left:33px;
top:55px;
border:0px;
}
3) Fest, nicht wegscrollen ( erst ab IE7 )
img#Logo{
position:fixed;
left:33px;
top:55px;
border:0px;
}
Wenn man was absolut positionieren will, dann muss die Box drumherum ebenfalls absolut oder - falls diese beweglich sein soll - relativ positionieren.
Beispiel: Man will etwas irgendwo über den Seiteninhalt positionieren, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebt es am body fest. Wenn man aber den Seiten-div der mit "margin: 0px auto;" zentriert ist relativ setzt, dann orientiert sich das Element an der Seite.
Was im Code weiter unten steht, wird immer obendrübergeschoben (NICHT über Flash!!!)
Hintergrundbildpositionierungen mit CSS
de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image
Beispiel:
body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px; //(10 von links, 30 von oben)
}
Status:
Von Moderator geprüft
- Druckversion
- Anmelden oder Registrieren um Kommentare zu schreiben
-
Kommentare
naja das ganze auf self html
naja das ganze auf self html ist sehr komplex. ich werde die tage etwas ausarbeiten was auch "jeder" verstehen kann!
lg
dennis / saarbrücken
Darauf bin ich schon gespannt
Darauf bin ich schon gespannt und bedanke mich schon im vorraus. Self HTML ist wirklich sehr komplex. Oo
hi dennis, dann mach mal ich
hi dennis,
dann mach mal ich hab´s nicht so leicht mit online terminformularen :D
vg daniel
ja am wochenend habe ich zeit
ja am wochenend habe ich zeit !
hallöchen, ist da schon was
hallöchen, ist da schon was draußen von dem netten helfer?
LG
Knapp und ohne Bullshit
1. Beweglich (Thumbnails, etc.)
img#Galeriebild{
float:left;
display:inline;
margin:11px;
border:0px;
}
2. Fest ( z.B. Buttons über irgendwas drüber )
img#Logo{
position:absolute;
left:33px;
top:55px;
border:0px;
}
3) Fest, nicht wegscrollen ( erst ab IE7 )
img#Logo{
position:fixed;
left:33px;
top:55px;
border:0px;
}
Wenn man was absolut positionieren will, dann muss die Box drumherum ebenfalls absolut oder - falls diese beweglich sein soll - relativ positionieren.
Beispiel: Man will etwas irgendwo über den Seiteninhalt klatschen, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebts am body fest. Wenn man aber den Seiten-div der mit "margin: 0px auto;" zentriert ist relativ setzt, dann orientiert sich das Element an der Seite.
Was im Code weiter unten steht, wird immer obendrübergeschoben (NICHT über Flash!!!)
Bezüglich Hintergrundgrafiken
body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px; //(10 von links, 30 von oben)
}
Auch Negativwerte funktionieren
Wenn man z.B. eine kleien Lupe über ein Galeriethumbnail legen will, dann kann man sie darunter floaten lassen und dann mit einer negativen margin drüberschieben.
img#Lupe{
float:left;
display:inline;
margin-top:-16px;
border:0px;
}