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