[div's] de "rest" op laten vullen - Softwareontwikkeling

donderdag 3 augustus 2006 16:36

Acties:

Topicstarter

Hallo,

Ik zit met een probleem met een div layout, waarvan ik weet dat het vaker problemen geeft (je vindt er een hoop over) maar echt geen oplossing op kan vinden.

Het is eigenlijk heel eenvoudig, ik heb een html document

[ div container ]
- [ div top (logo) ]
- [ div menu ]
- [ div content ]
[ / div ]

Ik vindt het altijd moeilijk uit te leggen, vandaar deze schematische weergave

Wat nu het probleem is, mijn content moet 100% naar beneden strechten. Ik heb al wel een paar dingen geprobeerd:

- body height 100%
- min-height 100% toegevoegd (denk al helemaal neit dat het dit is)
- html ( height: 100% } probeerd
- container heeft een height van 100%

Relevante CSS:

Cascading Stylesheet:

html
{
    height      : 100%; 
} 
body
{
    margin      : 0;
    background-color: #000000;

    text-align  : center;
    width       : 100%;
    min-height  : 100%;
    height      : auto;
}

.container
{
    width       : 999px;
    height      : 100%;
    margin      : 0;
    padding     : 0;
    overflow    : hidden;
    text-align  : center;

    background-color: #f8f3d6;
}


.content
{
    position    : relative;
    margin      : 0;
    padding-left    : 15px;
    padding-right   : 15px;
    padding-top : 20px;
    width       : 800px;
    height      : 100%;
    background-image: url(images/content.background.jpg);
    background-position: left top;
    background-repeat: repeat-y;

    text-align  : left;
    float       : left;
    clear       : both;

    border-style    : solid;
    border-width    : 0 1px 0 0;
    border-color    : #d5d0aa;
}

Die .content zou ook helemaal moeten vullen naar onder, maar dat gebuerd dus niet

Of ik krijg weer rare bugs in FF dat hij ineens kan scrollen in het niets (gewoon leeg stuk)

p.s. ik gebruik deze doctype:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Daarom graag jullie hulp!

[ Voor 4% gewijzigd door semicon op 03-08-2006 16:36 ]

donderdag 3 augustus 2006 18:28

Acties:

blue-gene

Ik heb hetzelfde probleem, ongeveer zelfde opbouw ook.

Met dit topic kom ik er ook niet uit.

donderdag 3 augustus 2006 18:32

Acties:

moozzuzz

Zet es wat border: 1px solid red; in de css om te zien wat welke hoogte heeft?

Ik heb met m'n laatste site de truck van de faux-column uitgehaald, maar de site moest wel geen 100% hoogte hebben. Basically (pseudocode):

Cascading Stylesheet:

1
2
3

#content {padding-left: <breedte menu+x>px; padding-top: <hoogte header+y>px;}
#menu    {position: absolute; width: <breedte menu>px; }
#header  {position: absolute; height: <hoogte header>px}

code:

[container]
   #content
   #menu
   #header
[/container]

donderdag 3 augustus 2006 18:37

Acties:

Victor

Gaat het om de achtergrond afbeelding? Dan kun je die toch ook op je HTML element zetten, die zal altijd zo groot zijn als of de viewport, of de content.

Verder zou een voorbeeldpagina misschien wel handig zijn

donderdag 3 augustus 2006 18:54

Acties:

semicon

Topicstarter

Ik wil in ieder geval geen javascript oplossingen of zo iets nasty's het moet toch wel makkelijker zijn. De achtergrond is geen optie omdat het om een patroon gaat die vanaf onder het menu begint, en zolang die tekst duurt (of de pagina dus lang is wat ie nu niet doet) door moet gaan.

voorbeeld

donderdag 3 augustus 2006 19:17

Acties:

thomaske

» » » » » »

semicon schreef op donderdag 03 augustus 2006 @ 18:54:
De achtergrond is geen optie omdat het om een patroon gaat die vanaf onder het menu begint, en zolang die tekst duurt (of de pagina dus lang is wat ie nu niet doet) door moet gaan.

En als je aan de bovenkant van je background-image een rand van 138px plakt en deze dan in de background van je body zet?

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

vrijdag 4 augustus 2006 08:59

Acties:

semicon

Topicstarter

Dan loopt mijn patroon niet meer zoals ie hoort, het is een herhalend patroon (logo) EN ik vindt het niet echt een nette oplossing

Ik zou gewoon graag die div voorelkaar krijgen maar geen site of iets die daar een voorbeeld van heeft, allemaal met position:absolute of javascript ofzo.

[ Voor 54% gewijzigd door semicon op 04-08-2006 08:59 ]

vrijdag 4 augustus 2006 13:48

Acties:

Boelie-Boelie

Wat dan als je de .content een min-height geeft (en voor IE height) met als bg dat logo, waarbij de .content minstens net zo hoog is als het logo? En vervolgens op de body de faux columnsoplossing met de bg zonder het logo (dus alleen het gele vlak plus beige streep)?

Cogito ergo dubito

zaterdag 5 augustus 2006 09:05

Acties:

semicon

Topicstarter

Boelie-Boelie schreef op vrijdag 04 augustus 2006 @ 13:48:
Wat dan als je de .content een min-height geeft (en voor IE height) met als bg dat logo, waarbij de .content minstens net zo hoog is als het logo? En vervolgens op de body de faux columnsoplossing met de bg zonder het logo (dus alleen het gele vlak plus beige streep)?

Nee het is juist de content die moet doorlopen naar onder, omdat het logo helemaal tot onder zich moet herhalen. (het moet niet een geel vlak worden)

[ Voor 3% gewijzigd door semicon op 05-08-2006 09:05 ]

zaterdag 5 augustus 2006 20:03

Acties:

MBV

Ga je in een hoekje zitten schamen

Je gebruikt ook een <center> tag, zwaar depreciated. Als je daarvan de height op 100% zet, werkt hij wel.

Bij dit soort dingen moet je Firefox gebruiken. Als je dan op CTRL+Shift+i drukt, krijg je de DOM Inspector. Je kan dan met het meest linkse knopje elementen aanklikken en eigenschappen bekijken, of je kan een element in de tree selecteren en de eigenschappen bekijken.
Wat het mooiste is, is dat je Javascript en CSS rules kan aanpassen ermee. Selecteer een element, klik op het knopje naast de tekst 'Object - DOM Node' en selecteer CSS Style Rules. Als je nu de goede regel aanklikt, kan je eigenschappen bewerken, toevoegen en verwijderen met je rechtermuisknop

zaterdag 5 augustus 2006 22:49

Acties:

Verwijderd

Je kan met background-position bepalen op welk punt je logo-patroon begint. Hiermee kan je dus prima spelen om je logo te laten starten vlak onder je menu (mits je menu een vastgestelde hoogte heeft)

background-position: 0px 138px;

Hiermee zou de background optie wel tot de mogelijkheden behoren.