Notifikationer

Markér alle som læst Log ud

webboy123 Nybegynder

01. december 2003 - 15:20 Der er 7 kommentarer

<DIV> Position Absolute problem

Jeg er ved at designe en hjemmeside og er løbet ind i problemer med <DIV> tagget. Siden er bygget op i HTML helt standard med tabeller osv. Jeg har så placeret nogle <div> lag oven på tabellerne som spiller fint i 1024x768. Men når jeg ser siden i andre skærm opløsninger, flytter siden sig i forhold til lagene, sådan at lagene og resten af siden forflytter i forhold til hinanden.

Se her: http://www.pulpaction.dk/kontakt.asp

Som sagt, hvis du ser siden i 1024x768 virker det fint, men prøv at se siden i andre opløsninger eller resize dit browser vindue.

Jeg vil gerne have det sådan at lagene 'følger med' resten af siden når man resizer og ser den i andre skærmopløsninger end 1024 x 768.

Jeg har defineret lagene sådan her:

#divContent{position: absolute; width:439; height:454; overflow:auto; left:284; top: 122; z-index: 2}

#divBackground{position: absolute; width:439; height:454; overflow:none; left:283; top: 121; z-index: 1}

#divHeading{position: absolute; width:440; height:10; overflow:none; left:284; top: 129; z-index: 1}

Er der en klog hjerne der kan hjælpe?!?

Synes godt om

overchord Nybegynder

01. december 2003 - 15:31 #1

Saa skal du vel bruge procenter istedet for pixels. Altsaa width: 43% feks

Synes godt om

roenving Novice

01. december 2003 - 15:44 #2

jumpers getPos() er svaret !-)

-- det kræver bare, at du kan finde et element pr. div, som det har en fast afstand til ...

Princippet:

<script type="text/javascript">

function posDiv(){
var elms = ['divContent','tdContent','divBackground','tdBackground','divHeading','tdHeading'];
var zx,zy;
for(i=0;elms.length>i;i+=2){
elm = elms[i+1];
//jumper
for(zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
elms[i].style.top = (zy+10)+'px';//her er der lagt 10 til, det kan reguleres væsentligt
elms[i].style.left = (zx+10)+'px';
}
}
</script>

-- her har jeg taget udgangspunkt i, at der ligger en tabelcelle, som div'en skal ligge ovenpå (forskudt 10 pixel vandret og lodret fra øverste venstre hjørne !-)

Synes godt om

roenving Novice

01. december 2003 - 15:45 #3

--og så lige et body-tag:

<body onload="posDiv()" onresize="posDiv()">

Synes godt om

roenving Novice

01. december 2003 - 15:51 #4

-- hov, der var en fejl:

elm = document.getElementById(elms[i+1]);

-- og:

document.getElementById(elms[i]).style.top = (zy+10)+'px';//her er der lagt 10 til, det kan reguleres væsentligt
document.getElementById(elms[i]).style.left = (zx+10)+'px';

Synes godt om

webboy123 Nybegynder

01. december 2003 - 18:11 #5

Ja, men den kode tager kun hensyn til når man resizer sit browser vindue. Den kan jo fx. ikke placere de forskellige lag alt efter brugerens opløsning.

Og så sidder jeg med samme problem: Lagene er kun placeret korrekt på maskiner der har samme opløsning som mig selv (1024 x 786)

Er er jeg helt galt på den?

Synes godt om

roenving Novice

02. december 2003 - 00:35 #6

Den kode klarer alle de situationer du har nævnt, for den kører først efter at alle andre elementer er placeret, når siden loades ...

-- det kan være lidt problematisk, at elementerne kan ses et forkert sted fra start, men den kan også sagtens klares !-)

-- indtil nu har jeg bare givet dig det principielle, men alt lykkes i en gas-ovn !o]

Synes godt om

roenving Novice

02. december 2003 - 00:41 #7

-- hvis du lægger et link til hvordan koden så ud, kunne jeg jo lige greje den ...

-- men det hører selvfølgelig med, at den er NS6+ og IE5+ (hvilket skulle dække alle bare nogenlunde moderne browsere !-)

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