webForumDet fria alternativet

Den eviga frågan - 100% - hur??

21 svar · 1 130 visningar · startad av learn

learnMedlem sedan jan. 20051 130 inlägg
#1

Jag har sökt och sökt men inte hittat någon lösning på problemet!

Jag har en hemsida som är uppbyggd med en massa tabeller och divar. Nu vill jag lägga en div ovanpå hela sidan. Denna div skall alltså täcka sidan 100% i bredd och 100% i höjd.

Det är ju inte speciellt svårt att att få diven att täcka den delen av sidan som för tillfället syns på skärmen, men när man scrollar nedåt.....

Finns det någon vänlig själ där ute som kan hjälpa mig och ge ett konkret exempel på hur jag kan göra?

Tack!! :bire

cayaMedlem sedan aug. 20051 448 inlägg
#2

det är klurigt, men jag blir lite nyfiken på vad du tänkt göra med din 100%iga div

learnMedlem sedan jan. 20051 130 inlägg
#3

Det ska bli en bakgrund är det tänkt, och nej, jag kan i detta fall inte använda mig av body-taggen... :)

Går detta inte??

silfverMedlem sedan apr. 200312 679 inlägg
#4

Har du prövat position: absolute?

zcorpanMedlem sedan dec. 20042 245 inlägg
#5

Sätt en bakgrund på <html>.

FuelMedlem sedan okt. 20001 285 inlägg
#6

...

learnMedlem sedan jan. 20051 130 inlägg
#7

silfer: Ja, har du ngt förslag?

zcorpan: Funkar inte...

Fuel: Scrollproblemet kvarstår...

Någon annan?

The_HulkMedlem sedan juni 20031 837 inlägg
#8

Finns javascript som fixar det men då kommer den inte ligga helt still när man skrollar. Den kommer att hoppa medans man skrollar.

Har inte fått det att fugnera helt med CSS. Antingen är det FF eller IE som kan positionera den med X/Y-kordinater för den synliga ytan, den andre tar efter dokumentet.


<script>
/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */

// Insert the entire script just before the </body> tag.
// Set the following two position parameters
// Negative numbers are relative to right (hX) or bottom (vY)
// Positive numbers are relative to left (hX) or (vY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image & form in the positioning
</script>

<!-- Edit the HTML between the div tags to suit your design //-->

<div id="FloatMail" style="position: absolute;
                           background-color: #ffffff;
                           width: 654px;
                           height: 36px;
                           overflow-y: hidden;
                           ">Innehåll</div>
<!-- End of editable HTML //-->
<script>

/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */
/* Caution! Do not allow linebreaks other than where shown */
var moveSpeed=.9999999;/*moveSpeed from 0.0 to 1.0. 1 means move direct. lower number means slower move speed*/
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
var hX = 180;
var vY = -36;

function floatMail(iX,iY,id)
{
    var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];		
    this[id+'O']=L;
    
    if(dD.layers)
    {
        L.style=L;
    }
    
    L.nX=L.iX=iX;
    L.nY=L.iY=iY;
    
    L.P=function(x,y)
    {
        this.style.left=x+px;this.style.top=y+px;
    };
    
    L.Fm=function()
    {
        var pX, pY;	
        pX = (this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;	
        pY = nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;	
        
        if(this.iY<0)
        {
            pY += nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;	
        }
        
        this.nX += moveSpeed*(pX+this.iX-this.nX);
        this.nY += moveSpeed*(pY+this.iY-this.nY);
        this.P(this.nX,this.nY);
        setTimeout(this.id+'O.Fm()',33);
    };
    
    return L;
}
floatMail(hX,vY,'FloatMail').Fm();

</script>
FuelMedlem sedan okt. 20001 285 inlägg
#9

...

jarvkloMedlem sedan juli 20013 378 inlägg
#10

learn skrev:

Jag har en hemsida som är uppbyggd med en massa tabeller och divar. Nu vill jag lägga en div ovanpå hela sidan. Denna div skall alltså täcka sidan 100% i bredd och 100% i höjd.

Hmm...

Har du en länk till sidan och lite fler detaljer?
Om det du vill åstadkomma är en bakgrund som täcker allt utrymme "under" en befintlig sida kan det finnas fler än ett sätt att angripa problemet (och några av de bästa metoderna utifrån det du skrivit är redan föreslagna i tråden)
Det skulle helt klart bli lättare att föreslå en lösning på ditt problem om man inte behöver gissa sig till varför vissa metoder inte funkar för dig ;)

learnMedlem sedan jan. 20051 130 inlägg
#11

Hmm, jag har inte så mkt att visa mer än de förslag som kommit upp här i tråden. Sidan är inte byggd ännu... Jag vill veta om detta går att åstadkomma först.

Helt enkelt, jag vill ha en div som lägger sig över allt på sidan. Även det innehåll som kommer "under scrollen".

Hur? :)

jarvkloMedlem sedan juli 20013 378 inlägg
#12

Hmm..

Jag får bara inte ihop att du vill ha en "div som lägger sig över" och att du samtidigt skall ha den till en bakgrund - men jag kanske missuppfattade just den kommentaren ? :)

zcorpanMedlem sedan dec. 20042 245 inlägg
#13
body { margin:0; position:relative; /* body blir containing block (istället för att fönstret är containing block) */ }
#divsomliggeroverallt { position:absolute; top:0; left:0; width:100%; height:100%; background-color:lime; }
learnMedlem sedan jan. 20051 130 inlägg
#14

zcorpan skrev:

body { margin:0; position:relative; /* body blir containing block (istället för att fönstret är containing block) */ }
#divsomliggeroverallt { position:absolute; top:0; left:0; width:100%; height:100%; background-color:lime; }

Titta, det tycks funka!

Tack zcorpan.

Kan jag "lita" på detta nu då? Jag har testat i FF, IE och Opera och i dessa webbläsare ser det fint ut.

jarvklo: Det är en bakgrund utan någon förgrund om man så säger. Bakgrund kanske är fel ord då... ;)

silfverMedlem sedan apr. 200312 679 inlägg
#15

learn: Kan man få se resultatet? :)

learnMedlem sedan jan. 20051 130 inlägg
#16

silfver skrev:

learn: Kan man få se resultatet? :)

Inte mkt att se, ännu. Du kan lika gärna kopiera zcorpans kod och klistra in i ett eget dokument... :)

learnMedlem sedan jan. 20051 130 inlägg
#17

Hmm, skumt... Funkar inte i IE...

MobergMedlem sedan sep. 200614 inlägg
#18

Varför inte bara lägg en div i botten (direkt efer body taggen) som du har en bakgrund i?
Eller det kanske inte heller fungerar? Z-index?

cayaMedlem sedan aug. 20051 448 inlägg
#19

jag hoppas verkligen inte att du tänkte lägga den diven efter </body>

The_HulkMedlem sedan juni 20031 837 inlägg
#20

om det är en bakgrund du ska ha, varför inte lägga den som en bakgrund till body-taggen?

135 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)