Notifikationer

Markér alle som læst Log ud

webrex Nybegynder

10. december 2005 - 19:31 Der er 10 kommentarer og
2 løsninger

Grundstruktur - px og %

Hvis man har nedenstående grundstruktur, hvor side-indholdet skal ligge i den <div> uden id, hvordan laves følgende så mest simpel:
1) Forsiden hvor jeg skal have en rektangulær kasse til at ligge lige langt fra top og bund og højre og venstre?

2) Findes der en kode - hvormed man fortæller div'en, at den skal fylde alt det rum der "er tilbage", hvilket her = 100% (hele div) - 15% (top) - 20 px - 10 % = ?. Problemet er jo at % og px er blandet.

Synes godt om

webrex Nybegynder

10. december 2005 - 19:32 #1

Sideeks:

<!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 {
height: 100%;
width: 100%;
}
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#top {
height: 15%;
width: 100%;
}
#indhold {
height: 75%;
width: 100%;
background-color: #FFFFFF;
}
#bottom {
height: 10%;
width: 100%;
background-color: #BC0929;
}
#menu {
height: 20px;
width: 100%;
background-color: #FBE6F2;
border-bottom: 1px solid #BC0929;
}
</style>

</head>
<body>
<div id="top"> </div>
<div id="indhold">
<div id="menu"> </div>
<div> </div>
</div>
<div id="bottom"> </div>
</body>
</html>

Synes godt om

webrex Nybegynder

11. december 2005 - 17:03 #2

Jeg kunne også bare spørge: Hvordan får man en boks (table, celle, række, div hvad det nu er) til at blive delt i 2 andre bokse, hvor den ene fylde 20px og den anden boks (rum) fylder resten af pladsen? - Nogen der kan regne det ud?

Synes godt om

webrex Nybegynder

11. december 2005 - 17:06 #3

Den boks, der skal deles i eksemplet oven over 11/12-2005 17:03:06, har værdien height="75%"

Synes godt om

roenving Novice

12. december 2005 - 10:53 #4

Kig f.eks. her: http://www.eksperten.dk/spm/520876

Synes godt om

webrex Nybegynder

12. december 2005 - 11:07 #5

Jeg synes eksemplerne inklusiv referencer er for specifikke, eller også har jeg ikke formået at trække pointen ud af spørgsmålene? - Mit spørgsmål er da ganske (banalt) og simpelt, så hvorfor rode med z-index og alt mulig andet? Principielt: Roeving, hvordan løser du de to ovenstående kommentarer?

Synes godt om

roenving Novice

12. december 2005 - 18:03 #6

Da man ikke kan definere en højde med blandede relative og absolutte højder, gør jeg i stedet det, at jeg laver et skygge-element, som skubber indholdet i hoved-elementet frem under de fast definerede elementer, som derfor skal ligge 'højere' !-)

Synes godt om

webrex Nybegynder

13. december 2005 - 23:54 #7

Kan man så slet ikke lave dette enkelt? - Hvordan kunne man lave det med tabeller`?

Synes godt om

webrex Nybegynder

14. december 2005 - 22:44 #8

Hey, Roeving, siden du ikke angiver noget hurtigt svar, er det så fordi dette banale problem ikke er så let?

Synes godt om

roenving Novice

15. december 2005 - 15:54 #9

Jepz !-)

Synes godt om

webrex Nybegynder

16. december 2005 - 19:47 #10

Så Roenving, så har jeg løst problemet - ganske enkelt ved at positionere menuen absolute, for da optager denne ikke plads!:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

html, body {
height: 100%;
width: 100%;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

/* Grundstruktur 4 divs */

#top {
height: 15%;
width: 100%;
}
#menu {
height: 20px;
width: 100%;
position: absolute;
top: 15%;
left: 0%;
background-color: #FBE6F2;
border-bottom: 1px solid #BC0929;
}
#indhold {
height: 75%;
width: 100%;
background-color: #FFFFFF;
}
#bottom {
height: 10%;
width: 100%;
background-color: #BC0929;
}
</style>
</head>
<body>
<div id="top"> </div>
<div id="menu">ddd</div>
<div id="indhold">ddd</div>
<div id="bottom"></div>
</body>
</html>

Er du enig i min løsning?

Synes godt om

webrex Nybegynder

16. december 2005 - 21:14 #11

Det eneste problem ved ovenstående svar er så bare: Når du vil centrere indhold i #indholds-diven vertikalt så regner den 20px forkert, fordi den jo starter fra bunden af top-div og ikke fra bunden af menu div - HVis dette kan løses, er det perfekt - kan du det, Roenving?

Synes godt om

webrex Nybegynder

17. december 2005 - 12:19 #12

Det kan man vist løse ved at give en tabel (fx) en margin-top: 20px;! Så det skulle være løst, selv om det muligvis ikke er en standardiseret løsning...

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