Tijden veranderen
Het begin van mijn website
Het log in/register systeem is goed beveiligt met email.
En sessies zijn gebonden op het ip adres van de gebruikers.
Het heeft verschillende ranken, die je via het admin systeem kan veranderen.
Dit is de url: http://*/ ( mijn eigen server, geen verbinding = computer uit )
Momenteel is het alleen een hele simpele lay-out, niet op letten want daar wil ik nog geen aandacht aan besteden.
Het admin systeem idem dito, dit spel moet volledig automatisch werken, dus een goed admin systeem komt later van toepassing.
Wat ik aan jullie wil vragen is de flexibel heid van de broncode.
Vinden jullie dat deze goed is aan te passen met css?
Zo niet, "give me some tips!"
( Dit gaat hoofdzakelijk om alles behalve admin en game.php )
Ik heb uren gewerkt aan het drop down menu, en naar mijn idee werkt het nu goed.
Maar nu is eigenlijk de vraag of de suckerfish drop down css menu prima op verschillende browsers.
Ik weet dat het werkt op IE 6 en de Gecko engine.
Ik heb even een account aangemaakt voor bezoekers:
username: testtest
password: testtest
Alvast bedankt,
Gewijzigd op 01/01/1970 01:00:00 door Johan K
Maar als je in de broncode kijkt, zie je dat de fieldset in een div staat, en de complete inhoud van de fieldset ook in een div en de aparte content ook in een alleenstaande div.
Dit geeft meer mogelijkheden om de fieldset en de div in de fieldset aan te passen om veel manieren.
Ik vind het wel wat style geven als je een titel in een border kan laten weergeven.
Dat is bijna onmogelijk met tables of divjes.
Quote:
Oh ja? Kijk eens naar dit voorbeeldje dan:Dat is bijna onmogelijk met tables of divjes.
Code (php)
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
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
<html>
<head>
<style type="text/css">
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.form {
padding: 20px;
margin: 20px auto;
width: 300px;
border: 2px solid #000;
}
div.form h1 {
font-family: Tahoma;
font-size: 1em;
margin-top: -30px;
background-color: #fff;
padding: 0px 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="form">
<h1>De titel</h1>
<p>De rest van het formulier</p>
</div>
</body>
</html>
<head>
<style type="text/css">
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.form {
padding: 20px;
margin: 20px auto;
width: 300px;
border: 2px solid #000;
}
div.form h1 {
font-family: Tahoma;
font-size: 1em;
margin-top: -30px;
background-color: #fff;
padding: 0px 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="form">
<h1>De titel</h1>
<p>De rest van het formulier</p>
</div>
</body>
</html>
ps. Zoals gewoonlijk werkt het in IE nog niet zoals in FF, maar dit is zeker crossbrowser te krijgen!
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
Quote:
ps. Zoals gewoonlijk werkt het in IE nog niet zoals in FF, maar dit is zeker crossbrowser te krijgen!
Misschien moet ik maar even die regel aanpassen dat het bijna onmogelijk met tables of divjes.
Het is bijna onmogelijk met tables en divjes om in elke browser het zelfde resultaat te krijgen.
IE 6.0 is daar een voorbeeld van, nog te veel mensen gebruiken die browser nog steeds.
En zoals je zegt: "Zoals gewoonlijk werkt het in IE > nog < niet"
En dat zal dus ook nooit gebeuren met de oudere browsers van hun.
Misschien met een beetje moeite lukt het wel, maar je zal nooit de zekerheid hebben dat het werkt op > elke < browser.
En om zoveel te testen en te kijken of alles goed werkt, kost gewoon te veel tijd.
Misschien voor de toekomst, nu nog niet.
Fieldset is simpel, 2 tags om te bereiken wat ik wil, en met padding rendered alles op elke browser hetzelfde.
Fieldset is ook heel goed aan te passen, vergis je niet!
body fieldset legend { padding-left: 30px; padding-right: 20px; border: 1px solid black; }
Je kan er ook voor zorgen dat de complete bovenste lijn weg gaat, en de legend daar op gaat centeren, precies wat jij had gedaan in jouw code.
En dat dan zelfs nog beter, want.. het enige wat je doet is het een witte achtergrond geven.
Als je een andere achtergrond kleur gebruikt in de body, ruïneer je je "titel".
Deze werkt wel in IE 6.0, met fieldset:
Code (php)
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
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
<html>
<head>
<style type="text/css">
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.form {
padding: 20px;
margin: 20px auto;
width: 300px;
border: 2px solid #000;
}
body div fieldset
{
border: 4px double black;
}
body div fieldset legend
{
border: 2px solid black;
padding: 0 125px 0 110px;
}
</style>
</head>
<body>
<div class="form">
<fieldset>
<legend>Titel</legend>
My form!
</fieldset>
</div>
</body>
</html>
<head>
<style type="text/css">
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.form {
padding: 20px;
margin: 20px auto;
width: 300px;
border: 2px solid #000;
}
body div fieldset
{
border: 4px double black;
}
body div fieldset legend
{
border: 2px solid black;
padding: 0 125px 0 110px;
}
</style>
</head>
<body>
<div class="form">
<fieldset>
<legend>Titel</legend>
My form!
</fieldset>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Johan K
Quote:
Zie het resultaat, een crossbrowser fieldset imitatie die in ieder geval in FF, IE7 en IE6 werkt:Het is bijna onmogelijk met tables en divjes om in elke browser het zelfde resultaat te krijgen.
Fieldset imitatie
Als je zorgt dat je CSS goed crossbrowser is, weet je zeker dat het er in elke browser goed uitziet.
ps. Het blijft gewoon makkelijker om een paar divjes te stylen dan een fieldset. De interpretatie daarvan wil nog wel eens verschillen in sommige browsers...
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
Code (php)
1
div.register_input_email
kan je veel beter zo doen
Code (php)
1
#register input[name=email]
Gewijzigd op 01/01/1970 01:00:00 door - -
Edit:
Hele goede tag, maar in IE 6.0 werkt hij niet.
Gewijzigd op 01/01/1970 01:00:00 door Johan K
