[HTML] Tabellen in design niet goed... - Softwareontwikkeling

maandag 12 september 2005 22:00

Acties:

Topicstarter

Beste mensen,

Ik ben begonnen met het ontwerpen van een website en daarvoor heb ik even gauw een schets gemaakt. Hierbij maakt ik gebruik van een aantal tabellen. Alleen is daarbij een probleem.

Als de regel verspingt en de pagina zit vol genoeg om de pagina uit te rekken, gaan de verkeerde tabellen links uitrekken. Ik wil namelijk dat de pagina zich aan de onderkant uitrekt en daarbij niet het menu, links en rechts, meetrekt. Ik weet dat dat het risico van tabellen is en dat dat erg lastig is op te lossen. Mij lukt dat dus niet... Hopelijk jullie wel

.
Om te zien hoe dat eruit ziet, kunt u hier zien. Daar ziet u dat het niet erg mooi is. Ik wil graag dat de rode stukken zo ver mogelijk uitstrekken en niet het menu. Dat zou de pagina een stuk mooier maken.
Zouden jullie me kunnen helpen?

ALvast bedankt $_/-\o_$ ,
masser120

[ Voor 9% gewijzigd door masser120 op 12-09-2005 22:01 ]

maandag 12 september 2005 22:59

Acties:

StalieN

je zou eigenlijk niet met tabellen moeten werken... semantisch gezien is dat niet goed (www.w3.org) en nu zorgt het ook nog eens voor het probleem wat je zelf aankaart... je zou dus met <div> kunnen werken:

XML:

...
<body>

    <div id="boven">
        [img]"boven.jpg"[/img]
    </div>
    
    <div id="left">

        <div id="leftMenuTop">
            <p>text menu 1</p>
        </div>
        
        <div id="leftMenuBottom">
            <p>text menu 2</p>
        </div>
        
    </div>
    
    <div id="center">

        <div id="leftMenuTop">
            <p>dit is alle tekst in het midden</p>
        </div>
       
    </div>
    
        <div id="right">

        <div id="rightMenuTop">
            <p>text menu 3</p>
        </div>
        
        <div id="rightMenuBottom">
            <p>text menu 4</p>
        </div>
        
    </div>
    
    <div id="onder">
        [img]"onder.jpg"[/img]
    </div>

</body>
...

zoiets... je kan dit geheel nog in een <div id="container"> zetten of een deel in een content div ofzo... en de boel stylen in css

www.stevelock.nl

maandag 12 september 2005 23:06

Acties:

Willem

Afgezien daarvan, wat heb je zelf al geprobeerd?

Motor onderhoud bijhouden

dinsdag 13 september 2005 10:40

Acties:

BtM909

Watch out Guys...

StalieN schreef op maandag 12 september 2005 @ 22:59:
je zou eigenlijk niet met tabellen moeten werken... semantisch gezien is dat niet goed (www.w3.org) en nu zorgt het ook nog eens voor het probleem wat je zelf aankaart... je zou dus met <div> kunnen werken:

Semantiek en je zou dus met <div>('s') kunnen werken gaan niet in 1 zin

http://www.rikkertkoppes.com/thoughts/smurf-language

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.

dinsdag 13 september 2005 10:58

Acties:

XangadiX

trepanatie is zóó kinderachtig

ow god, de Cascading Schutz Staffel trekt weer ten strijde hoor;

Semantiek en 'je zou dus...' kunnen BEST in 1 zin
En het grote nadeel van de CSS div bende is dat je er over het algemeen een beperktere vormgeving aan overhoud omdat je die niet meer volledig loskoppeld (immers het is semantisch en vorm volgt content) dat is een offer dat je niet altijd wil maken.

Neemt niet weg dat je met divs moet oplossen wat er met divs op te lossen is, en de TS moet inderdaad zijn tabellen het raam uitgooien en divjes gebruiken

Stoer; Marduq

dinsdag 13 september 2005 11:12

Acties:

Verwijderd

XangadiX schreef op dinsdag 13 september 2005 @ 10:58:

Semantiek en 'je zou dus...' kunnen BEST in 1 zin

Klopt. Er lopen alleen mensen met het idee rond dat websites niet met tabellen gemaakt moeten worden, en dat het dus per se met divs moet. Dat is natuurlijk onzin. Sommigen daarvan hebben mij ongetwijfeld weleens zien posten dat mensen gewoon HTML moeten gebruiken. Dat moet dan niet gelezen worden als: geen divs gebruiken. In veel gevallen komt het er uiteindelijk op neer dat de meeste websites in grove lijnen uit divs zullen bestaan, wat helemaal niet gek is. Meestal is dat prima.

In dit geval zou ik willen zeggen dat de topicstarter eerst maar eens zijn ontwerp af moet maken. Tegenwoordig is het heel vaak een kwestie van enkele achtergrondafbeeldingen aan wat elementen hangen, en dat was het dan wel. De HTML moet in elk geval zo min mogelijk afhankelijk zijn van het ontwerp. Heel vaak kun je de HTML al in grote lijnen schrijven voordat je uberhaupt een ontwerp hebt, als je tenminste een idee hebt van wat voor informatie er allemaal op een pagina moet komen.

dinsdag 13 september 2005 11:16

Acties:

BtM909

Watch out Guys...

XangadiX schreef op dinsdag 13 september 2005 @ 10:58:
ow god, de Cascading Schutz Staffel trekt weer ten strijde hoor;

Semantiek en 'je zou dus...' kunnen BEST in 1 zin

Het kan wel, maar om nou alles weg te gooien en overal divjes voor te gebruiken. Wat in het voorbeeld gegeven werd

. Wellicht las je mijn post in een verkeerde context? Om nou meteen Cascading Schutz Staffel uit je hoed te toveren vind ik ook weer

Verwijderd schreef op dinsdag 13 september 2005 @ 11:12:
[...]

Klopt. Er lopen alleen mensen met het idee rond dat websites niet met tabellen gemaakt moeten worden, en dat het dus per se met divs moet. Dat is natuurlijk onzin. Sommigen daarvan hebben mij ongetwijfeld weleens zien posten dat mensen gewoon HTML moeten gebruiken. Dat moet dan niet gelezen worden als: geen divs gebruiken. In veel gevallen komt het er uiteindelijk op neer dat de meeste websites in grove lijnen uit divs zullen bestaan, wat helemaal niet gek is. Meestal is dat prima.

Grappig, want jouw post sluit meer aan op die van mij, maar het lijkt alsof je de lijn verder trekt van XangadiX?

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.

dinsdag 13 september 2005 11:43

Acties:

Verwijderd

ik denk dat in het voorbeeld met al die div's de meeste div's gewoon op de plaats zijn eigenlijk...

Zoals cheatah al zegt: grote lijnen van sites bestaan vaak uit div's (en map en form).

Ik zie zelfs bij sommige sites die prat gaan op semantiek vaak te weinig div's

_{@ Cascading Schutz Staffel}

[ Voor 35% gewijzigd door Verwijderd op 13-09-2005 11:56 ]

dinsdag 13 september 2005 13:31

Acties:

Savantas

@Cascading Schutz Staffel: XanadiX durft het plaatje met de typo niet meer te posten, denk ik...

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 14 september 2005 17:22

Acties:

masser120

Topicstarter

StalieN schreef op maandag 12 september 2005 @ 22:59:
je zou eigenlijk niet met tabellen moeten werken... semantisch gezien is dat niet goed (www.w3.org) en nu zorgt het ook nog eens voor het probleem wat je zelf aankaart... je zou dus met <div> kunnen werken:

XML:

...
<body>

    <div id="boven">
        [img]"boven.jpg"[/img]
    </div>
    
    <div id="left">

        <div id="leftMenuTop">
            <p>text menu 1</p>
        </div>
        
        <div id="leftMenuBottom">
            <p>text menu 2</p>
        </div>
        
    </div>
    
    <div id="center">

        <div id="leftMenuTop">
            <p>dit is alle tekst in het midden</p>
        </div>
       
    </div>
    
        <div id="right">

        <div id="rightMenuTop">
            <p>text menu 3</p>
        </div>
        
        <div id="rightMenuBottom">
            <p>text menu 4</p>
        </div>
        
    </div>
    
    <div id="onder">
        [img]"onder.jpg"[/img]
    </div>

</body>
...

zoiets... je kan dit geheel nog in een <div id="container"> zetten of een deel in een content div ofzo... en de boel stylen in css

Ik wil wel div's gaan gebruiken, maar hoe moet ik die dan naast elkaar gaan gebruiken? Elke keer als ik een div regel toe ga voegen slaat deze automatisch een regel over, en het moet een beetje naast elkaar komen te staan om de goede vorm te geven. Iets dat met tabellen wel kan...

woensdag 14 september 2005 17:23

Acties:

Verwijderd

Dáár is nou CSS voor.

woensdag 14 september 2005 17:26

Acties:

Jrz

––––––––––––

Vertel mij maar eens hoe ik kan zeggen tegen een div dat hij altijd naast een ander iets moet staan.
Dat gaat niet. Verkleint iemand zn window, dan wil ik soms horizontaal scrollen, ipv alle divs onderelkaar zien rollen.

Ennnnnnnnnn laat losssssssss.... https://github.com/jrz/container-shell (instant container met chroot op current directory)

woensdag 14 september 2005 17:30

Acties:

masser120

Topicstarter

Verwijderd schreef op woensdag 14 september 2005 @ 17:23:
Dáár is nou CSS voor.

Kan je me dan oom vertellen hoe dat dan moet? Een klein voorbeeld scriptje is genoeg.

woensdag 14 september 2005 17:31

Acties:

Verwijderd

Jrz schreef op woensdag 14 september 2005 @ 17:26:
Vertel mij maar eens hoe ik kan zeggen tegen een div dat hij altijd naast een ander iets moet staan.
Dat gaat niet. Verkleint iemand zn window, dan wil ik soms horizontaal scrollen, ipv alle divs onderelkaar zien rollen.

Er zijn genoeg mogelijkheden, maar helaas kennen de huidige CSS implementaties de nodige tekortkomingen.

Als je zorgt dat de container van beide elementen groot genoeg is, en je zorgt dat de linker div float, dan komt de tweede in principe daarnaast te staan.

Verder ga ik niet alles over CSS en HTML uitleggen, aangezien je het meeste gewoon zelf kunt lezen of bedenken.

woensdag 14 september 2005 17:32

Acties:

disjfa

be

www.w3schools.com
www.handleidinghtml.nl

En in de faq van het forum staan waarschijnlijk nog veeeeeel meer handige tips

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 14 september 2005 17:36

Acties:

Jrz

––––––––––––

Verwijderd schreef op woensdag 14 september 2005 @ 17:31:
[...]

Er zijn genoeg mogelijkheden, maar helaas kennen de huidige CSS implementaties de nodige tekortkomingen.

Als je zorgt dat de container van beide elementen groot genoeg is, en je zorgt dat de linker div float, dan komt de tweede in principe daarnaast te staan.

Verder ga ik niet alles over CSS en HTML uitleggen, aangezien je het meeste gewoon zelf kunt lezen of bedenken.

Ok, maar hoe bepaal ik dan de grootte van de container..
Die ga je niet opgeven in pixels, want die weet je niet altijd van te voren.
Ik zou eigenlijk een "nowrap" willen zien

Ennnnnnnnnn laat losssssssss.... https://github.com/jrz/container-shell (instant container met chroot op current directory)

woensdag 14 september 2005 18:04

Acties:

masser120

Topicstarter

Nu is het me gelukt om met CSS alles op de juiste positie te krijgen, behalve één ding:
het plaatje dat helemaal onderaanstaat, moet ook daadwerkelijk onderaan blijven. Ik dacht dat ik dat met "bottom" wel goed kan doen, maar dan wil die niet helemaal luisteren.

code:

1
2
3

<div style="position: absolute;
bottom: 0px; left:0px; ">[img]"menu9.png"[/img]
</div>

Dan komt dat plaatje middn in de pagina te staan en dat wil ik ook niet echt. Hoe krijg je dat weer voor elkaar dat ook echt op de bodem te houden, dus ook als de pagina zich uitstrekt?

woensdag 14 september 2005 19:49

Acties:

Verwijderd

Goede gedachte, zal ook werken in Firefox, maar werkt in Internet Explorer pas vanaf de volgende versie. Gelukkig zijn al voldoende manieren/workarounds beschikbaar om het tot die tijd aan te pakken. Ook te vinden op GoT.

woensdag 14 september 2005 21:01

Acties:

masser120

Topicstarter

Bedankt, dan kan ik dit pas doen vanaf de volgende IE versie.

Ik heb het ondertussen al op een andere manier opgelost.
Ik heb de verschillende delen in een DIV apart genomen.
Bij de middelste DIV heb ik een tabel gemaakt, waarvan de linker en rechterkolom onder de andere DIV's zitten, zodat het menu eroverheen komt.
Onderaan die tabel zit het bodemplaatje (het plaatje aan de onderkant) en dat rekt dus mee uit, zodra de pagina ook uitrekt.

Enig nadeel: het menu is soms langer dan de pagina zelf en dan zit het bodemplaatje voor een gedeelte achter het menu verstopt. Oplossing: gebruik op de hoofdpagina een aantal keer de <p>&nspd;</p> regel, totdat de pagina goed is uitgerekt en alles op zijn plaats zit.

woensdag 14 september 2005 21:53

Acties:

crisp

Devver

Pixelated

masser120 schreef op woensdag 14 september 2005 @ 21:01:
[...]
Enig nadeel: het menu is soms langer dan de pagina zelf en dan zit het bodemplaatje voor een gedeelte achter het menu verstopt. Oplossing: gebruik op de hoofdpagina een aantal keer de
&nspd;
regel, totdat de pagina goed is uitgerekt en alles op zijn plaats zit.

What's next? spacer.gif'jes?

Serious: denk eens aan margins, of als je floats gebruikt gewoon je floats clearen voordat je je footer plaatst

Intentionally left blank