Notifikationer

Markér alle som læst Log ud

tanzaweb Nybegynder

20. juli 2005 - 01:15 Der er 8 kommentarer og
1 løsning

Positionering af body image, og elementer

Hej

Jeg prøver at får mit body element centret så det altid er i midten af siden, et 1px image(1) som fylder hele skærmen ud, og et andet image(2) som er centreret herover.

Herefter skal jeg bruge nogle elementer som er placeres inden i det andet centrale image(2).

Hvordan gør jeg det jeg har prøvet på flere måder uden held.

jeg har kun kunnet lave noget med absolut positionering hvor elementerne er sat med px ud fra siderne på browseren.

Synes godt om

foxmulder58 Praktikant

20. juli 2005 - 01:50 #1

Hvis du vil have et baggrundsbillede kan du gøre det v.h.a et CSS således:

body {background:url(ditBillede.jpg);}

Du kan selvfølgelig også bruge .gif eller .png filer

For at centrere alt midt på siden skal du gøre følgende:

Give dit element som skal centreres midt på siden klassen "bodywrap" eller hvad du nu vil kalde klassen. Bemærk at i eksemplet (brugt på <div> tag er elementet her 710 pixel bred, men dette kan rettes til).

.bodywrap {
position: relative;
width: 710px;
left: auto;
top: 0px;
right: auto;
bottom: 0px;
margin: 0px auto;

}

håber du kan bruge dette!

mvh
Mads

Synes godt om

tanzaweb Nybegynder

20. juli 2005 - 03:50 #2

jeg har prøvet flere forskellige ting, og jeg har blandt andet et body tag der ser således ud: <body background="images/backgroundSquareImage.jpg">

Men jeg har så et andet image i stylesheetet som skal centreres på siden som ser således ud:
background-image:url(/images/udkast3.jpg);
background-position:center;
background-repeat:no-repeat;

jeg har også prøvet at bruge et forslag der var kommet men det virkede ikke umiddelbart.

Synes godt om

tanzaweb Nybegynder

20. juli 2005 - 04:08 #3

dette virker sådan set ok:

.bodywrap {
position: relative;
width: 750px;
left:auto;
right: auto;
top:110;
bottom: 0px;
margin: 0px auto;
}
der er bare det at jeg også gern eville kunne centrere det vertikalt hvis det er muligt med center eller middle.

Er det i det hele taget muligt?

Synes godt om

foxmulder58 Praktikant

20. juli 2005 - 11:17 #4

For at centrere dette vertikalt skal du rette i :

top:110;

Prøv at sætte den højere op i pixels, så rykker indholdet jo længere ned fra toppen.

Et eksempel:

.bodywrap {
position: relative;
width: 750px;
left:auto;
right: auto;
top:150;
bottom: 0px;
margin: 0px auto;

Så er du rykket 150 pixel ned fra toppen!

mvh
mads

}

Synes godt om

roenving Novice

20. juli 2005 - 11:26 #5

Måske er det denne, du har brug for: http://www.wpdfd.com/editorial/thebox/deadcentre4.html !-)

Synes godt om

tanzaweb Nybegynder

20. juli 2005 - 12:18 #6

hejsa igen det fra roenving virkede helt fedt.

Men er der nogen med et forslag til mere end 1 baggrunds image?
Jeg har prøvet at placere et image i en box men det forsvinder for mig selv om jeg prøver at sætte z-index til 1 som eks.

hvis jeg sætter den som her:
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
color:#FF0000;
background-image:url(/images/udkast3.jpg);
background-position:center;
background-repeat:no-repeat;
}

.box{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}

.bodywrap {
margin-left: -375px;
position: absolute;
top: -215px;
left: 0%;
width: 750px;
height: 430px;
visibility:visible;
}
Så virker det fint, men jeg har en lille firkant jeg egentlig gerne vil have som baggrund reapeat, men så kan jeg ikke sætte det andet som background-image selv i en anden celle.
har bla. prøvet dette:

.box{
background-image:url(http://www.rejseborsen.dk/images/udkast3.jpg);
background-position:center;
background-repeat:no-repeat;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
i box ovenover istedet som backgroud på bodyen Men det virker ikke da billedet bare forsvinder måske bag teksten

Synes godt om

tanzaweb Nybegynder

15. februar 2006 - 01:13 #7

Roenving forslag virkeded perfekt send svar for points

Synes godt om

roenving Novice

15. februar 2006 - 01:15 #8

Oki '-)

Synes godt om

roenving Novice

15. februar 2006 - 13:14 #9

-- og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS