[Alg] Hoe layout bewerkstelligen dmv HTML + CSS* - Softwareontwikkeling

woensdag 27 februari 2008 15:22

Acties:

Twentse Boer en ICT'er

Topicstarter

Ik ben al aan paar dagen bezig met het programmeren van een mooie website... maar het ik heb toch maar beslotten dat ik liever geen frameset wil gebruiken, maar de layout wil maken met het <Table> element in html.

Nu zit ik met een kleine vraag waar ik het probleem niet op weet.

Neem het volgende voorbeeld

code:

f<html>
<Head>
<title>voorbeeldje</title>
</head>

<frameset cols="*,850,*">
<frame src="">
    <frameset rows="150,20,*,20">
    <frame src="">
    <frame src="">
    <frame src="">
    <frame src="">
    </frameset>
<frame src="">
<frame src="">
</frameset>

</html>

Dit is de opmaak in frames die ik nu gebruik, het zorgt ervoor dat mijn middelste colom precies in het midden staat en dat de twee buitenste elke even groot zijn...door gebruik te maken van het *

Hetzelfde heb ik ook gedaan voor het de rijen, 150px voor mijn banner en 20px voor mijn menu en dan een een 20px footer onderin met daar tussen een frame met variable hoogte zodat het altijd netje de browser vult...

Maar nu komt het ik heb het geprobeert met frame en ben er achter dat ik wel percentages kan gebruiken voor de hoogte en de breedte, maar geen * en dus kan ik die zelfde layout niet voor elkaar krijgen.....heeft iemand een idee hoe ik dit kan oplossen ?

Naar mijn idee moet ik de tabel gewoon centreren en dan staat hij in het midden.
Maar hoe krijg ik die middelste cel zover dat hij de ruimte dynamisch invult ?

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

woensdag 27 februari 2008 15:26

Acties:

BtM909

Watch out Guys...

Teken je layout eens uit in een willekeurig tekenprogramma en laat je design zien. Ik kan je bijna garanderen dat je met technieken uit 2005

je website behoorlijk netjes kan bouwen zonder terug te moeten vallen naar Tables voor layout.

Dat deed je vroeger in 1996 omdat je je design niet goed kon weergeven. Tegenwoordig zijn daar veel makkelijkere technieken voor

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 27 februari 2008 15:44

Acties:

whoami

Een table gebruik je alleen om tabulaire data in voor te stellen. Indien je niets tabulairs wilt tonen, dan moet je geen table gebruiken.

Verder hoort dit topic niet thuis in PRG, maar in WEB. (HTML , CSS, etc... --> WEB )

-> web

https://fgheysels.github.io/

woensdag 27 februari 2008 15:46

Acties:

Standeman

Prutser 1e klasse

whoami schreef op woensdag 27 februari 2008 @ 15:44:
Een table gebruik je alleen om tabulaire data in voor te stellen. Indien je niets tabulairs wilt tonen, dan moet je geen table gebruiken.

Verder hoort dit topic niet thuis in PRG, maar in WEB. (HTML , CSS, etc... --> WEB )

-> web

Of het is een hobby-site en je bent nog niet bekwaam in CSS. Dan kan je imo prima tables gebruiken voor de layout. Het is allemaal net iets makkelijker!

Uiteraard heb je wel gelijk

The ships hung in the sky in much the same way that bricks don’t.

woensdag 27 februari 2008 16:07

Acties:

Niemand_Anders

Dat was ik niet..

Geef je tabel een breedte en tevens ook de linker en rechter kolom. De middelste kolom krijgt dus geen breedte toegekend. Vrijwel alle browsers zullen dan de middelste kolom zo breed maken dat deze alle ruimte tussen de linker en rechter kolom opneemt.

Het gebruik van div's voor het plaatsen is eigenlijk wel beter, misschien zelfs voor een beginnen zodat je het niet 'verkeerd' aan leert, maar het gebruik van tables in zeker in het begin een stuk eenvoudiger. Je hebt in elk geval minder problemen tussen de verschillende browsers.

If it isn't broken, fix it until it is..

woensdag 27 februari 2008 16:10

Acties:

Dennahz

Life feels like hell should.

Tabellen zijn helemaal niet eenvoudiger, hoe komen jullie daar bij ? En daarbij, als je het nog moet leren kan je het beter gelijk goed leren dan het achteraf weer af te moeten leren.

Tip voor de TS: kijk eens op www.w3schools.com en volg daar eens wat tutorials over CSS. Als je dat eenmaal meester bent kan je alles tot op de pixel nauwkeurig bepalen in plaats van te zitten prutsen met colspan en rowspan met tabellen.

Twitter

woensdag 27 februari 2008 16:47

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

Afbeeldingslocatie: http://www.beekman-net.com/voorbeeldje.png

dit is mijn idee, ik wil gewoon een header met een simpel menu eronder en een footer.
Echter moet de 850px breede centrale kolom precies in het midden staan aangezien dat mooier vind

en de middelste cell moet een variable hoogte hebben.

als het venster dus 1024 x 786 pixels groot is dan moeten de bijde rijen aan de zijkanten dus ieder een dynamische breedte van 162px krijgen en een hoogte van 100%

Ook moet de centrale cell in het midden met de iframe ervoor zorgen dat de pagine de volledige hoogte van het venster heeft....in dit geval moet die dus een hoogte van 786 - 190 = 596px

door bij een frame gebruik te maken van een * lukt me dit wel, maar ik wil geen hele zooi met html bestanden, ik wil er maar 1 + een css bestand.

kan iemand mij een suggestie doen hoe ik dit kan oplossen ? en of hoe dit zonder frames en zonder tables gedaan kan worden ?

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

woensdag 27 februari 2008 16:54

Acties:

disjfa

be

1 container div maken. Deze centreren. Dan de head en menu erin zetten. En de content daar onder.

Je opzet is 2 seconden werk, behalve als je een gedachtengang hebt als de ts.

Gooi frames aub uit je gedachtengang. Die heb je hier 0,0 nodig. En ook die tabellen zijn een beetje nutteloos.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 27 februari 2008 16:58

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

Dat is leuk disjfa, maar ik heb er nog niet zoveel verstand van dat ik zomaar weet of snap wat een div container is, zou je dat uit kunnen leggen en/of een voorbeeldje kunnen maken ?

Ik ben zelf systeem en netwerkbeheerder, maar hier heb ik geen kaas van gegeten helaas....daarom wil ik het ook graag leren.

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

woensdag 27 februari 2008 17:20

Acties:

Verwijderd

Een div is gewoon een element waar info in kan staan. Net zoiets als een table cell, alleen dan bedoeld voor opmaak. Deze kun je classes meegeven met class="headertje". Deze kun je met je CSS stylesheet opmaak geven.

woensdag 27 februari 2008 17:59

Acties:

spaceninja

Je kan je zelf een beetje gaan inlezen dmv tutorials zoals deze:
http://www.yourhtmlsource.com/stylesheets/csslayout.html

of je kunt gewoon "kant en klare" layouts downloaden en bekijken hoe die het precies gedaan hebben:
http://www.code-sucks.com/css%20layouts/

donderdag 28 februari 2008 01:19

Acties:

Fuzzillogic

Cool

Tabellen zijn "makkelijk" in de zin van dat MSX BASIC "makkelijk" is. Conceptueel zijn ze eenvoudig te begrijpen, maar dat maakt ze dan meteen ook inflexibel, waardoor je snel tegen de grenzen aanloopt.

CSS is niet ontwikkeld om het beginnende hobbyisten moeilijk te maken. Het is gemaakt zodat je met kennis van zaken snel en gestructureerd het gewenste effect kunt maken. Het sleutelwoord is dus: "kennis van zaken". Hoe je dat bemachtigt behoeft geen uitleg hoop ik

donderdag 28 februari 2008 08:51

Acties:

reddevil

Trekkerkearl schreef op woensdag 27 februari 2008 @ 16:58:
Dat is leuk disjfa, maar ik heb er nog niet zoveel verstand van dat ik zomaar weet of snap wat een div container is, zou je dat uit kunnen leggen en/of een voorbeeldje kunnen maken ?

Ik ben zelf systeem en netwerkbeheerder, maar hier heb ik geen kaas van gegeten helaas....daarom wil ik het ook graag leren.

Wat zeer interessant dan is, is om het boek van O'Reilly 'Head First HTML with CSS & XHTML' te bekijken

donderdag 28 februari 2008 08:53

Acties:

AtleX

Tyrannosaurus Lex 🦖

Standeman schreef op woensdag 27 februari 2008 @ 15:46:
[...]

Of het is een hobby-site en je bent nog niet bekwaam in CSS. Dan kan je imo prima tables CSS gebruiken voor de layout. Het is allemaal net iets makkelijker! Dan leer je er nog iets van!

Da's beter

Uiteraard heb je wel gelijk

Weet ik.

Sole survivor of the Chicxulub asteroid impact.

donderdag 28 februari 2008 08:56

Acties:

disjfa

be

AtleX schreef op donderdag 28 februari 2008 @ 08:53:
[...]
Da's beter

Je leert ook wat van tabellen hoor. Hoe html ooit opgebouwd werd en waar het vandaan komt. Ik heb een colega opgevoed in de leer van html en hij had nooit een tabel gezien buiten tabulaire data. Daar heb je dus geheel 0,0 aan als ze een iets oudere website zien

Of als je een keer een html mailing wilt maken, dan is het ook van belang.

Disclaimer:
Dit is geen handige tip voor de TS, maar een mening van mij die niet voor de TS geschreven is, haal hier dus niet uit dat je het toch met tabellen moet gaan doen.

[ Voor 16% gewijzigd door disjfa op 28-02-2008 08:58 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 28 februari 2008 10:45

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Niemand_Anders schreef op woensdag 27 februari 2008 @ 16:07:

Het gebruik van div's voor het plaatsen is eigenlijk wel beter, misschien zelfs voor een beginnen zodat je het niet 'verkeerd' aan leert, maar het gebruik van tables in zeker in het begin een stuk eenvoudiger. Je hebt in elk geval minder problemen tussen de verschillende browsers.

nee, het gebruik van tabellen leidt to méér problemen, als je wist hoeveel mensen hier met problemen komen waartegen ze dankzij hun tabellen layout oplopen, en die eenmaal op te lossen zijn door een qua achterliggende structuur veel eenvoudigere opbouw in 'eenvoudige Elementen' (tabellen zijn namelijk best wel ingewikkelde HTML-elementen, met Table-rows- table-cells, headers etc. die allemaal onderling gerelateerd gerenderd worden)

Er is wel een grond waarom beginners veelal denken dat tabellen eenvoudiger zijn, omdat het voorkomt dat men al te 'abstract' moet denken, bv een tabel geeft direkt al 'borders' aan, die duidelijk weergeven wat de afmetingen van het element in hun code hebben..

Wat echter veel handiger is, is om bij het bouwen van de allereerste 'initiele code' waarbij je eigenlijk je enkel bezighoud met de positionering en afmeting van elementen,
ervoor te zorgen dat de eenvoudige elementen die je benut een 'border: 1px solid red;' hebben (of voor verschillende elementen verschillende kleuren gebruiken)...
dat biedt je de mogelijkheid je te concenteren op enkel de 'afmetingen' en 'positie, net zoals een tabel met border je dat gelijk al biedt ..
bepaalde hulpmiddelen voor webbouwers, bv de 'develloper-toolbar-extentie in firefox' bieden ook expliciet die functionaliteit... zelfs ervaren webbouwers vinden dat veelal handig

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 28 februari 2008 11:45

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

Ik heb vanochtend even liggen testen met dat /div gebeuren....en met goed gevolg.

Check mijn test site

ik heb mijn banner en daaronder het menu met aan de bodem van de pagina een footer.

ik heb het volgende al geleerd na een zware google sessie.

- Als de content niet in het middelste venter past, dan voegt hij hier zelf een scrollbar aan toe

code:

1	overflow:auto;

- En ik kan hem ook de hoogte van de div laten aanpassen aan de content.

code:

1	min height= "" maxheight= ""

Geweldig, dit is een perfect systeem, maar nog steeds krijg in de middelste div niet zover dat hij de resterende hoogte aanneemt.
Als ik heb 100% als hoogte instel, dan staat mijn footer nog ver buiten beeld en "*" pakt hij niet.

Weet iemand hoe ik heb de resterende hoogte kan laten invullen door de middelste div ?

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

donderdag 28 februari 2008 11:52

Acties:

_eXistenZ_

Je layout staat op http://gerlinda.exhost.nl. _{Geen spam, tis me zusjes site maar kijk es daaro hoe ik het gedaan heb.}

Overigens zijn framesets uit 1988, dus die _helemaal_ niet gebruiken, en tables zijn er dus alleen voor als je tabellen wilt weergeven, niet voor je layout, zoals hierboven al gezegd werd, dus als je het nog allemaal moet leren leer dan gelijk hoe divs werken

[ Voor 131% gewijzigd door _eXistenZ_ op 28-02-2008 11:56 ]

There is no replacement for displacement!

donderdag 28 februari 2008 12:29

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

_eXistenZ_ schreef op donderdag 28 februari 2008 @ 11:52:
Je layout staat op http://gerlinda.exhost.nl. _{Geen spam, tis me zusjes site maar kijk es daaro hoe ik het gedaan heb.}

Overigens zijn framesets uit 1988, dus die _helemaal_ niet gebruiken, en tables zijn er dus alleen voor als je tabellen wilt weergeven, niet voor je layout, zoals hierboven al gezegd werd, dus als je het nog allemaal moet leren leer dan gelijk hoe divs werken

leuke zus

verder wel een leuke site maar het helpt me niet veel verder helaas.

Ik heb je ccs file erop nagezien en er staat het volgende:

code:

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

....

#container {
    position: relative;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    width: 980px;
    border-style: none;
    margin: 0 auto;
    background-image: url("../images/background.png");
    background-repeat: repeat-y;
}

...

div#inhoud {
    display: block;
    padding: 15px 40px 55px 40px;
    width: 900px;
    z-index: 2;
    text-align: center;
}
...

ik heb mijn CSS bestand hieraan aangepast, het werk nog niet.
ik snap er niets meer van, waarom doet hij het niet....

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

donderdag 28 februari 2008 14:07

Acties:

_eXistenZ_

Wat is de relevante HTMLcode die hier bij hoort?
/edit
Sorry niet goed gelezen...

Snap je het idee van CSS styles die je aan een bepaald element hangt met die naam?
Dus #container {blaat} in CSS betekend dat je in je html je div id="wrapper" ook moet vervangen voor div id="container"

[ Voor 81% gewijzigd door _eXistenZ_ op 28-02-2008 14:11 ]

There is no replacement for displacement!

donderdag 28 februari 2008 14:22

Acties:

reddevil

Om te beginnen moet je even zorgen dattie ook centreert in IE (body op text-align: center en wrapperdiv text-align: left)

donderdag 28 februari 2008 15:06

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

maak me gek

Ik heb alles gedelete en ben opnieuw begonnnen.
Ik heb een simpel css bestandje met alle 5 divs erin inclusief alle code die jij gebruikte.

De pagine staat in het midden en de divs doen het goed bij mij op de computer, alleen op mijn webpagine valt de footer ineens weg

Ik heb eerst een rode div genaamt container gemaakt die 850px breed is en 100% hoog.
Hier staan alle andere divs binnen in en de dynamische heeft weer 100% als hoogte gekregen.

Zonder die tweede 100% is er geen enkel probleem de container div had netjes de hoogte van de browser

toen ik hem teste.
ligt dit nou aan mij of hoe zit dat ?

ik heb al geprobeert om de hoogte als "auto" in te stellen, maar ook daar geen sigaar.

ik probeer nog even verder want ik zie de fout niet, maar ik blijf proberen.

[ Voor 12% gewijzigd door Trekkerkearl op 28-02-2008 15:13 ]

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

donderdag 28 februari 2008 16:11

Acties:

Clay

cookie erbij?

disjfa schreef op donderdag 28 februari 2008 @ 08:56:
[...]

Of als je een keer een html mailing wilt maken, dan is het ook van belang.

Die wil je nooit maken

hoogstens moet dat soms.

Ik heb je ccs file erop nagezien en er staat het volgende:

Die komt hiervandaan: http://www.xs4all.nl/~peterned/examples/csslayout1.html
Herken het aan de schrijffout in de comment

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 28 februari 2008 17:17

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

dit gaat niet werken.....

De container div is netjes de juiste hoogte, echter als ik de content div height:100% mee geef dan wordt deze ook echt de volledige hoogte van de browser, omdat hier dan nog de hoogte van de andere divs bij komt valt de footer en een gedeelte van de conecte div buiten beeld.

Ik heb het met padding geprobeert en met height:auto maar niets werkt.
Ik ga het nu anders aan pakken.

Ik wil een div van 850 x 600 pixels precies midden op de pagine hebben zodat ik dit content div een vast hoogte kan meegeven (ik wilde niet zo moeilijk meer doen).
Echter lukt me dat ook al niet.

Ik gebruikte "left-margin:auto ;rightmargin:auto" om hem precies in het midden te krijgen en dat werkte.
maar als ik "top-margin:auto bottom-margin:auto" toevoeg blijf hij toch bovenin hangen ?

weet iemand hoe ik de container div kan centeren op de pagina ?

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

donderdag 28 februari 2008 20:55

Acties:

Fuzzillogic

Cool

Trekkerkearl schreef op donderdag 28 februari 2008 @ 17:17:
weet iemand hoe ik de container div kan centeren op de pagina ?

Het kan, maar je zult moeten gaan werken met floats en clears etc. Zie het als een "gemis" van CSS. Maar de vraag is eigenlijk: weet je zeker dat je het wilt? Vertikaal centreren betekent vaak dat je een vaste hoogte hebt voor je site. En vaak zie je dan dat je in dat kleine vlakje weer moet gaan scrollen om alle tekst te kunnen lezen. Ik noem ze 'kijkdoossites', waar je als het ware door een klein gaatje naar de site moet loeren. Strontvervelend!

vrijdag 29 februari 2008 09:01

Acties:

Trekkerkearl

Twentse Boer en ICT'er

Topicstarter

jah, dat kan wel wezen, maar de andere manier werkt al helemaal niet.
Ik wordt helemaal gek.

Frames-> werken wel maar zij verschrikkelijk oud en je mot te veel html bestanden hebben.
Tables -> kan je blijkbaar zeer slecht gebruiken voor een layout.
Divs -> kan ik niet verticaal gecentreerd krijgen, zucht.

Ik heb d’r nich veur keuzn Tukker te wean, ik heb gewoon onmeunig mazzel had!

vrijdag 29 februari 2008 10:52

Acties:

Clay

cookie erbij?

@Dennis
De container div is netjes de juiste hoogte, echter als ik de content div height:100% mee geef dan wordt deze ook echt de volledige hoogte van de browser, omdat hier dan nog de hoogte van de andere divs bij komt valt de footer en een gedeelte van de conecte div buiten beeld.

Nogmaals, lees dit dan: http://www.xs4all.nl/~peterned/examples/csslayout1.html

weet iemand hoe ik de container div kan centeren op de pagina?

Als die een vaste breedte/hoogte heeft kan je hem top en left van 50% geven, en dan een negatieve linker en top margin van de helft van (respectievelijk) de breedte en hoogte. Dus, als je ding 640x480 is, left:50%; top:50%; margin:-240px 0 0 -320px;

Je zou dan wel wat met min-height's en widths moeten doen dat de boel niet linksboven het beeld uit gaat als de viewport te klein wordt.

@fuzzy
Het kan, maar je zult moeten gaan werken met floats en clears etc. Zie het als een "gemis" van CSS.

Vertikaal centreren kan atm niet met floats

CSS 3 gaat veel meer mogelijkheden bieden qua layouting, maar het grote probleem is ueberhaupt dat de ondersteuning van properties zwaar achterloopt met de specs zelf. Het is dus geen gemis van CSS.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 29 februari 2008 12:30

Acties:

_eXistenZ_

[b][message=29679680,noline]

Die komt hiervandaan: http://www.xs4all.nl/~peterned/examples/csslayout1.html
Herken het aan de schrijffout in de comment

Lol wel van een andere site, maar deze CSS is al like 10 keer overgeerft van een andere (zelfgemaakte) site en die comments laat ik altijd staan

Dus wss komt et uiteindleijk wel daar vandaan, of ze hebben mijn code geript

There is no replacement for displacement!

vrijdag 29 februari 2008 13:40

Acties:

Fuzzillogic

Cool

Clay schreef op vrijdag 29 februari 2008 @ 10:52:

Vertikaal centreren kan atm niet met floats CSS 3 gaat veel meer mogelijkheden bieden qua layouting, maar het grote probleem is ueberhaupt dat de ondersteuning van properties zwaar achterloopt met de specs zelf. Het is dus geen gemis van CSS.

Het kan wel, floats is een onderdeel van het verhaal. Zonder floats/clears gaat het mis. Sorry, ik kan geen voorbeelden geven.. geen tijd voor om op te zoeken.

zaterdag 1 maart 2008 10:43

Acties:

f.v.b

In het voorbeeld hieronder is de content altijd gecentreerd. Dat heeft wel tot gevolg dat delen van de pagina aan de linkerkant buiten beeld verdwijnen op het moment dat het venster smaller is dan 800 pixels.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"><!--

#centered
{
  position: absolute;
  width: 800px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -400px;
  background-color: #FF8;
}

--></style>
</head>
<body>
  <div id="centered">Lorem ipsum</div>
</body>
</html>

Argh. Dubbelpost. Ik had niet gezien dat er ook nog een pagina 2 was.

[ Voor 5% gewijzigd door f.v.b op 01-03-2008 11:01 ]

Don't erase all files?
[Yes] [No]