Toon posts:

Ruimte tussen buttons

Pagina: 1
Acties:
  • 296 views sinds 30-01-2008
  • Reageer

zondag 15 oktober 2006 11:30

Acties:

Verwijderd

Topicstarter
Ik ben bezig met een website en ik heb wat problemen met de buttons:

knip plaatje, 1mb is veels te veel
http://img155.imageshack.us/img155/4985/afbeelding1tq6.png

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

<html>
<head>
<title>Landschaps Camping Kijkuit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Test?.psd) -->
<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">
            <img src="images/alpha_01.png" alt="" width="113" height="768" align="top"></td>
        <td colspan="3">
            <img src="images/alpha_02.png" width="798" height="156" alt=""></td>
        <td rowspan="4">
            <img src="images/alpha_03.png" alt="" width="113" height="768" align="top"></td>
    </tr>
    <tr>
        <td colspan="3">
        <img src="images/buttonback_l.png" alt="" width="17" height="30" align="left">
            <img src="images/home.png" alt="Ga naar de homepagina" width="50" height="30" align="left">
            <img src="images/overOns.png" alt="Over ons" width="72" height="30" align="left">
            <img src="images/ligging.png" alt="Ligging" width="60" height="30" align="left">
            <img src="images/vakantiewoningen.png" alt="Vakantiewoningen" width="133" height="30" align="left">
            <img src="images/natuur.png" alt="Natuur" width="55" height="30" align="left">
            <img src="images/kindvriendelijk.png" alt="Kindvriendelijk" width="110" height="30" align="left">
            <img src="images/kwaliteit.png" alt="Kwaliteit" width="69" height="30" align="left">
            <img src="images/tarieven.png" alt="Tarieven" width="67" height="30" align="left">
            <img src="images/fotoAlbum.png" alt="Het foto album" width="86" height="30" align="left">
            <img src="images/contact.png" alt="Neem contact op" width="62" height="30" align="left">
            <img src="images/backbutton_r.png" alt="Neem contact op" width="17" height="30"></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/alpha_05.png" width="15" height="582" alt=""></td>
        <td><img src="images/alpha_06.png" width="767" height="562" alt=""></td>
        <td rowspan="2">
            <img src="images/alpha_07.png" width="16" height="582" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/alpha_08.png" width="767" height="20" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


In Dreamweaver ziet het er wel normaal uit, maar als ik het dan Preview in FireFox of Safari dan ziet het er nogal vreemd uit. Heeft iemand een idee hoe ik dit kan oplossen? Alvast bedankt :)

[ Voor 0% gewijzigd door André op 16-10-2006 08:47 ]

zondag 15 oktober 2006 11:33

Acties:
  • Depress
  • Registratie: Mei 2005
  • Laatst online: 12-02 13:20

Depress

Kijk eens naar de CellSpacing en CellPadding. Zet deze beide eens op 0. Niet gedefineerd is standaard waarde van 2 of 3.

zondag 15 oktober 2006 11:38

Acties:
  • ikke007
  • Registratie: Juni 2001
  • Laatst online: 22-10-2025

ikke007

Met CSS doe je dat als volgt:
http://www.handleidinghtm...ollapse/beschrijving.html

Maar zonder css uhhhhh....

[ Voor 27% gewijzigd door ikke007 op 15-10-2006 11:39 ]

Lets remove all security labels and let the problem of stupidity solve itself

zondag 15 oktober 2006 11:42

Acties:
  • Rigi
  • Registratie: September 2001
  • Laatst online: 30-11-2018

Rigi

Het kan aan mij liggen, maar alle buttons zitten in dezelfde cel if you ask me.. Dus een Border collapse heeft weinig zin dan, lijkt me.

Was het trouwens niet zo dat als je plaatjes zo neerzet (met een enter en wat whitespace ertussen) de html stnd er een spatie tussen zet? Dacht dat een enter (of whitespace) werd vertaald naar een spatie wat dus die lege ruimte geeft.

zondag 15 oktober 2006 12:02

Acties:
  • Michali
  • Registratie: Juli 2002
  • Laatst online: 09-12-2025

Michali

Images zijn standaard inline elementen, en als er in de code whitespace tussen zit, dan zie je in de browser dat er ook tussen zitten. Een snelle oplossing is dus om al je img element direct aan elkaar te koppelen. Je zult zelf vast ook wel begrijpen dat dit geen goede oplossing is, mede omdat je images nu gebruik voor een doel waarvoor ze niet geschikt zijn. Beter is om gewoon een lijstje te gebruiken en dan met behulp van CSS de items een afbeelding als achtergrond te geven en de tekst onzichtbaar te maken. Maar ik heb een vermoeden dat je dit niet zo gaat lukken.

Noushka's Magnificent Dream | Unity

zondag 15 oktober 2006 14:52

Acties:

Verwijderd

Topicstarter
Bedankt iedereen, ik ga nu wat proberen met CSS. Alleen weet ik niet echt waar ik de CSS code moet zetten, als je snapt wat ik bedoel. Ik heb deze code:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13

<td colspan="3">
        <img src="images/buttonback_l.png" alt="" width="17" height="30" align="left">
            <img src="images/home.png" alt="Ga naar de homepagina" width="50" height="30" align="left">
            <img src="images/overOns.png" alt="Over ons" width="72" height="30" align="left">
            <img src="images/ligging.png" alt="Ligging" width="60" height="30" align="left">
            <img src="images/vakantiewoningen.png" alt="Vakantiewoningen" width="133" height="30" align="left">
            <img src="images/natuur.png" alt="Natuur" width="55" height="30" align="left">
            <img src="images/kindvriendelijk.png" alt="Kindvriendelijk" width="110" height="30" align="left">
            <img src="images/kwaliteit.png" alt="Kwaliteit" width="69" height="30" align="left">
            <img src="images/tarieven.png" alt="Tarieven" width="67" height="30" align="left">
            <img src="images/fotoAlbum.png" alt="Het foto album" width="86" height="30" align="left">
            <img src="images/contact.png" alt="Neem contact op" width="62" height="30" align="left">
            <img src="images/backbutton_r.png" alt="Neem contact op" width="17" height="30"></td>


gewoon vervangen met CSS maar dat werkt niet echt geweldig. Dan wordt alles door elkaar gegooid.

zondag 15 oktober 2006 14:56

Acties:
  • steffex
  • Registratie: Augustus 2003
  • Laatst online: 12-08-2025

steffex

even dit bovenaan je css zetten:

Cascading Stylesheet:
1
2
3
4
5

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


Heel vaak wil dit nog wel eens helpen :P

zondag 15 oktober 2006 15:03

Acties:

Verwijderd

Topicstarter
Het ziet er nu zo uit:

knip plaatje, 1mb is veels te veel
http://img152.imageshack.us/img152/406/afbeelding1xg7.png

Er klopt duidelijk geen hout van, mij ervaring met CSS is ook niet zo geweldig :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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<html>
<head>
<title>Landschaps Camping Kijkuit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Test?.psd) -->
<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">
            <img src="images/alpha_01.png" alt="" width="113" height="768" align="top"></td>
        <td colspan="3">&nbsp;</td>
        <td rowspan="4"><img src="images/alpha_03.png" alt="" width="113" height="768" align="top"></td>
    </tr>
    <tr>
    


    <style type="text/css">
    
    * 
{ 
margin: 0px; 
padding: 0px; 
}
    
    a.button1 {
display: block;
width: 17px;
height: 30px; 
background-image: url('images/buttonback_l.png');
background-repeat: no-repeat;
}

a.button2 {
display: block;
width: 50px;
height: 30px; 
background-image: url('images/home.png');
background-repeat: no-repeat;
}
        
a.button3 {
display:block;
width:  72px;
height: 30px;
background-image: url('images/overOns.png');
background-repeat:no-repeat
}

a.button4 {
display:block;
width: 60px;
height: 30px;
background-image: url(images/Ligging.png);
background-repeat:no-repeat
}

a.button5 {
display:block;
width: 133px;
height: 30px;
background-image: url(images/vakantiewoningen.png);
background-repeat:no-repeat
}

a.button6 {
display:block;
width: 55px;
height: 30px;
background-image: url(images/natuur.png);
background-repeat:no-repeat
}

a.button7 {
display:block;
width: 110px;
height: 30px;
background-image: url(images/kindvriendelijk.png);
background-repeat:no-repeat
}

a.button8 {
display:block;
width: 69px;
height: 30px;
background-image: url(images/kwaliteit.png);
background-repeat:no-repeat
}

a.button9 {
display:block;
width: 133px;
height: 30px;
background-image: url(images/tarieven.png);
background-repeat:no-repeat
}

a.button10 {
display:block;
width: 86px;
height: 30px;
background-image: url(images/fotoAlbum.png);
background-repeat:no-repeat
}

a.button11 {
display:block;
width: 62px;
height: 30px;
background-image: url(images/contact.png);
background-repeat:no-repeat
}

a.button12 {
display:block;
width: 17px;
height: 30px;
background-image: url(images/backbutton_r.png);
background-repeat:no-repeat
}

</style>
</td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/alpha_05.png" width="15" height="582" alt=""></td>
        <td><img src="images/alpha_06.png" width="767" height="562" alt=""><img src="images/alpha_02.png" width="798" height="156" alt=""></td>
        <td rowspan="2">
            <img src="images/alpha_07.png" width="16" height="582" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/alpha_08.png" width="767" height="20" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>



Hier klopt waarschijnlijk ook maar weinig van.

[ Voor 0% gewijzigd door André op 16-10-2006 08:47 ]

zondag 15 oktober 2006 15:22

Acties:

Verwijderd

Ik heb even aan jou allereerste source dit toegevoegd:

HTML:
1
2
3
4
5
6
7
8

...
<style type="text/css">
img {
margin: 0px;
}
</style>
</head>
...


En dit werkt in firefox gewoon goed :?

Dit is dus hetzelfde als stef-o.nl al noemde, maar omdat jij nu in css hebt zitten klooien (zonder dat je eigenlijk precies weet wat je aan het doen bent volgen mij, nofi) lukt het inderdaad niet :).

Jij geeft nu het element 'a' (hyperlinks dus) allerlei properties waar ze niks mee kunnen (en welke je verder in je source ook nergens gebruikt, je defineert ze alleen) ;).

[ Voor 52% gewijzigd door Verwijderd op 15-10-2006 15:49 ]

zondag 15 oktober 2006 15:48

Acties:

Verwijderd

Topicstarter
Het ziet er dan in ieder geval goed uit, alles staat op z'n plaats.

knip plaatje, 1mb is veels te veel
http://img156.imageshack.us/img156/1576/afbeelding2sv7.png

Dan moet ik alleen nog de buttons in dat witte gedeelte krijgen. :$

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

<html>
<head>
<title>Landschaps Camping Kijkuit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Test?.psd) -->
<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">
            <img src="images/alpha_01.png" alt="" width="113" height="768" align="top"></td>
        <td colspan="3">
            <img src="images/alpha_02.png" width="798" height="156" alt=""></td>
        <td rowspan="4">
            <img src="images/alpha_03.png" alt="" width="113" height="768" align="top"></td>
    </tr>
    <tr>
        <style type="text/css"> 
        img { 
        
margin: 0px; 
} 
        </td>
            </style>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/alpha_05.png" width="15" height="582" alt=""></td>
        <td><img src="images/alpha_06.png" width="767" height="562" alt=""></td>
        <td rowspan="2">
            <img src="images/alpha_07.png" width="16" height="582" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/alpha_08.png" width="767" height="20" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

[ Voor 1% gewijzigd door André op 16-10-2006 08:47 ]

zondag 15 oktober 2006 15:52

Acties:

Verwijderd

Verwijderd schreef op zondag 15 oktober 2006 @ 15:48:
Het ziet er dan in ieder geval goed uit, alles staat op z'n plaats.

Dan moet ik alleen nog de buttons in dat witte gedeelte krijgen. :$
Als je ten eerste die stylesheet even tussen je <head> tags zet, waar deze hoort ;).

Daaraast krijg je je plaatjes terug door al die img-tags weer terug te plaatsen. Michali kan dan wel zeggen dat images hier niet geschikt voor zijn, maar het werkt prima. En ik heb zo'n gevoel dat een oplossing in CSS misschien iets te hoog gegrepen is voor je, en dat zou alleen maar tijd & moeite kosten voor hetzelfde resultaat.

zondag 15 oktober 2006 16:21

Acties:

Verwijderd

Topicstarter
Bedankt, het werkt nou precies zoals ik wil :)
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq