Random vertonen

Status
Niet open voor verdere reacties.
Half stok .....

Inderdaad, een wonder is (bijna) geschiedt .... zelfs een aantal van de 37 errors zijn opgeknapt. En tja, ik bouw nu al wel met div's maar dit was nog een 'oude' site.
Nu heb ik toch nog een vraagje, pfffffff, kan het ook zo zijn dat de links in een nieuw venster worden geopend? want nu gaat men meteen van de site af.

De vlag hangt al half stok :D
 
pfffffff, kan het ook zo zijn dat de links in een nieuw venster worden geopend?
Ja hoor, dat kan ook zo zijn. :)

Nu we toch bezig zijn is dat zelfs zonder pfffffff of piepen en knarsen gauw gepiept:
  • even een target="_blank" toevoegen bij de 4 noscript-items in de html (telkens op de img-link en op de tekst-link),
  • en idem even toevoegen in het javascript (dat gaat nog sneller).

  • Test: bliksekaters.nl/tests/well-nw-2.htm.

Komt dat in de buurt van de bovenste katrol?
CSShunter
 
Laatst bewerkt:
Helemaal geweldig en echt waanzinnig bedankt!!!!!!

De vlag is gehesen en nu ga ik maar eens een flesje opentrekken en er een slok op nemen ..... Proost!!:thumb: :thumb: :thumb:
 
Hmmmmmm, in m'n enthousiasme heb ik het script ook geplaatst op http://www.kasteelhotels.nl/ (oude site met tabellen, ik weet het). Op zich wel gelukt, alleen neemt ie het algemene stylesheet over i.p.v. degene van de style-random.css.
Ik heb gezocht naar de verschillen met de andere site waarop het wel goed gaat, maar ik kan er niet achter komen .....
 
Maar dit is helemaal logisch:
  • de link naar het speciale stylesheet style-random.css staat het eerst in de html,
  • de link naar het algemene stylesheet stijl.css staat daarna in de html.
En bij styles voor eenzelfde element worden de styles uit eerdere css vrolijk overruled. ;)

Dus die twee efkens van plaats verwisselen, dan kunnen de kasteelvlaggen ook gehesen.



Blij dat het gelukt is!
CSShunter
_____
PS: Eerst code kloppen, dan de flessenwipper: ook die twee moet je niet verwisselen! Proost! :d
 
He ik snap ook dat nu, dank! Weer wat geleerd.

o.k. ik weet dat ik nu een beetje m'n "luck ga pushen" maar ....... nu staan er onder de tekst hyperlinks, zou dat ook vervangen kunnen worden door een afbeelding met daarop dan de link? (vb http://www.kasteelhotels.nl/index-oud.html)
 
zou dat ook vervangen kunnen worden door een afbeelding?
Denk van wel, maar vraag me af of je dat moet willen: de verschillende tekst-links vind ik wel zo duidelijk (ipv identieke link-buttons die verder qua beeld nogal overheersend zijn).

=======
Maar goed, als je het zou willen...
ik weet dat ik nu een beetje m'n "luck ga pushen"
... kan je minder van je luck afhankelijk zijn door te bedenken wat er dan zou moeten gebeuren (+ testpagina). ;)
  • eerst als javascript uit staat,
  • en vervolgens wat er in het script moet veranderen.

Wat denk je?
Met vriendelijke groet,
CSShunter
 
Ik had al wat geprobeerd, maar ik ga er nog ff verder op door (gelijk heb je!) en laat het je weten ......
Tot later!
 
Tja, tja, tja, wat zal ik er van zeggen ..... ik ben wel verder gekomen, maar het lukt niet om de twee images andere groottes te geven en de 'geschreven' link weg te halen ....
Maar (wonderbaarlijk genoeg) staat er nu wel een button mét een link!

http://kasteelhotels.nl/index-test-button.html
 
Hoi motower,
We gaan nog even verder wonderbaarlijken. :)

Ik ga ervan uit dat je in Firefox de Webdeveloper Toolbar en Firebug hebt staan. Zo niet: als de bliksem, want bijzonder handig!

We volgen stap 1 van reactie nummer #27:
  • eerst als javascript uit staat.

Eens kijken wat er gebeurt: in de Webdeveloper Toolbar het eerste knopje: Disable > Javascript (en refresh).
In de pagina rechtsklikken op het bovenste grote "website >" image. Dankzij Firebug staat er nu "Element inspecteren" in het contextmenu:

kasthot-0.png

Klik!
Onderin presenteert Firebug nu aan de linkerkant de DOM-stamboom van elementen op de pagina, en aan de rechterkant de bij een element behorende styles: inclusief stijlregels die overruled worden door een andere stijlregel. Vooral dat laatste is vaak een snelle reddingsboei.

Je kunt alle elementen aan de linkerkant open en dichtklikken.
We beginnen met de <div class="button"> aan te klikken, waar het website-image in zit.


In de bovenhelft kan je precies zien waar deze div zit: lichtblauw van kleur en 80px bij 20px, met aan de linkerkant de opgegeven padding van 10px die voor alle .wisselvak div's geldt.
Daar komen de gewetensvragen! ;)
  1. Waarom zit de positie van de div dwars over het plaatje van het kasteel heen, en niet rechts ernaast, onder de tekst?
  2. Waarom volgt de div niet de voor de .button-class opgegeven padding van 0, maar de 0 0 0 10px van de .wisselvak div?
  3. Waarom staat het (te grote) image niet in de div (of tenminste gedeeltelijk), maar er onder?

Zo, nu ga ik even achterover leunen: wordt vervolgd na de antwoorden! :P
CSShunter
___
NB: Als je javascript hebt uitgezet en daarna een helpmij-reactie wilt intikken, zijn alle optie-knopjes van het reactie-venstertje weg. Dus eerst even javascript weer aan zetten!
 
Laatst bewerkt:
o.k. Inmiddels heb ik de webdeveloper toolbar geinstalleerd, maar nog niet de firebug (nog niet gevonden voor mac) en ......

De div van de button heb ik in die andere div geplaatst, de .button-class left laten floaten en de button-website staat er nu onder (jawel!), ik heb ook nog geprobeerd een class een andere benaming te geven en ze van volgorde te wisselen, maar dat heeft allemaal niet zo veel effect. Ik zie ook in DW de blauwe omlijning van 80x20p staat, maar die button krijg ik er niet in ......

Ik vrees dat ik niet op alle vragen een antwoord kan verzinnen / geven!
 
firebug nog niet gevonden voor mac
Dan kan je waarschijnlijk hetzelfde zien als je Chrome gebruikt, en dan: Steeksleutelknopje > Extra > "Hulpprogramma's voor ontwikkelaars", waarmee een soortgelijk venster als van Firebug tevoorschijn komt.
Ook Safari heeft dat: menu Ontwikkel > Webinfovenster.



======
Ik vrees dat ik niet op alle vragen een antwoord kan verzinnen / geven!
Ik zie er geen één. ;)
Daar gaan we:
V1:Waarom zit de positie van de div dwars over het plaatje van het kasteel heen, en niet rechts ernaast, onder de tekst?
A1: Een div is een block-element, heeft in principe 100% breedte van het parent-element en begint zonder tegenbericht altijd aan de linkerkant van het parent-element. Dit ouder-element was hier: de div met class="wisselvak" die de volle breedte van de linkerkolom heeft. De div met het website-image begon dus aan de linkerkant (en begon qua hoogte precies onder de laatste tekstregel: de eerste verticaal vrijkomende ruimte).​


site-div.png


V2: Waarom volgt de div niet de voor de .button-class opgegeven padding van 0, maar de 0 0 0 10px van de .wisselvak div?
A2: De .wisselvak div {0 0 0 10px;} is volgens de css-voorrangsregels een specifiekere aanduiding dan de .button {padding:0;}, en zal deze dus overrulen.

V3: Waarom staat het (te grote) image niet in de div (of tenminste gedeeltelijk), maar er onder?
A3: Dat komt door het gefloat zijn van het kasteel-plaatje. Dat onttrekt zich weliswaar aan de normal flow van de html, maar op die plaats mag ook niets anders komen. Wat er volgt, komt er naast of er onder. Omdat de div van de website-button een block-element is, kon de button er hier niet naast komen, en moet er onder komen. En ook vanwege het block-element van de div: meteen aan de linkerkant.​


NB: Alles staat in de verleden tijd: deze vragen/antwoorden slaan op je vorige versie van je testpagina. Intussen is de testpagina veranderd, dus nu is niet alles meer van toepassing!

=======
Eens kijken wat je er van gemaakt hebt.
de button-website staat er nu onder (jawel!)
Dat is te zeggen ... de button gaat nu bij uitgeschakeld javascript (dat is de eerste fase waar we nu mee bezig zijn :p) dwars door het volgende item heen.

button-erdoorheen.png

Wat nu?
Je kan proberen in de bestaande html/css-opzet allerlei dingen te veranderen, net zo lang tot het goed gaat. Maar wat wel zo efficiënt is: gewoon de hele <div class="wisselvak"> opnieuw opzetten, en stap voor stap kijken wat er daarin moet gebeuren. :)


  • Doet ie het eenmaal scriptloos goed, dan is de html-structuur en de css in orde, en wordt het maken van het script met variabelen ipv vaste bestanddelen kinderspel.

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Jahaaaa, hij gaat er natuurlijk 'onderdoor' omdat ie te groot is, want als ik de hoogte van .wisselvak verander dan blijft ie er wel in staan. Maar dat hoort natuurlijk niet en de image moet 80x20 worden, dan past ie er netjes onder. Ik heb nou alles weggehaald en ben opnieuw begonnen ..... Nou dacht ik zo om de button met de link erop gewoon onder de tekst te plaatsen (dus niet in een aparte div) en daar dan een class aan te hangen met de afmetingen 80x20, maar dat werkt helaas ook niet.

Ik freubel nog even (nou ja 'even') door, wordt vervolgd .............
 
Vraag is dus: wat willen we precies met de <div class="wisselvak">?

Aan de linkerkant moet de kasteel-afbeelding komen, aan de rechterkant moet de hele rest komen, ook als door omstandigheden (langere tekst, of letterformaat-vergroting door de bezoeker) de rechterhelft hoger is dan de afbeelding.
Daarom zetten we wat extra Lorem-tekst in de rechterkant, en de bedoeling wordt dus:

wisselvak.png

Als dat de bedoeling is, dan gaan we dat gewoon doen! :)
We laten de styles in het stylesheet style-random.css nog even bij het oude, en gaan eerst de html-structuur regelen. Daarna kan bezien worden welke stijl-aanpassingen dan nodig zijn.
Binnen het wisselvak is het eigenlijk een eenvoudige 2-koloms opbouw.
  • linkerkolom: afbeelding,
  • rechterkolom: de rest.

De afbeelding in de linkerkolom kan links gefloat worden (dat staat ie al).
De hele rechterkolom wordt ingepakt in een <div>. Omdat deze div de enige div binnen de wisselvak-div is, hoeft deze div geen class of id te krijgen. Met gewoon .wisselvak div {...} zijn de styles te regelen.
  • Voor het gemak kunnen we de <noscript>-tags voorlopig weglaten, die kunnen er later makkelijk bij als we aan het scripten toe zijn.

HTML:
<div class="wisselvak" id="vak-1">
	<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank">
		<img src="img/deelnemers/frontad/uitgelicht-kerckebosch.jpg" alt="'t Kerckebosch" border="0" />
	</a>
	<div>
		<h2>Bilderberg Kasteel 't Kerckebosch - Zeist</h2>
		<h3>Kleinschalig en Sfeervol</h3>
		<p>Het fraaie kasteel in Zeist ligt verscholen in de bossen van de Utrechtse Heuvelrug. Het monumentale pand is 
		gebouwd in 1904 en is uniek vanwege de door elkaar toegepaste bouwstijlen en interieurs. De moderne hotelkamers 
		verschillen elk van interieur, maar het persoonlijke hotelkarakter ziet u overal terug. Een vorstelijk onthaal 
		staat u te wachten.<br />
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
		dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
		suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br />
		Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
		dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
		zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
		
		<p>
			<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank"><img src="img/website.gif" alt="" /></a>
		</p>
	</div>
</div>

wisselvak-1.png

Bij de korte tekst gaat het goed, maar bij het eerste item met de langere tekst nog niet. Daar springt de tekst naar links, zodra er ruimte onder de float van de kasteel-afbeelding zit.

=======
Dat wordt opgelost door de rechterkant-<div> een margin-left te geven die wat groter is dan de kasteel-afbeelding. De laatste hoeft nu geen margin-right te krijgen, die is dan al geregeld.
Code:
.wisselvak div {
    ...
    margin: 0 0 0 170px;
    }
.wisselvak img {
    ...
    margin: 0 0 10px 0;
    }
wisselvak-2.png

Met de kolommen gaat het nu in beide gevallen goed. Over blijft alleen nog de website-button, die veel te groot is.

=======
Dat komt omdat voor alle images in een wisselvak is opgegeven wat het formaat moet zijn (plus nog een aantal eigenschappen, die alleen voor de kasteel-afbeelding moeten gelden):
Code:
.wisselvak img {
	width: 170px;
	height: 140px;
	border: none;
	float: left;
	margin: 0 0 10px 0;
	}
Dat kan je ongedaan maken door voor .wisselvak div img {...} eigen andere styles op te geven.
Maar handiger is het om deze voorgrond-afbeelding uit de html te schrappen, en er een background-afbeelding voor de betreffende link van te maken: ze zijn toch voor alle items hetzelfde.
HTML:
<div class="wisselvak" id="vak-1">
	...
	<div>
		...
		<p>
			<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank"></a>
		</p>
	</div>
</div>
En als css daarbij:
Code:
.wisselvak p a {
	width: 80px;
	height: 20px;
	background: url(img/website.gif);
	display: inline-block;
	}
wisselvak-3.png

Zo is het img tot de goede proporties teruggebracht, maar het staat nog wel pal op de vorige regel en het lijntje eronder.

=======
Wat eenvoudig op te lossen is door de <p>'s in het wisselvak een margin-bottom te geven, en het wisselvak zelf ook een margin-bottom voor geval van een lange tekst:
Code:
.wisselvak div {
	margin: 0 0 10px 170px;
	}
.wisselvak div p {
	margin: 0 0 .5em 0;
	}

=======
En nu we het website-img er als background-img in hebben staan, is hier ook mooi een subtiele hover-variant op te maken (in een gecombineerd image), die met css bediend wordt:


Code:
.wisselvak p a:hover,
.wisselvak p a:focus {
	background-position: -80px 0;
	}

Tot zover:
Nu kan de <noscript> weer om de vier standaard-items heen, en het style-random.css stylesheet bijgewerkt worden.
Als dat klaar is (testpagina?), dan kan de nieuwe html-structuur ingebakken worden in het javascript.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Jahaaaa, ... enz.
Jahaaaa, dat was dus een kruispost! :)
(Ik was tussendoor wat andere dingen aan te doen, terwijl m'n reactie nog niet af was)

Maar je bent op de goede weg! Het img (dwz de link) inderdaad niet in een aparte div maakt 'm beter.
Hierboven staan dus nog wat aanvullende suggesties om het helemaal in orde te krijgen.
 
Nou, hoe vaker ik het lees hoe duidelijker het wordt. Ik zou zelf een hoofddiv, met daarin een div links laten floaten en een rechts en dan natuurlijk ook weer een clear-div. Maar zo is het toch makkelijker / overzichtelijker. Dat met die image schrappen en er een background-image van maken, daar was ik echt noooooooit opgekomen. Maar alles werkt nu ...... 4x, met noscripts er omheen en de css aangepast.

Nu ga ik proberen het javascript aan te passen ....... ("hoop doet leven")

(Och hemel, de voorpagina is nu een een troepje!)
 
Laatst bewerkt:
O MY GOD!!!!!!!!!

Volgens mij heb ik het gevonden ..... na bijna een uur dingen weghalen en/of veranderen ging er ineens een lampje branden. Er stond eigenlijk alleen tekst te veel, terwijl de link wel moest blijven staan. Dus +link_url[rnd]+'<\/a><\/p><\/div>' (p van paragraaf van tekst?) weggehaald en nu doet ie het!

Ik weet niet of alles zo wel 'netjes' is en helemaal klopt, maar zo te zien ga ik alvast een verlengstuk op die stok zetten om zodadelijk de vlag nog wat hoger te hijsen .....
 
Kijk-kijk! Creatieve zelfwerkzaamheid, dat mag ik wel! :thumb:
Of het nou goed of fout ging: op deze manier vergeet je het nooit meer. :)
Inderdaad stond die link-regel dubbel in het script.

Zal later kijken wat je huidige actuele testversie is geworden.
 
Hoi CSS Hunter, nog even ...... hartstikke bedankt voor al je hulp en ik ga die vlag helemaal omhoog hijsen!
 
Hoi motower,
Mooi, hij draait als een tierelier! Met vlag en wimpel! :thumb:

kasteel-vlaggen-wimpels.png

Paar andere puntjes:
  • html nog niet volmaakt,
  • spelling nog niet volmaakt ("Kasteel Engelenburg - Brummen: Gevoek voor detail") ;)

"Een website is nooit af"
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan