Tijden veranderen
[Review] Nieuw Design
ik heb onlangs een nieuw design gemaakt dat ik
Dan bij voorbaat.
Screenshot:
Live:
http://paradox-productions.net/design/
Edit:
De layout is ook XHTML 1.0 Transitional valid & CSS valid, ik ben toch niet van plan hem te plaatsen op freelayouts.com, kvind hem leuk en ga voor mezelf gebruiken XD
Gewijzigd op 01/01/1970 01:00:00 door Wouter De Schuyter
De style/opbouw vindt ik netjes, alleen de header wat minder.
robin schreef op 09.03.2008 17:41:
Ik ben niet zo van die web 2.0 achtergrond.
De style/opbouw vindt ik netjes, alleen de header wat minder.
De style/opbouw vindt ik netjes, alleen de header wat minder.
Ik heb elke kleur van header geprobeerd maar het lijkt allemaal niet te passen :p zwart was de enige optie en ja het is niet spectaculair maar als ik hem dan toch op een layout site wil plaatsen hoeft dat ook niet want ik ga er van uit dat de mensen hem zelf gaan aanpassen, de website is ook xhtml 1.0 transitional valid en css valid
Maar probeer wel op je structuur te letten, door middel van
valt dat heel goed op te lossen!
robin schreef op 09.03.2008 17:52:
Valid = p-pe-perfect
Maar probeer wel op je structuur te letten, door middel van
Maar probeer wel op je structuur te letten, door middel van
valt dat heel goed op te lossen!
[/quote]
Ik begrijp u niet goed :p, wat bedoeld u juist met op mijn structuur letten? De divs? En wat is de
[/quote]
Ik begrijp u niet goed :p, wat bedoeld u juist met op mijn structuur letten? De divs? En wat is de
-oplossing XD?
Voor je tekst in de header misschien zo'n blauw randje (glow effect).
De tekst in het menu iets hoger dus net op de scheiding tussen licht en donker blauw.
Voor die bloqqoute en de code op dezelfde margin zetten.
Verder is hij zeer normaal en niet super web2.0 maar dat is denk ik ook niet de bedoeling.
wouter schreef op 09.03.2008 17:55:
Ik wil volgende melden.
Voor je tekst in de header misschien zo'n blauw randje (glow effect).
De tekst in het menu iets hoger dus net op de scheiding tussen licht en donker blauw.
Voor die bloqqoute en de code op dezelfde margin zetten.
Verder is hij zeer normaal en niet super web2.0 maar dat is denk ik ook niet de bedoeling.
Voor je tekst in de header misschien zo'n blauw randje (glow effect).
De tekst in het menu iets hoger dus net op de scheiding tussen licht en donker blauw.
Voor die bloqqoute en de code op dezelfde margin zetten.
Verder is hij zeer normaal en niet super web2.0 maar dat is denk ik ook niet de bedoeling.
Bedankt had nog niet gezien van dat margin bij <code> en <blockquote>, ook bedankt voor 'css reset' file :p xd alleen zie ik niet in wat je er mee kan doen?
Je moet hem net zoals je andere css file include en klaar.
(verdere uitleg kan ik niet geven maar jan K. Wel...)
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
wouter schreef op 09.03.2008 18:05:
In FF heb je vaak dat je margin oké is. Ga je dan kijken in IE 7 of wat dan ook van IE dan zie je dat het versprongen is. Met de reset file zoals de naam het zelf zegt brengt deze file alle margin-padding en andere toestanden terug tot FF (of andere dergelijke browser). Dus stel dat je in FF doet 10px en Ie maakt daar van 5px die reset file zorgt dat het toch nog 10px word.
Je moet hem net zoals je andere css file include en klaar.
(verdere uitleg kan ik niet geven maar jan K. Wel...)
Je moet hem net zoals je andere css file include en klaar.
(verdere uitleg kan ik niet geven maar jan K. Wel...)
lol dit is rampzalig kijk maar
wouter schreef op 09.03.2008 18:19:
Waar moet ik kijken ? :)
Had het al trg gezet.
pepijn de vos schreef op 09.03.2008 18:28:
ik zou je menu text anders plaatsen, helemaal onder of boven, of in het midden, niet halverwege het midden en de onderkant... nu gaan net de bovenkanten van de letters over de gens licht/donker heen.
Zal dit morgen wel doen, kga nu af pc nog wat voor school werken enzo.
bye iedereen
De bedoeling is dat je "inspringt" als je in een div/tag werkt.
robin schreef op 09.03.2008 19:07:
Welke leipe heeft de tab toets hier uitgezet? :D
De bedoeling is dat je "inspringt" als je in een div/tag werkt.
De bedoeling is dat je "inspringt" als je in een div/tag werkt.
Ahnzo de tab toets :p, kwn kvind het niet echt nodig ik gebruik het alleen in css en dan nog mijn index ziet er zo uit vandaar dak het niet echt nodig vind
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include ('inc/head.php'); ?>
</head>
<body>
<div class="position">
<div class="container">
<? include ('inc/header.php'); ?>
<div class="nav">
<? include ('inc/nav.php'); ?>
</div>
<div class="content">
<? include ('inc/system.php'); ?>
</div>
<div class="footer">
<? include ('inc/footer.php'); ?>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include ('inc/head.php'); ?>
</head>
<body>
<div class="position">
<div class="container">
<? include ('inc/header.php'); ?>
<div class="nav">
<? include ('inc/nav.php'); ?>
</div>
<div class="content">
<? include ('inc/system.php'); ?>
</div>
<div class="footer">
<? include ('inc/footer.php'); ?>
</div>
</div>
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include ('inc/head.php'); ?>
</head>
<body>
<div class="position">
<div class="container">
<?php include ('inc/header.php'); ?>
<div class="nav">
<?php include ('inc/nav.php'); ?>
<div>
<div class="content">
<?php include ('inc/system.php'); ?>
</div>
<div class="footer">
<?php include ('inc/footer.php'); ?>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include ('inc/head.php'); ?>
</head>
<body>
<div class="position">
<div class="container">
<?php include ('inc/header.php'); ?>
<div class="nav">
<?php include ('inc/nav.php'); ?>
<div>
<div class="content">
<?php include ('inc/system.php'); ?>
</div>
<div class="footer">
<?php include ('inc/footer.php'); ?>
</div>
</div>
</div>
</body>
</html>
Maak geen gebruik van shorttags(php)
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Je source is 1256341545646445.1% beter te lezen, je snapt het sneller en je kunt ook dingen sneller vinden. Ik vindt persoonlijk dat het een onderdeel van het "valid" gedoe moet worden.
het is overzichtelijk genoeg zoals het is (voor mij toch) dat is toch een persoonlijke keuze?
Klopt helemaal , maar het is geen onderdeel van het valid gedoe dus vind ik dat jullie er niet over moeten zaniken. Als je zelf fijn vindt, vooral doen.
Gewijzigd op 01/01/1970 01:00:00 door Henk PHP
css van de navigatie:
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
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
.nav {
height: 30px;
background: url('img/nav_bg.gif');
}
.nav_item {
float: left;
}
.nav_item a{
color: #FFF;
text-decoration: none;
display: block;
}
.nav_item:hover {
background: url('img/nav_link_bg.gif');
height: 30px;
display: block;
}
.sepr {
font:10px Arial, Helvetica, sans-serif;
color: black;
letter-spacing:.1em;
line-height:16px;
text-align: center;
padding: 10px;
background: url('img/sepr.gif') top right no-repeat;
}
height: 30px;
background: url('img/nav_bg.gif');
}
.nav_item {
float: left;
}
.nav_item a{
color: #FFF;
text-decoration: none;
display: block;
}
.nav_item:hover {
background: url('img/nav_link_bg.gif');
height: 30px;
display: block;
}
.sepr {
font:10px Arial, Helvetica, sans-serif;
color: black;
letter-spacing:.1em;
line-height:16px;
text-align: center;
padding: 10px;
background: url('img/sepr.gif') top right no-repeat;
}
xhtml van de navigatie:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="nav">
<div class="nav_item"><div class="sepr"><a href="#">Home</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">News</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Pages</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Downloads</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Links</a></div></div>
</div>
<div class="nav_item"><div class="sepr"><a href="#">Home</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">News</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Pages</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Downloads</a></div></div>
<div class="nav_item"><div class="sepr"><a href="#">Links</a></div></div>
</div>