Toon posts:

tabel plaatsen, beste keuze?

Pagina: 1
Acties:

vrijdag 19 november 2004 15:13

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
Hallo,

Ik zit met een twijfelgeval als het gaat om het plaatsen van een tabel.

Ik wil een tabel op een statische plek hebben van de bovenkant van mijn document.

ik wil een tabel 300px van de zijkant en 110px van de bovenkant doen.
Nu kan dit op 2(?) manieren, met en zonder div :)

ik kan
code:
1
2
3
4

.tabelclass {
margin-top:110px;
margin-left:300px;
}


of :)
code:
1
2
3
4
5

.divclass {
position:absolute; ( toch? :o )
top:110px;
left:300px;
}


Ik twijfel enorm en kan nou echt plaatsen waarom ik het een niet doe, of het andere :)

Iemand die mij een juiste zet geeft? O-)

vrijdag 19 november 2004 15:18

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Zonder div, als het gaat om een tabel met tabulaire data (gaan we weer O-) ). Als het er om gaat dat je in inhoud op die afstand van de kant komt kan je ook de margins van je stukje tekst, waar het ook in staat, gewoon op die waarden zetten.

edit:

Volgens mij haal ik padding en margin weer door elkaar :X

[ Voor 15% gewijzigd door Rowanov op 19-11-2004 15:19 ]

vrijdag 19 november 2004 15:21

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
hmm.... het is echt een tabel he. maar je hebt gelijk het is het textvlak waar alleen die text komt, er komt later wel een DIV overheen :o maar die is alleen voor een effectje met een plaatje. misschien was div beter, want crisp GoT's uberman zweert volgens mij bij div :)

vrijdag 19 november 2004 15:23

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Ik geloof dat ik hierboven padding bedoeld, maar dat heeft hetzelfde effect asl left en top.

vrijdag 19 november 2004 15:26

Acties:

Verwijderd

lijkt me sterk dat Crisp bij div's zweert.

elk element kan je positioneren, een div is eigenlijk alleen maar voor het groeperen van verschillende elementen en is wat de betreft net zo "fout" als een table. Gebruik de juiste elementen voor je doel

over padding en margin:
Afbeeldingslocatie: http://www.w3.org/TR/CSS21/images/boxdim.png

[ Voor 18% gewijzigd door Verwijderd op 19-11-2004 15:27 ]

vrijdag 19 november 2004 15:45

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
ik vindt wel raar als ik een div met een statische position plaats voor dat ik de tabel in het document zet, doet IE raar, en zet hem vaag neer, maar als ik de <div> erachter zet, dan niet :o

vrijdag 19 november 2004 15:53

Acties:

Verwijderd

definieer "raar" en geef een voorbeeldje ofzo, want IE zou hier niet "raar" moeten doen. Komt misschien omdat je HTML of CSS "raar" is :D

vrijdag 19 november 2004 15:59

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
Hmm ik denk dat het best groot is maar hier komt ie dan :P

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>adSoft.NL :: adForum</title>
    <link rel="StyleSheet" href="style.css">
</head>

<body>

<table class="main-table" cellspacing="0" width="464" height="100%">
    <tr>
        <td class="main-border-color" height="7" width="7">  </td>
        <td class="main-border-color" height="7" width="450"></td>
        <td class="main-border-color" height="7" width="7">  </td>
    </tr>
    <tr>
        <td class="main-border-color" width="7"></td>
        <td class="main-field" width="450">
        <p>
        Eindelijk is hij er, jou gratis te downloaden asp forum.
        Met alle gebruikelijke features die je op een uitgebreid 
        forum kan verwachten.
        </p>
        <p>
        <a href=""><b>Download Nu!</b></a>
        </p>
        </td>
        <td class="main-border-color" width="7"></td>
    </tr>
</table>

<div id="adforum">
    [img]"./gfx/adforum.gif"[/img]
</div>

<div id="menu">
    <table class="menu-table" cellspacing="0" width="100%" height="21">
        <tr>
            <td class="menu-color">
            <p>
            Home :: adForum
            </p>
            </td>
        </tr>
    </table>
</div>
</body>
</html>



De CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

body {
    background-color     : #ADC8EB;
    background-image     : url(./gfx/backfade.gif);
    background-repeat    : repeat-x;
    background-position  : left top;
    background-attachment: fixed;
    margin           : 0px; 
}

p {
    font-family : Verdana;
    font-size   : 12px;
    color       : #000000;
}

.main-table {   margin-top  : 220px;    margin-left : 150px;}
.menu-table {   margin-top  : 20px;     margin-left : 0px;}

.main-field {
    background-color: #FFFFFF;
    padding-top : 270px;
    padding-left    : 10px;
    padding-right   : 10px;
    padding-bottom  : 30px;
    text-align  : top;
    vertical-align  : top;      
}

.main-border-color {    background-color: #B1D4FF;}
.menu-color {       background-color: #FFFFFF;}

#adforum {
    position    : absolute;
    top     : 107px;
    left        : 160px;
}

#menu {
    position    : absolute;
    top     : 17px;
    left        : 0px;
}


a:link, a:visited, a:active {
    color       : #000000;
    text-decoration : none;
}

[ Voor 91% gewijzigd door semicon op 19-11-2004 16:00 ]

vrijdag 19 november 2004 16:15

Acties:
  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

SchizoDuckie

Kwaak

Je gebruikt een <table> voor het verkeerde doel. vandaar dat het ook niet doet wat jij wil. Probeer voor een menu de <menu> tag met daarin <li> items, en gooi daar je CSS overheen. Dan weet je tenminste zeker dat je alles precies zo kan stylen als je wilt.

Tevens is het 2004, en begint het bij iedereen door te dringen dat je geen tables moet gebruiken voor dingen die helemaal geen tabel zijn (maar eigenlijk een menu (<menu>), een lijst (<li>), een paragraaf (<p>), een citaat (<cite>), etc.
Nou kan ik hier nog een heel lang lulverhaal over gaan schrijven, maar dat hebben anderen al lang voor mij gedaan. Zoek eens bijv. hier op GoT naar 'semantische opmaak'. Je zal zien dat als je de gedachte erachter begrijpt, en aan de hand hiervan probeert je paginas op te bouwen, ze kleiner worden, gestructureerder, zoekmachines je beter ivnden, en ook niet onbelangrijk is dat usability zwaar verbeterd wordt :)

[ Voor 7% gewijzigd door SchizoDuckie op 19-11-2004 16:15 ]

Stop uploading passwords to Github!

vrijdag 19 november 2004 16:27

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
Nou ik ga dus vreslijk fout...

Ik begin hierbij opnieuw en mocht dat niet lukken dat hoor je nog van me :P

vrijdag 19 november 2004 16:29

Acties:
  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

SchizoDuckie

Kwaak

semicon schreef op vrijdag 19 november 2004 @ 16:27:
Nou ik ga dus vreslijk fout...

Ik begin hierbij opnieuw en mocht dat niet lukken dat hoor je nog van me :P
SUc6 :)

Stop uploading passwords to Github!

vrijdag 19 november 2004 17:46

Acties:
  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025

semicon

Topicstarter
Ok, heb je hulp nu nodig.

Heb het allemaal zojuist eens onderzocht, veel topics ervan op dit topic ja, wist alleen dat woord niet :)

Maar goe, Ik heb met de layout opzicht geen problemen.
maar zit nu met het menu, volgens mij moet dat met <li>

Maar dan kan ik hem niet laten doorlopen.
Ik had het eerst met tabellen zoals hierboven, nu dit:
HTML:
1
2
3
4
5
6
7

<div id="menu">
    <ul>
        <li><a href="http://www.adsoft.nl" target="top">Home</a></li>
        <li><a href="adforum.html">adForum</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>


en de
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

#menu {
    position    : absolute;
    top     : 20px;
    left        : 0px;
}

#menu ul {
    border      : 0px;
    margin      : 0px;
    padding     : 0px;
    list-style-type : none;
    text-align  : left;
    clear       : left;
}

#menu ul li {
    background-color: #FFFFFF;
    display     : block;
    float       : left;
    text-align  : center;
    padding     : 0px;
    margin      : 0px;
    width       : 100px;
    height      : 30px;
}

#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:active {
    font-family : Tahoma, Verdana, helvetica, sans-serif;
    font-weight : bold;
    font-size   : 11px;
    color       : #ABD3FF;
    letter-spacing  : 2px;
    text-decoration : none;
}

#menu ul li a:hover {
    font-family : Tahoma, Verdana, helvetica, sans-serif;
    font-weight : bold;
    font-size   : 11px;
    color       : #7BB9FF;
    letter-spacing  : 2px;
    text-decoration : none;
}


echter het probleem is nu, die li heeft een witteachtergrond, wat goed is, maar die eindigd na de laatste li, dus dacht het op de ul aan te passen, maar dat werkt ook niet.

Ik snap dat er vast een oplossing is, maar zit ik dan met li wel goed? 8)7

vrijdag 19 november 2004 18:47

Acties:

Verwijderd

semicon schreef op vrijdag 19 november 2004 @ 17:46:
echter het probleem is nu, die li heeft een witteachtergrond, wat goed is, maar die eindigd na de laatste li, dus dacht het op de ul aan te passen, maar dat werkt ook niet.

Ik snap dat er vast een oplossing is, maar zit ik dan met li wel goed? 8)7
Plaats je menu in een div geef die een bepaalde breedte en geef de div de juiste achtergrond kleur.

dinsdag 23 november 2004 11:05

Acties:

Verwijderd

wanneer houd iedereen eens op met dubbel nesten

je kan alle elementen absoluut positioneren, niet alleen een div. En je kan een ul ook een background geven. Ik heb niet een goed idee wat je beoogde resultaat is, maar hoogstwaarschijnlijk kan het prima zonder die div.
Pagina: 1
Reageer