Avatar billede bugger Nybegynder
11. august 2003 - 23:49 Der er 5 kommentarer

Fjernelse af rulleskakten 2

Jeg var lidt for hurtig før- det virker ikke med overflow auto -så er rulleskakterne der alligevel når indholdsdelen er næsten tom :-(

Fjernelse af rulleskakten    60 point fra bugger
Hejsa
Hvordan fjerner jeg rulleskakten, eller scrolleren i nedenstående eksempel? -Menuerne i siderne, de blå og røde skal være 100 % i højden, men hvorfor h.... kommer der en scroller frem? Jeg kan ikke fjern den????

Her kommer først css filen css.css
body {
background-color:#DFE2E5 ;
font-family:verdana ;
text-indent:0px ;
margin: 0px;
}

#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:#F8F9FB;
    height:100%;
}

#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
    padding-top: 10px;
    padding-left: 10px;
}

#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    height:100%;
    background-color:blue;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:red;
    height:100%;
}

og her kommer html filen test.html:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

<head>
<title>Test til folket.</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>

<div id="content">Her er indholdsdelen</div>
<div id="title">topmenuen her</div>
<div id="rightmenu">rightmenuen her</div>
<div id="leftmenu">leftmenuen her</div>

</body>

</html>
Avatar billede roenving Novice
12. august 2003 - 00:04 #1
Måske på denne måde ?-)

Der snydes som du vil opdage kraftigt, men der er såvidt jeg kan se ikke noget galt i det !-)

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

<head>
<title>Test til folket.</title>
<style type="text/css">
body {
background-color:#DFE2E5 ;
font-family:verdana ;
text-indent:0px ;
margin: 0px;
}

#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:#F8F9FB;
    height:100%;
}

#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
    padding-top: 10px;
    padding-left: 10px;
    z-index:3;
}
.topblind{
position:relative;
width:150px;
height:75px;
z-index:1;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:0px;
    width:150px;
    height:100%;
    background-color:blue;
    z-index:0;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:0px;
    width:150px;
    background-color:red;
    height:100%;
    z-index:0;
}
.menucontent{
position:relative;
width:150px;
z-index:1;
background:transparent;
}
</style>

</head>

<body>

<div id="content">Her er indholdsdelen</div>
<div id="title">topmenuen her</div>
<div id="rightmenu">
<div class="topblind"></div>
<div class="menucontent">
rightmenuen her</div></div>
<div id="leftmenu">
<div class="topblind"></div>
<div class="menucontent">
leftmenuen her</div></div>

</body>

</html>
Avatar billede roenving Novice
12. august 2003 - 00:08 #2
-- jeg prøvede først slet ikke uden z-index, men nu har jeg prøvet -- konklusionen er:

Title _skal_ have et højere z-index, hvis den står foran i koden, men da det er absolut positioneret kan alle z-index'er fjernes, hvis title-div'en står bagest !-)
Avatar billede bugger Nybegynder
12. august 2003 - 00:10 #3
Tjae, men kan det virkelig ikke laves mere enkelt? Hvis jeg lader være med at sætte rigmenu og leftmenu højden til 100% er der ingen problemer, men jeg vil gerne have et farvet felt i hver side af skærmen og ikke blot en kasse der er x-antal pixels høj eller som er bestemt af indholdet i kassen...
Avatar billede roenving Novice
12. august 2003 - 00:21 #4
Problematikken er at 100% i css relaterer til 'offsetParent' som i tilfældet med absolut positionerede div's jo vil være document (body) ...

Så jeg har ikke set en løsning, som har brugt 100% -- og mine egne forsøg er endt pauvert -- og lodret arkiveret !-)

se bl.a. http://www.html.dk/artikler/00043/ men det ligner noget du har set før *g*
Avatar billede roenving Novice
12. august 2003 - 01:55 #5
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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