Juiste positionering van de foto's

Status
Niet open voor verdere reacties.
T

trulier

Gebruiker
Lid geworden
26 jun 2010
Berichten
49
Ik wil voor mijn nieuw te bouwen site een pagina maken, waar mijn generaties gefokte honden (8 stuks)opstaan. Deze worden afgebeeld met hun kopfoto. De foto's zijn genomen in de periode 1970 tot nu, dus m.n. de oude foto's hebben niet hetzelfde formaat. De foto's 'gewoon' naast elkaar zetten vind ik niet mooi.
Doordat ik aan het stoeien was met de hoogte van de foto, kwam het volgende voorbeeld tevoorschijn.
http://www.beauterustique.nl/beauterustique/honden.html
http://www.beauterustique.nl/beauterustique/beaute3.css
De bovenste rij, een naar beneden verspringend, vind ik mooier dan de onderste rij. Je krijgt met een beetje fantasie het idee van een boom. Dit is in wezen ook zo (het zijn 8 generaties). Ik weet dat in dit voorbeeld dit teweeggebracht is doordat het formaat 'te hoog' is.
De onderste rij geeft aan wat ik niet mooi vindt, omdat de formaten niet dezelfde lengte/breedte verhouding hebben.

- Ik ben op zoek naar de mogelijkheid waarbij van de bovenste rij de middelste foto halverwege de bovenste begint EN
- dat onder elke foto, juist in de midden, de naam van de hond weergegeven wordt EN
- hoe kan ik een menu'tje van elke foto maken, want achter elke hond moet ik weer 5 pagina's hangen (stamboom, details, beschrijving, foto's en shows)

Wederom dank voor het meedenken.
trulier
 
wat uitleg

om snel te kunnen werken moet divs maken zo als <div id='foto1'> hier je foto </div

je kunt in een css bestand maken enkeld alleen voor je divs

Code: 
# foto1 {
height:125px;
width :125 Px;
postion:absolute;
left:300px;
top:300px
}
height is hoggte van de div
width is de breedte van de div
left wil zeggen dat hij rekend van links naar rechts
top dan van boven naar benedne
lukt dit niet
moet je de regel postion adsolute weg halen
je kunt ook nog een kleur om de foto geven zo iets als deze regel
Code: 
border: 4px;
je kunt er ook voor kiezne om niet te gebruiker
 
Hoi trulier,
Ik zou niet aan de {position:absolute;} gaan. De structuur zal zoiets moeten zijn als:
HTML: 
<div class="drie-op-rij">
    <div class="links">
        <img src="images/koppen/fra-4mnd-kop-wb.jpg" height="185" alt="fragile"><br>
        Fragile
    </div>
    <div class="rechts">
        <img src="images/koppen/racine-kop-wb.jpg" height="185" alt="racine"><br>
        Racine
    </div>
    <div class="lager">
        <img src="images/koppen/attice-kop-wb.jpg" height="185" alt="attice"><br>
        Attice
    </div>
</div>
Daarin komen de floats aan de <div>'s te hangen, die even breed gemaakt kunnen worden. De middelste (laatste in de html) wordt niet gefloat, en krijgt wat margin-top om te zakken. Bv.:
Code: 
.drie-op-rij div {
    width: 200px;
    text-align: center;
    }
.left {
    float: left;
    }
.right {
    float: right;
    }
.lager {
    margin-top: 100px;
    }
Zo iets?

Met vriendelijke groet,
CSShunter
 
raadsel

Hallo CSSHunter

Dank voor de support.
Ik ben aan de slag gegaan met jouw voorstel, maar ik kom nav mijn huiswerk uiteraard weer met een volgende vraag.
Op mijn pc-voorvertoning op mijn scherm, komen de foto's onder elkaar te staan. Wat ik ook probeer ze verschijnen onder elkaar. Het spelen met de 'width' in de 3-op-rij-div (waarom 200px??) of met de hoogte van de foto, maakt geen verschil. De foto's blijven onder elkaar staan.
Validatie geeft geen foutmelding.
Ik upload de bewuste pagina voor mijn vraag. Wat schetst mijn verbazing want nu staan ze ongeveer zoals het bedoeld is (zowel FF als IE).
http://www.beauterustique.nl/beauterustique/honden2.html
Wat gaat er fout?
Alvast bedankt.
 
Hoi Trulier,
... pc-voorvertoning op mijn scherm ...
Klik om te vergroten...
Die previews in een web-editor zijn vaak niet te vertrouwen! Er gaat niets boven een test met een echte browser vanaf de geüploade pagina!

... de 3-op-rij-div (waarom 200px??)
Klik om te vergroten...
De <div>'s met foto en onderschrift zijn inpakpapier, en moeten net zo breed zijn als de foto: dan kan het onderschrift ook nooit breder worden dan de foto.

De foto's blijven onder elkaar staan.
Klik om te vergroten...
Ja, dat kan kloppen... In mijn ruwe schets had ik de middelste <div> nog geen {display: inline-block;} gegeven. Als je dat niet doet, heeft een <div> altijd een block-karakter: d.w.z. de div bestrijkt de volle breedte. Als die volle breedte er niet is (tussen de twee floats), duikt de <div> naar beneden tot die volle breedte er wel is.
Hetzelfde is het geval, als de breedte te krap is (op jouw pagina is de foto van Attice breder dan het gat er boven: daar past ie nooit in).

Als je de inline-block toepast, en de breedte van de drie-op-rij (was: 90%) weglaat (met padding voor de zijkanten erbij), floept de middelste er mooi tussen.


Nu kan de middelste zijn margin-top krijgen om tussen de twee floaters te zakken.
Dan wordt het dit:


En dan kunnen we een negatieve margin-bottom aan elke drie-op-rij geven, zodat de volgende rij omhoog getrokken wordt, en het geheel de dambordvorm aanneemt:


Voor het menu zou je in principe wel een uitrol-menu'tje kunnen maken bij elke foto, maar ik denk dat dat voor de bezoekers niet zo handig is.

Wat ik zou doen, is op elke foto gewoon één link plaatsen naar de pagina met de beschrijving van de betreffende hond (met bv. linksboven een herhaling van het foto'tje), en op die pagina met menu-achtige links de doorkliks geven naar de pagina's met stamboom, shows en foto's van die hond.

O ja, de kleine foto's komen het beste tot hun recht als je die precies op maat maakt (200x185px). Soms moet je er dan in de hoogte of breedte wat bij photoshoppen, maar dan blijft in elk geval de verhouding goed.
Op de testpagina's is dat al gedaan. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
waarom maak je hier gebruik van allemaal divs ? je kunt het toch makkelijker met een list bouwen of zie ik dit verkeerd ?

HTML: 
	<style type=""text/css>
	
	ul#stamboom{
	width:640px;
	list-style:none;
	margin:0;
	padding:10;
	overflow:hidden;
	}
	
	img{
	display:block;
	}
	
	a img{
	border:0;
	}
	
	ul#stamboom li{
	float:left;
	margin:0;
	padding-bottom:100px;
	}
	
	ul#stamboom li.middle{
	padding:100px 20px 0;
	}
	
	</style>
</head>
 
<ul id="stamboom">
	<li><img src="hond.jpg"/></li>
	<li class="middle"><img src="hond.jpg"/></li>
	<li><img src="hond.jpg"/></li>
	<li><img src="hond.jpg"/></li>
	<li class="middle"><img src="hond.jpg"/></li>
	<li><img src="hond.jpg"/></li>
</ul>

moest zelf ook even stoeien maar volgens mij is dit m niet getest in ie. alleen in ff
 
Laatst bewerkt:
waarom maak je hier gebruik van allemaal divs ? je kunt het toch makkelijker met een list bouwen of zie ik dit verkeerd ?
Klik om te vergroten...
Nee hoor, ik deed het om aan te sluiten bij de bestaande <div>'s met hun namen, om niet alle html en css te hoeven wijzigen: luiheid! ;)
Maar er leiden vele wegen naar Rome, en die van jou is een kortere.

Wat er wel nog bij moet gebeuren:
  • Niet alle <li>'s kunnen onder elkaar staan in één <ul>, want dan begint het volgende rijtje van 3 er altijd onder, in plaats van dat het iets omhoog geschoven wordt en het een dambordje wordt.
  • Daarvoor kan de id="stamboom" veranderen in een class="stamboom", zodat de eigenschappen herhaald kunnen worden bij de volgende <ul>.
  • En een extra class="omhoog", om een rijtje d.m.v. een negatieve margin-top over de grens te trekken.
  • Nog wat details om de uitlijning op orde te krijgen en de bijschriften op de goede plek te krijgen.
  • En om het volgende struikelblokje alvast weg te nemen: een z-index (met position: relative) toevoegen aan de links die op de plaatjes gaan komen, zodat het omhooggetrokken volgende rijtje niet verhindert dat het onderste deel van het middelste plaatje aangeklikt kan worden (omdat daar de volgende container de vorige overlapt).
  • Tenslotte nog een paar frutseltjes voor IE6 (beleefd als we zijn), die in een Conditional Comment vlak boven de </head> van de pagina moeten komen. Omdat IE6 niet met de position:fixed van het #info-blokje overweg kan, moet het voor IE6 een position:absolute worden. Dan staat het blokje bij opening van de pagina ook onderaan, maar scrollt het mee naar boven. Zonder deze ingreep (met ook nog een float:left) zet IE6 het blokje bovenaan, en wordt de hoogte van het blokje toegevoegd als stevige loze ruimte boven de #inhoud met de foto's. Dat hebben we niet nodig.
Zodoende: de volgende! :)
Toegift: ik heb het stippeltjeslijntje tussen de linkerkolom en de inhoud eens weggehaald, en eigenlijk vind ik dat een veel rustiger pagina opleveren.
Maar dat is een kwestie van smaak!

Met vriendelijke groet,
CSShunter

[edit]Inmiddels getest (onder Windows) op IE6, IE7, IE8, Firefox, Chrome, Opera en Safari: allen akkoord.[/edit]
 
Laatst bewerkt:
vraagje over laatste antwoord

Ik ben verder gegaan het bewerken van de foto's en voor de pagina met het voorstel5 en m.i. werkt het.
Het klopt dat het verwijderen van de stippellijn (6) zorgt voor meer rust. Moest er even aan wennen, maar toch.
Blijft over de vraagje over de 'frutseltjes voor IE6':
Omdat IE6 niet met de position:fixed van het #info-blokje overweg kan, moet het voor IE6 een position:absolute worden. Dan staat het blokje bij opening van de pagina ook onderaan, maar scrollt het mee naar boven. Zonder deze ingreep (met ook nog een float:left) zet IE6 het blokje bovenaan, en wordt de hoogte van het blokje toegevoegd als stevige loze ruimte boven de #inhoud met de foto's.
Klik om te vergroten...
Ik begrijp hieruit dat ik ook deze aanpassing moet doen. In mijn situatie zoals onderstaand voorbeeld?

Code: 
[if lte IE 6]>
	<style type="text/css">
	#info { position: absolute; float: left; }   
	.stamboom { clear: left; }
	</style>
<![endif]


ps ik schrok van de kleuren van de banner op een andere pc. Dus ik ben hier ook mee aan de slag gegaan. Had ik dit kunnen voorkomen, behalve via het kalibreren van beide pc's (met dure software) waar ik mee werk

http://www.beauterustique.nl/beauterustique/honden.html
http://www.beauterustique.nl/beauterustique/beaute3.css

of

http://www.beauterustique.nl/beauterustique/honden2.html
http://www.beauterustique.nl/beauterustique/beaute4.css

Moet ik aan de slag met 'web echte kleuren'?

Alweer dank je wel
trulier
 
Laatst bewerkt:
Hoi Trulier,
... vraagje over de 'frutseltjes voor IE6' ...
Ik begrijp hieruit dat ik ook deze aanpassing moet doen. In mijn situatie zoals onderstaand voorbeeld?
Klik om te vergroten...
Correct, die code kan je opnemen vlak voor de </head> in je pagina (na stylesheet-link, anders werkt 't niet: dan zou het stylesheet de IE-code gaan overrulen).

... ik schrok van de kleuren op een andere pc ...
Klik om te vergroten...
Tjoe, ja, kleuren op monitors zijn erg lastige dingen. :rolleyes:
  • Kalibreren van de aanmaak-pc helpt niet, zolang de bezoekers niet óók hun monitor gekalibreerd hebben. Volgens mij doet bijna niemand dat. - En dan nog.
  • Flatscreens pakken kleuren heel anders op dan de oude kathodestraalpijpen (de televisiekast die je vroeger achter je toetsenbord had staan).
  • Als er al iets ingesteld wordt, stellen mensen bv. het contrast en de helderheid in; dat heeft ook konsekwenties voor de kleuren. Of de kleurverzadiging wordt opgepept ("de meeste websites zien er zo bleekjes uit, daar hou ik niet van"). Allemaal persoonlijke smaak, waarop je niet op kunt anticiperen als webbouwer.
  • Ik merk soms dat verschillende browsers ook verschillende dingen met dezelfde kleuren doen! (dat zou niet mogen mogen)
  • De plaats van de monitor speelt ook een rol voor de kleurwaarneming. Staat ie pal tegenover een raam, of in een donker hoekje? Bij de één hier, bij de ander daar!
  • Het omgevingslicht speelt ook een rol voor de kleurwaarneming: overdag is het licht koeler van tint (hoe blauwer de lucht, hoe koeler) dan 's avonds bij lamplicht in de kamer. Lamplicht: gloeipeer, halogeen spotjes, flametinten, tl-balk, daglicht-tl-balk, dimmer aan? Enz.: ook allemaal van invloed op de kleurtemperatuur.
  • Een aantal van deze dingen zijn min of meer objectief vast te stellen factoren. Daarnaast komen ook nog andere persoonlijke factoren om de hoek kijken: leeftijd speelt bv. behoorlijk mee bij de (kleur-) contrastwaarneming (zie link hieronder!). En dan hebben we het nog niet over de diverse varianten van kleurenblindheid (ongeveer 1 op 12 mannen heeft een vorm van kleurenblindheid).
Bijgevolg is het pittig ondoenlijk om kleuren te gebruiken die er op elk beeldscherm hetzelfde uitzien (ook als je de "webveilige" kleuren zou gebruiken; maar die waren er vooral voor beeldschermen uit de oertijd [net na de monochrome beeldschermen], die niet meer dan 256 kleuren aankonden - museumstukken!).

Er is één troost: bezoekers hebben meestal geen twee verschillende monitors naast elkaar staan, dus merken verschillen niet op. En hoe de kleuren precies bedoeld zijn, weten ze ook niet. ;)
  • Wat ik meestal doe, is heel spaarzaam gebruik maken van felle kleuren. Zachte kleuren en fijne nuances kunnen daarmee weliswaar wat wegvallen bij sommige beeldschermen (/-instellingen), maar het knalt dan in elk geval niet als snoepgoed uit het scherm!
Concreet:
Met deze eerste ...
br-banner-1.png

... loop je denkelijk het risico dat ie op het ene beeldscherm de knalgele kant op gaat, en in de andere richting donkercrème.
Met deze ...
br-banner-2.png

... is het met mijn ogen, bij mijn monitor, enz. een hele rare kleur, die nier erg past bij de rest van de site.

Je zou ook eens kunnen experimenteren met het verlaten van de geeltint, en bv. een achtergrondverloop van wit naar lichtblauw aanbrengen. Iets in deze geest:

br-banner-3.png

Voor mij ziet dat er luchtiger (2x) uit, en 't geeft meer accent op de honden dan op de achtergrond. Ik zou ook de schaduw bij de honden weglaten, want die staan los t.o.v. de achtergrond (ze liggen niet 10 cm boven een papier, zoals de schaduw lijkt te laten zien); de schaduw bij de letters kan natuurlijk wel.
Afijn, mogelijkheden te over! :)

Nog heel veel wetenswaardigheden over kleurgebruik in dit artikel:

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Nadenken en huiswerk

Dank CSSHunter voor je uitgebreide antwoord.

Ga weer stoeien met de kleuren (waarschijnlijk toch niet blauw, want de kleur blauw vind ik te kil) en wordt vervolgd.

trulier
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan