[CSS HTML] positionering en uitlijning

[Vinzzz243]

Ik heb het volgende probleem:

http://www.vinzzz.nl/got/

Op 1024 is het resultaat prima: het onderste groene blok sluit prima aan op de onderkant van de pagina (met 10pixels margin). Echter het probleem is dat hierin de height hard gecodeerd is. Wanneer ik dus een andere resolutie bekijk, sluit het niet meer mooi aan. Is dit mogelijk met uitsluitend css, dus geen tables, iframes, frames of javascript?

Ik heb al veel gezocht, heel veel geprobeerd, % ipv px etc, maar ik wil graag het bovenste blok niet met % definieren...ik kom er maar niet uit...

index.htm:

PHP:

<?
<div id="frame">
  <div id="content1">1</div>
  <div id="content4">
    <div id="content5">
    1<br>
    veel br's
    1<br>
    </div>
  </div>
</div>
?>

css stuk:

code:

html,body {
    height: 100%;
    }

body    {
    margin: 0px;
    padding: 0px;
    }

#frame  {
    width: 800px;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
    }

#content1 {
    width: 780px;
    height: 190px;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
    }

#content4 {
    width: 780px;
    height: 375px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow-y: scroll;
    }

#content5 {
    width: 753;
    height: 385;
    margin-left: 0px;
    margin-top: 0px;
    padding-bottom: 10px;
    position: absolute;
    }

[ Voor 70% gewijzigd door Vinzzz243 op 27-10-2003 20:06 ]

[faabman]

je kan met javascript kijken naar de beschikbare hoogte van je browser en daarmee je onderste divje (die je als ik je verhaal goed gelezen hebt wel variabel hebt) aanpassen

PHP:

// beschikbare hoogte bepalen
function beschikbareHoogte() {
    if (window.innerHeight != null){
      return window.innerHeight;
      }
    if (document.body.clientHeight != null){
      return document.body.clientHeight;
      }
    return (0);
    }

[Vinzzz243]

is idd een oplossing, maar ik wil javascript vermijden (kzal t ff in mn post zetten)

[Puck]

Je wilt dus een minimale hoogte 385px?

min-heigth kan je gebruiken, werkt alleen niet in IE

Verkeerd begrepen

[ Voor 14% gewijzigd door Puck op 27-10-2003 19:41 ]

[paragon]

Kan je niet een heigth is 100% doen voor die groene div ?

[Vinzzz243]

heb ik al geprobeerd (zie 1e bericht) maar dan loopt echt alles de soep in
De vraag is of het dus puur css kan, met tables is het zo gepiept

[Verwijderd]

Controleer je design zoiezo nog even, want dit werkt in ieder geval al niet in Opera, en de praktijk leert dat Mozilla het dan ook niet slikt..

[Vinzzz243]

ow naja, praktijk leert me ook dat mijn doelgroep geen opera gebruikt bij mij, maar als je tips hebt, hoor ik dat heel graag!!

[Verwijderd]

Installeer eens FireBird ? En probeer het er in beide browsers identiek uit te laten zien.. de grootste fout die veel webdesigners maken is dat ze zeggen "mijn doelgroep bestaat alleen uit IE gebruikers" terwijl vaak ook andere gebruikers de website proberen te bekijken, waar dat gewoon niet werkt.

[paragon]

Waarom wil je hem eigenlijk niet in % defineren? Als je namelijk de grote met resoluti wil laten mebewegen kan dat volgens mij niet anders.

[Verwijderd]

Zo ziet het er uit in mozilla. Is trouwens gratis te downloaden op mozilla.org Is heel handig. Door te vergelijken hoe verschillende browsers je pagina weergeven kom je soms achter kleine foutjes



(en nu maar hopen dat het werkt) Jip.. plaatje zichtbaar

Tip: die height=100%... kijk wat mozilla ermee doet

[ Voor 14% gewijzigd door Verwijderd op 28-10-2003 08:32 ]

[Vinzzz243]

paragon schreef op 28 oktober 2003 @ 08:16:
Waarom wil je hem eigenlijk niet in % defineren? Als je namelijk de grote met resoluti wil laten mebewegen kan dat volgens mij niet anders.

Wil ik wel, maar dan moet ik het bovenste blok ook in % definieren en dat wil ik niet

Verwijderd schreef op 28 October 2003 @ 08:31:
Zo ziet het er uit in mozilla.

ik ga het thuis eens proberen. Is het met table's wel te doen in mozilla?
http://www.vinzzz.nl/got/site das met tables gemaakt, en precies wat ik wil. Nou ja, alst niet zonder te doen, dan niet

edit: jemig, met mozilla ziet dat niet uit, zijn er ergens richtlijnen waar je je aan 'moet' houden om het goed te laten uitzien in mozilla e.a.? W3c offcourse, maar divs met overflow moet toch wel lukken

[ Voor 49% gewijzigd door Vinzzz243 op 28-10-2003 15:56 ]

[Morrar]

Mozilla kent geen overflow-y, je moet dus gewoon met overflow werken en dan daarna de overflow-x voor IE weer uitzetten:

code:

div.voorbeeld
{ overflow: scroll;
  overflow-x: hidden;
}

Als je die laatste regel niet opneemt zie je een horizontale scrollbar in IE. Weer zo'n IE hackje dus :-S

[Clay]

Dit moet ook echt zonder rare hacks wel kunnne. Je wil bovenin de pagina een soort header met een vaste hoogte, en daaronder gewoon content met aan de onderkant een margin van 10px? Er is alleen een groot verschil tussen het "er zijn" van die margin, en het visueel tonen van die margin met b.v. een background: wat wil je? moet daar wat in ofzo?

[Vinzzz243]

Clay schreef op 29 oktober 2003 @ 13:56:
Dit moet ook echt zonder rare hacks wel kunnne. Je wil bovenin de pagina een soort header met een vaste hoogte, en daaronder gewoon content met aan de onderkant een margin van 10px? Er is alleen een groot verschil tussen het "er zijn" van die margin, en het visueel tonen van die margin met b.v. een background: wat wil je? moet daar wat in ofzo?

Ja precies. Een header met een vaste hoogte, bv 200 px. Dan 10px daaronder (komt nix in, puur voor layout) dan de 'content-div' en die moet variabel zijn en altijd tot onderaan de pagina lopen, maar dan met die margin-bottom van 10px. Daar komt dan ook wederom NIETS in, puur voor layout.
Het liefst heb ik de scrollbar er altijd. ook als er niet gescrolld hoeft te worden (ik denk, zeg t maar erbij )
Beetje duidelijker nu? Hoop van wel

[Clay]

dit kan b.v.

HTML:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
    <title> Project </title>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html,body {
        padding:0;
        margin:10px;
    }

    #header, #content {
        margin:0;
        padding:0;
        width:700px;
        background:#f0f0f0;
        border:1px solid silver;
    }

    #header {
        height:200px;
        margin-bottom:10px;
    }

    #content p {
        margin:0;
        padding:10px;
    }       
    </style>
</head>

<body>  
    <div id="header"> </div>
    <div id="content">
        <p>
            Lorem ipsum dolor *knip*
        </p>
        <p>
            Integer sodales elementum *knip*
        </p>
        <p>
            Curabitur lobortis magna *knip*
        </p>
        <p>
            In ac turpis in mi venenatis suscipit. *knip* 
        </p>
    </div>

</body>
</html>

om aan de onderkant een margin te kunnen hebben moet je body ook een margin hebben. een margin-bottom op #content alleen werkt niet. Waarom weet ik niet echt, maar ik gok dat dat te maken heeft met collapsende margins. Dat is een spec van het w3 waar ik het nut niet van inzie, waarschijnlijk omdat ik hem niet snap

Let wel, #content heeft nu geen opgegeven hoogte! dat kan je wel doen, maar die 10px is een margin onderaan je pagina, niet onderaan je scherm. Je kan em hoogstens een min-height geven, en om IE dan tegenmoet te komen zo:

Cascading Stylesheet:

#content {
    height:300px;
}

body>div#content {
    height:auto;
    min-height:300px;
}

[ Voor 11% gewijzigd door Clay op 29-10-2003 16:29 ]

[disjfa]

je kan ook

code:

#content{
    position:absolute;
    right:10%;
    width:80%;
    bottom:10px;
    top:120px;
    background-color:silver;
    border:1px solid black;
    overflow:auto;
}

alleen ondersteund ie dat niet... dus daar heb je wel een probleem komt daar op een of andere manier doordat top en bottom niet bij elkaar willen.

[Clay]

Yup, met left top right en bottom waarders 'hoort' een element zich uit te rekken naar de ruimte die daartussen zit. Je kan daar voor IE een script voor bouwen, maar dan moet je ook weer de onresize gaan onvangen enzo. hoop gezever iig.

[Morrar]

Clay schreef op 29 October 2003 @ 17:12:
Je kan daar voor IE een script voor bouwen, maar dan moet je ook weer de onresize gaan onvangen enzo. hoop gezever iig.

Mja over hacks gesproken

[Vinzzz243]

bescheiden schopje...

Ik kreeg t uiteindelijk dus niet voor elkaar zonder tabellen te gebruiken. Maar nu heb ik een volgende vraag. http://www.vinzzz.nl/got/site10
het onderste vak "content" heeft ook een top en bottom border, maar door te scrollen vallen die weg... Een extra border op het bovenstaande element levert niet het gewenste resultaat omdat dan de border tot aan de scrollbalk loopt.

Is dit wél op te lossen, met puur html en css?

p.s. Clay uve got mail

[Clay]

Ik ben bang dat IE deze layout gewoon niet toestaat zonder script, frames of tables. Ook voor die border zie ik zo gauw ff geen andere oplossing dan of de scrollbar IN dat vak zetten, maar da's meteen een heel ander design, of die bg loshalen van de content, maar als die border dan blijft staan zijn content en bar nog wel even hoog. Dus waar de content het vak uitscrolt zal die nog wel die border raken.

in firebird werkt de table oplossing trouwens ook niet. Dit kan bijna niet anders dan met top left right en bottom en dan automagisch rekken, ware het dat IE dat niet kan.

p.s. gezien ja, nog geen tijd gehad.

[JJvG]

Ik heb zelf een soortgelijke situatie aan de hand gehad (navigatie links + boven en content centraal op de pagina).

Ik heb al mijn divs absoluut gepositioneerd met top:0px; en left 0px;
De navigatie-div heb ik een hoogte gegeven van 180px en de content div een padding-top van 200px. Hierdoor heb ik 20px ruimte (transparant) tussen de navigatie en de content.

Over je border-top en border-bottom die steeds wegvalt: het is niet mogelijk om je borders te laten staan als je ook in het gebied wilt scrollen. Het enige dat je kan doen is een kader om het geheel maken (waar de scrollbalk dus binnenvalt) en dat kader (bij voorkeur een div) een border geven.

Succes!

[Vinzzz243]

JJvG, ik kon je mail niet vinden, heb je misschien nog een voorbeeld van het probleem dat jij toen aan de hand had
Dat van die border weet ik ik kan het oplossen door een container eromheen en dan geen border (want dan zou die border tot boven aan de scrollbalk gaan, en dat wil ik juist niet) maar een background en dan net 1 px daarvan laten zien ofzo

[JJvG]

Mailadres staat nu als openbaar: jochem at jochemenjanneke.nl (even tegen de spam het at-teken zo gezet )

Specially for you: http://www.jochemenjanneke.nl/nji/vinzzz.asp

[ Voor 24% gewijzigd door JJvG op 14-11-2003 16:34 ]

[robbert]

Clay schreef op 29 oktober 2003 @ 16:28:
Let wel, #content heeft nu geen opgegeven hoogte! dat kan je wel doen, maar die 10px is een margin onderaan je pagina, niet onderaan je scherm. Je kan em hoogstens een min-height geven, en om IE dan tegenmoet te komen zo:

Cascading Stylesheet:

#content {
    height:300px;
}

body>div#content {
    height:auto;
    min-height:300px;
}

google maar eens op minmax, dan werkt min-heigth etc ook in ie [google=minmax.js]

[Justice]

Voor je originele vraag moet je:
*html, body een height geven van 100%
*je body een bottom-margin of padding geven van 10 pixels; (moet je even testen)
*je body een top-padding geven van 210px;
*een absoluut gepositioneerde div als header (of dit als achtergrond) van 200px hoog op top 0.
*en dan inline de content gaan tikken, dus niet positioneren.

[Vinzzz243]

thx voor de reply's nog (was vergeten dat mijn vraag voor jjvg's email nog openstond ) maar crisp heeft het antwoord in een ander topic al gegeven:
http://gathering.tweakers.net/forum/view_message/19216930

[Grrrrrene]

OK, het account van JRF is kaduuk, daarom een post om mijn account, morgen moet er ff naar JRF's account gekeken worden om het te fixen

---

Justice schreef op 14 november 2003 @ 16:34:
Voor je originele vraag moet je:
*html, body een height geven van 100%
*je body een bottom-margin of padding geven van 10 pixels; (moet je even testen)
*je body een top-padding geven van 210px;
*een absoluut gepositioneerde div als header (of dit als achtergrond) van 200px hoog op top 0.
*en dan inline de content gaan tikken, dus niet positioneren.

Sorry moet even reageren, want dit klopt echt niet.

De werkelijke onscreen hoogte van een element is bij browsers die de W3C specs volgen opgebouwd uit:
margin-top + border-top + padding-top + hoogte + padding-bottom + border-bottom + margin-bottom

Als je de hoogte van de body dus op 100% zet en daar dan een top en bottom margins/padding aan toevoegt, krijg je logischerwijs een totale hoogte die meer dan 100% is, aka een verticale scrollbalk.
Nu is het bekend dat IE het niet zo nauw neemt met deze specs, maar NS en andere browsers en zelfs de nieuwere IE versies gaan hier wel strikt mee om.