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

23/12

Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer

23/12

Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder

23/12

En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed

23/12

Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter

23/12

Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret

23/12

Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR

23/12

Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed

23/12

Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge

23/12

Banebrydende ChatGPT-opdatering er lige på trapperne: “Denne model vil være helt fantastisk til programmering”

23/12

Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten

23/12

Vi ender med at bo i en taber-region, hvis ikke vi gør noget drastisk - her er digitaliseringsministerens plan

Vis flere artikler

IT-JOB

Netcompany A/S

IT Consultant

Capgemini Danmark A/S

Network Architect

KMD A/S

Senior Project Manager

TimePlan A/S

Development Team Manager til TimePlan

Capgemini Danmark A/S

SAP Project Manager

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 09:44	Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
I går 16:03	Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43	html <Input.. Danske bogstaver Af pjotre i Andet software
23/1214:35	Brænde musik fra usb drev til cd Af Caso i Andet hardware
21/1222:16	Er "OneDrive" et "Must" ? Koster det penge ? Af Ikke-ekspert i Windows