Avatar billede cmau Nybegynder
19. oktober 2006 - 12:14 Der er 15 kommentarer og
2 løsninger

position:absolute; og centering arbejder vist ikke sammen

Hejsa

Jeg sidder her og prøver at få min div til at blive centeret, men har fundet ud af at grunden til at den ikke vil centreres er at jeg har sat: position:absolute;.

Findes der en måde hvorpå jeg kan fixe dette, så diven både er oven på anden tekst og er centret på siden?

MIn kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            <!--
            html, body {
                height:100%;
                overflow:hidden;
                margin:0px;
                padding:0px;
                text-align:center;
            }
            #bodyen {
                position:relative;
                width:100%;
                height:100%;
                overflow:auto;
                margin:0px;
                padding:0px;
                text-align:left;
            }
            #followit {
                width:750px;
                margin-left:auto;
                margin-right:auto;
                text-align:left;
                position:absolute;
                bottom:-5px;
                z-index:99;
                padding:0px;
                margin:0px;
            }
            // -->
        </style>

    </head>
   
    <body>

    <div id="followit">
        <img src="sponsor.jpg" border="0" alt="" title="Luk reklamen ved at trykke her!">
dasds
        <img onclick="document.getElementById('followit').style.display='none';" src="CLOSE.jpg" border="0" alt="" title="Luk reklamen ved at trykke her!">
    </div>
    <div id='bodyen'>
        Enim
isi ut nostrud nulla ea
        </div>
    </body>

</html>
Avatar billede jokkejensen Novice
19. oktober 2006 - 12:33 #1
nej du kan ikke positionere det centreret ud fra body, uden at kende bredden på browseren..

Altså skal du endten benytte javascript til at finde browserens bredde, trække bredden af dit element fra, og dele den i to, så har du "left" koordinatet du skal placere dit element ud fra..

Normalt ville man jo have en container, med en fast bredde til sit site, og udfra denne kan du absolut positionere dit element ex:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            <!--
            html, body {
                height:100%;
                overflow:hidden;
                margin:0px;
                padding:0px;
                text-align:center;
            }
        * {border: 1px solid red;}
        * * {border-color: blue;}
        #Container
        {
            width: 750px;
            margin: 0px auto;
            position:relative;
            bordeR:1px solid reD;
        }
            #bodyen {
                position:relative;
                width:100%;
                height:100%;
                overflow:auto;
                margin:0px;
                padding:0px;
                text-align:left;
        height: 100%;
            }
            #followit {
                width:750px;
                margin-left:auto;
                margin-right:auto;
                text-align:left;
                position:absolute;
                bottom:-5px;
                z-index:99;
                padding:0px;
                margin:0px;
            }
            // -->
        </style>

    </head>
   
    <body>
    <div id="Container">
            <div id="followit">
                <img src="sponsor.jpg" border="0" alt="" title="Luk reklamen ved at trykke her!">asds<img onclick="document.getElementById('followit').style.display='none';" src="CLOSE.jpg" border="0" alt="" title="Luk reklamen ved at trykke her!">
            </div>
            <div id='bodyen'>
                Enim isi ut nostrud nulla ea
            </div>
    </div>
    </body>

</html>
Avatar billede olebole Juniormester
19. oktober 2006 - 12:38 #2
<ole>

<div style="position:absolute;width:100%;left:0;top:20px;z-index:10;background:red">
    <div style="width:100px;margin:0 auto;background:yellow">blabla</div>
</div>

/mvh
</bole>
Avatar billede cmau Nybegynder
19. oktober 2006 - 12:47 #3
Yes, tak. Jeg fandt nu også selv http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/ men kunne ikke rigtig få det til at virke, så jeg blandede lidt er jeres sammen og nu virker det, men kan i svare mig på hvorfor der på:

www.woox.dk/i.htm
I Internet Explorer: ingen mellemrum mellem billeder og javascript reklamen?
I Firefox: mellemrum mellem begge billeder og javascript reklamen?
I Opera: ingen mellemrum ved første billede og javascript reklamen, men mellemrum ved det andet billedet og javascript reklamen?

Det skal gerne være i dem alle som det er i IE.
Avatar billede olebole Juniormester
19. oktober 2006 - 13:11 #4
Umiddelbart virker det, somom det er reklamen, der laver ged. Det kan du nok ikke gøre så meget ved  :o|
Avatar billede cmau Nybegynder
19. oktober 2006 - 13:20 #5
Ja, kan du vel have ret i:) Sætter bare en baggrund på diven, så synes jeg opgaven er løst okay :) www.woox.dk/i.htm

Smider i ikke begge et svar?
Avatar billede cmau Nybegynder
19. oktober 2006 - 13:40 #6
Nu har jeg smidt den på min hjemmeside www.woox.dk , men hvis du kigger, kan du se den laver fejl som vist her:

http://img214.imageshack.us/img214/4569/fejlerua9.jpg
Avatar billede olebole Juniormester
19. oktober 2006 - 13:41 #7
- s'gerne ... *griiiiiiiiiiiiiiiiiib*  ;o)
Avatar billede olebole Juniormester
19. oktober 2006 - 13:43 #8
Det er nok fordi, den ikke er 800px bred, som du sætter den til - mon ikke, det er 20-30px formeget?  :)
Avatar billede cmau Nybegynder
19. oktober 2006 - 13:52 #9
Jamen jeg vil gerne have den til at gå til den hvide kant, hvis det kan lade sig gøre.
Avatar billede olebole Juniormester
19. oktober 2006 - 13:54 #10
Ja, men når nu ikke reklamen er bredere, kan det jo godt blive svært  :)
Avatar billede cmau Nybegynder
19. oktober 2006 - 13:56 #11
Fandt også lige ud af at der var et par pixel centerings fejl i hele designet, argh såda noget ***
Avatar billede cmau Nybegynder
19. oktober 2006 - 13:56 #12
Regner med at jeg vil ahve et dropdownfejl ved siden af den.
Avatar billede cmau Nybegynder
19. oktober 2006 - 14:07 #13
Fandt centeringsfejlen i designet, nu mangler der blot et par pixel før reklamen er centeret´.-
Avatar billede cmau Nybegynder
19. oktober 2006 - 14:39 #14
Den skal vist have noget margin-left:-10px; men virker vist ikke.
Avatar billede olebole Juniormester
19. oktober 2006 - 14:53 #15
- pudsig fejl  :)
Avatar billede cmau Nybegynder
19. oktober 2006 - 20:39 #16
Ved du hvordan jeg få den helt centeret?
Avatar billede cmau Nybegynder
19. oktober 2006 - 21:01 #17
Hov jo det virker vist okay, men den er 1 pixel for langt til højre i firefox.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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