*zucht* ik loop vast, navigatie maken

[Dingo]

Ik geef als eerste meteen toe dat ik snel opgeef Ben nu een tijdje aan het rommelen met de layout van mijn website. Ik heb het helemaal in mijn hoofd, en kan alles maken maar alleen als "knip-en-plak-werk".

Ik neem aan dat het niet slim is alle knoppen met link naar aan nieuwe pagina te laten verwijzen? Lijkt me langzaam te worden. Maar dat hele CSS template gedoe, ik kom er niet uit. Ik was al zover dat ik een pagina met knoppen heb, die knoppen zijn afbeeldingen en moeten verticaal links uitgelijnd staan. Waar moet ik beginnen om dat in CSS te zetten, zo moeilijk kan het toch niet zijn, ARG! Weet iemand een goede uitleg/start?

Heb dit topic al gelezen http://www.mozbrowser.nl/forum/viewtopi ... 93#p110593 maar snap dan niet waar ik die CSS style bestanden moet laten, en hoe ernaar verwezen wordt...
Frontpage was toch wel heel simpel, ja ik weet het, met alle nadelen vandien

[nirwana]

In het onderwerp dat je aanhaalt heb ik ook http://weisbeek.freewebhostx.com/web/tr ... rames.html geplaatst (toen nog gehost door @home).
Is dat ongeveer wat je zoekt ?

Je zegt overigens dat je verwacht dat het traag wordt als je steeds naar een andere pagina verwijst, maar toch lijkt dat me wel de beste manier.
Overigens verwacht ik dat die "traagheid" wel meevalt, want een browser houdt bestanden die hij al eerder heeft gedownload in z'n cache-geheugen vast. Die hoeven dus niet nogmaals gedownload te worden. Als je de meeste opmaak in CSS plaatst, dan hoeft dat ook maar 1 keer gedownload te worden.

[Dingo]

okee, ik heb me er zojuist aardig doorheen gewurmd, dat heb ik altijd, als de wanhoop nabij is lukt het ineens toch

Had het voorbeeld wat je noemt idd al bestudeerd, dat is ongeveer de basis opmaak, maar ik had zelf in psp knoppen gemaakt, en snapte dat effe niet, nu wel .
Dus je navigatie plaats je op elke andere pagina opnieuw, waarbij je telkens natuurlijk naar dezelfde .css verwijst? dat klinkt al simpeler, ik neem aan dat je de css file gewoon in de root "naast" de index.html zet op je site?

[Frederik]

Helemaal correct en in iedere pagina die je maakt, maak je een link naar het css bestand.
Dat is CSS in een notendop.

[Dingo]

owkee... dan gaat het verder goedkomen denk ik, kan weer even verder!
Heb trouwens na mijn post hier effe gegoogled op "css beginner" en dat hielp al behoorlijk

[nirwana]

owkee... dan gaat het verder goedkomen denk ik, kan weer even verder!

En anders gooi je wat je tot nu toe hebt eens online, plaats je hier op het forum een linkje naar de pagina en dan kunnen we even meekijken (en eventueel ook suggesties doen).

[Dingo]

owkee... dan gaat het verder goedkomen denk ik, kan weer even verder!

En anders gooi je wat je tot nu toe hebt eens online, plaats je hier op het forum een linkje naar de pagina en dan kunnen we even meekijken (en eventueel ook suggesties doen).

mja, wil nog effe 1 ding vragen voor ik hem upload, in het voorbeeld gebruik je de div "wrapper" om een achtergrond afbeelding aan te geven. Ik wil hem echter over de hele pagina hebben, dus ook achter de navigatie enzo. Nou kan ik dat in komposer gewoon via pagina opmaak doen, maar waarschijnlijk kan het ook in css, ik heb de "body" ervoor genomen...alleen het lukt niet. Het is een jpg afbeelding die al online staat, kan het alleen met gif ofzo? Hij gooit hem ook telkens uit de body css, dus ik zal iets niet goed doen... doe het nu zo
background-image: url (bestandsnaam.jpg) repeat top left;

wat doe ik verkeerd? of is het vioa de pagina opmaak ook goed genoeg?

[Frederik]

Dit is nu precies de reden waarom het handig zou zijn dat je website online zou zijn: kunnen we meekijken.
Nu blijft het maar wat gissen over wat er niet goed gaat en over hoe het er uit ziet.

Achtergrond afbeelding kan zowel via css als via pagina opmaak. Maakt in wezen weinig uit.
Waarom moet de afbeelding zich links herhalen aan de bovenkant, en zich niet simpelweg 'herhalen'

[Dingo]

Dit is nu precies de reden waarom het handig zou zijn dat je website online zou zijn: kunnen we meekijken.
Nu blijft het maar wat gissen over wat er niet goed gaat en over hoe het er uit ziet.

Achtergrond afbeelding kan zowel via css als via pagina opmaak. Maakt in wezen weinig uit.
Waarom moet de afbeelding zich links herhalen aan de bovenkant, en zich niet simpelweg 'herhalen'

ik snap dat je dan mee kunt kijken, maar komposer gooide mijn regel er telkens uit, dus dan kun je hem ook niet zien Hij moet zich niet herhalen aan de bovenkant, maar daar beginnen.... ik doe het wel even via pagina opmaak...

effe paar oliebollen uit het vet vissen dan zet ik hem online...

[Dingo]

zo, hij staat erop
http://www.streepjes.com/webtest2.html
en dan op de Hollandse vlag klikken andere talen volgen nog. Maar dat is een eitje als die css eenmaal goed is

Ik wil de header nog vervangen door een afbeelding in dezelfde stijl als de knoppen, met dan die titel in de afbeelding ipv als tekst, daar wordt nog aan gewerkt....

edit: uhm... er gaat meteen al iets niet goed, verwijs geloof ik niet naar mijn stylesheet...ik pruts weer even...
weer edit: had geen css extentie achter mijn stylesheeet staan

[nirwana]

Op http://weisbeek.freewebhostx.com/web/st ... lands.html heb ik een voorbeeld gemaakt waarin ik de knoppen ook via CSS heb opgemaakt.

Zo heb je eigenlijk nog maar 1 achtergrond-afbeelding voor de knoppen van de hele site nodig en kun je daar gewoon tekst op plaatsen. Dat lijkt me ook handiger als je straks in meerdere talen afbeeldingen gaat maken. Of als je eens de tekst van een knop aan wilt passen. Dan heb je daarvoor geen grafisch programma meer nodig. Met welk programma maak je nu deze knoppen ?

Dit is de achtergrond-afbeelding die ik nu heb gebruikt: http://weisbeek.freewebhostx.com/web/st ... n/back.jpg
Ongetwijfeld kun je hier zelf een betere achtergrond-afbeelding voor maken, want ik heb nu gewoon jouw Home-knop gepakt en daar de tekst "afgeveegd".

Dit is de CSS-code:

Code: Selecteer alles

div.blok
{
	width: 		162px;
	height: 		44px;
	text-align: 		center;
	vertical-align: 	middle;
	background: 	url(back.jpg) no-repeat;
}

De tekst heb ik vervolgens ook weer met CSS-code opgemaakt:

Code: Selecteer alles

div.blok a
{
	font-size: 			24px;
	color: 			#FFFFFF;
	text-decoration: 	none;
	font-family: 		Comic Sans MS, Arial, sans-serif;
}

En zo krijg je een gele tekst als je over de knop heen beweegt:

Code: Selecteer alles

div.blok a:hover
{
	color: 			yellow;
}

[Dingo]

Ik was al druk aan het ctrl-U-en en toen zag ik dat je het eronder helemaal uitlegt Ik had het al aardig begrepen zie ik, dus het begint te vallen, dat kwartje. Ik snap hoe je die tekst dan op de knoppen zet, maar nadeel is dat als je een lettertype gebruikt wat mensen niet hebben het vervangen wordt door Arial ofzo.... ik ben beter met het grafische gedoe dan met webdesign geloof ik, heb een soort mal in psp voor deze knop, dus aanpassingen zijn zeer snel gemaakt. Voordeel vind ik dan dat ik een vast lettertype houdt, want het is een afbeelding en wordt niet als tekst weergegeven.
Het geel worden van de letters, leuk om te leren hoe dat kan, maar dat vind ik nou ongeveer zo erg als jullie die muziek op websites vinden

Ik ga even kijken of ik dat navigatie block onder de knie krijg, en dan is het grootste werk in feite klaar, hoe ik alleen nog maar te knippen en te plakken met de stylesheets, en wat vertalen.

Ben erg blij met de hulp!
oja, nog een vraag, ik zie dat je in de body niet aangeeft dat de background-img herhaald moet worden, gebeurt dat dus standaard, en hoef je alleen aan te geven als je dit niet wilt, of op een bepaalde manier?

[Dingo]

hmm, er viel net weer een kwartje, als ik wel alleen een achtergrond gebruik voor de knop hoef ik maar 1 url op te geven natuurlijk.... en comic is wel behoorlijk standaard dus iedereen krijgt dan de juiste weergave lijkt me...

[nirwana]

oja, nog een vraag, ik zie dat je in de body niet aangeeft dat de background-img herhaald moet worden, gebeurt dat dus standaard, en hoef je alleen aan te geven als je dit niet wilt, of op een bepaalde manier?

Standaard wordt een achtergrond-afbeelding inderdaad herhaald, tenzij je een no-repeat meegeeft.

[nirwana]

en comic is wel behoorlijk standaard dus iedereen krijgt dan de juiste weergave lijkt me...

Onder Windows in elk geval wel. Het werken met grafische knoppen vind ik iets uit een vorige eeuw, toen het Internet nog in de kinderschoenen stond en je nog niet zoveel met CSS kon doen. Daarnaast begrijpt een zoekmachine er nu ook iets van, terwijl die met zo'n grafische knop weinig kan. Maar het gaat er natuurlijk om wat voor jou het best te onderhouden is.

Nu hoeft er echter slechts 1 keer deze afbeelding geladen te worden en die wordt dan herhaald. Anders moeten er allemaal aparte afbeeldingen worden gedownload die steeds net een klein beetje van elkaar verschillen. Maar goed, dat zijn optimalisaties in de marge.