CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jvesterj Nybegynder

20. juni 2005 - 12:17 Der er 8 kommentarer

Divs med kombination af faste og relative størrelser

Hej

Jeg har lavet et layout, som styres af flg. opbygning:

<div ID="dTotalPage" runat=server>
<div ID="dTopBar" runat=server>
</div>
<div ID="dLeftBar" runat=server>
</div>
<div ID="dContent" runat=server>
</div>
</div>

Positioneringen styres selvfølgelig af et stylesheet.
Størrelser og positioner er angivet i %, fordi skærmbilledet altid skal være fyldt ud.
Problem: der skal være en logo placering i øverste venstre hjørne. Logoet har en fast størrelse. Leftbar skal flugte i bredden med logoet, dvs. have same bredde. Samtidig skal resten stadig "strækkes", så det både i bredden og højden altid fylder ud.
Jeg har prøvet at løse problemet ved at lade alle divs starte i top=0px og left= 0px og derefter bruge padding, margener og z-index til at vise dem korrekt. Problemet er, at det ikke fungerer i alle browsere. F.eks. vises det korrekt i IE, mens Netscape "skubber" dContent, så der kommer scrollbars, og div'et komker til at rage ud over over både dLeftBar og dTopBar.
Hvis jeg havde valgt en gammeldags opbygning med tabelstyring, kunne jeg have brugt fast bredde i nogle <td>'er og * i resten.
Skal jeg virkelig ud i clientside javascript for at styre det korrekt? Dvs. på onload og resize regne ud, hvad der skal på i de relative størrelser?

Synes godt om

jvesterj Nybegynder

20. juni 2005 - 12:38 #1

Glemte lige, at jeg har <div id="dLogo" runat="server"></div> inde i dTopBar
til at styre placring af logo.

Synes godt om

roenving Novice

20. juni 2005 - 15:04 #2

Tjah, det ville have været rasende nemt at løse dit problem med to tabel-celler, som jo er beregnet til den slags !-)

-- men ellers må man over i at skygge det eller simpelthen sætte leftmenuen ind i content-diven !o]

F.eks.

<!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%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Skyggede divs eksempel</title>
</head>
<body>

<div id="dTotalPage" style="width:100%;height:100%;position:relative;">
<div id="dContentContainer" style="width:100%;height:100%;position:relative;background-color:#777;">
<div id="dTopBar" style="width:100%;height:120px;z-index:10;position:absolute;background-color:#707;">
<img src="logo.gif" style="width:120px;height:120px;">
Resten af indholdet i topbaren</div>
<div id="dLeftBar" style="width:120px;height:100%;z-index:8;position:absolute;background-color:#077;">
<div id="dTopSkygge" style="width:120px;height:120px;z-index:6;position:relative;"> </div>
Resten af indholdet i leftbaren</div>
<div id="dContent" style="padding:120px 0 0 120px;background-color:#770;">
Indhold i content-diven</div>
</div>
</div>

</body>
</html>

-- og så sætter du bare baggrund på content-containeren og content til at være ens, så man ikke kan se forskellen !-)

Synes godt om

olebole Juniormester

20. juni 2005 - 15:38 #3

<ole>

- men som roenving også anfører, ville en tabel-baseret løsning resultere i bedre og slankere kode ;o)

/mvh
</bole>

Synes godt om

jvesterj Nybegynder

23. juni 2005 - 09:48 #4

Tak for jeres indspark.
Jeg valgte at lave noget javascript (getWindowHeight fandt jeg på nettet), som klarede problemet, og som er ret nem at genbruge. Her er det (logoet er 58 x 171):
<script language="javascript">
function getWindowHeight() {
var windowHeight=0;
if (typeof(window.innerHeight)=='number') {
windowHeight=window.innerHeight;
}
else {
if (document.documentElement&&
document.documentElement.clientHeight)
{
windowHeight= document.documentElement.clientHeight;
}
else {
if (document.body&&document.body.clientHeight) {
windowHeight=document.body.clientHeight;
}
}
}

return windowHeight;
}

function getWindowWidth() {
var windowWidth=0;
if (typeof(window.innerWidth)=='number') {
windowWidth=window.innerWidth;
}
else {
if (document.documentElement&&
document.documentElement.clientWidth)
{
windowWidth= document.documentElement.clientWidth;
}
else {
if (document.body&&document.body.clientWidth) {
windowWidth=document.body.clientWidth;
}
}
}

return windowWidth;
}

function setElementSizes(){
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
//alert('height: ' + windowHeight + '; width: ' + windowWidth);

var dTopBar = document.getElementById('dTopBar');
var dLeftBar = document.getElementById('dLeftBar');
var dContent = document.getElementById('dContent');

//var twidth = dTopBar.offsetWidtht;
//var cheight = dContent.offsetHeight;

dTopBar.style.width = windowWidth;
dContent.style.width = windowWidth - 171;
dContent.style.height = windowHeight - 58;
dLeftBar.style.height = windowHeight - 58;

}
</script>
</HEAD>
<body onload="java script:setElementSizes();" onresize="java script:setElementSizes();">

Synes godt om

olebole Juniormester

23. juni 2005 - 11:56 #5

- en langt dårligere løsning end en tabel. Det er lidt pudsigt, at man prøver at undgå et fortrinligt element (der anbefales af W3C til netop denne type opgaver) - og vælger at basere sit design på script i stedet. Det er komplet misforstået :)

Desuden er scriptet tusse-gammelt og langt fra gældende standarder - og god kode.

Synes godt om

jvesterj Nybegynder

23. juni 2005 - 14:03 #6

Tja, men det virker, og jeg har ikke tid til at sidde og nørkle med at ændre hele layoutet for adskillige sider nu. Der er desuden forskellige meninger om tabel contra div-løsninger. Tabelløsninger anbefales til regulære tabelkonstruktioner i flowet på en side, men frarådes af de fleste til at styre en hel side med.

Synes godt om

roenving Novice

23. juni 2005 - 14:08 #7

-- af de fleste, som ikke i virkeligheden ved noget om html og standarder !-)

Synes godt om

jvesterj Nybegynder

23. juni 2005 - 14:15 #8

det er muligt. det er mit indtryk, at de diskussioner af og til nærmer sig det religiøse, så det kan være lidt svært at afgøre, hvad der er god skik og hvad der ikke er.

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

Enalyzer A/S

Enalyzer is seeking a visionary Full-Stack Developer

FlexDanmark

Projektleder til nøglerolle i et af de mest spændende IT-Projekter i Danmark

Udviklings- og Forenklingsstyrelsen

Projektleder til komplekse IT-infrastruktur og implementeringsprojekter

KMD A/S

BI Developer

Ward247 ApS

IT Operations Manager

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49	pop up black friday Af Malm i Virus