hyperlink

Status
Niet open voor verdere reacties.
Nog even terug te komen op het verander van die kleur, ik bedoel de kleur buiten de hoofdcontainer ik krijg dan een zwart vak of paars langs de hoofdcontainer en de rest blijft gewoon blauw.
 
Ah, ik snap. het.
Dat is volgens mij gewoon 'n kwestie van smaak. Op die manier spelen met kleuren kan wel de illusie geven dat er meer op staat, zonder dat er echt meer op staat.
Je zou in plaats van zwart (dat zou dan in de body komen, neem ik aan), ook bijvoorbeeld 'n heel rustig achtergrondplaatje kunnen nemen, zo'n plaatje dat je eigenlijk nauwelijks ziet. Maar dat blijft toch voornamelijk 'n kwestie van smaak.

De pagina niet te vol maken is eigenlijk niet alleen 'n kwestie van smaak. Te volle pagina's met te veel keuzemogelijkheden maken bezoekers in de regel niet echt gelukkiger. Maar wat rustige extra vulling, dat zou prima kunnen.

Mocht je aan 'n plaatje denken, dan kun je 't best geen grote afbeelding nemen, maar 'n 'tile'. Dat is 'n klein plaatje dat steeds wordt herhaald.
Wat je ook wel ziet is 'n gradient: 'n kleur die van links naar rechts verloopt, of van boven naar beneden. Meestal met 'n klein kleurverschil, want van knalblauw naar knaloranje levert acute migraine op. (Dat zag je vroeger nog wel, grinnik.)
Zo'n gradient kan ook klein zijn. Hoeft, als je van links naar rechts laat verlopen, maar 1 px hoog te zijn, omdat hij steeds wordt herhaald. Bij van boven naar onder verlopen 1 px breed.

Maar ik zou 't persoonlijk niet zo druk maken dat de aandacht van de tekst en zo wordt afgeleid.
Misschien kun je ook rondom de afbeeldingen 'n kleurtje aanbrengen?

En hier ligt ook 'n prachtige kans voor alle creatieve geesten op dit forum die altijd al 'n fantastische pagina hadden willen maken...
 
Laatst bewerkt:
ok

ja aan een border om een afbeelding heb ik ook al een keer over ziten nadenken ik ga het een keer proberen .
Ja en wat je zegt smaken verschillen wat de een mooi vindt vindt de ander weer verschikkelijk het blijft toch altijd wat.
 
Laatst bewerkt:
goede dag

Ik heb de foto's nu recht gefloat dat werk perfect ook bij een groot beeldscherm en blijven netjes binnen de hoofdcontainer en naast de tekst.
Maar er is iets anders wat ik nog niet helemaal snap,
namelijk het volgende

dat menu links valt bij grote beeldschermen buiten de hoofdcontainer.
dus als ik later de body kleur wil veranderen of er een foto wil plaatsen gaat dat nu niet
 
Laatst bewerkt:
Bij mij staan de afbeeldingen nog niet goed op een groot scherm, maar ik zie dat je ze nog niet hebt gefloat. Ik neem aan dat je dat nog moet doen, anders is er iets misgegaan.

Bij het menu zijn er twee onderdelen:
#menu: dit zie je niet op het scherm, maar het is er wel degelijk.
ul.navbar: dit is het menu wat je ziet. Dit staat in de html binnen #menu

Als je #menu even 'n rode border geeft en ul.navbar 'n gele, dan zie je waar ik het over heb.
ul.navbar is absoluut gepositioneerd. Dat wil zeggen dat het op een bepaalde positie wordt neergezet TEN OPZICHTE VAN de eerste ouder die zelf een positie heeft.
#menu heeft geen positie, daardoor is ul.navbar losgekoppeld van #menu.

Als je nu bij #menu in de css toevoegt {position: relative;}, dan wordt ul.navbar gepositioneerd ten opzichte van #menu.
#menu staat steeds op dezelfde plaats, dus ul.navbar nu ook. Dat wil zeggen: dezelfde plaats ten opzichte van de hoofdcontainer.

'n Andere mogelijkheid is dat je bij ul.navbar de absolute positie gewoon weghaalt (en dus ook right en zo). Dan komt hij gewoon binnen #menu te staan.
Als je dan #menu op de goede plaats zet (misschien staat hij daar al), zal ul.navbar gewoon vrolijk meeschuiven. Als ik dit zo even snel bekijk, lijkt mij dit het simpelste, en volgens mij staat het dan gelijk redelijk goed.
Eventuele aanpassingen kun je dan gewoon maken door de marge en zo in #menu aan te passen.

Bij ul.navbar mist trouwens in de css padding: 0;
Sommige browsers geven 'n enorme padding aan 'n <ul> en andere niet, dus dat levert nogal 'n ander uiterlijk op.
 
Ok begin het te snappen.

Ik het het veranderd ik denk dat het goed is alleen loop ik weer tegen een klein probleempje op.

ik heb normaal naast mijn menu een verticale streep die ik maak in ul-navbar door een border right mee te geven kleur 99ccff, nu ik dit veranderd heb werkt dat niet meer in ie7 in,ie6 en andere browers wel, alleen in de pagina sitemap geeft hij een stukje van de lijn weer , vreemd
ik heb al lopen zoeken maar zie het nog niet.
 
Laatst bewerkt:
Ik heb 't even vlug bekeken. Volgens mij staat die border van ul.navbar net buiten #menu, is die net te breed. Dan hoort die gewoon weergegeven te worden, maar IE 7 heeft enorme problemen met z-index, dus dat zal wel weer opspelen.
Als ik #menu 170px breed maak, zie je de lijn in IE 7. Mogelijk kan 't ook nog iets smaller.
Als dat problemen oplevert in andere browsers, kun je voor IE 7 'n aparte stijl toevoegen. Maar dat hoor ik wel, of dat nodig is.

Edit: mogelijk kun je ook ul.navbar iets smaller maken, dat heeft denkelijk 't zelfde effect.
 
Laatst bewerkt:
ok ik denk dat ik het nu goed heb ,al bij al is het toch nog goed wennen dat css zeker omdat je denk dat het goed is en als je dan op een breeder scherm kijk is het weer een zooitje en omdat je dat niet kan testen je moet het echt begrijpen.
Ik ben volop aan het leren in diversen boeken en internet sites als jullie toevallig nog een goede site weten die wat dieper op css ingaat ,graag

ik wil mijn site wat ik nu gemaakt heb voor 100% begrijpen zodat als er niets fout gaat ik ook zie waar het fout gaat en waarom.

Ik ga nog rustig wat dingen veranderen kom op zeker nog een keer terug
 
Dat van die winteravonden kan ik bevestigen. ;)
Misschien nog wat praktische tips voor het menu.

Het lijntje
Als je de ul.navbar een { width: 139px; } geeft in plaats van 125px, dan wordt de breedte van het menu net zo breed als het logo erboven (logo is 140px breed, min 1px breedte van het border-lijntje). Hoeft niet, kijk maar eens of je dat mooier vindt.

De zijkant
Nu staan de letters pal tegen de rand van de #hoofdcontainer. Als je de <li>'s van het menu een kleine padding (= opvulling) geeft, krijgen ze wat speelruimte.
Bijvoorbeeld: ul.navbar li { padding-left: 10px; }.

De klik-breedte
Om nu naar een andere pagina te gaan, moet je precies op een woord in het menu klikken. Je kan het ook zo maken, dat de hele breedte van een link aanklikbaar is, ook naast de letters (tot aan het witte lijntje). Dat kan met:
Code: 
[FONT="Courier New"][SIZE="2"][COLOR="DarkGreen"]ul.navbar a { display: block; }[/COLOR][/SIZE][/FONT]
Door van de link een "block" element te maken, pakt de link namelijk de volle beschikbare breedte van het ouder-element (= de breedte van een <li>). Je ziet dat ook aan het handje als je er met de muis overheen gaat. Voor de bezoeker is het op deze manier wat makkelijker om van boven naar beneden over het menu te gaan.

Internet Explorer
Bij IE staat de hele ul.navbar te veel naar rechts. Dat komt omdat je een { list-style-type: none; } gebruikt, en IE denkt dat er toch nog ruimte aan de linkerkant moet zitten voor het zwarte lijst-stipje dat er normaal zit. Je bent ervan af door toe te voegen:
Code: 
[FONT="Courier New"][SIZE="2"][COLOR="DarkGreen"]ul.navbar { margin: 0; }[/COLOR][/SIZE][/FONT]
Af en toe moet je wat extra toevoegen om Internet Explorer in het gareel te houden, maar ook dat went op den duur. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Da's 't leuke van 'n forum: gaat er nog 'ns iemand met de fijne kam (of hoe is die uitdrukking ook weer) doorheen :thumb:
 
Ok wer bedank ga het even rustig bijwerken.

Nog even wat anders er zit nog een fout in de pagina sitmap.html ik heb daar rechts naast het verticale lijntje alle links staan ,als ik de site bekijk met een breeder scherm komen de links over her andere menu, Ik heb al even nazitten denken en denk dan ik het snap maar wil het eerst zeker weten,

Ik dacht als ik de positie van smindex nu relatieve maak in plaats van absolute en de waarden uiteraard aanpassen is het dat goed
 
Dat zou misschien kunnen, maar 't kan nog simpeler.
Op de pagina sitemap zit 'n div#info, waarvan de functie mij niet helemaal duidelijk is. Of eigenlijk helemaal niet. Als ik die hele div weghaal, gebeurt er niets rampzaligs. Maar die div zit wel gruwelijk in de weg als je position: absolute; weghaalt bij #smindex, want dan verdwijnt hij achter die div.

Volgens mij kan die hele div#info weg van de pagina sitemap.
En dan kun je #smindex gewoon naar links floaten, dan staat hij tegen het menu aan. Position, left, e.d. weg, en dan met margin de goede plaats instellen.
 
ok dat heb ik gedaan denk dat ik het snap (weet niet of het goed is ik kan het hier niet testen) .maar dan even wat anders ,ik heb op de pagina materialen diversen links zoals de pagina overige,er staan diversen afbeeldingen ,in de style foto1 foto2 enz
deze worden bij een groter beeldscherm wel goed weergeven moeten deze foto''s ook geen float left hebben (dit is wat ik nog niet hellemaal snap) dat de div indexsm wel naar links verplaatst bij een groter scherm en de foto's niet
 
Laatst bewerkt:
De sitemap ziet er bij mij op een 1280x1024-scherm nu goed uit. Je zou alleen nog kunnen overwegen om hem in twee kolommen naast elkaar te zetten. Zelfs op 'n 800x600-scherm is daar ruimte voor.

Ha, nu snap ik waar die vreemde div#content op sitemap vandaan kwam.
Op die pagina's met foto's die je noemt staat de hele rechterkolom in een div#content. En die div#content wordt wel degelijk naar links gefloat.
Binnen die div#content staat dan #menu, de div met de afbeelding, enz. En omdat die allemaal binnen div#content staan, floaten die allemaal vrolijk mee.
Kijk maar 'ns wat er gebeurt als je de float: left bij div#content weghaalt... Het gezellig met z'n allen naar links floatende gezinnetje verandert in 'n verzameling alleenstaanden en weeskinderen.

De inhoudsopgave op de sitemap staat niet in 'n div#content. Die stond daar wel, maar die heb je weggehaald omdat hij daar problemen gaf.
Daarom moet je de inhoud wel naar links floaten.

Persoonlijk zou ik op de pagina sitemap het kopje in een <h1> hebben gezet. Als belangrijkste titel
En dan zou ik de sitemap zelf in 'n geneste <ul> hebben gezet. Of in 'n aantal <ul>'s. En dan in elke <li> 'n link. Dat is makkelijker te onderhouden en ook makkelijker wat betreft css. En 't is wat toegankelijker voor spraakbrowsers e.d., hoewel ik denk dat dat voor deze sitemap niet zoveel uitmaakt. Mensen die op jouw site naar 'n sitemap gaan zullen in de regel toch álle links voorgelezen willen hebben, want je gaat - lijkt mij - alleen naar deze sitemap als je de weg kwijt bent. (En anders moet csshunter hier maar even iets gaan roepen :) )
 
Laatst bewerkt:
ok ga het weer rustig bekijken het wordt stukje bij stukje duidelijk,
ik zit nog een beetje met het probleem dat ik nog niet helemaal snap hoe de elementen zich gedragen ,zeker waar jullie over praten van eerste ouder die hij tegen komt is me nog niet duidelijk.

Ik ben nu bezig om de foto's kleiner te maken ik heb een programa'tje gedounload
met de naam VSO image Resizer is dat een beetje goed programa of zijn er betere altnatieve.
 
'n Goed programmaatje voor Windows weet ik niet meer. Vroeger werkte ik veel met het gratis IrfanView, en dat wordt nog steeds genoemd. Maar mogelijk is dat van jou ook prima.

Dat ouders en zo is eigenljk heel simpel.
<div>
<p>
<span></span>
</p>
</div>

<div> is de grootouder van <span> en de ouder van <p>
<p> is het kind van <div> en de ouder van <span>
<span> is het kleinkind van <div> en het kind van <p>
Maar meestal gebruik je alleen de term ouder en kind, zonder grootouder en zo.
Als je nou <div> relatief positioneerd, dan is voor <span> de eerste ouder met 'n positie <div>
Hoe die elementen zich gedragen krijg je trouwens vanzelf in de vingers. 't Is net als met kinderen: even de gebruiksaanwijzing leren en dan gedragen ze zich prima. (Waarbij de kinderen in Internet Explorer 6/7 zich vaak als kinderen met ernstige gedragsproblemen gedragen, dus daarvoor pas je aanvullende maatregelen toe, de zogenaamde conditional comments.)
 
ok ga ik even proberen te begrijpen van die ouders en kinderen.
Ik heb even wat foto''s verkleint er zaten zeker een paar flinke bij
ik heb mijn pagina''s met de link hieronder getest(mischien ken je het programa)
op bijv de pagina teeltmaterialen.html geef hij de bestands pad naar de foto rood weer
en in het grafiekje wordt het blauwe gedeelte niet weergegeven dus firstbyte t/m last byte
Ik heb die foto wel verkleint maar dat veranderd niets.
Wat zou dat kunnen betekenen

mijn meeste foto's zijn nu zo onder de 60 kb somige rond de 15kb wat is een beetje een gangbare grote

http://www.whelp.nl/pingdom-laadtijd-testen/
 
Laatst bewerkt:
Voor 'n thumbnail is zo'n 5 tot 15 kB gangbaar. Maar dat is moeilijk te zeggen, ligt ook heel erg aan wat er op staat. Ik heb 't ook even gemeten en zie geen alarmerende groottes meer. (Met Firebug in Firefox kun je ook zelf de downloadtijd meten, in je eigen computer.)
Die meter van jou ken ik niet, ziet er ook leuk uit.
Dat rode pad betekent 'Heb ik het niet gezegd, had maar naar mij geluisterd' :D
't Betekent dat hij de foto niet kan vinden. En dat komt omdat er spaties in het pad staan en hoofdletters. Oftewel, zoals al meermalen gezegd, met spaties en hoofdletters in de bestandsnaam of in het pad kun je problemen gaan krijgen.
Ik zou alles veranderen in kleine letters en spaties vervangen door 'n _ of 'n -.
En vooral ook geen ' gebruiken in de naam, voor nogal wat programma's is 'n ' een bijzonder teken. Alleen kleine letters, cijfers en _ en - is het beste.

Je zou de thumbnails nog kunnen verkleinen naar de maat waarin ze op het scherm staan. Dat is meen ik (uit m'n hoofd) 200x120, en sommige zijn 300 breed of zo.
Overigens: als je 'n jpg bewerkt en opslaat, wordt de kwaliteit elke keer iets minder. Op den duur ga je dat merken. Je zou ze even kunnen wijzigen in 'n tiff of 'n png, en dan als alles klaar is weer veranderen in 'n jpg.
 
Goede dag

Ik heb me wat verdiept in css begint het een beetje te snappen maar toch even het volgende.

Om even bij mij site te blijven.

Ik heb een content met daar in
een paginakop
een info vak
en twee foto's

dat content heeft de eigenschap float left
de paginakop en het info vak geen eigenschap
we hebben in het verleden de style bij het info vak weg gehaalt omdat dat problemen gaf

Mijn vraag is heb de paginakop en het info vak nu ook de eigenschap float left.

zoals het content
of is het content niet de ouder van het infovak
zodat de eigenschapen mee erfen

en hebben paginakop en info dezelfde ouder (het content)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan