Photoshop-Tutorials.nl - Photoshop Forum

[skydevil]

Laatst herinnerde ik dat ik een eigen site naam (http://www.michielrave.nl) en nu had ik weer eens zin in photoshoppen, dus heb ik een lay-out gemaakt. Ik heb hier nog een paar vraagjes. Het leek me handige om een nieuw topic te maken dan het is mijn andere te doen, want de vragen zijn nu eigenlijk wel heel anders.

Ik zal eerst even mijn lay-out laten zien.


Ik heb de lay-out met een tutorial gemaakt, maar er zitten veel eigen dingen in. Sommige dingen zijn nog niet helemaal goed, zoals de opsommingstekens, de afbeeldingen links in de sub-menu's en nog wat kleine dingen. Overigens staat er wel tekst in, maar die doe ik er straks in met html.

Mijn eerste vraag is: Hoe moet ik de lay-out in mijn site zetten ? Ik wou "onderdelen" eruit snijden (dus: header-navigatie-rechte items-3 items links-footer) en dan als jpg opslaan en dan in een div zetten (bijvoorbeeld in de div: navigatie).

Verder las in mijn vorige topic dat Gloomy zei dat je zelf ook met je pc een server kan maken, waar je dan bijvoorbeeld een forum op kan zetten. Ik hoef alleen te weten of het mogelijk is (en wat je nodig hebt) thuis een server te draaien waar mijn site dan opstaat.

Verder heb ik met Informatica onderwerpen als Html/Css/Php gehad. Dus ik zou ook graag dingen weten die mijn site wat mooier en praktische zouden maken

[Gloomy]

thuis server draaien is alleen om te testen met servside codes
zoals PHP MySQL enzo.
als je echt thuis een server wilt draaien met dat mensen via internet toegang rkijgen.... naja dan kan ik je niet verder helpen want dat gaat mij te ver haha.
een programma om lokaal een server te draaien is wamp. die gebruik ik zelf ook. is een pakket met apache, php5, mysql, en nog wat ondersteunende delen.

daarna: je moet er aan denken dat je design misschien wel mooi is met die 3 kleine boxjes. maar euehhmm het coderen ervan zodat het goed is in alle browsers is een compleet ander verhaal hehe. Het is best moeilijk om ronde hoekjes te coderen zeker als er nog een on-effen achtergrond in de content box zelf zit ook.
wat ik altijd probeer te doen is de herhalende delen zoeken.

kijk bijv naar je menu,
daar heb je 2 hoekjes. en daartussen in eigenlijk een hele lange balk van hetzelfde.
daar knipje een strookje van 1 pixel breed uit. die sla je op. en in je code laat je die vermenigvuldigen over de hele lengte.

daarnaast. als je met divs wilt gaan werken met zo'n type layout. zorg dan dat je het gelijk de eerste keer doet gaat. lees een aantal readers en tutorials over divs en div-positioning en nesting door. dan kom je al een heel eind.

[skydevil]

Dus met dat pakket kan ik zeg maar een server thuis draaien, waar ik mijn site kan opzetten. En dat ik dan zeg maar gewoon via een soort server van thuis kan testen of alles goed is op mijn site? (dus eigen is het gewoon een test server?).

Ik snap dat het moeilijk is om ronde hoeken en gradients te coderen. alleen ik had het idee om die boxen heel precies uit te knippen en op te slaan als aparte jpg. Dat wil ik met alle dingen doen en dan wou ik ze gewoon als achtergrond doen in een DIV. Dit wou ik met de meest dingen zo doen, alleen het probleem is toch dat het laden van de pagina dan lang duurt ?

Wat jij zegt over die aparte pixels, dat heb ik nog niet gebruikt, maar ik heb het wel vaker gelezen. Het voordeel hiervan is toch dat het haast geen laad tijd heeft (omdat het bestandje maar iets van 1 a 2 kb groot is)?

Wat is trouwens de goede manier om een ronde hoek te coderen ? Een gradient kan je doen zoals de manier met die 1px brede stroken, alleen een ronde hoek.........?

[Gloomy]

niet alleen is het nadeel dat als je ze uitknipt, de laad tijd hoog wordt,
nog leuker is dat lettergrote etc op verschillende computers nogal veranderen en dan klopt de grote van je box niet meer, dan valt de tekst erbuiten of gaat hij zich herhalen.
het beste is om ze anders te coderen. namelijk bijv, met een div met daarin 3 divjes,
eerst de bovenste balk, dan een gradient in de middelste, en dan weer een balk onder.
Dan kan het vakje in iedergeval wel in de lengte groeien

[skydevil]

De laad tijd lijkt me duidelijk, alleen dat van die tekst snap ik niet. De tekst zet ik er niet in met photoshop, maar gewoon in mijn html code en daar geef ik dan de tekst grote aan en dan alleen nog positioneren.

Wat bedoel je met de balk, de gradient en de andere balk ? Bedoel je dat ik bijvoorbeeld het bovenste gedeelte van zo'n item uitknip (inclusief de ronde hoek en het flapje) en dat ik dan een gradient balk maak die ik laat herhalen en dan nog een afsluitende balk (inclusief de ronde hoeken). Wacht, je bedoeld dat je zo kan zorgen dat het item kan "groeien" en "krimpen" als ik er meer tekst in gooi?

En is dat server pakket nou zeg maar een soort test server voor thuis ?

[Gloomy]

dat is juist het probleem skydevil.
de tekst in HTML is verschillend per browser.
standaard tekst en de punt grotes van de tekst zijn erg verschillend in browsers.

"Wat bedoel je met de balk, de gradient en de andere balk ? Bedoel je dat ik bijvoorbeeld het bovenste gedeelte van zo'n item uitknip (inclusief de ronde hoek en het flapje) en dat ik dan een gradient balk maak die ik laat herhalen en dan nog een afsluitende balk (inclusief de ronde hoeken). Wacht, je bedoeld dat je zo kan zorgen dat het item kan "groeien" en "krimpen" als ik er meer tekst in gooi?"

dat bedoel ik inderdaad


en ja wamp is een test server voor thuis. een werkende website met php enz. voor op je eigen computer

[skydevil]

Maar het is toch mogelijk om de grootte van de tekst aan te geven in je CSS. Dus dan moet ik dat gewoon overal bijzetten en als het goed is kijkt het browser dan naar die waarde en niet meer naar de standaard waarde van de browser.

Waar kan ik dan wamp krijgen ? en is het gratis ?

[Gloomy]

wamp is gratis ja http://www.wampserver.com/en/


en alsnog zitten er verschillen tussen, de puntgrote zelf wordt anders genomen in verschillende browsers.
in opera en IE zijn de letters groter als in firefox en google chrome

[skydevil]

Oké bedankt, ik zal eens kijken of het handig is

en eigenlijk maakt het ook niet meer uit, want ik doe het toch met 3 div in een div

[skydevil]

Ik heb nu het design in html en css staan, maar ik ben nu bezig met de navigatie alleen een ding lukt me niet.



Ik wil graag dat alles een paar px omlaag gaat en dit doe je normaal met de margin, maar dit lukt mij dus niet. Ik heb de margin overal al aangepast, maar ik krijg het maar niet voor mekaar. Ik heb dan zo de margin gedaan:

Code: Selecteer alles

il{
display: inline;
margin: 5px 25px;

Alleen het lukt maar niet, de tekst gaat soms zelfs naar rechts heen :S

Dus kan je mee even uitleggen wat ik fout doe? Ik bekijk het trouwens in FireFox

[Gloomy]

je wilt dat de tekst omlaag gaat?
dan moet je de padding van de li omhoog gooien;

li{padding-top: 5px;}

[skydevil]

Het lukt niet met de padding. Hij doet gewoon niks met top-padding. en als ik normale padding gebruikt dan gaat ie opzij :S

Het is toch: omhoog-rechts-onder-links? (bv. 0 3px 0 0| dan gaat ie vanaf links 3 px opzij)

[Gloomy]

geen idee
ik zeg altijd gewoon padding-top padding-left etc

[skydevil]

Het is me gelukt met ik dacht line-height. Maar ik heb nu weer een nieuw probleem.

Ik heb de 3 sub items niet als drie delen opgeslagen (dus niet boven- midden- onder) en nu kom ik niet goed uit met mijn tekst. Het probleem is dat er automatisch teveel tussen ruimte zit tussen de <p> elementen, dus is er een manier om die ruimte veel kleiner te maken ?

En anders moet ik maar die dingen allemaal opnieuw opslaan en dan anders maken.

EDIT: Ik heb nu alle dingen gewoon in drie vakjes gedaan. Is nu wel wat meer werk, maar ik denk dat ik er in de toekomst meer aan heb (Y)

[skydevil]

Even een nieuw berichtje, want ik snap even iets niet.
Ik heb nu dus die dingen in 3 delen verdeeld. een top, een middle en een bottom. Deze heb ik allemaal apart opgeslagen en nu heb ik 3 divjes waar die in staan. En die staan weer in andere divjes. HIer de code dan is het wat duidelijker:

Code: Selecteer alles

div#sub-navigation{
float: left;
width: 350px;
}

div#sub-navigation1{
width: 332px;
height: 126px;
margin: 10px;
}

div#sub-navigation2{
width: 332px;
height: 126px;
margin: 10px;
}

div#sub-navigation3{
width: 332px;
height: 126px;
margin: 10px;
}

div#sub-top{
background: url('navi-top.png') left;
}

div#sub-middle{
background: url('navi-middle.png') left;
}

div#sub-bottom{
background: url('navi-bottom.png') left;
}


Code: Selecteer alles

<div id="sub-navigation">
   
   <div id="sub-navigation1">
            <div id="sub-top"></div>
            <div id="sub-middle"></div>
            <div id="sub-bottom"></div>
                                 </div>
   <div id="sub-navigation2">
            <div id="sub-top"></div>
            <div id="sub-middle"></div>
            <div id="sub-bottom"></div>
                                 </div>
   <div id="sub-navigation3">
            <div id="sub-top"></div>
            <div id="sub-middle"></div>
            <div id="sub-bottom"></div>
                                 </div>
</div>

Het probleem is nu dat ik niks te zien krijg, Ik krijg alleen iets te zien als ik er iets in typ, dus ik snap er helemaal niks meer van :S