|
|
Linje 49: |
Linje 49: |
| ===Centrering af div med position:absolute=== | | ===Centrering af div med position:absolute=== |
|
| |
|
| Når man laver lagkage på den her måde sker det at man gerne vil kunne centrere sin div. Man kan ikke bruge align=center i den div som indeholder den centrerede div. Derfor kan man bruge det her lille trick (Vi bruger her havfruen): | | Når man laver lagkage på den her måde sker det at man gerne vil kunne centrere sin div. |
| | |
| | Man kan ikke bruge align=center i den div som indeholder den centrerede div. |
| | |
| | Man kan heller ikke bruge "margin-right:auto;margin-left:auto" fordi man med position jo opgiver en foruddefineret position. |
| | |
| | Derfor kan man bruge det her lille trick (Vi bruger her havfruen): |
|
| |
|
| <pre> | | <pre> |
Linje 65: |
Linje 71: |
| giver | | giver |
|
| |
|
| <div style="position:relative;z-index:0;height:500px"> | | <div style="position:relative;z-index:0;height:500px;left:50%;margin-left:-130px;"> |
| <div style="position:absolute;top:0px;left:50%;margin-left:-130px;z-index:1">[[Billede:Den_lilla_havfrue.jpg|300px]] | | <div style="position:absolute;top:0px;margin-right:auto;margin-left:auto;z-index:1">[[Billede:Den_lilla_havfrue.jpg|300px]] |
| <div style="position:absolute;top:0px;left:0px;width:200px;"> | | <div style="position:absolute;top:0px;left:0px;width:200px;"> |
| Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger | | Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger |
Nuværende version fra 7. okt. 2012, 13:33
Billeder som baggrund
Lad os starte med begyndelsen:
- MediaWiki accepterer ikke ikke propertien background-image i style-taggen.
En ganske almindeligt brugt property har man ekskluderet...og det er jo tit man har lyst til at skrive på billederne...!?
Hvorfor er det vigtigt?!Fordi man kan bruge det som baggrund. Nå men selvfølgelig kan man snyde ved at bruge div-på-div-metoden.
Div-på-div-metoden
Her er mit billede:
|
Her er min tekst
|
|
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger forskellige hudpræparater altid har en meget tør hud.
|
Koden ser så sådan ud:
<div style="position:relative">[[Billede:Den_lilla_havfrue.jpg|300px]]
<div style="position:absolute;top:0px;left:0px;width:200px;">
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger
forskellige hudpræparater altid har en meget tør hud.
</div>
</div>
- Position:relative
- ...postionerer din div der hvor du var kommet til i teksten
- Position:absolute;top:0px;left:0px;
- ...positionerer din div der hvor du ønsker den skal være på hele siden eller inden i den anden div.
Pas på med den sidste - hvis den ikke er inden i en position-relativ-div, kommer teksten til at stå oppe i overskriften på siden.
og vupti....
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger
forskellige hudpræparater altid har en meget tør hud.
Du kan nu prøve at ændre på placering af top og left
Centrering af div med position:absolute
Når man laver lagkage på den her måde sker det at man gerne vil kunne centrere sin div.
Man kan ikke bruge align=center i den div som indeholder den centrerede div.
Man kan heller ikke bruge "margin-right:auto;margin-left:auto" fordi man med position jo opgiver en foruddefineret position.
Derfor kan man bruge det her lille trick (Vi bruger her havfruen):
<div style="position:relative;height:500px;">
<div style="position:absolute;top:0px;left:50%;margin-left:-130px;">
[[Billede:Den_lilla_havfrue.jpg|300px]]
<div style="position:absolute;top:0px;left:0px;width:200px:">
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger
forskellige hudpræparater altid har en meget tør hud.
</div>
</div>
</div>
giver
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger
forskellige hudpræparater altid har en meget tør hud.
Vi indfører en ekstra div med position:absolute, sætter left til 50% og justerer med en negativ margin-left-værdi.
Bidragsydere:
Cookies help us deliver our services. By using our services, you agree to our use of cookies.