PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

[preview] design

Door Joshua op 20-01-2008 22:40
2.898 views
Hallo beste mensen,

Ik heb een design in elkaar geknutseld en voordat ik overga tot slicen en coderen wilde ik graag weten van jullie (het kritische oog) wat jullie er van vinden.

Ik sta natuurlijk helemaal open voor kritiek! But be nice to me :p

Het is nu enkel een .jpegje en het doel was: simpel en kleurvol


www.joshuaboyd.nl
N
Niek Weevers
21-01-2008 09:14
Ik vind dat ontwerp van Bart van der Veen niet echt veel beter dan dat jij hebt.
Hij zet het menu op de afbeelding. Ik zou hem eronder houden. Is mooier en duidelijker.

Ik vind het kleurige wel iets hebben, spreekt aan. Waarvoor zijn die bolletjes achter het menu?? Dat is me een beetje onduidelijk.

Er mist wel iets denk ik tussen de foto en je menu. Als je die oranje balken aan de zijkant weghaalt en deze onder de foto plaatst? Of iets dergelijks. Je moet een beetje proberen.

Wat ik van Bart wel goed vind is dat hij een 'top' heeft. Bij jou is dit open. Lijkt net of het niet af is.
N
Niek Weevers
21-01-2008 14:42
Ik vind dat witte verloop aan de zijkanten niet mooi. Steekt er veel te veel uit.
Welk lettertype gebruik je voor de tekst. Let er wel op dat het een lettertype moet zijn die door browsers wordt ondersteund, dus arial, verdana, tahoma oid
J
Joshua
21-01-2008 15:35
Niek, mijn lettertype is idd niet een door browsers ondersteunde font, dat veranderd natuurlijk ook wel wanneer ik hem ga coderen
The Ultimate
21-01-2008 16:29
Aaah, je hebt de rondjes netjes in het midden en niet meer zo scherp....!! Ziet er meteen veel en veel beter uit...!!

Mini-instructie:
zie rechtsboven de binnenkant van de groene lijn: die gaat van zacht ineens naar scherp (zie je het, bijna helemaal bovenaan).

Verder zou ik de lijnen misschien niet helemaal laten overvloeien naar het witte, maar misschien toch iets door laten schemeren.

Goede progressie! En bedankt voor jouw reactie op mijn ontwerp.
J
Joshua
21-01-2008 17:32
Ik loop vast met het coderen. Dit is namelijk mijn eerste keer slicen en coden en dit is dus allemaal een groot avontuur voor mij.

Ik zal hieronder de code posten die ik heb geschreven. Alleen werkt hij niet volledig, ik krijg de linker sidebar en de rechter sidebar niet werkend..

Ik heb al enkele tutorials doorgespit maar ik mis denk ik toch nog de essentie van het css coderen.

styles.css

body {
margin: 0;
padding: 0;
text-align: center;
}
#whole{
width: 100%;
margin: 0 auto 0 auto;
}
                #sidebar_leftcorner {
                margin_top: 0 px;
                background: #FFF url('layout/sidebar_leftcorner.gif') no-repeat;
                }
               #sidebar_left {
               margin-top: 52px;
               width: 55px;
               background: #FFF url('layout/sidebar_left.gif') repeat-y bottom;
                }
                                   #container {
                                   width: 810px;
                                   margin: 0 auto 0 auto;
                                   text-align: left;
                                   }
                                                 #header {
                                                 height: 51px;
                                                 background: #FFF url('layout/header_top.gif') repeat-x bottom;
                                                 }
                                                 #logo {
                                                 height: 225px;
                                                 background: #FFF url('layout/logo.gif') bottom;
                                                 }
                                                #navbar {
                                                height: 30px;
                                                background: #FFFFFF bottom;
                                                }
                                                #content {
                                                height: 400px;
                                                background: #FFFFFF bottom;
                                                }
                                                #footer {
                                                height: 46px;
                                                background: #FFF url('layout/footer.gif') repeat-x bottom;
                                                }


En dan heb ik hier de index.html pagina:

index.html


<html>
<head>
	<title>
		Joshua Boyd's Persoonlijke Website 
	</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	  <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="whole">
           <div id="sidebar_leftcorner"></div>
           <div id="sidebar_left"></div>
                                                 <div id="container">
                                                           <div id="header"></div>
                                                           <div id="logo"></div>
                                                           <div id="navbar">NAVBAR</div>
                                                           <div id="content">CONTENT</div>
                                                           <div id="footer"></div>
                                                  </div>
          <div id="sidebar_rightcorner"></div>
          <div id="sidebar_right"></div>
</div>
</body>

</html>


HELP
-
- -
21-01-2008 17:34
[google]css tutorial[/google]

Heb je een online voorbeeld?
N
Niek Weevers
21-01-2008 18:17
Sowieso een belangrijke tip:
begin groot en ga steeds meer gedetailleerd te werk.

Bijvoorbeeld:
Begin met de afmetingen van de site. Gecentreerd of niet?
Daarna globaal indelen: header, content, footer bijv. incl afmetingen.
Daarna weer opdelen: heeft content bijv kolommen?

Dit werkt het beste, wanneer je een foutje tegenkomt is dit makkelijker te herkennen en verbeteren. En het werkt gewoon het makkelijkste.
J
Joshua
21-01-2008 18:21
Oke dat begrijp ik. Maar hoe krijg ik die linker en rechter kollommen aan het werk? De rest werkt eigenlijk gewoon precies zoals het hoort.

Reageren

Inloggen om te reageren