Centrera ett lager?

11 svar · 399 visningar · startad av Conartis 6 nov. 2003

ConartisMedlem sedan sep. 200319 inlägg

Frågan6 nov. 2003 10:24#1

Skulle behöva lite hjälp med att centrera en scrollbox, alltså så att den ligger i mitten hela tiden även om man resizar fönstret. Det ska alltså funka även i olika upplösningar på skärmen.

just nu så ser det ut så här och det funkar inte alls :(

#divUpControl{position:absolute; width:700; left:100; top:300; z-index:1; text-align: right}
#divDownControl{position:absolute; width:700; left:100; top:500; z-index:1; text-align: right}
#divContainer{position:absolute; width:320; height:200; overflow:hidden; top:310; left:450; clip:rect(0,320,320,0); visibility:hidden}
#divContent{position:absolute; top:0; left:0}

Har även lagt till det här, men hur får man dom att "aktiveras"?

function getCenterLeft(layerWidth)
{
return ((screen.width / 2) - layerWidth)
}
function getCenterTop(layerWidth)
{
return ((screen.height / 2) - layerWidth)
}

nitro2k01Medlem sedan aug. 20039 340 inlägg

6 nov. 2003 12:12#2

Nåt sånt här?

 
<style>
#divUpControl{position:absolute; width:100%; left:0px; top:0px; height: 10%; z-index:1; text-align: right} 
#divContainer{position:absolute; width:100%; height:80%; overflow:auto; top:10%; left:0px; } 
#divDownControl{position:absolute; width:100%; height: 10%; left:0px; top:90%; z-index:1; text-align: right} 

div	{border: 1px solid black;}
#outerContainer	{position: absolute; left: 10%; width: 80%; top: 20%; height: 60%;  }
</style>

<div id=outerContainer>

	<div id=divUpControl>
	divUpControl
	
	</div>
	
	<div id=divContainer>
	Denna div kan skrollas <br />
	Ta bort div	{border: 1px solid black;} från css-koden<br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. Text. Massa text. Textmassa. <br />
	
	</div>

	<div id=divDownControl>
	divDownControl
	
	</div>
</div>

ConartisMedlem sedan sep. 200319 inlägg

6 nov. 2003 12:42#3

Njaa, inte riktigt....den där boxen ändrar ju storlek när du ändrar fönsterstorleken och då blir det helt knas med innehållet i boxen.

function getCenterLeft(layerWidth)
{
return ((screen.width / 2) - layerWidth)
}
function getCenterTop(layerWidth)
{
return ((screen.height / 2) - layerWidth)
}

Det där ska ju funka men jag får inte igång det, nån annan som har nåt tips?

dectgapMedlem sedan sep. 20021 655 inlägg

6 nov. 2003 13:24#4

Om du bara vill att ett element ("scrollboxen") ska centreras på sidan behöver du inte blanda in JavaScript.

#centrerad { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; }

Ändra margin-left till halva bredden gånger -1, och motsvarande för margin-top.

ConartisMedlem sedan sep. 200319 inlägg

6 nov. 2003 13:37#5

Glömde nämna det x( Scrollboxen ska ligga på en bild som ligger i en <td>.....

nitro2k01Medlem sedan aug. 20039 340 inlägg

6 nov. 2003 16:17#6

Är tabellen dödsviktig, eller kan du tänka dig att man använder CSS för att centrera den?

ConartisMedlem sedan sep. 200319 inlägg

6 nov. 2003 16:27#7

tabellen måste vara kvar då grunden till sidan ligger i cellerna. Scrollboxen ska ligga ovanpå en bild i mitten och innehålla text, thumbs mm. Och jag vill inte använda mig av en iFrame.

CSS/javascript spelar ingen roll bara boxen ligger kvar i mitten i alla lägen och inte stör tabellen nånting.

PepeJeriaMedlem sedan feb. 2003774 inlägg

6 nov. 2003 16:51#8

Eh, så varför inte lägga en tabell i div:en? Eller är jag alldeles för nyvaken?

ConartisMedlem sedan sep. 200319 inlägg

6 nov. 2003 17:40#9

Nu hänger jag inte riktigt med, kan du förklara närmare?

PepeJeriaMedlem sedan feb. 2003774 inlägg

6 nov. 2003 17:43#10

Som sagt, jag har nog missuppfattat det här.. Men du behöver placera ut en tabell i mitten med scrollbar, eller hur?
Varför inte då använda sig av en div (som det rekommenderades ovan + overflow:auto;) och sen lägga tabellen i div:en?

ConartisMedlem sedan sep. 200319 inlägg

7 nov. 2003 08:46#11

Har en dhtml/css/java scroller som ska ligga ovanpå allt annat. Så sidan är uppbyggd av 3*3 tabell med bilder i sen så ska scrollboxen hamna mitt i alltihopa utan att förskjuta nåt annat.

nitro2k01Medlem sedan aug. 20039 340 inlägg

7 nov. 2003 11:01#12

Det blir nog svårt att lösa ditt problem utan att se din kod. Du kan lägga upp den någonstans, eller zippa och bifoga filen.

Ett alternativ för att centrera även bilden kan vara att lägga den som bakgrund i det undre lagret(divContainer vad jag förstår), och sätta background-attachment: fixed; så håller sig bilden där den är trots att du scrollar.

Men som sagt du behöver inte en javascript-scroll för att kunna scrolla ett lager. Det räcker att du lägger till overflow: auto; i css för lagret!

background-attachment: fixed; i kombination med overflow: auto; är nog den bästa lösningen för dig.(Så kan du smycka scrollbaren med explorer's special-attribut.)