[CSS] Alternatief voor een frameset maken - Softwareontwikkeling

zondag 16 september 2007 17:01

Acties:

Topicstarter

Bij een frameset heb je altijd dat je de ruimte vanaf beneden voor de bottom kan instellen en de ruimte van boven voor de header. daartussen heb je dan je inhoud waar je een scrollbalk naast kan zetten. Het probleem met een frameset is alleen, dat ik geen manier weet hoe je een dropdown menu van de header over het content-frame kan laten gaan en met css weet ik wel hoe dat moet.

Dus hoe krijg ik een tekst met de mogelijkheid om te scrollen in het midden (content) middels css?

De code ziet er nu als volgt uit:

code:

<div style="height:100px; width:100%; background-color:#a3d314;"></div>
<div style="height:100px; width:100%; background-color:#9e3e29;"></div>

<div class="content"></div>

<div style="height:30px; width:100%; background-color:#a3d314; position:absolute; bottom:0px;"></div>

Athlon X8 3,6ghz 15000+ | 4 x 4GB PC 21000 | 2 x 4TB... < das pas patsen :-)

zondag 16 september 2007 17:03

Acties:

TERW_DAN

Met een hamer past alles.

overflow:scroll toekennan aan de contentclass. Zie ook http://www.w3schools.com/css/pr_pos_overflow.asp

zondag 16 september 2007 18:37

Acties:

Boelie-Boelie

Met dat antwoord vergeet je voor het gemak dat er uitdrukkelijk wordt gevraagd een frameset na te bouwen met header en footer. Dan heb je weinig aan uitleg over overflow.

Misschien wel van toepassing: www.cssplay.co.uk/layouts/basics2.html
Staat wel vol hacks, zou het dus niet 1:1 overnemen.

Cogito ergo dubito

zondag 16 september 2007 18:48

Acties:

Sebazzz

3dp

Bedoel je zoiets?
Hier ben ik opgekomen toen ik een soort iframe effect wilde, maar geen frames of iframes wilde en kon gebruiken (vanwege XHTML).

In IE werkt het helaas niet, maar dat ligt aan IE. Ik heb het wel ooit werkend gekregen toen ik tijdens informatica op school in de code zat te rommelen maar ik weet niet meer hoe. Me docent snap iig niks van die code, dus ik mocht het niet gebruiken voor een html opdracht. (en dan heb ik het over de code die je ziet als je het in IE bekijkt).

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

maandag 17 september 2007 09:16

Acties:

poepkop

Topicstarter

Ik heb al een oplossing... zelf een beetje lopen kloten en kwam heel toevallig iets tegen op internet dat er op leek. De scrollbalk moet ik er nog in zetten, maar ik zie daar geen problemen meer. De code werkt ook in IE.

code:

<style type="text/css">
*{
padding:0;
margin:0;
}
p {
padding: 1em 0;
line-height: 1.5em;
}
html, body {
height: 100%; /* heel belangrijk */
font: 1.0em "Trebuchet MS", Verdana, Arial, sans-serif;
color: #000;
background: #000;
text-align: center;
}
#container {
width: 100%;
margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
background: #000;
}
#header{
    padding-left:20px;
    height:110px;
    font-size:1.3em;
    background: #859C0E;
    line-height: 60px;
}
#inhoud {
    padding: 0 2em 60px 2em;
}
#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
width: 100%;
background: #85C325;
height: 40px;
font-size:1.3em;
line-height: 40px;
text-align:center;
}
</style></head><body>
<div id="container">
<h1 id="header">Header</h1>
<div id="inhoud">

</div>
<div id="footer">Hier staat de footer, helemaal onderaan</div>
</div>
</body></html>

Athlon X8 3,6ghz 15000+ | 4 x 4GB PC 21000 | 2 x 4TB... < das pas patsen :-)

maandag 17 september 2007 20:35

Acties:

Sebazzz

3dp

Ik dacht die code lijkt verdomd veel op die van mij, maar dat heb je natuurlijk met zulke designs in CSS/HTML.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]