Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

Ajax of iframe?

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

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Hallo!
Ik ben bezig met een website, deze bestaat uit een index (met photoshop, slicen, gemaakt) en
in het midden een iframe "main". Aan de zijkanten bevind zich een menu.

Probeem1:
In het rechtermenu kan de gebruiker inloggen, dit formulier word doorverwezen naar login.php in het iframe "main" die het inloggen verder regelt.
Nu zou ik graag de content van dat rechtermenu laten afhangen van of er ingelogd is of niet.
Dus als de gebruiker niet is ingelogd --> login-formulier
Als de gebruiker wel is ingelogd --> links om bijvoorbeeld uit te loggen.

Mogelijke oplossingen:
Ik heb zelf al 2 mogelijkheden bedacht.
1) Met behulp van ajax (Framework) laat ik om de seconde controleren of er is ingelogd in het rechterframe.
bv. if $_SESSION['login'] = 1 { uitlog-link] else { inlogformulier}

2) Ik maak het van het rechtermenu ook een iframe die ik laat verversen als inlog.php klaar is met het inloggen.
bv.
[code]echo "<meta HTTP-EQUIV="REFRESH" CONTENT="0; URL=javascript:window.open('iframelogin.html','iframe_login');">" [/code
of
code:
1
2
3
4
5
6
<script>
function redirect()
{
iframe_login.location="iframelogin.php";
}
</script>


Welke van de 2 manieren zou de minste serverbelasting kosten? Dat kan ik namelijk moeilijk testen zo :P Ik weet ook niet precies of Framework die pagina dan ook daadwerkelijk herhaald, want
dan zou ik beter voor dat aparte iframe gaan, maar dan heb ik wel heel veel pagina's uiteindelijk....

Wat zeggen jullie?


Ook heb ik nog een probleem met de lay-out:
Ik heb de hele lay-out (zo goed als af) gemaakt in photoshop.
Links een menu. In het midden de content en rechts nog een menu.
De menu's bestaan uit meerdere links / submenu's.
Nu komt mijn probleem.
Als ik bijvoorbeeld een cel aan de rechterkant van de site iets uitrek (= meer tekst in plaatsen dan ruimte voor is) rekt deze gewoon uit. Maar bijna alle cellen aan de linkerkant OOK!
Ik zou het graag willen hebben dat alleen de onderste cel 'meebeweegt'. Dus dat deze height="100%" is en de andere cellen een vaste hoogte.
Ik dacht dat dit makkelijk op te lossen was door de andere cellen een vaste height mee te geven. Maar dat werkte niet, (tenminste niet in IE7).
Dit is de (voorlopige) code van de lay-out:
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<html>
<head>
<meta http-equiv="Content-Language" content="nl">
<title>dms</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<LINK HREF="dms.css" REL="stylesheet" TYPE="text/css">
<script language="JavaScript" type="text/javascript" src="prototype.js"></script> 
<script> 
        
var url = 'berichtenbalk/berichten.php'; 

        
new Ajax.PeriodicalUpdater("berichtenbalk", url, { method: 'post', onFailure: reportError, frequency: 1, decay: 1 }); 

    function reportError(request) 
    { 
        alert('Excuses, er zijn fouten opgetreden..'); 
    } 
    
</script> 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- ImageReady Slices (dms.psd) -->
<table id="Table_01" width="873" height="769" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="31" class="border_left">
            &nbsp;</td>
        <td colspan="9">
            <img src="images/dms_02.jpg" width="838" height="137" alt=""></td>
        <td rowspan="31" class="border_right"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="137" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="images/dms_04.jpg" width="191" height="61" alt=""></td>
        <td background="dms_05.jpg" width="498" height="28">
            <marquee onmouseover = 'this.stop()' onmouseout = 'this.start()' width = '100%' height="19">
            <font class="berichtenbalk"><div id="berichtenbalk"></div></font></marquee></td>
        <td>
            <img src="images/dms_06.jpg" width="17" height="28" alt=""></td>
        <td colspan="2">
            <a href="javascript:void(0)" 
onclick="open('berichtenbalk/voegtoe.php','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=500,height=150')">
<img src="images/dms_07.jpg" width="95" height="28" alt="Voeg een bericht toe!" border="0"></a></td>
        <td colspan="2">
            <img src="images/dms_08.jpg" width="37" height="28" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="images/dms_09.jpg" width="526" height="36" alt=""></td>
        <td colspan="3">
            <img src="images/dms_10.jpg" width="121" height="30" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="6" class="menu_r_bg" align="center" valign="top" height="0">
        <form method="post" name="inlog" action="login.php" target="main">
        <input type="hidden" name="inlog" value="1"> 
            <font face="Courier New" style="font-size: 8pt">Welkom gast<br>
            </font><font face="Courier New" size="1">
            <span style="font-size: 8pt"><input type="text" name="username" size="13"></span></font><font face="Courier New"><font style="font-size: 8pt"><br>
            </font><font size="2"><span style="font-size: 8pt">
            <input type="password" name="wachtwoord" size="13"></span><font style="font-size: 8pt"><br>
            </font><span style="font-size: 8pt">
            <input type="checkbox" name="C1" value="ON"></span><font style="font-size: 8pt">Onthouden<br>
            </font><span style="font-size: 8pt">
            <input type="submit" value="Inloggen!" name="login"></span><font style="font-size: 8pt"><br>
            <a target="main" href="registeren.php">Registeren</a><br>
            Wachtwoord kwijt</font></font></font></form></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2" background="dms_12.gif" valign="top">
            <p align="center"><font class="font_menu_head">Het is nu: 5:46:23</font></td>
        <td>
            <img src="images/dms_13.jpg" width="72" height="3" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="26">
            <iframe name="main" width="100%" height="100%" frameborder="0" src="home.html"></iframe></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" class="menu_l_head">
            <font class="font_menu_head">Algemeen</font></td>
        <td>
            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_16.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/dms_17.gif" width="119" height="24" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2" class="menu_r_head">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/dms_19.jpg" width="119" height="24" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="5" class="menu_r_bg">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" class="menu_l_head">
            <font class="font_menu_head">De Clan</font></td>
        <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_22.gif" width="119" height="22" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_23.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/dms_24.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="18" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2" class="menu_r_head">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/dms_26.gif" width="119" height="22" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="9" class="menu_r_bg">&nbsp;<p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>dss</p>
        <p>&nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_28.gif" width="119" height="24" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_29.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_30.jpg" width="119" height="26" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" class="menu_l_head">
            <font class="font_menu_head">Community</font></td>
        <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_32.gif" width="119" height="26" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_33.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/dms_34.gif" width="119" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/dms_35.gif" width="119" height="25" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2" class="menu_r_head">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2" class="menu_l_head">
            <font class="font_menu_head">Stats</font></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2" class="menu_r_bg">
            &nbsp;<p>&nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" class="menu_l_stats">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="99" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" class="border_bottom_l">
            </td>
        <td colspan="7" class="border_bottom">
            </td>
        <td colspan="2" class="border_bottom_r">
            &nbsp;</td>
        <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="98" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="72" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="498" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</center>
</body>
</html>


Een mogelijke oplossing hiervoor zou misschien zijn om van alle stukjes ook een aparte tabel van te maken, toch?
Maar ik dacht, misschien hebben jullie nog een leuke oplossing 8)7 Heb namelijk alles al geprobeerd (met css, html, vaste hoogtes... |:( )

Alvast bedankt!

  • JKVA
  • Registratie: Januari 2004
  • Niet online

JKVA

Design-by-buzzword fanatic

Ehm, je stelt een vraag over serverbelasting en post hier dan een door ImageReady gegenereerde HTML table layout? Ik zou zeggen, vertaal dat eerst eens naar een iets compactere vorm, zoals divs + CSS.

Verder zijn IFRAME's not done. Het enige toepassingsgebied voor IFRAMEs is tegenwoordig nog asynchrone file upload, omdat dat met XMLHTTP niet kan.

Ofwel, zorg eerst voor een nettere en kleinere pagina en ga dan met XMLHTTP (AJAX) aan de slag.

Fat Pizza's pizza, they are big and they are cheezy


  • BCC
  • Registratie: Juli 2000
  • Laatst online: 08:26

BCC

Zoals hierboven. En dan niet elke seconde gaan pollen, maar na een geslaagde login-poging de vernieuwde inhoud voor het menu opsturen en client-side updaten. Kijk eens naar de prototype library, daarmee is dit een eitje.

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

-- ach laat ook maar --

[ Voor 93% gewijzigd door BikkelZ op 28-08-2007 19:34 ]

iOS developer


  • Wim Leers
  • Registratie: Januari 2004
  • Laatst online: 01:47
Maak es eerst fatsoenlijke HTML... inline styles alom hier... 8)7 Om nog maar te zwijgen van iframes... Waar je hier dus gerust zonder kan. Dan is je probleem vanzelf opgelost.

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Sorry, maar ik stel 2 vragen! Anders moest ik 2 aparte topics openen en daar zijn 'jullie' helemaal geen fan van..
Bovendien vind ik iframes erg handig omdat dan telkens niet de hele pagina opnieuw geladen hoeft te worden en je kunt bijvoorbeeld nog ongestoord een achtergrondmuziek afspelen.

Over VRAAG !:
Ik ga toch maar voor de ajax manier denk ik, of weten jullie nog een leuke manier/oplossing?

Vraag 2:
En over die tabel, ik weet niet hoe ik dat op moet lossen, maar ik zal er dan op moeten vertrouwen dat alles precies in de desbetreffende cel past...

@BCC: Welke functie moet ik daarvoor gebruiken dan en hoe moet ik hem aanroepen? Voorlopig isme alleen nog maar de Ajax.PeriodicalUpdater gelukt...

@Bashrat: Deze tabel is zo door photoshop gemaakt, waarom zou ik zo'n 'complexe' tabel helemaal gaan herschrijven?

EDIT: Hier is nog de site: http://annuh13.an.funpic.org/Clansite/ (hij staat er niet helemaal werkend op maar de lay-out wel) Ik wil graag dat alleen de onderste 2 cellen mee KUNNEN uitrekken, kan dit?

Op de site is ook goed te zien dat een gedeelte van de site uitrekt, dat login-gedeelte aan de rechterkant is iets langer geworden dan in Photoshop en gelijk gaan SOMMIGE cellen aan de linkerkant uitrekken en de iframe in het midden krijgt een witte rand onder...(in dit geval bruin, dat is de achtergrond kleur)

[ Voor 42% gewijzigd door annuh op 28-08-2007 19:56 ]


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
BCC schreef op dinsdag 28 augustus 2007 @ 19:32:
Zoals hierboven. En dan niet elke seconde gaan pollen, maar na een geslaagde login-poging de vernieuwde inhoud voor het menu opsturen en client-side updaten. Kijk eens naar de prototype library, daarmee is dit een eitje.
Moet het zo?
code:
1
2
3
4
<?
print "<body onload=\"new Ajax.Updater('div_loginform_rechtermenu', 'loginform_rechtermenu.php', { method: 'post'});\">
";
?>

  • robbert
  • Registratie: April 2002
  • Laatst online: 30-11 13:41
Ik snap het nut van dat pollen of je ingelogd bent niet echt, je weet toch het moment dat de user probeert in te loggen. Mocht je dat inloggen via Ajax doen, kun je op het moment dat de user probeert in te loggen je menu updaten met Ajax. Doe je dat inloggen niet met Ajax kun je gewoon het menu aanpassen bij de pagina die opgevraagd wordt naar dat de inhoud van het login formulier is gepost.
annuh schreef op dinsdag 28 augustus 2007 @ 19:37:
Bovendien vind ik iframes erg handig omdat dan telkens niet de hele pagina opnieuw geladen hoeft te worden en je kunt bijvoorbeeld nog ongestoord een achtergrondmuziek afspelen.
Op die achtergrond muziek zit niemand te wachten. Ik heb gewoon a.) geen muziek aan staan als ik daar geen behoefte aan heb of b.) mijn eigen muziek aan staan.

Daarnaast zijn iframe's nogal depreciated.

[ Voor 4% gewijzigd door robbert op 28-08-2007 19:57 ]


  • JKVA
  • Registratie: Januari 2004
  • Niet online

JKVA

Design-by-buzzword fanatic

annuh schreef op dinsdag 28 augustus 2007 @ 19:52:
[...]


Moet het zo?
code:
1
2
3
4
<?
print "<body onload=\"new Ajax.Updater('div_loginform_rechtermenu', 'loginform_rechtermenu.php', { method: 'post'});\">
";
?>
Ajax.Updater is idd een prototype object dat je kunt gebruiken. Het is idd vrij gemakkelijk in het gebruik, zoals je zelf wel ziet.

Verder zou ik niet posten als je gegevens ophaalt. get is daar geschikter voor.

Als je wilt pollen, kun je Ajax.PeriodicalUpdater gebruiken.

Fat Pizza's pizza, they are big and they are cheezy


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Het is eigenlijk heel simpel, je maakt gewoon een achtergrond of een paar losse achtergronden van je layout en stopt die in divs.

iOS developer


  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02 23:12

SchizoDuckie

Kwaak

JKVA schreef op dinsdag 28 augustus 2007 @ 19:19:
Verder zijn IFRAME's not done. Het enige toepassingsgebied voor IFRAMEs is tegenwoordig nog asynchrone file upload, omdat dat met XMLHTTP niet kan.

Ofwel, zorg eerst voor een nettere en kleinere pagina en ga dan met XMLHTTP (AJAX) aan de slag.
Ik gebruik lekker iframes om al m'n forms te posten :P
[/schaamteloze spam]

[ Voor 5% gewijzigd door SchizoDuckie op 28-08-2007 20:21 ]

Stop uploading passwords to Github!


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
JKVA schreef op dinsdag 28 augustus 2007 @ 19:57:
[...]
Ajax.Updater is idd een prototype object dat je kunt gebruiken. Het is idd vrij gemakkelijk in het gebruik, zoals je zelf wel ziet.

Verder zou ik niet posten als je gegevens ophaalt. get is daar geschikter voor.

Als je wilt pollen, kun je Ajax.PeriodicalUpdater gebruiken.
Ik gebruik post omdat get niet werkte bij mij. (Had te maken met het cachen van IE ofzo..?)
Maar is de regel die ik poste wel correct?
BikkelZ schreef op dinsdag 28 augustus 2007 @ 20:02:
Het is eigenlijk heel simpel, je maakt gewoon een achtergrond of een paar losse achtergronden van je layout en stopt die in divs.
Sorry maar zou dat even willen toelichten? Moet ik dan met de z-index werken? En welke
stukken moet ik dan wel slicen..?
Hier is een plaatje van het psd-bestand:

http://img212.imageshack.us/img212/9014/dmspsdku7.jpg

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

Probeer je eens te bedenken waar er dingen komen te staan die echt wat doen. Een knop, wat tekst met een begeleidend plaatje. Zet daar div's neer. Gebruik voor de achtergrond *tromgeroffel* backgrounds.

iOS developer


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
BikkelZ schreef op dinsdag 28 augustus 2007 @ 20:37:
Probeer je eens te bedenken waar er dingen komen te staan die echt wat doen. Een knop, wat tekst met een begeleidend plaatje. Zet daar div's neer. Gebruik voor de achtergrond *tromgeroffel* backgrounds.
Ik had al een leuke site daarover gevonden: http://www.htmlite.com/SD008.php
Maar moet ik dan voor elk menu plus bijbehorend kopje een aparte div maken?
En die divs dan weer in de 'lay-out-tabel'?
Alvast bedankt!

EDIT: Het logo met die ingebouwde berichtenbalk word helemaal leuk om die precies met div te positioneren , want deze bestaat uit veel verschillende plaatjes 8)7

Kan ik eigenlijk ook tabellen IN divs gebruiken? Omdat ik ook telkens gegevens uit de database haal...

[ Voor 25% gewijzigd door annuh op 28-08-2007 20:59 ]


  • JKVA
  • Registratie: Januari 2004
  • Niet online

JKVA

Design-by-buzzword fanatic

annuh schreef op dinsdag 28 augustus 2007 @ 20:28:
[...]
Ik gebruik post omdat get niet werkte bij mij. (Had te maken met het cachen van IE ofzo..?)
Maar is de regel die ik poste wel correct?
[...]
--- knip ---
PHP:
1
2
3
4
<?
print "<body onload=\"new Ajax.Updater('div_loginform_rechtermenu', 'loginform_rechtermenu.php', { method: 'post'});\">
";
?>

Ehm, in je startpost zie ik geen element met het id "div_loginform_rechtermenu". Dan werkt het niet.

Je eerste param is het id van een element. Het bericht dat je terugkrijgt wordt tussen de starttag en eindtag van dat element gestopt. Huidige inhoud wordt vervangen, maar dat is eventueel te tweaken in prototype.

Fat Pizza's pizza, they are big and they are cheezy


  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

annuh schreef op dinsdag 28 augustus 2007 @ 20:41:
[...]

Ik had al een leuke site daarover gevonden: http://www.htmlite.com/SD008.php
Maar moet ik dan voor elk menu plus bijbehorend kopje een aparte div maken?
En die divs dan weer in de 'lay-out-tabel'?
Alvast bedankt!
Voor de menu's kun je beter een UL LI constructie gebruiken in plaats van een tabel. DIVs kunnen ook achter elkaar door schuiven asl het moet (z-index), dat kan met tabellen niet.
annuh schreef op dinsdag 28 augustus 2007 @ 20:41:
[...]

EDIT: Het logo met die ingebouwde berichtenbalk word helemaal leuk om die precies met div te positioneren , want deze bestaat uit veel verschillende plaatjes 8)7

Kan ik eigenlijk ook tabellen IN divs gebruiken? Omdat ik ook telkens gegevens uit de database haal...
Je kunt ook tabellen in divs gebruiken, maar ik gebruik tabellen voor het grootste deel eigenlijk altijd om bij elkaar horende gegevens te groeperen, bijvoorbeeld een lijstje met gebruikers en hun online status of een lijstje met topics en het aantal posts, dat soort echte tabeldata. Voor eigenlijk alle andere zaken heb je nooit een tabel meer nodig.

iOS developer


Verwijderd

Met alle respect, maar dit soort lapmiddelen maken de boel alleen maar ingewikkelder.

Schoon je code op. Weg met spacer gifs, iFrames, tabellen (in div's) en dergelijke kolder. Gebruik HTML zoals het bedoeld is, en geef de boel vorm met CSS. Dan krijg je overzicht, en zie je veel sneller wat je fout doet en hoe het beter kan.

Zijn er dingen die je dan nog niet begrijpt, dan is GoT je vriend :).

  • SinergyX
  • Registratie: November 2001
  • Nu online

SinergyX

____(>^^(>0o)>____

Lange tijd geleden dat ik met iframes heb gewerkt, maar sinds je er toch mee gaat werken: is het niet makkelijker voor optie 2 te gaan, maar dan het rechterframe de login te laten afhandelen en dan pas main een refresh te geven? Gebruik je de rechterframe enkel voor login/foute login melding, klein simpel script die enkel de sessie activeert als ingelogt is.

Ik werkte vroeger met gewone frames waar dit goed werkte.

Nog 1 keertje.. het is SinergyX, niet SynergyX
Im as excited to be here as a 42 gnome warlock who rolled on a green pair of cloth boots but was given a epic staff of uber awsome noob pwning by accident.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Ok! Jullie hebben me overgehaald :P Ik ga het met div's proberen!
Ik heb er al aardig wat over gelezen en zo moeilijk kan het niet zijn!
Een ding snap ik nog niet:
Zoals jullie zien bestaan het linker- en rechtergedeelte uit verschillende 'sub-menu's'.
Hoe maak ik het zo, dat als een sub-menu (bv aan de rechterkant) een beetje uitrekt, de menu's (div's dus) ook naar benenden gaan, want je geeft eigenlijk alle div's een (vaste) positie mee.
Alvast bedankt!
ps. Er komen vast nog wel wat meer vragen :P
Oja, Kan ik het beste voor elk 'stukje' site (dat wil zeggen : kopje, menu, content)
een aparte div maken? Of is het ook mogelijk om bijvoorbeeld meerdere divs te maken, die dezelfde
achtergrond geven etc.. maar ze wel los van elkaar kunnen positioneren (denk aan de menu-kopjes)
Alvast bedankt!

  • BikkelZ
  • Registratie: Januari 2000
  • Laatst online: 24-11 23:24

BikkelZ

CMD+Z

annuh schreef op woensdag 29 augustus 2007 @ 07:48:
Ok! Jullie hebben me overgehaald :P Ik ga het met div's proberen!
Ik heb er al aardig wat over gelezen en zo moeilijk kan het niet zijn!
d:)b
annuh schreef op woensdag 29 augustus 2007 @ 07:48:
Zoals jullie zien bestaan het linker- en rechtergedeelte uit verschillende 'sub-menu's'.
Hoe maak ik het zo, dat als een sub-menu (bv aan de rechterkant) een beetje uitrekt, de menu's (div's dus) ook naar benenden gaan, want je geeft eigenlijk alle div's een (vaste) positie mee.
Alvast bedankt!
Als je een div vast positioneert, en alle andere divs die daar in staan weer niet, dan 'rekt' alles vanzelf mee als je een uitklappend menu hebt met JavaScript. Maar je kunt al deze dingen met een UL LI menu oplossen, het hoeft niet met divs. Het voordeel van UL LI gebruiken is dat het een menu geeft wat op zichzelf al een eenheid is in plaats van een stelletje divs onder elkaar.

Check http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp
annuh schreef op woensdag 29 augustus 2007 @ 07:48:ps. Er komen vast nog wel wat meer vragen :P
Oja, Kan ik het beste voor elk 'stukje' site (dat wil zeggen : kopje, menu, content)
een aparte div maken? Of is het ook mogelijk om bijvoorbeeld meerdere divs te maken, die dezelfde
achtergrond geven etc.. maar ze wel los van elkaar kunnen positioneren (denk aan de menu-kopjes)
Alvast bedankt!
Je kunt de divs ook gewoon doorzichtig houden dan nemen ze het plaatje wat er onder staat over tenzij je er tekst, invoervelden of plaatjes over heen zet.

iOS developer


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Ik ben nu op mijn werk en druk aan het bedenken hoe ik het het beste op kan lossen.
Ik zat te denken aan eerst 4 divs maken
Linkermenu, Midden (iframe? of misschien met Ajax?), Rechtermenu
Footer.
En dan IN het linkermenup-div, andere divs plaatsen, blijven deze divs die ín het linker-menu-div staan ook daadwerkelijk hierin staan? En rekken ze dan ook uit?
Ik ga vanavond alles maar ff uitproberen :P
In ieder geval bedankt voor jullie hulp!

Verwijderd

annuh schreef op woensdag 29 augustus 2007 @ 12:11:
En dan IN het linkermenup-div, andere divs plaatsen, blijven deze divs die ín het linker-menu-div staan ook daadwerkelijk hierin staan? En rekken ze dan ook uit?
Je bent iets aan het doen, maar je hebt geen idee wat.

Het probleem zit hem niet in je div-elementen. Het probleem zit hem in je gebrek aan kennis van HTML en CSS. Je stapt over van tabellen naar "div's", maar waarom? Omdat mensen zeggen dat dat beter is? Een div-element is geen Heilige Graal, maar een noodoplossing.

Menu's kun je zien als een verzameling van hyperlinks. Derhalve kun je menu's het beste vormgeven door gebruik te maken van een lijst (unordered list, element ul). Dat ul-element kun je opmaken zoals je wilt; daar heb je geen div-element voor nodig.

Vijzel je kennis aangaande HTML en CSS op, en alles komt goed.

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Ik ben bezig met div :P
Nu heb ik alleen een vaag probleempje.. er verschijnt een witte rand onder de afbeelding in het menu, weten jullie hoe dit komt? Heb ik verschillende dingen geprobeerd om dit te verhelpen (zie source:)
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
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Algemeen</title>
<STYLE TYPE="text/css">
body {
        text-align: center; /* for IE */
}

img { 
     margin: 0; 
    padding: 0;   
}

#container {
        margin: 0 auto;   /* align for good browsers */
        text-align: left; /* counter the body center */
        width: 872;
}

#linkermenu {
        width: 119;
}

.links_menu_head {
background-image: url(images/menu_l_head.jpg);
color: #ffe8aa;
height: 25px;
padding: 1px 5px;
}

.links_menu_content {
margin:0px;
padding:0px;
vertical-align: bottom;
}
</STYLE>
</head>

<body>
<div id="container">
    <div id="linkermenu">
        <div class="links_tijd"></div>
        <div class="links_menu_head">Algemeen</div>
        <div class="links_menu_content">
            <img src="images/dms_16.gif" width="119" height="23" alt="">
            <img src="images/dms_17.gif" width="119" height="24" alt="">
            <img src="images/dms_19.jpg" width="119" height="24" alt="">
        </div>
        <div class="links_menu_head">De Clan</div>
        
    </div>
    <div class="content">
    
    </div>
    <div class="rechtermenu">
    
    </div>



</div>
</body>

</html>

  • pin_point
  • Registratie: April 2005
  • Laatst online: 30-11 23:17
Volgens mij doe je alles goed, heb het een en ander hier geprobeerd met jouw source code, maar krijg geen witte randen onder de afbeeldingen (alleen onder de afbeeldingen waar geen plaatje onderstaat)

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
EDIT: Hier is een linkje: (ik kon net niet op de ftp-server...
http://annuh13.an.funpic.org/Clansite/indexdivs.htm
Die - Home, - Nieuws en Kalender moeten echt direct onder elkaar, wat doe ik voor stoms fout? |:(

[ Voor 37% gewijzigd door annuh op 30-08-2007 11:28 ]


  • pin_point
  • Registratie: April 2005
  • Laatst online: 30-11 23:17
Direct onderelkaar kun je eenvoudiger doen door de grijzestukjes weg te snijden in een tekenprogramma, je kan het wel met een margin op de IMG's die in links_menu_content zit doen maar dan hou je nog steeds de grijze gebieden.

  • Hurricane
  • Registratie: April 2000
  • Laatst online: 28-11 22:29

Hurricane

Alles is anders dan het lijkt!

In Firefox wordt het gewoon goed weer gegeven, maar in IE7 hier niet. Dus misschien kijken wat je kan doen om IE wel zover te krijgen.

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
pin_point schreef op donderdag 30 augustus 2007 @ 11:44:
Direct onderelkaar kun je eenvoudiger doen door de grijzestukjes weg te snijden in een tekenprogramma, je kan het wel met een margin op de IMG's die in links_menu_content zit doen maar dan hou je nog steeds de grijze gebieden.
Bedankt voor je reactie, maar er zit geen grijs randje onder de afbeeldingen! :o
Zie maar:
http://annuh13.an.funpic.org/Clansite/images/dms_16.gif
Zo zag het er eerst uit:
http://annuh13.an.funpic.org/Clansite

Wat gaat er nou fout...? Er zit gewoon geen grijs randje onder de afbeelding..

EDIT: @ Hurricane, je hebt gelijk, ik heb net ook ff getest...Maar wat zou ik moeten veranderen..?

EDIT: OPGELOST! Dit toevoegen aan de css werkte:

img {
vertical-align: text-bottom;
}

Nu maar hopen dat ik hiermee geen gedoe krijg met de andere afbeeldingen

Bedankt voor julie hulp allemaal!

[ Voor 18% gewijzigd door annuh op 30-08-2007 12:11 ]


  • pin_point
  • Registratie: April 2005
  • Laatst online: 30-11 23:17
annuh schreef op donderdag 30 augustus 2007 @ 11:56:

EDIT: OPGELOST! Dit toevoegen aan de css werkte:

img {
vertical-align: text-bottom;
}
Nu maar hopen dat ik hiermee geen gedoe krijg met de andere afbeeldingen
Je kan 'm ook alleen op één groep afbeeldingen van toepassing laten zijn

.[hier je ID/CLASS van je DIV] img

zo krijg je eventueel ook geen gedoe met andere afbeeldingen :)

  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Bedankt dat werkte! :)

Ik heb alweer een volgende probleem :( :
De volgende code word goed weergegeven in IE7 maar niet in Firefox (.borderright is dan 'weg'..)
HTML:
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Algemeen</title>
<STYLE TYPE="text/css">
body {
        text-align: center; /* for IE */
}
html, body {
height:100%;
}

img {
vertical-align: text-bottom;
}

body {
    background-color: #77746C;
    SCROLLBAR-FACE-COLOR: #615F55; 
    SCROLLBAR-HIGHLIGHT-COLOR: #ABA99D; 
    SCROLLBAR-SHADOW-COLOR: #ABA99D; 
    SCROLLBAR-3DLIGHT-COLOR: #312F29; 
    SCROLLBAR-ARROW-COLOR: #B4B29A; 
    SCROLLBAR-TRACK-COLOR: #6D6A64; 
    SCROLLBAR-DARKSHADOW-COLOR: #312F29
}

#container {
        margin-top: 0px;
        margin: 0 auto;   /* align for good browsers */
        text-align: left; /* counter the body center */
        width: 872px;
        height:400px
}

#borderleft {
        background-image: url(images/border_left.jpg);
        width: 17px;
        height: 100%;
        float: left;
        padding:0px;
}

#borderright {
        background-image: url(images/border_right.jpg);
        width: 17px;
        height: 100%;
        position: absolute;
        padding:0px;
        top: 0px;
}

#header {
        width: 837px;
        float: left;
    }

#linkermenu {
        width: 119px;
        float: left;
        height: 100%;
                }
                
#content {
        width: 598px;
        float: left;
        height: 100%;
                }
                
#rechtermenu {
        width: 121px;
        float: left;
        height: 100%;
                }

.links_menu_head {
background-image: url(images/menu_l_head.jpg);
color: #ffe8aa;
height: 25px;
padding: 1px 5px;
}

.rechts_menu_head {
background-image: url(images/menu_r_head.jpg);
color: #ffe8aa;
height: 25px;
padding: 1px 5px;
}

.links_menu_content {
padding:0px;
vertical-align: bottom;
}
</STYLE>
</head>

<body topmargin="0">
<div id="container">
    <div id=borderleft></div>
    <div id="header">
            <table id="Table_2" border="0" widht="830" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="5">
                    <img src="images/dms_02.jpg" width="838" height="137" alt=""></td>
                <td rowspan="3"></td>
                
            </tr>
            <tr>
                <td rowspan="2">
                    <img src="images/dms_04.jpg" width="191" height="59" alt=""></td>
                <td>
                    <img src="images/dms_05.jpg" width="498" height="28" alt=""></td>
                <td>
                    <img src="images/dms_06.jpg" width="17" height="28" alt=""></td>
                <td>
                    <img src="images/dms_07.jpg" width="95" height="28" alt=""></td>
                <td>
                    <img src="images/dms_08.jpg" width="37" height="28" alt=""></td>
        
            </tr>
            <tr>
                <td colspan="4">
                    <img src="images/dms_09.jpg" width="647" height="31" alt=""></td>
                
            </tr>
            </table>
    </div>
    
    
    <div id="linkermenu">
        <div class="links_tijd"><br></div>
        <div class="links_menu_head">Algemeen</div>
        <div class="links_menu_content">
            <img src="images/dms_16.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_17.gif" width="119" height="24" alt=""><br>
            <img src="images/dms_19.jpg" width="119" height="24" alt="">
        </div>
        <div class="links_menu_head">De Clan</div>
        <div class="links_menu_content">
            <img src="images/dms_22.gif" width="119" height="22" alt=""><br>
            <img src="images/dms_23.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_24.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_26.gif" width="119" height="22" alt=""><br>
            <img src="images/dms_28.gif" width="119" height="24" alt=""><br>
            <img src="images/dms_29.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_30.jpg" width="119" height="26" alt="">
        </div>
        <div class="links_menu_head">Community</div>
        <div class="links_menu_content">
            <img src="images/dms_32.gif" width="119" height="26" alt=""><br>
            <img src="images/dms_33.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_34.gif" width="119" height="23" alt=""><br>
            <img src="images/dms_35.gif" width="119" height="25" alt="">
        </div>
        <div class="links_menu_head">Stats</div>
        <div class="links_menu_content"></div>      
    </div>
    
    <div id="content">HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI   
    </div>
    <div id="rechtermenu"><br>
        <div class="rechts_menu_head"></div>    
    </div>
    <div id="borderright"></div>
</div>

</body>
</html>


Zouden jullie hier even naar willen kijken?

Ik denk dat het probleem zit met de 'positionering' van de divs ten opzichte van elkaar.
Het moet er eigenlijk zo uitzien: (schematisch natuurlijk :P)
code:
1
2
3
4
5
6
| |--------| |
| |--------| |
| |      | |
| |      | |
| |      | |
-----------


Zie ook: http://annuh13.an.funpic.org/Clansite/.

Bovenstaande code is ook live te zien op: http://annuh13.an.funpic.org/Clansite/indexdivs.htm

Ik heb 'gewoon' overal float:left gebruikt maar toen werkte alleen de borderright niet goed. Die heb ik toen absoluut geplaats: top: 0. Maar dit dus niet goed (?). Kunnen jullie mij vertellen wat ik fout doe?

Ps. Het begint er toch wel een beetje op te lijken zo?

@BasieP: Links zijn aangepast en bedankt voor de tip over code=html ! en je hebt gelijk IE doet het waarschijnlijk 'fout' (waardoor het toch goed eruit komt te zien :P)
Hoe zou jij dit dan allemaal positioneren? Alvast bedankt!
Over EDIT 3: Hier staat die code die ik hierboven plaatste: http://annuh13.an.funpic.org/Clansite/indexdivs.htm

Zou jij relative gebruiken dan ipv absolute?

[ Voor 4% gewijzigd door annuh op 30-08-2007 14:59 ]


  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18
ten eerste is is de kans dat 'FF geeft het niet goed weer' correct is enorm klein.
Het is meer waarschijnlijk dat IE het niet goed weergeeft.

Verder is alles floaten ook niet altijd wat je wilt. (wat gebeurd er als je je pagina resized?)

de link die je post (annuh.an. etc.) werkt niet, en geeft alleen maar een irritante reclame.

nog een tip:
leer om CSS en HTML te scheiden. Hierdoor wordt het wat leesbaarder.

ow en nog maar eentje:
op got kan je je code een kleurtje geven (highlighting) door [code=html] enzo toe te passen

edit:
een website centreren kan je gewoon doen door je container een vasten width te geven, en twee 'auto' margins (links en rechts)
rare text-align dingen voor IE zijn vies bah iew! ;)

edit2:
ow en om nog even te reageren op je probleempje met .borderright
waarom absoluut positioneren? waarom 100% hoog?
je weet dat 100% hoog de hoogte van je browser venster of je body/html is he? dus niet de hoogte van de container (divje).

edit3:
zou je btw die code die je hier post ook online kunnen zetten? dan kunnen we kijken waar jij naar kijkt.
(je images bijv. staan daar ook, dus simpel copy pasten naar een locale file laat niet zoveel zien)

[ Voor 38% gewijzigd door BasieP op 30-08-2007 14:56 ]

This message was sent on 100% recyclable electrons.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
De code stond al online! :O Zie mijn vorige bericht.

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18
annuh schreef op donderdag 30 augustus 2007 @ 15:34:
De code stond al online! :O Zie mijn vorige bericht.
gevonden :)

als je nou eens een leuke dev extentie installeerd voor FF (bijv webdeveloper toolbar en/of firebug) dan kan je zo zien waar je .borderright is gebleven.
Deze staat over borderleft heen namelijk.

Je kan dan gewoon zelf debuggen, dat scheelt ons een hoop tijd en jij leert er natuurlijk veel van :)

This message was sent on 100% recyclable electrons.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Bedankt, maar dat had ik al gedaan :P Ik weet alleen niet hoe ik het op moet lossen.. 8)7 :'(

Ik heb ff een voorbeeldje gemaakt zoals ik het graag zou willen hebben:

Afbeeldingslocatie: http://img210.imageshack.us/img210/4598/divsdy1.jpg

De borders, headers en footer (die word relatief, zodat je deze altijd ziet!) hebben vaste afmetingen,
de overige divs hangen af van de content.

Hoe kan ik dit nou het beste oplossen? Absoluut relatief, float.. heb alles (volgens mij) geprobeerd maar geen enkele keer is het goed |:(

[ Voor 69% gewijzigd door annuh op 30-08-2007 16:09 ]


  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18
annuh schreef op donderdag 30 augustus 2007 @ 15:41:
Bedankt, maar dat had ik al gedaan :P Ik weet alleen niet hoe ik het op moet lossen.. 8)7 :'(
oke, zorg ten eerste dat je 1 container hebt (waar je dus ook je titel kop header ding in stopt)

wat dan het makkelijkst is (al is het misschien niet het netst) is een achtergrond plaatje maken van de hele breedte van je pagina (het stuk dat moet herhalen tenminste) en deze zo laag mogelijk te maken (om bandbreedte te besparen)

vervolgens plaats je deze achter je container, en stel je een padding in van een xx pixels.

Vervolgens kan je relatief aan je container nog heel simpel een header/footer etc. plaatsen met andere plaatjes als achtergrond

edit:
adhv je plaatje zou ik beginnen met 1 divje als container, die centreer je.
Daarin zitten 2 divjes, je footer en de rest.
Je footer spreekt voor zich.
Die andere zou ik 1 achtergrond plaatje geven (wat zorgt voor je border rechts en border links)
verder zet je daarin 1 divje als header

vervolgens zet je nog 3 divjes neer (allemaal links floaten) menulinks, content, en menurechts
klaar.
Verder hoef je nergens position:relative of position: absolute te gebruiken.
Enige waar je op moet letten is dat je na je menu rechts divje je floats cleared door bijv <br clear="all">

[ Voor 27% gewijzigd door BasieP op 30-08-2007 16:14 ]

This message was sent on 100% recyclable electrons.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Bedankt! Als je het inderdaad ZO ziet lijkt het wel logisch,
er is echter 1 'probleem'. Die borders zijn plaatjes van 17 pixels breed dus daar moet wel een aparte div voor aangemaakt worden.

Ik ga het zo probeeren

Container verdelen in:
-Linkersborder
-Midden
-Rechterborder

Midden verdelen in:
Header,
Linkermenu, Content, Rechtermenu

Zou ik 'Midden' in een keer kunnen maken? Of zou ik die beter eerst weer kunnen splitsen in
Boven:(Header) en Onder:(Linkermenu content, rechtermenu)

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18
annuh schreef op donderdag 30 augustus 2007 @ 16:25:
er is echter 1 'probleem'. Die borders zijn plaatjes van 17 pixels breed dus daar moet wel een aparte div voor aangemaakt worden.
waarom? je hebt ook padding en margin he, ga daar eens mee spelen :)

This message was sent on 100% recyclable electrons.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Joehoe! Het is gelukt!
HTML:
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Algemeen</title>
<STYLE TYPE="text/css">
body {
        text-align: center; /* for IE */
}
html, body {
height:100%;
}

img {
vertical-align: text-bottom;
}

body {
    background-color: #77746C;
    SCROLLBAR-FACE-COLOR: #615F55; 
    SCROLLBAR-HIGHLIGHT-COLOR: #ABA99D; 
    SCROLLBAR-SHADOW-COLOR: #ABA99D; 
    SCROLLBAR-3DLIGHT-COLOR: #312F29; 
    SCROLLBAR-ARROW-COLOR: #B4B29A; 
    SCROLLBAR-TRACK-COLOR: #6D6A64; 
    SCROLLBAR-DARKSHADOW-COLOR: #312F29
}

#container {
        margin: 0 auto;   /* align for good browsers */
        text-align: left; /* counter the body center */
        width: 872px;
        height:400px;
}

#borderleft {
        background-image: url(images/border_left.jpg);
        width: 17px;
        height: 100%;
        padding:0px;
        float: left;
        min-height: 100%;
}

#midden {
        float: left;
}

#borderright {
        background-image: url(images/border_right.jpg);
        width: 17px;
        height: 100%;
        padding:0px;
        float: left;
}

#header {
        width: 837px;
        float: left;
}

#linkermenu {
        width: 119px;
        float: left;
        height: 100%;
}
                
#content {
        width: 598px;
        float: left;
        height: 100%;
}
                
#rechtermenu {
        width: 121px;
        float: left;
        height: 100%;
}

.links_menu_head {
background-image: url(images/menu_l_head.jpg);
color: #ffe8aa;
height: 25px;
padding: 1px 5px;
}

.rechts_menu_head {
background-image: url(images/menu_r_head.jpg);
color: #ffe8aa;
height: 25px;
padding: 1px 5px;
}

.links_menu_content {
padding:0px;
vertical-align: bottom;
}
</STYLE>
</head>

<body topmargin="0">
<div id="container">
    <div id="borderleft"></div>
    <div id="midden">
            <div id="header">
                <table id="Table_2" border="0" widht="830" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="5">
                        <img src="images/dms_02.jpg" width="838" height="137" alt=""></td>
                    <td rowspan="3"></td>                   
                </tr>
                <tr>
                    <td rowspan="2">
                        <img src="images/dms_04.jpg" width="191" height="59" alt=""></td>
                    <td>
                        <img src="images/dms_05.jpg" width="498" height="28" alt=""></td>
                    <td>
                        <img src="images/dms_06.jpg" width="17" height="28" alt=""></td>
                    <td>
                        <img src="images/dms_07.jpg" width="95" height="28" alt=""></td>
                    <td>
                        <img src="images/dms_08.jpg" width="37" height="28" alt=""></td>            
                </tr>
                <tr>
                    <td colspan="4">
                        <img src="images/dms_09.jpg" width="647" height="31" alt=""></td>                   
                </tr>
                </table>
        </div>  
    
        <div id="linkermenu">
            <div class="links_tijd"><br></div>
            <div class="links_menu_head">Algemeen</div>
            <div class="links_menu_content">
                <img src="images/dms_16.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_17.gif" width="119" height="24" alt=""><br>
                <img src="images/dms_19.jpg" width="119" height="24" alt="">
            </div>
            <div class="links_menu_head">De Clan</div>
            <div class="links_menu_content">
                <img src="images/dms_22.gif" width="119" height="22" alt=""><br>
                <img src="images/dms_23.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_24.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_26.gif" width="119" height="22" alt=""><br>
                <img src="images/dms_28.gif" width="119" height="24" alt=""><br>
                <img src="images/dms_29.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_30.jpg" width="119" height="26" alt="">
            </div>
            <div class="links_menu_head">Community</div>
            <div class="links_menu_content">
                <img src="images/dms_32.gif" width="119" height="26" alt=""><br>
                <img src="images/dms_33.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_34.gif" width="119" height="23" alt=""><br>
                <img src="images/dms_35.gif" width="119" height="25" alt="">
            </div>
            <div class="links_menu_head">Stats</div>
            <div class="links_menu_content"></div>      
        </div>
    
        <div id="content">HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI HOI<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>   
        </div>
            <div id="rechtermenu"><br>
                <div class="rechts_menu_head"></div>    
            </div>
    </div>
            <div id="borderright"></div>
    <br clear="all">
</div>

</body>
</html>


Er is alleen nog 1 probleempje: In IE7 Rekt hij de border left en right wel netjes uit( zolang als de container hoog is, alleen FF doet dit niet..
Dit zou op te lossen zijn door min-height: 100%; toe te voegen maar dan maakt hij ze net zolang als dat het scherm hoog is, daarna houd het op.
Of dit aan de CSS toe te voegen:

html, body {
height:100%;
}

Maar dit heb ik ook al gedaan! :/
Kan iemand mij vertellen hoe dit wel moet?
(Dit is dan eigenlijk de zoveelste css+div+100% height vraag maar wat gaat hier nou fout..?)

Alvast bedankt! Sowieso bedankt voor jullie hulp tot nu toe :)

  • pin_point
  • Registratie: April 2005
  • Laatst online: 30-11 23:17
Ik weet zosnel niet wat je bedoelt, maar het enige wat ik qua verschil zie tussen IE(6) en FF is dat IE iets verder naar links aligned.

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18
annuh, again:
gooi je code niet hier neer, maar zet het online. zoiets heet een testcase en is handig!

Ik heb geen idee waar je laatste versie nou staat, en kan je dus niet helpen.

Ik kan je wel vertellen dat 100% height van borders gewoon niet gaat werken wanneer je content meesized..

This message was sent on 100% recyclable electrons.


  • annuh
  • Registratie: Februari 2006
  • Laatst online: 30-11 20:56
Sorry! Je hebt gelijk! Maar de ftp-server was weer niet beschikbaar..(Ga gelijk over op betaald als de site af is!) Dus ik dacht dat doe ik zo.. maar 'zo' moest ik weer weg :P

Maar hier is de link: http://annuh13.an.funpic.org/Clansite/indexdivs.htm

Alvast bedankt! In IE is het wel goed, maar in FF niet..:?

Het is trouwens best wel leuk, dit gepuzzel met die divs! :P

Verwijderd

annuh schreef op vrijdag 31 augustus 2007 @ 12:27:
Het is trouwens best wel leuk, dit gepuzzel met die divs! :P
Voor de derde keer: je puzzelt met CSS, niet met div-elementen.

Ja, ik ben een zeiksnor, maar ik heb wel gelijk.
Pagina: 1