tekst onder foto centreren

Status
Niet open voor verdere reacties.

ringo1

Gebruiker
Lid geworden
12 nov 2011
Berichten
112
hallo,

ik ben bezig met een site over Kos, mijn foto's worden vergroot met een lightbox script. Nu als ik 2 foto's naast elkaar zet en ik wil onder elke foto een zin zetten wil dit niet lukken. hoe kan ik dit verwezelijken?
de link naar 1 van de pagina's is http://www.kos-island.be/havenburcht.html
en op deze afbeelding zie je dus wat ik bedoel, de 2 zinnen staan gecenstreerd over de 2 afbeeldingen en dat mag dus niet de zin voor de linkse afbeelding moet gecentreerd staan dus onder de linkse foto en rechts juist het zelfde hoe doe ik dit? grtz ringo


voorbeeld.jpg


dit is de bron van de pagina
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Havenburcht</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"> 
<!--
body {background: url(havenburcht/havenburcht.jpg) fixed no-repeat  center 50% 
      color:#000080;
    }
p {font-family:comic sans ms;
			color:#000080;}
#container {
width:100%;}
#header{
width:70%; 
align: center;
font-family:comic sans ms;
color:#000080;
font-size:30pt;
}
#content {
    margin-center: 220px;
    }
/* uitzicht menu links */
a.menulink {
display: inline; /* voor verticaal menu: display: block; */
width: 5px;
text-align: center;
padding: 3pt;
text-decoration: none;
font-family:helvetica;
font-size:10pt;
font-weight: bold;
color: #000080;
border: solid 1px #000080;
background-color: #FFDEAD;
}
/* css */
 
img
{
   border: 0;
}
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
}
 
/* uitzicht menu links bij muisover */
a.menulink:hover {
background-color:#000080; 	/* een andere achtergrondkleur */
color: #FFFFFF;				/* een andere tekstkleur       */
text-decoration: none;
}
 
 
i {font-size:13;
   color:#000080;
         text-align: center;
}
p {text-align: center;}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
</head>
<body style="margin: 15px 10px;BACKGROUND: url(havenburcht/havenburcht.jpg) fixed no-repeat center 50%">
<div align="left">
<a href="http://www.kos-island.be/kosstad.html" class="menulink">Back</a></div>
<div align="center">
<div id="header">De havenburcht....</div>	
<br>
<br>
<br>
<br>
<div id="content">
<p>Aan de oostelijke havenrand, waar zich waarschijnlijk al in de oudheid en in de Byzantijnse periode<br> vestingwerken bevonden, bouwden de Johannieters de tot vandaag behouden, indrukwekkende havenburcht.
</p>
<div class="center" align="center">
<a href="havenburcht/Kos stad, van aan de kade.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, van aan de kade.jpg" width="415" height="290" alt="Kos stad, van aan de kade"></a><br>
<i> Het kasteel gezien vanaf de kade waar de draagvleugelboten vertrekken</i>
</div>
<br>
<br>
<p>Toen de Johannieterridders in de 14de eeuw op Kos arriveerden bouwden ze een nieuw kasteel, de nu duidelijk<br> herkenbare binnenvesting. Vanwege de toenemende dreiging van het Osmaanse Rijk besloten de Johannieters<br> er aan het einde van de 15de eeuw een muur omheen te zetten. Die is nu bepalend voor het stadsgezicht aan de<br> haven. Van verschillende kanten heb je mooie uitzichten.
</p>	
<br><br>
<div>
<a href="havenburcht/Kos stad, kasteel.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel.jpg" width="340" height="260" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 1.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 1.jpg" width="340" height="260" alt="Kasteel"></a><br>
<i>Een mooi uitzicht op de haven van de stad........ &nbsp; &nbsp;&nbsp; &nbsp; mooi zicht op o.a. de kade van draagvleugelboten.</i>  
</div>
<br>
<br>
<br>
<div>
<a href="havenburcht/Kos stad, kasteel 2.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 2.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 3.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 3.jpg" width="270" height="200" alt="Kasteel"></a><br>
<i>Het kasteel van binnen gezien......Mooi!!</i>
</div> 
<br>
<div>
<a href="havenburcht/Kos stad, kasteel 4.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 4.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 5.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 5.jpg" width="270" height="200" alt="Kasteel"></a>
</div>
<p>In 1514 was die buitenmuur klaar, maar veel voordeel hebben die ridders er niet van gehad, want in 1523 vielen<br>
de burcht en het eiland Kos in Turkse handen.<br><br> 
Voor een wandeling door de burcht moet u minimum een uur uittrekken. Steeds weer zijn er fraaie doorkijkjes,<br>
de zogenaamde schietgaten, op de haven, de stad en de bergen en overal in de vesting liggen oude brokken van<br>
het bouwwerk tussen bloeiende bloemen en woekerend wild gras. Talrijk zijn delen van afgebroken zuilen en de<br>
resten van Hellenistische ronde grafmonumenten en votieftafels. Vele zijn versierd met guirlandes en<br>
stierenkoppen in steenwerk.
</p>
 
 
<a href="havenburcht/Kos stad, kasteel 6.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 6.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 7.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 7.jpg" width="270" height="200" alt="Kasteel"></a><br>
<i>Binnenin het kasteel......</i>
</div> 
<br>
<div>
<a href="havenburcht/Kos stad, kasteel 8.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 8.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 9.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 9.jpg" width="270" height="200" alt="Kasteel"></a>
</div>
<br>
<p>Versperringen zijn er op het burchtterrein weinig te vinden. Wees dus voorzichtig als u er met kinderen<br> naartoe gaat.</p>
<br>
<div>
<a href="havenburcht/Kos stad, kasteel 10.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 10.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 11.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 11.jpg" width="270" height="200" alt="Kasteel"></a><br>
<i>Binnenin het kasteel......</i>
</div> 
<div>
<a href="havenburcht/Kos stad, kasteel 12.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 12.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 13.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 13.jpg" width="270" height="200" alt="Kasteel"></a><br>
<i>Het gebouw van de politie en rechtbank.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; Een wijds uitzicht over de zee.....</i> 
 
</div>
<br>
<div>
<a href="havenburcht/Kos stad, kasteel 14.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 14.jpg" width="270" height="200" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/Kos stad, kasteel 15.jpg" rel="lightbox[vakantie]"><img src="havenburcht/Kos stad, kasteel 15.jpg" width="270" height="200" alt="Kasteel"></a><br>
<i>Je hebt een prachtig zicht op de boten rondom het kasteel.</i>
</div>
<br>
<p>De ingang is via een brug te bereiken, die begint bij de Plataan van Hippocrates. Tot in de 20ste eeuw<br>
overspande deze brug een beschermende gracht; intussen is er een laan met palmen voor in de plaats gekomen.
</p>
<div>
<a href="havenburcht/brug naar kasteel.jpg" rel="lightbox[vakantie]"><img src="havenburcht/brug naar kasteel.jpg" width="400" height="290" alt="Kasteel"></a>
&nbsp;
<a href="havenburcht/vanop brug naar kasteel 3.jpg" rel="lightbox[vakantie]"><img src="havenburcht/vanop brug naar kasteel 3.jpg" width="400" height="290" alt="Kasteel"></a><br>
<i>De brug van aan de plataan die naar het kasteel leidt.&nbsp;EN  de palmenlaan die onder de brug door loopt, die vroeger een gracht was. 
</i>
</div>
<br>
<div>
<a href="havenburcht/vanop brug naar kasteel 1.jpg" rel="lightbox[vakantie]"><img src="havenburcht/vanop brug naar kasteel 1.jpg" width="400" height="290" alt="Kasteel"></a><br>
<i>En de andere kant van de palmenlaan, het zicht op zee.</i>
</div>
<br>
<p>De burcht is dagelijks, behalve maandag, geopend van 8u tot ca. 17u. Toegang ca. 3euro. 
</p>
<br>
<br>
<SCRIPT type="text/javascript"><!--
google_ad_client = "ca-pub-2214821386379082";
/* ads */
google_ad_slot = "9780135706";
google_ad_width = 728;
google_ad_height = 90;
//-->
</SCRIPT>
<SCRIPT type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</SCRIPT>
 
<div id="footer">Designed by: Isabel Limbourg</div> 
 
</body>
</html>
 
Als je allebei de foto's in een aparte tabel zet (1 tabel met dus twee kolommen), dan kun je dus ook de regels per kolom centreren?
 
... foto's in een aparte tabel ...
Hoeps! :rolleyes: Nopperdepop! Geen tabellen gaan maken voor de layout!
Wat er moet gebeuren, is dat elk image en zijn onderschrift telkens een geheel gaan vormen.

Dat kan door eerst in de html telkens zowel het image als de tekst binnen de <a> op te nemen.
De <a> krijgt dezelfde breedte als het image, zodat de tekst altijd onder het img blijft, en niet breder kan worden; dat kan voor het gemak als "inline-style" in de html gebeuren, want daar staat ook de breedte van de foto vermeld.
Zo wordt het bijvoorbeeld:
HTML:
<div>
    <a href="havenburcht/Kos stad, kasteel.jpg" rel="lightbox[vakantie]" style="width: 340px;">
        <img height="260" width="340" src="havenburcht/Kos stad, kasteel.jpg" alt="Kasteel"><br>
        Een mooi uitzicht op de haven van de stad.</a>

    <a href="havenburcht/Kos stad, kasteel 1.jpg" rel="lightbox[vakantie]" style="width: 340px;">
        <img height="260" width="340" src="havenburcht/Kos stad, kasteel 1.jpg" alt="Kasteel"><br>
        Mooi zicht op o.a. de kade van draagvleugelboten.</a> 
</div>

Vervolgens kan met css van elke (lightbox)link een inline-block gemaakt worden, d.w.z. een block-element dat niet de volle breedte inneemt, maar waarnaast een ander element kan komen.
Door het cursief van de tekst ook in de css op te nemen kunnen alle <i>'s in de html verdwijnen.
Doordat de tekst nu in de link zit, is deze ook aanklikbaar geworden (en geeft eveneens de lightbox); dat is geen probleem, en eigenlijk wel zo handig.
En de tekst heeft nu de algemene onderstrepings-stijl van een link. Wil je dat niet, dan kan je het verbieden met de text-decoration eigenschap: dan komt er geen onderstreping.
Tenslotte kan je de tekst iets lager onder de foto's zetten door de images wat margin-bottom te geven.
Al met al wordt het dan:
Code:
#content a {
    display: inline-block;
    font-style: italic;
    text-decoration: none;
}
#content a img {
    margin-bottom: 5px;
}
Ik denk dat dat het wel moet doen.

Met vriendelijke groet,
CSShunter
 
zeer wel bedankt csshunter, dit is idd wat ik bedoel, nu staat het allemaal mooi gecentreerd :thumb:
 
hey csshunter, ik heb bij de pagina van kardamena ook de aanpassingen gedaan maar daar is blijkbaar iets verkeerd gelopen, nu moet ik een beetje naar rechts scrollen voor mijn pagina helemaal te zien en is mijn knop next maar half te zien. ik heb al zitten zoeken maar ik vindt de fout niet

dit is de link
http://www.kos-island.be/kardamena.html

en dit is de code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 
<title>Kardamena</title>
<style type="text/css"> 
<!--
/* css */
 
img
{
   border: 0;
}
body {background-color: #ffffc0;
      font-family:comic sans ms;
      color:#000080;
     }
#container {
width:100%;}
#header{
width:70%; 
align: center;
}
#content {
    margin-center: 220px;
    }
#content a {
    display: inline-block;
    font-style: comic sans ms;
    text-decoration: none;
		color:#000080;
}
#content a img {
    margin-bottom: 5px;
}			
#footer {
clear: both;
background-color: #ccc;
color:#433B38;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align:center
 
}
/* uitzicht menu links */
a.menulink {
display: inline; /* voor verticaal menu: display: block; */
width: 5px;
text-align: center;
padding: 3pt;
text-decoration: none;
font-family:helvetica;
font-size:10pt;
font-weight: bold;
color: #000080;
border: solid 1px #000080;
background-color: #F5F5DC;
}
/* uitzicht menu links bij muisover */
a.menulink:hover {
background-color:#000080; 	/* een andere achtergrondkleur */
color: #FFFFFF;				/* een andere tekstkleur       */
text-decoration: none;
}
a{
text-decoration:none;
}
i.item1 {font-family:comic sans ms;
    color: #ee105a;
		}
i {font-size:0.9em;
 
   color:#000080;
         text-align: center;
}
	
-->
</style>
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
</head>
<body>
<div align="left">
<a href="http://www.kos-island.be/index.html" class="menulink">Back</a></div>
<div align="center">
<div id="header"><img alt="banner" src="kardamena/banner.jpg" width="70%" height="180"></div>
</div>	
<br>
<br>
<div align="center">
<div id="content">
<p>Op een goeie 7km. van de luchthaven is de badplaats Kardamena. Dit oude dorp is uitgegroeid tot een levendige,<br>
toeristische badplaats, waar vooral heel veel engelse toeristen heen trekken. Toch zijn de grotere hotels zoals<br>
<a href="http://www.mitsishotels.com/Hotels/norida-beach-hotel/welcome_130.htm"/?page=home"onclick="window.open(this.href); return false;"><i class="item1">'Norida Beach'</i></a> ook erg in trek bij de Belgen. Het heeft een gezellig haventje met vissersbootjes.De<br> 
winkelstraatjes en de deels autovrije kade met diverse leuke terrasjes, maken van Kardamena een karakteristiek<br>
dorpje.Langs de kade vind je ook verschillende kraampjes waar o.a. zelfgevangen sponzen te koop zijn. Maar de<br>
meeste van de sponzen komen wel uit het nabije eiland Kalymnos.Je vind er ook prachtige grote schelpen uit de<br> Griekse zee.....
</p>
<div class="center" align="center">
<a href="kardamena/kardamena1.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena1.jpg" width="350" height="260" alt="Kardamena"></a>
&nbsp;
<a href="kardamena/kardamena2.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena2.jpg" width="350" height="260" alt="Kardamena"></a><br>
<i>heel gezellige terrasjes langs de 's middags rustige kade...'s avonds is het heel wat drukker...</i>
</div> 
<div>
<a href="kardamena/kardamena3.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena3.jpg" width="350" height="260" alt="Kardamena"></a>
&nbsp;
<a href="kardamena/kardamena4.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena4.jpg" width="350" height="260" alt="Kardamena"></a><br>
<i>Heel gezellige tavernes met uitzicht op de kleine vissersbootjes die 's ochtends vroeg uitvaren....</i>
</div>
<p>Kardamena kent ook een bruisend nachtleven. Het is hier het ene na het andere barretje of club. Voor wie het<br>
liever wat rustiger heeft, zijn er ook genoeg terrasjes waar je rustig iets kunt drinken en kijken naar de passanten.<br><br>
Aan het strand kan je terecht voor diverse watersporten, zoals jet-ski, surfen, 'banana', zelfs duiken, enz....Voor<br>
elk wat wils dus... Het heeft een 4km lang smal zand-en kiezelstrand. Qua strand ga je misschien best in de buurt<br>
van 'Hotel Lagas Aegean Village', ten westen van het dorp. Het is een zandstrand waar het ook erg druk kan<br>
worden, maar nog niet ZO druk als op de stranden rondom het dorp. Van aan de haven heeft u in de verte een<br>
zicht op het naburig vulkaaneiland Nissyros.
</p>
<div>
<a href="kardamena/kardamena5.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena5.jpg" width="260" height="350" alt="Kardamena"></a>
&nbsp;
<a href="kardamena/kardamena6.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena6.jpg" width="260" height="350" alt="Kardamena"></a><br>
<i>Het blauw-wit is ook in Kardamena goed van de partij...</i>
</div>
<br> 
<div>
<a href="kardamena/kardamena7.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena7.jpg" width="260" height="350" alt="Kardamena"></a>
&nbsp;
<a href="kardamena/kardamena8.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena8.jpg" width="260" height="350" alt="Kardamena"></a><br>
<i>Leuke winkeltjes in de smalle winkelstraatjes...</i>
</div> 
<p>Kardamena is de enige badplaats aan de zuidkust van Kos en heeft een 1800 inwoners. En Kos stad is<br> hier een 26-tal km. vandaan.
</p>
<br>
<div>
    <a href="kardamena/kardamena9.jpg" rel="lightbox[vakantie]" style="width: 350px;">
        <img height="260" width="350" src="kardamena/kardamena9.jpg" alt="Kardamena"><br>
       <i>gezellige terrasjes voor overdag en 's avonds...</i>.</a>
    <a href="kardamena/kardamena10.jpg" rel="lightbox[vakantie]" style="width: 350px;">
        <img height="260" width="350" src="kardamena/kardamena10.jpg" alt="Kardamena"><br>
        <i>een lekkere verfrissende caf&eacute; frapp&eacute; met ijs.</i>.</a> 
</div>
 
<br>
<br>
<div>
<a href="kardamena/kardamena11.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena11.jpg" width="450" height="340" alt="Kardamena"></a><br>
<i>Mooie kleine vissersbootjes in alle kleuren aan de kade.</i>
</div>
<br>
<p>De <b>Gensis tou Theotokou-kerk (Panagia)</b>, die vlak in het centrum ligt en dagelijks geopend is, is het<br>
enige mooie gebouw in het dorp. Het interieur is helemaal gesierd met nieuwe fresco's in Byzantijnse<br>
stijl. Zoals in de meeste kerken op Kos is het wel aangeraden om de blote schouders toch een beetje te<br>
bedekken als je de kerk betreedt.
</p>
<br>
<div>
<a href="kardamena/kardamena12.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena12.jpg" width="260" height="350" alt="Kardamena"></a>
&nbsp;
<a href="kardamena/kardamena13.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena13.jpg" width="350" height="260" alt="Kardamena"></a><br>
<i>De Gensis tou Theotokou-kerk is al van op afstand te zien...</i>
</div>
<br>
<br>
<p>De sportievelingen onder ons kunnen in Kardamena fietsen huren en hun energie kwijt in de 'heuvels' rond dit<br>
dorp. Of ze kunnen een bezoekje brengen aan de Go-Kart-baan, die is dagelijks open vanaf een uur of 10. De<br>
meeste grote hotels hebben ook hun eigen fitness-ruimte beschikbaar waar je je naar hartelust kunt uitleven.<br><br>
Je kunt hier dus probleemloos scooters, fietsen en auto's huren. Neem best eerst eens hier en daar een kijkje en<br>
neem dan een beslissing over het WAT en WAAR huren. De prijzen kunnen nogal verschillen.<br><br>
Winkeltjes vind je hier ook voldoende, van T-shirts tot petjes, tot slippers en tot andere hebbedingetjes om mee<br>
te nemen naar het thuisland. Voor mensen die naar een supermarktje zoeken, dat heb je hier ook.
</p>
<br>
<div>
    <a href="kardamena/kardamena14.jpg" rel="lightbox[vakantie]" style="width: 350px;">
        <img height="260" width="350" src="kardamena/kardamena14.jpg" alt="Kardamena"><br>
       <i>Winkeltjes vind je in alle straatjes....</i>.</a>
    <a href="kardamena/kardamena15.jpg" rel="lightbox[vakantie]" style="width: 350px;">
        <img height="260" width="350" src="kardamena/kardamena15.jpg" alt="Kardamena"><br>
        <i>dit gezellige pleintje heeft zelfs een supermarket.</i>.</a> 
</div>
<br>
<p>Het merendeel van de taverne's en restaurants liggen aan de kustpromenade en de zijstraten. Maar<br>
toprestaurants hoeft u in Kardamena niet te verwachten. Wat misschien wel aan te raden is, is <b>'Taverne Avli'</b><br>
(zie de link hieronder), aan het dorpsplein. Het heeft een gezellige, bloemrijke binnenplaats en je hebt er een<br>
grote keuze aan allerlei kleine gerechtjes en wijnen. 
</p>
<br>
<img src="kardamena/handje.gif" alt="handje">
<br>
<a href="http://www.avlirestaurant.gr/?page=home"onclick="window.open(this.href); return false;"><img src="kardamena/avli.gif" alt="avli"></a>
<br>
<p>Maar het meest authentieke restaurant van het dorp is 'Ta Adlfia'. Daar heb je ook al een lekker hoofdgerecht<br>
tussen de 8 a 10euro. Je vind deze plaats op de weg richting Hotel Lagas Aegean Village. Je hebt er geen uitzicht<br>
op zee, maar het lekkere eten en de ruime porties die je krijgt, maken al veel goed. Aangezien er veel engelse<br>
toeristen zijn in Kardamena, staan er ook heel wat engelse gerechten op het menu, net als in de meeste<br>
eetgelegenheden hier.
<br><br> 
Qua uitgaan, liggen de meeste disco's, clubs en bars aan de straat parallel met de kustpromenade. Je ziet<br>
hier voornamelijk jonge Britten, die hier soms fameus de boel op stelten kunnen zetten. De meeste bars hebben hun<br>
eigen muziekstijl, zoals dat in Kos-stad ook hier en daar het geval is. De bekendste en drukst bezochte bars zijn<br>
'Jolly Roger' aan de boulevard, 'Music Pub Downtown By Tony' in een straatje achter de boulevard; in deze<br>
kelderpub kun je 's avonds aan karaoke doen, en erna kun je naar hartelust dansen. 'Zoom Club', 'Sugar',<br>
'Harley's en 'Stardust' zijn ook erg in trek bij het jonge volk. Maar de grootste discotheek van Kardamena is de<br>
'Status Disco Club', gelegen aan de weg naar Antimachia. Hij is dagelijks vanaf een uur of 10 's avonds open.<br>
Binnenin is alles hypermodern en buiten 'post-modern'. Gelukkig zorgt de airco voor verkoeling, want het kan er<br>
nogal 'zwoel' worden.
</p>
<br>
<div>
<a href="kardamena/kardamena17.jpg" rel="lightbox[vakantie]"><img src="kardamena/kardamena17.jpg" width="350" height="260" alt="Kardamena"></a><br>
<i>Je herkent de club al door 't groot uithangbord.</i>
</div>
<br>
<br>
<p>Wie op 28 en 29 augustus in of rond Kardamena vertoeft, kan een glimp opvangen van het Kerkwijdingsfeest. 's<br>
Avonds trekt men dan na de kerkdienst met de Maria-icoon door het dorp. De volgende middag word dan<br>
uitvoerig feest gevierd. Op het kerkplein worden dan het eten, de wijn en ouzo, die door de inwoners bijeen<br>
zijn gebracht, uitvoerig benuttigd, met op de achtergrond life Griekse muziek.<br><br> 
Er zijn ook voldoende bussen die naar Kos-stad e.d. rijden, die rijden dagelijks meerdere keren. De rit naar Kos<br>
duurt ongeveer 45min. En vanuit Kardamena kun je ook per boot naar het nabije vulkaaneiland Nissyros.
</p>
<br>
<br>
<div align="right">
<a href="http://www.kos-island.be/kardamena1.html" class="menulink">Next..</a></div>
<br>
 
<div id="footer">Designed by: Isabel Limbourg</div> 
</div>
</div>
</body>
</html>

als ik de pagina contoleer met validator.w3 zijn zelf alle fouten weg
weet gij soms wat er mis is?

grtz ringo
 
Hoi Ringo,
Aha, dat komt omdat nu alle <a>'s van de #content een {display: inline-block;} gekregen hebben, en het Next-knopje daar ook onder valt.
Het is op te lossen door de a.menulink een !important mee te geven bij de inline, dan wordt deze niet overruled door de inline-block:
Code:
a.menulink {
    ...
    display: inline !important;
}
Hiermee worden beide verschijnselen tegelijk verholpen :): de tekst blijft binnen de knop en de scollbar verdwijnt (die was het gevolg van het uittreden van de tekst uit de knop).

Met vriendelijke groet,
CSShunter
 
hey csshunter

als ik deze DOCTYPE vervang

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

door deze

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

heb ik dit probleem niet, en als ik de pagina dan laar controleren is het volledig saved

grtz ringo
 
Hoi Ringo,
  • In Internet Explorer (getest: IE7) gaat het dan op de Kardamena-pagina inderdaad goed (geen scrollbar, hele Next-knopje).
  • Maar in de andere browsers (getest: Firefox, Chrome, Opera en Safari) niet!

kardamena-next.png

Screenshot Firefox​

De dtd (DocTypeDefinition) toevoeging aan het <!Doctype ...> geeft aanvullende info over het volgens de standaarden renderen van een bepaald doctype.
Laat je dat weg, dan schiet IE in een "quiksmode" (fratsen-toestand) waarin de opmaak-standaarden niet meer goed worden nageleefd - vandaar dat het ogenschijnlijk goed gaat in IE.


  • Dat de html-validator groen licht geeft, kan kloppen: de html is goed, daar ligt het niet aan.
  • Het gaat fout in de css.

Conclusie 1:
De !important kan toch niet gemist worden, want Firefox, Chrome, Opera en Safari doen het gewoon goed: die volgen de standaarden.

====
Nu staat de !important er wel in, maar toch reageren FF enz. hier niet op... :eek:
Dat komt omdat je m'n suggestie:
Code:
a.menulink {
    ...
    display: inline !important;
}
letterlijk hebt genomen, en 'm zo in de code hebt geplakt (inclusief de stippeltjes). Daarmee komt er een css-error, en gaat het niet goed.

Wat ik bedoelde, was:
  • Je gaat naar waar a.menulink in de code staat.
  • De stippeltjes betekenen: alles wat daar staat, laat je gewoon staan.
  • Alleen de regel waar display: inline; staat, verander je in display: inline !important;.

Conclusie 2:

  • Als je dit even verandert, kan de dtd er gewoon bij, en gaat het goed in alle browsers.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
hey csshunter, ik heb de aanpassingen gedaan maar ik heb wel dit Doctype moeten gebruiken

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


met het ander kreeg ik nog altijd de scrolbar te zien,
nu zie ik de pagina in IE,Chrome,safari goed staan

grtz ringo
 
hey csshunter, ik zit nu terug met een probleem, ik maak al mijn pagina's nochtans het zelfde kwa opbouw
op de pagina http://www.kos-island.be/antimachia.html staat alles zeer goed als je met IE kijkt maar mer chrome of safari staan de laaste 4 afbeeldingen schuin onder elkaar, hoe komt dit? en hoe kan ik dit oplossen?
grtz ringo
 
ik heb het probleem ondertussen gevonden, er stond een </div> teveel

grtz ringo
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan