[website design] Frames vs Tabels en CSS vraagje

[tazzman]

Nou ben ik dus bezig met mijn eigen website (wie niet zal je denken) en hoewel ik voor mijn werk vrij grote Internet/Intranet web applicaties maak, hou ik me daar meer bezig met de daadwerkelijke code, VB en C++ COM objects, database design etc... i.p.v. het 'aanzicht' van de website.

Maar goed, voor mijn eigen projectje moet ik dat dus allemaal zelf doen. Op zich geen probleem hoor alleen nu loop ik tegen de volgende keuze aan: Frames of Tables? Ik "surf" sinds 1995 ~ 1996 ongeveer thuis en mag dus zeggen dat ik aardig wat site-tjes heb mogen aankijken

Toen Frames populair werden, moest elke site daar wel meteen gebruik van maken....nav bar's hier, daar, links, onder.. men sloeg een beetje door maar naar verloop van tijd was het vrij standaard om een frame navbar boven/links te hebben met de main content dus rechts of daaronder. Maar na enige tijd begon het gebruik van tables erg populair te worden en eigenlijk zag ik de sites met Frames verdwijnen ..alles werd nu in tables gegoten.

Mijn eerste gedachte was " ik zal natuurlijk tables gaan gebruiken" maar waarom geen Frames? Het design is ongeveer zo:

Ik heb een 100 pixels grote Nav bar + logo boven aan het scherm en helemaal onderin heb ik een 20 pixels kleine bar met extra informatie. Daar tussen valt mijn main content area. De artikelen welke ik daar zal plaatsen zullen allen groter zijn dan de content area kan bevatten op 1024x768 dus daar zal je zowiezo voor moeten scrollen.

Als daar tables voor gebruik, dan verdwijnt dus de navigatie balk uit zicht zodra je naar beneden gaat scrollen. Daarvoor krijg je dan wel een grotere content area terug want die nav-bar blijft daar dus niet staan. Vergelijk het maar op de Tweakers.net site.. De menu balk verdwijnt ook uitzicht bij het scrollen. Bij het gebruik van Frames heb je dat dus niet.

Nu is mijn vraag: Wat zouden jullie mij aanraden om te gebruiken en waarom? Zouden jullie het gebruik van not scrollable frames irritant of ouderwets vinden?

En dan over het gebruik van Tables had ik nog een paar vraagjes, ik zou jullie input daar voor erg kunnen waarderen

1) Bij het gebruik van Frames is het heel makkelijk om voor elke area (top-nav-bar, content area, lower information bar) een eigen CSS te maken waarin ik bijvoorbeeld afwijkende behaviours en opmaak hanteer voor links, en headers etc. Omdat het aparte HTML pagina's zijn (ik gebruik voor mijn eigen site even geen php/asp en geen database) kan ik gewoon voor elke pagina zijn eigen stylesheet aanroepen.

Wanneer ik de gehele site in tables zou gieten, kan ik dan voor elke (nested) table een eigen stylesheet gebruiken? Voor text opmaak kan ik gewoon een eigen style aanmaken maar ik kan per stylesheet maar 1 link 'hover' behaviour etc aanmaken.. terwijl ik voor de nav-bar en de content juist verschillende link styles wil gebruiken. (juist wel of geen underline bij hover/mouse over, andere kleur etc).

2) Bij het gebruik van Frames kan ik heel eenvoudig de frameset zo maken dat de onderste informatie bar altijd onderaan de pagina blijf. Bij een table zou dat dus afhankelijk worden van de inhoud/lengte van de content cells/nested table. Is daar een handige methode voor om te zorgen dat die information bar altijd onderaan de pagina blijft wanneer de content minder dan 1024x768 beeldvullend is?

Daarmee bedoel ik...hoe voorkom ik dat de information bar ineens halverwege het beeld staat wanneer er bijzonder weinig content op een page staat bij het gebruik van tables?

Dat was um wel eigenlijk.. Vergeef me als dit wellicht een enorme noob vraag is maar ik wil mijn afweging voor het gebruik van tables of frames goed overdenken zodat ik straks niet alles weer moet veranderen.

Ik waardeer elke input van jullie en ben benieuwd naar jullie mening

PS: ik voel mij bijzonder brak op dit moment.... per ongeluk een 'hazenslaapje' gedaan na het eten en dat moet ik echt niet doen, ik kan daar helemaal niet tegen. Dus ik val hier half om onderhand.. maar wilde dit toch ff posten

[ Voor 4% gewijzigd door tazzman op 29-03-2003 21:38 ]

[Mercarra]

Heb je al nagedacht over het gebruik van div's? Net zo makkelijk, je opmaak is dan veel eenvoudiger dan met tabellen. Met wat javascript kan je zo de hoogtes en breedtes van je div's dynamisch maken naar elke resolutie. Ook kan je in de div's iframes gebruiken.

[Verwijderd]

Over de keuze tussen frames en tables, ga voor iframes!
Blijf je netjes in de pagina, die zelf NIET hoeft te scrollen, maar het gedeelte met de echte
inhoud wel! Ideaal

Edit:

[ Voor 6% gewijzigd door Verwijderd op 29-03-2003 22:20 ]

[tazzman]

mercarra schreef op 29 March 2003 @ 22:11:
Heb je al nagedacht over het gebruik van div's? Net zo makkelijk, je opmaak is dan veel eenvoudiger dan met tabellen. Met wat javascript kan je zo de hoogtes en breedtes van je div's dynamisch maken naar elke resolutie. Ook kan je in de div's iframes gebruiken.

Dat is zeker zo, alleen wil ik eigenlijk mijn content een vaste opmaak geven .. het gaat om artikelen met foto's, tabellen en diagrammen etc .. die wil ik niet laten verspringen als de page resized wordt.

[Mithrandir]

Hoeft ook niet.

Er staat niet voor niets: "met javascript KAN je...".
Maw: als je niet wilt gaan JS proggelen, gebeurt het niet eens

/edit: over dit onderwerp heb ik eens wat gelezen...
*zoekt*
*vindt*
http://www.sitepoint.com/article.php?aid=379&pid=0

[ Voor 34% gewijzigd door Mithrandir op 29-03-2003 23:10 ]

[tazzman]

* tazzman gaat even lezen

Nog even over dat CSS, kan ik binnen een table of wellicht met nested tables, meerdere stylesheets gebruiken?

[Rickets]

tazzman schreef op 29 maart 2003 @ 23:20:
* tazzman gaat even lezen

Nog even over dat CSS, kan ik binnen een table of wellicht met nested tables, meerdere stylesheets gebruiken?

Nee, dat denk ik niet.
Maar het is ook niet de bedoeling om tabellen te gebruiken voor layout.

quote: http://www.w3.org/tr/html401/struct/tables.html#h-11.1

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Ik raad je aan om je layout zonder tabels te regelen, maar met div-elementen.
Er zijn genoeg voorbeelden te vinden waar je mee kan stoeien.

Handige linkjes:
- Specificatie http://www.w3.org/TR/CSS21/
- Tutorial http://www.w3schools.com/css/
- Compatibility table, bugs, etc http://www.xs4all.nl/~ppk/css2tests/
- Layout voorbeelden http://glish.com/css/home.asp
- Nog meer bugs http://www.richinstyle.com/bugs/

[Verwijderd]

waarom zit je zo te dubben... je geeft zelf allemaal voordelen van frames aan, dus waarom zou je ze dan niet gebruiken?

[Blaise]

Er zitten ook een hoop nadelen aan frames vast die je vanzelf ontdekt als je een grote site gaat bouwen, dus ik vind het geen onverstandige keuze om het een en ander op een rijtje te zetten voordat je aan je site begint.

[xos]

Misschien via iframes iets te doen?

[tazzman]

Thanks voor de links, ik ga weer even flink lezen. Ik ga ook met divjes aan de gang! Ben d'r nog niet helemaal uit

[saviour]

Kan je niet gewoon classes gebruiken ipv verschillende stylesheets?

[zakalwe]

Je moet gewoon kijken hoe nuttig is het wanneer de gebruiker de navigatiebalk ten allen tijden blijft zien... ik bedoel ga even de gang van de gebruiker na, en kijk wat er belangrijker is, persistente navigatie of ruime content area.


good luck.

[Excrusiator]

Met behulp van div's kun je gemakkelijk een menu balk maken die in zicht blijft.
bijvoorbeeld:

HTML:

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

<html>

<head>
    <title> Mijn Online Plekje </title>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="Author" content="Excru" />
    <!--onderstaande code gebruiken voor een externe style sheet -->
    <link rel="Stylesheet" type="text/css" href="css/stylesheet.css" />
</head>

<body>

<!--Ik gebruik bijna altijd een div om de website te centeren
en voor wat basic layout -->
<div id="sitepos">
    <div id="menu">
        Pleur hier je menu bijvoorbeeld neer
    </div>
    <div id=#content>
        pleur hier je content neer
    </div>
    <div id="menu2">
        pleur hier eventueel je tweede menu neer
    </div>
</div>

</body>
</html

Hiermee heb je nu de basis van de layout die jij wilt hebben.
Alhouwel het niet uitziet als je het in een browser opent, het is gewoon kale html.

Wat je nu gaat doen is dan de layout definieren in de externe stylesheet.
Dit kun je op meerdere manieren doen.
Met id's, classes, tags en tag gebonden classes.

Cascading Stylesheet:

    #sitepos {
    position: absolute;
    top: 20px;
    }

Zo kun je ervoor zorgen dat je menu in beeld blijft. Lees maar eens in de CSS2 reference op w3schools voor de mogelijkheden.

En zo kun je dit doen voor elk element in je layout.
Je kan gemakkelijk met classes de layout van elkaar scheiden. Want <p class="blaat"></p> heeft een andere layout dan bijvoorbeeld <p class="zooi"></p>

Div's vind ik persoonlijk veel prettiger werken dan tables. Maar wel even een waarschuwing voor je, div's kunnen in het begon nogal lastig zijn om te positioneren als je tables gewent bent. Maar met een beetje oefening en met wat experimenteer werk kom je er uiteindelijk uit en wordt je er steeds beter in. Zo is het tenminste voor mij gegaan.

Ik heb zelf met frames, tables en divs gewerkt. Frames vervloekte ik op een gegeven moment toen mijn website begon te groeien, vondt ze niet meer prettig werken. Tables heb ik een tijdje gebruikt. maar je wilt echt niet iets verandere in je layout als je tables gebruikt (een kleine vergissing kan je dan veel tijd kosten in het uitzoeken waar het in de table zit).
Div's ben ik op een gegeven moment gaan gebruiken op aanraden van Cheatah (hoewel ik hem er in het begin voor vervloekte ). Met divs heb ik een veel grotere flexibiliteit op layout gebied. Wijzigingen kunnen veel sneller gemaakt worden in de layout en het met minder gerotzooi.
Enig nadeel van div's met css opmaak is dat het dus niet correct weergegeven kan worden in browsers ouder dan Internet Explorer 4.0 en Netscape 6.0 . Echter alle recente browsers ondersteunen het goed, ook raad ik het je aan tijdens het ontwikkelen je layout in mozilla te testen en na de basis het Internet Explorer compatible te maken (vaak heeft Internet Explorer een paar irritante interpretatie fouten).

Ik wens je veel succes ermee, en blader eens door het xhtml en css gedeelte van www.w3schools.com (zoals Rickets al voorstelde). Een goede en duidelijke website om te beginnen met het leren van html en css. Ik gebruik het nog steeds voor het opzoeken van tags die ik niet vaak gebruik (w3c voor het uitzoeken welke browser het nu weer eens niet volgens de standaard doet )

En over de layout voor je persoonlijke website. Pak er eentje die bij je past en waar diegenen die naar je website gaan mee overweg kunnen. Laat die website gewooon lekker je 'speelplaats' zijn op internet, die van mij is dat ook. Lekker experimenteren en af en toe commentaar krijgen van je vrienden/familie, leer je veel van.

Veel succes met het bouwen van je eigen website.

[tazzman]

Thx voor de info, ik gebruik normaal Div's voor het opbouwen van menu's etc, hiden/enablen van zaken maar om deze te koppelen aan een CSS voor positioning, daar had ik even niet aan gedacht. Ik zal er zeker in gaan duiken

[tazzman]

saviour schreef op 30 March 2003 @ 04:11:
Kan je niet gewoon classes gebruiken ipv verschillende stylesheets?

Jazeker wel.. alleen nu gaat het om het volgende.

Ik ben dus nu aan het experimenteren met div's i.p.v. frames of tables. So far so good.. Alleen nu heb ik het volgende probleem.

Voor mijn nav-bar (boven aan) gebruik ik een andere a:hover behaviour dan voor mijn info-bar (onderaan). Een van de redenen is dat de nav-bar achtergrond kleur wit is en die van de info-bar blauw. Bij de nav-bar is de link kleur bij hover dan ook donker en bij de info-bar is dat wit.

Probleem is dat ik maar 1 x in een stylesheet de a:hover behaviour kan defineren. Ik heb geprobeerd om binnen de Divjes van de nav-bar en info-bar een aparte stylesheet aan te roepen. maar de a:hover behaviour van de laatst aangeroepen stylesheet geldt dan voor de gehele page.

Resultaat, bij mijn nav-bar verdwijnt de link bij een hover aangezien de laatst geladen stylesheet hem als "wit" defined.. en een witte text op een witte achtergrond, erhm ja dat kan je wel voorstellen

Dat is eigenlijk het enige probleem wat ik nu nog heb.. zou iemand daar wellicht wat input over kunnen geven?

[Civil]

hier een linkje die als je verder had gegeken op de site die al eerder gegeven is je zelf ook had kunnen vinden (of je hebt m natuurlijk al gevonden en ik ben laat) http://www.w3schools.com/css/css_pseudo_classes.asp

Voor het gemak even een klein voorbeeldje

Cascading Stylesheet:

a.blaat:hover {hier je styles voor de link}

HTML:

<a class="blaat" href="http://www.linkje.nl">linkje</a>

[marty]

gewoon een nieuwe classe voor aanmaken
(voorbeeldje uit een css van mijzelve)

code:

.flashred:link {
    color: #FFFFCC;
    text-decoration: none;
    }
.flashred:visited {
    color: #FFFFCC;
    text-decoration: none;
    }
.flashred:active {
    color: #FFFFFF;
    text-decoration: none;
    }
.flashred:hover {
    color: #FF0000;
    }

en dan kun je dus de class flashred aanspreken in je linkje

[tazzman]

Heel erg bedankt, ik had de psuedo CSS nog niet gezien op W3Schools..

[Peedy]

Ik las er gister net een stuk over in de voor-nieuwste NET Professional.. mensen van een paar webdesigns bureau.. misschien vind je het interessant omdat ff na te slaan in de bieb, als je er niet lid van bent, that is.

De redenen waarom ik tabellen gebruik ipv frames ;
Frames zijn niet goed zoekmachine-indexeerbaar.
Tabellen zijn dynamischer.
Frames heb je 3 files voor 1 pagina, word het rommelig van op je server (vind ik).
En het werkt bij Favorieten toevoegen ook irritanter (ik kies altijd rechtermuisklik, Add to Favorites, end an heb je alleen left.html ofzo in je Favs staan )

[paragon]

pEeDy16 schreef op 30 March 2003 @ 20:52:
Ik las er gister net een stuk over in de voor-nieuwste NET Professional.. mensen van een paar webdesigns bureau.. misschien vind je het interessant omdat ff na te slaan in de bieb, als je er niet lid van bent, that is.

De redenen waarom ik tabellen gebruik ipv frames ;
Frames zijn niet goed zoekmachine-indexeerbaar.
Tabellen zijn dynamischer.
Frames heb je 3 files voor 1 pagina, word het rommelig van op je server (vind ik).
En het werkt bij Favorieten toevoegen ook irritanter (ik kies altijd rechtermuisklik, Add to Favorites, end an heb je alleen left.html ofzo in je Favs staan )

Tabellen ziijn niet bedoelt voor opmaak maar voor tabulaire data. Gebruik divs en spans voor je opmaak

[tazzman]

Na enig gezwoeg ben ik nu op dreef met de divjes.. thx

Alleen, ik had eerst het plan om de site aan te laten passen aan de size van de browser, dus een netjes uitgevulde menu balk etc etc. Alleen nu kom ik er achter dat ik dan weinig controle heb over de layout. Text en pictures gaan schuiven etc.

Ik wil nu gewoon een vaste layout gebruiken met een vaste breedte. Ik weet dat mijn 'publiek' minimaal een resulotie van 1024x768 of hoger gebruikt en bij uitzondering enkele met 800x600 maar die moeten dan maar een beetje scrollen.

Is het 'not-done' om zo'n vaste layout te gebruiken? En is het dan wel mogelijk om bijvoorbeeld mijn bovenste menu balk te laten stretchen naar 100% width terwijl de middelste content-area div een vaste breedte van 900 px gebruikt? Dat krijg ik niet voor elkaar en volgens mij kan het ook niet, het lijkt mij een beetje tegenstrijdig.

Moet ik alleen ff mijn graphics aanpassen en 'borderen', anders staat het zo raar op 1600x1200 ofzo, zo'n 'niet afgesloten menu bar'.

[paragon]

hmm ik denk dat jij je even moet gaan verdiepen in css dit zijn nogal basic dingen nameljk

[tazzman]

Dat doe ik ook alleen ik krijg niet het gewenste effect eigenlijk. Ik gebruik gescheiden div's voor eigenlijk 3 area's: nav-bar (top), content area (middle), information-bar (bottum).

Ik wil dus eigenlijk dat de nav-bar en information-bar stretchen en de content-area een vaste width heeft en ook dus niet 'resized' of 're-format' wanneer de browser kleiner of groter gemaakt wordt. En die combinatie levert mij problemen op. Ik maak daar in mijn stylesheet verschillende entries voor ".navbar-style", ".content-style" etc waarin ik de width, position information, z-index etc zet.

Dat werkt prima voor de nav/info-bar, die stretchen mooi maar de content area is dan ook niet meer 'fixed'... dus wanneer je de browser kleiner maakt gaat ook meteen alle text schuiven en daar ben ik niet zo happy mee.

Tis dus meer de combinatie van die 2 dingen waar ik een beetje mee stoei nu. En tja dat het basis is ....je moet ergens beginnen natuurlijk.

[tazzman]

Laat dat bovenste maar zitten, ik heb hem al... ik had ergens een type foutje gemaakt.. ugh,. het was ook veel en veel te laat gisteravond Sorry!

[Verwijderd]

Euhm... Mischien iets te simpel, maar kan je niet gewoon een tabel maken (zover ik zie met 3/4 rows ) en dan bij je main content een textarea of een scroll divje gebruiken? Kan je eventueel ook nog met css de scrollbar aanpassen... Heb ik ook eens gedaan en toen kwam i op dit uit:

www.hvoskuil.com/sicvox/

Je moet er trouwens wel snel bij zijn, hij gaat over een dagje weer off-line . Niet erg prachtig, ik weet het, maar het voldoet d8 ik wel. Zet dan het hele gebeuren in een template je textarea/scroll divje in een editable region en klaar is kees

Over dat css heb ik alleen geen verstand

[Rickets]

Verwijderd schreef op 31 maart 2003 @ 17:22:
Euhm... Mischien iets te simpel, maar kan je niet gewoon een tabel maken (zover ik zie met 3/4 rows ) en dan bij je main content een textarea of een scroll divje gebruiken? Kan je eventueel ook nog met css de scrollbar aanpassen... Heb ik ook eens gedaan en toen kwam i op dit uit:

www.hvoskuil.com/sicvox/

Je moet er trouwens wel snel bij zijn, hij gaat over een dagje weer off-line . Niet erg prachtig, ik weet het, maar het voldoet d8 ik wel. Zet dan het hele gebeuren in een template je textarea/scroll divje in een editable region en klaar is kees

Over dat css heb ik alleen geen verstand

Dat is te merken. Als je nou eens de moeite neemt om het topic te lezen, zie je dat tabellen niet bedoeld zijn om layout mee te regelen. Afijn, ik ga het niet nog een keer herhalen, veel plezier met lezen.

[KompjoeFriek]

LOL @ site van Freak:

Copyrighted 3003/2004

[Scharnout]

Ah div-goeroes!

Harstikke leuk. Ik ben me eigen helemaal gek aan het divven. Voornamelijk om mijn site ook helemaal crossbrowser te krijgen. Maar de opzet die ik wil gaat echt niet lukken.

Ik wil:
- Vaste header die altijd blijft staan
- Vast footer die allemaal blijft staan
- In het midden content die scrollbaar moet zijn, maar uit 3 kolommen moet bestaan
- Dit alles gecentreerd in een browser displayen

Ik was er bijna met position: fixed, maar dat ondersteunt IE niet en dat is maar eeehhhh 98% van MIJN gebruikers. Dus dat lijkt me niet zo ok.

position:absolute en dan bottom: 0 . Jammer, maar als mijn content nogal veel is gaan footer en content door elkaar. En position: relative wordt helemaal een rotzooi.

Hoe kan ik het voor elkaar krijgen

[paragon]

Scharnout schreef op 01 April 2003 @ 00:08:
Ah div-goeroes!

Harstikke leuk. Ik ben me eigen helemaal gek aan het divven. Voornamelijk om mijn site ook helemaal crossbrowser te krijgen. Maar de opzet die ik wil gaat echt niet lukken.

Ik wil:
- Vaste header die altijd blijft staan
- Vast footer die allemaal blijft staan
- In het midden content die scrollbaar moet zijn, maar uit 3 kolommen moet bestaan
- Dit alles gecentreerd in een browser displayen

Ik was er bijna met position: fixed, maar dat ondersteunt IE niet en dat is maar eeehhhh 98% van MIJN gebruikers. Dus dat lijkt me niet zo ok.

position:absolute en dan bottom: 0 . Jammer, maar als mijn content nogal veel is gaan footer en content door elkaar. En position: relative wordt helemaal een rotzooi.

Hoe kan ik het voor elkaar krijgen

Is ook een beetje standaard het is gewoon positioneren en een div met een scrollbar erin <-- ongeveer. ik zal de code even geven om te centreren dit is verticaal een horizontaal;

code:

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

div.center { position:absolute;
                    left:50%;
            top:50%;
            width:400px;
            height:250px;
            margin-left:-200px;
            margin-top:-125px;
}

[tazzman]

auer

Rickets schreef op 31 maart 2003 @ 17:56:
[...]

Dat is te merken. Als je nou eens de moeite neemt om het topic te lezen, zie je dat tabellen niet bedoeld zijn om layout mee te regelen. Afijn, ik ga het niet nog een keer herhalen, veel plezier met lezen.

Yup dus ik ben nu met divjes bezig.

Is het wel okay om mijn bovenste menu-balk welk met tabellen te maken? Voor de rest wil ik gewoon divjes gebruiken maar mijn 'top menu' bestaat uit diverse graphics slices om hem 'stretchable' te maken. Of is het gebruik van tables uberhaupt uit den boze?

[siggy]

Werken divjes wel goed in niet ie browsers?

[Rickets]

tazzman schreef op 01 April 2003 @ 11:58:
auer
[...]


Yup dus ik ben nu met divjes bezig.

Is het wel okay om mijn bovenste menu-balk welk met tabellen te maken? Voor de rest wil ik gewoon divjes gebruiken maar mijn 'top menu' bestaat uit diverse graphics slices om hem 'stretchable' te maken. Of is het gebruik van tables uberhaupt uit den boze?

Nee hoor, je mag gerust tabellen gebruiken, maar niet voor layout
Alleen voor het weergeven van tabulaire data.
Voorbeeldje van w3:

code:

Cups of coffee consumed by each senator
 --------------------------------------
 |   Name  |Cups|Type of Coffee|Sugar?|
 --------------------------------------
 |T. Sexton|10  |Espresso      |No    |
 --------------------------------------
 |J. Dinnen|5   |Decaf         |Yes   |
 --------------------------------------
 |A. Soria |Not available             |
 --------------------------------------

[Scharnout]

paragon schreef op 01 April 2003 @ 08:54:
[...]


Is ook een beetje standaard het is gewoon positioneren en een div met een scrollbar erin <-- ongeveer. ik zal de code even geven om te centreren dit is verticaal een horizontaal;

code:

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

div.center { position:absolute;
                    left:50%;
            top:50%;
            width:400px;
            height:250px;
            margin-left:-200px;
            margin-top:-125px;
}

Dit is niet wat ik bedoel he. Dit snap ik ook nog wel. Ik positioneer het zelfs zo:

code:

div.center { position:absolute;
        margin-left:auto;
        margin-top:auto;
        width:770px;
}

en dan staat tie gewoon strak in het midden met de exacte width die ik wil.

het gaat mij erom dat ik een static header en footer heb en daartussen scrollable content in drie kolommen en omdat ik cross-browser wil blijven ook nog zonder javascript truukjes!

Geloof me. Dat is niet te vinden op het internet. Het probleem is dat bv 1 van de 3 kolommen langer kan zijn dan de andere en dan heb je al overlap. Dus ik vroeg me af of hier een goeroe zat die me kon helpen

Zowieso is met jouw oplossing mijn static footer nog neit opgelost hoor

[paragon]

hmm die code die ik gav was alleen voor het centreren en dan meteen vert/hor. Maar 3 kolommen in 1 div gooien en deze scrollable maken als dat nodig is. Echt het is niet zo heel erg moeilijk volgens mij.

Edit:
En ik denk dat die mijn code minstens net zo goed in het midden staat alleen staat daar de breedte op 400px, maar das makkelijk te veranderen.

Edit2:
en in jou voorbeeld moet het position:relative; zijn

[ Voor 37% gewijzigd door paragon op 01-04-2003 12:40 ]

[Scharnout]

paragon schreef op 01 April 2003 @ 12:29:
hmm die code die ik gav was alleen voor het centreren en dan meteen vert/hor. Maar 3 kolommen in 1 div gooien en deze scrollable maken als dat nodig is. Echt het is niet zo heel erg moeilijk volgens mij.

Gav? Goeie virusscanner, maar het heeft hier niets mee te maken hoor

Nog maar een keer zeggen dat ik wel snap wat jouw ding doet, maar je snapt volgens mij niet wat IK wil . Ik wil dat je ten alle tijde de header en footer blijft zien en dat ze statisch onder en boven staan. Als ik het op jouw manier de middelste div zou doen zeg maar. Heb ik een statische hoogte, terwijl die dynamisch hoort te zijn. Height: auto; gaat niet werken in dit geval en position absolute top 0 dan gaat hij door mijn header heen. Centreren is het probleem niet en scrollen doet tie altijd automagisch maar nu nog in mijn lay-out ok

Edit:
En ik denk dat die mijn code minstens net zo goed in het midden staat alleen staat daar de breedte op 400px, maar das makkelijk te veranderen.

Edit2:
en in jouW voorbeeld moet het position:relative; zijn

Sterker nog. Ik mijn voorbeeld heb je niet eens position nodig. Default is al goed!

Maar goed ... ik prutst wel verdert

[SillyJW]

paragon schreef op 01 April 2003 @ 12:29: ...
Echt het is niet zo heel erg moeilijk volgens mij. ...

Nee is het volgens mij ook niet, maar ik kan niet echt zeggen dat de reacties van Scharnout uitnodigen tot behulpzaam zijn...

[paragon]

Scharnout schreef op 01 april 2003 @ 12:59:
[...]

Gav? Goeie virusscanner, maar het heeft hier niets mee te maken hoor

Nog maar een keer zeggen dat ik wel snap wat jouw ding doet, maar je snapt volgens mij niet wat IK wil . Ik wil dat je ten alle tijde de header en footer blijft zien en dat ze statisch onder en boven staan. Als ik het op jouw manier de middelste div zou doen zeg maar. Heb ik een statische hoogte, terwijl die dynamisch hoort te zijn. Height: auto; gaat niet werken in dit geval en position absolute top 0 dan gaat hij door mijn header heen. Centreren is het probleem niet en scrollen doet tie altijd automagisch maar nu nog in mijn lay-out ok

[...]

Sterker nog. Ik mijn voorbeeld heb je niet eens position nodig. Default is al goed!

Maar goed ... ik prutst wel verdert

Volgens mij is de default namelijk relative, maar jij geeft absolute aan dus ik verbeter je alleen. Wat jij wilt is een header die fixed is en een footer die fixed is, maar het midden moet resizen naar resolutie of gewoon ook een vaste grote hebben en scrollen? En als je mijn spelling zo graag wilt verbeteren let dan ook op die van je zelf. Het is namelijk: te allen tijde en IK schrijf je nog altijd zonder hoofdletters.

[paragon]

SillyJW schreef op 01 April 2003 @ 13:19:
[...]
Nee is het volgens mij ook niet, maar ik kan niet echt zeggen dat de reacties van Scharnout uitnodigen tot behulpzaam zijn...

Ja begrijp eigenlijk ook niet waarom ik er nog over nadenk.

[Willem]

Mensen, houd het gezellig aub

[SillyJW]

willem169 schreef op 01 april 2003 @ 13:35:
Mensen, houd het gezellig aub

owkee

Misschien dat deze schets je kan helpen Scharnout. Ik hoop dat het een btje duidelijk is, maar dit is een grove schets van hoe je de opbouw met divjes zou kunnen maken. Dit is toch wat je bedoelt?

code:

<div id="gencentreerd">
    <div id="header"></div>
    <div id="content">
        <div id="kolom1"></div>
        <div id="kolom2"></div>
        <div id="kolom3"></div>
    </div>
    <div id="footer"></div>
</div>

[paragon]

Das nou precies wat ik in gedachten had. vanuit dat idee kan je alle kanten op header en footer wel of niet in de gecentreerde div etc.

[ Voor 55% gewijzigd door paragon op 01-04-2003 14:45 ]

[Scharnout]

Bijna precies helemaal

Excuses als mijn antwoorden bot overkomen. ik waardeer elke hulp die ik krijg natuurlijk, maar ik heb hier op mijn werk neit de mogelijkheid om even een plaatje up te loaden.

Het plaatje komt in alles overeen, maar dan staat de header helemaal bovenaan en de footer helemaal onderaan. De pagina is dus alleen vertikaal gecentreerd. Volgens mij is het redelijk hetzelfde op te lossen. Het probleem wat ik dan heb ik is hoe ik de content van de 3 kolommen allemaal in de top laat beginnen. Dat krijg ik absoluut nog niet werkend. Die drie kollommen overlappen dan de footer. Ik zal thuis proberen even wat te maken.

Maar wat is de css van dit plaatje dan?

[SillyJW]

Scharnout schreef op 01 April 2003 @ 14:48:
... Excuses als mijn antwoorden bot overkomen. ...

no problemo

Scharnout schreef op 01 April 2003 @ 14:48:
... Maar wat is de css van dit plaatje dan?

Het is 'slechts' een html-schetsje. De exacte css mag je zelf bedenken..
Ik probeerde je alleen een beetje op weg te helpen.

[ Voor 10% gewijzigd door SillyJW op 01-04-2003 15:33 ]

[edie]

Scharnout schreef op 01 april 2003 @ 00:08:
Ik wil:
- Vaste header die altijd blijft staan
- Vast footer die allemaal blijft staan
- In het midden content die scrollbaar moet zijn, maar uit 3 kolommen moet bestaan
- Dit alles gecentreerd in een browser displayen

Ik was er bijna met position: fixed, maar dat ondersteunt IE niet en dat is maar eeehhhh 98% van MIJN gebruikers. Dus dat lijkt me niet zo ok.

position:absolute en dan bottom: 0 . Jammer, maar als mijn content nogal veel is gaan footer en content door elkaar. En position: relative wordt helemaal een rotzooi.

Hoe kan ik het voor elkaar krijgen

position: fixed; is daar voor bedoeld.

Dat IE het niet ondersteund is hun fout.
Of je moet 'ranzige' javascriptjes gaan schrijven, zoals op http://www.ah.nl, maar dat is natuurlijk niet de bedoeling (waarom is er anders CSS?)

Willen je gebruikers toch iets zien, moeten ze maar een echte browser instaleren (tenzij het op een bedrijfsnetwerk zit, dat wordt het wat moeilijker;)), of genoegen nemen met een mindere layout en hopen dat het in IE 7 wel goed wordt ondersteund.

Ik zou gewoon correct CSS1 en/of CSS2 gebruiken.

offtopic:
Deze post is natuurlijk overladen met mijn mening; het zijn geen feiten. Ik hoop dat ik niemand hiermee tegen de borst stoot. Ook is het niet mijn bedoeling om een IE/Opera/Mozilla flamewar te beginnen.

[SillyJW]

SillyJW schreef op 01 April 2003 @ 15:32:
... Ik probeerde je alleen een beetje op weg te helpen.

En? Hoe staat het er mee?

edit:
URL ge-updeet

[ Voor 14% gewijzigd door SillyJW op 18-05-2003 00:57 ]

[Scharnout]

SillyJW schreef op 01 april 2003 @ 17:45:
[...]
En? Hoe staat het er mee?

Via een bijzonder tactisch geplaatste link in deze post ben ik een stuk wijzer geworden Many thanks. ik heb hem al bijna volledig aan mijn wensen aan te passen. Alleen die footer nog Maar op deze manier heb ik er al vrede mee

Ik studeer en speel er nog even mee. Weer wat geleerd!

[SillyJW]

Als je die html zo gaat overnemen, zou ik de style elementen wel even in een externe style-sheet plaatsen.. Zoals ik het heb gedaan is wel leuk om ff te experimenteren, maar overzichtelijk is anders.

[tazzman]

Ben ik weer

Ben ook wat verder gekomen dankzij de replies hier!

<Vraag weer weggehaald, ik ben er al weer uit!!! .. had even het verschil tussen relative en absolute verkeerd begrepen duh! >

Nieuwe vraag

De indeling van de pagina is dus als volgt:

[header-div, width 100%, height 120px]
[content-area, width 900px, left 25px, height is flexible naar content]
[footer-div, width 100%, height 23px]

Nu zijn de positioning van deze 3 relative waardoor ze allen netjes de 'HTML flow' volgen en dus logisch op het scherm gezet worden.

Maar nu het volgende. Ik wil dat de footer-div dus altijd onder de content-aera staat. Maar wanneer de content area kleiner is dan de beschikbare ruimte ("live browser window" volgens dit mooie boek voor me hierzo) dan wil ik dat de footer onder aan de pagina staat.

Dat zou ik met Javascript kunnen doen.. ik zou wellicht zoiets kunnen doen ?

if (content-area.style.height < (live-browser-window.height - header-div.style.height - footer-div.height - 20)
{
footer-div.style.positioning = "absolute";
footer-div.style.top = (live-browser-window.height - footer-div.style.height);
}

Stukje pseudo code natuurlijk maar zoiets zou toch moeten werken? Maar .. het probleem is dat de content-area niet echt een "set height" heeft. Deze pagina met deze stylesheet wordt een soort van template en ik vul telkens de content area met.... content Ik heb geen flauw idee wat de eigenlijke height van die div wordt.

Maar als ik nu met een javascript functie die content-area.style.height opvraag dan is deze telkens leeg.. ? Ik moet dus kunnen bepalen of de content-area groot genoeg is om de pagina te vullen en zo niet, dan wil ik zelf de footer onderaan de pagina plaatsen.

Weet iemand hoe ik zoiets voor elkaar kan krijgen of probeer ik nu onnodig moeilijk te doen? Wat ik wil voorkomen is dat, wanneer de content-area weinig informatie bevat, de footer-div (een mooi blauw balkje) netjes onderaan de pagina komt te staan. Ik weet niet of dit met CSS kan of dat ik toch Javascript hiervoor moet gebruiken.

[ Voor 173% gewijzigd door tazzman op 02-04-2003 14:56 ]

[Scharnout]

SillyJW schreef op 01 April 2003 @ 20:55:
Als je die html zo gaat overnemen, zou ik de style elementen wel even in een externe style-sheet plaatsen.. Zoals ik het heb gedaan is wel leuk om ff te experimenteren, maar overzichtelijk is anders.

Dat heb ik natuurlijk gedaan. Helemaal aangepast aan eigen wensen

[SillyJW]

tazzman schreef op 02 April 2003 @ 13:12:
[...] Ben ook wat verder gekomen dankzij de replies hier! [...]

Tis jouw topic, dus das mooi

tazzman schreef op 02 April 2003 @ 13:12:
[...] Maar nu het volgende. Ik wil dat de footer-div dus altijd onder de content-aera staat. Maar wanneer de content area kleiner is dan de beschikbare ruimte ("live browser window" volgens dit mooie boek voor me hierzo) dan wil ik dat de footer onder aan de pagina staat. [...]

Bedoel je zoiets? Ben daar zelf ook ffies mee aan t spelen geweest...
Het werkt nog niet helemaal zoals ik wil, maar misschien helpt t je weer verder.

[tazzman]

ja en dan dat ie automatisch onderaan de pagina staat .. maar alleen als er niet "genoeg content is"

[Blaise]

Dat probleem is eenvoudig op te lossen met JS:

code:

<script>
function move()
{
down = document.body.scrollHeight + 'px';
document.getElementById('divId').style.top = down;
}
</script>

<body onload="move()">

<div id='divId' style='position:absolute;'>

edit:
Of doe ik nou heel moeilijk?

[ Voor 57% gewijzigd door Blaise op 02-04-2003 20:23 ]

[tazzman]

Nee.. close maar nog niet helemaal wat we willen geloof ik Want.. de scrollheight is de lengte van de pagina, right? Dus dan moeten we eerst kijken of we onderste balk wel moeten aanpassen.

Dit heb ik nu even snel geschreven (aan de hand van je script hierboven, waarvoor hulde - het was erg behulpzaam!!) en dit werkt nu goed bij mij! Moet het nog even verder testen maar als de content nu niet screen-vullend is, dan plaatsen we de onderste balk zelf, is hij dat wel. dan plakken we hem gewoon aan de content-div

code:

function fmovelowbar()
    {
      var scrollheight;
      var lowbarpos;
    
      scrollheight = document.body.scrollHeight;
      if (scrollheight < screen.height)
        {
          lowbarpos = screen.height - 23 - 256;
          obj_lowbar.style.top = lowbarpos; 
        }
    }

Hierbij heb ik wel de "lowbar div" op position:relative staan ten opzichte van de andere divjes (content en topbar) maar dit werkt nu goed op verschillende resoluties bij mij. De 23 is de pixel height van mijn lowbar div en de 256 heb ik nodig om hem precies passend te krijgen.

[ Voor 85% gewijzigd door tazzman op 03-04-2003 00:57 ]

[Verwijderd]

ligt dit aan mij of is dit geen basic shit?

[SillyJW]

tazzman schreef op 03 april 2003 @ 00:49:
Nee.. close maar nog niet helemaal wat we willen geloof ik Want.. de scrollheight is de lengte van de pagina, right? Dus dan moeten we eerst kijken of we onderste balk wel moeten aanpassen. [...]

Ik heb nog geen tijd gehad om verder te klooien met dat voorbeeldje van mij met zo'n onderste balk, maar dit moet toch ook te doen zijn met alleen css.

Ik bedoel; het hele css verhaal is er toch niet om dicht te worder getimmerd met allerlei javascriptjes? Dan wordt het weer eenvoudiger om gewoon een tabelletje te maken.

[tazzman]

Verwijderd schreef op 03 April 2003 @ 02:18:
ligt dit aan mij of is dit geen basic shit?

Ja dat kan best, en wat is je bijdrage hiermee aan dit topic?

[tazzman]

SillyJW schreef op 03 April 2003 @ 09:39:
[...]
Ik heb nog geen tijd gehad om verder te klooien met dat voorbeeldje van mij met zo'n onderste balk, maar dit moet toch ook te doen zijn met alleen css.

Ik bedoel; het hele css verhaal is er toch niet om dicht te worder getimmerd met allerlei javascriptjes? Dan wordt het weer eenvoudiger om gewoon een tabelletje te maken.

Daar heb je gelijk in.. ik wil ook een script-free oplossing kunnen bedenken. Alleen volgens mij kan je niet ALLES met CSS doen zoals het uitrekenen van posities etc.. of wel? Ik heb het nog nergens gelezen eigenlijk.