1. Forum
  2. kleine Tour website bouwen

Re: kleine Tour website bouwen

Zou ik hetzelfde kunnen doen met de plaatjes op de voorpagina.
Internet in Cambodia is niet super snel en nu zijn de plaatje 60kb maar als ik hetzelfde kan doen dan kan ik ze opslaan in jpg en zijn ze 7 tot 8 keer kleiner.

Op dit moment zijn die opgebouwd uit 5 divs


.tourbox0 { width:250px; height:340px; float:left; margin-bottom:15px; } .tourbox1 { width:125px; height:20px; padding-top:5px; font-family: Verdana; font-size: 13px; font-style: normal; line-height: 16px; font-weight:bolder; text-align:center; color: #3333cc; z-index:1 } .tourbox2 { width:250px; height:200px; top:-20px; z-index:0; } .tourbox3 { width:250px; height:100px; top:205px; padding-top:10px; font-family: Calibri; font-size: 15px; font-style: normal; line-height: 18px; font-weight: lighter; color: #ff9900; } .tourbox4 { width:250px; height:20px; font-family: Calibri; font-size: 13px; font-style: normal; line-height: 16px; font-weight: lighter; color: #ff9900; }
<a href="http://www.cambodiantrips.com/day-trips/suntour/" style="text-decoration:none;"> <div class="tourbox0" style="margin-right: 25px;"> <div class="tourbox2" style="background: url('../wp-content/gallery/daytripssv/101_suntour.png'); background-repeat: no-repeat; text-decoration: none;"> <div class="tourbox1">SunBoat</div> </div> <div class="tourbox3">The sun takes you to Saracen Bay on Koh Rong Samlem. On this Trip you can go snorkling or diving. Do a Jungle and mangrove walk</div> <div class="tourbox4"><a href="../day-trips/suntour/">More information and Booking</a></div> </div></a>
  • Zou ik hetzelfde kunnen doen met de plaatjes op de voorpagina.
    Internet in Cambodia is niet super snel en nu zijn de plaatje 60kb maar als ik hetzelfde kan doen dan kan ik ze opslaan in jpg en zijn ze 7 tot 8 keer kleiner.

    Op dit moment zijn die opgebouwd uit 5 divs


    .tourbox0 { width:250px; height:340px; float:left; margin-bottom:15px; } .tourbox1 { width:125px; height:20px; padding-top:5px; font-family: Verdana; font-size: 13px; font-style: normal; line-height: 16px; font-weight:bolder; text-align:center; color: #3333cc; z-index:1 } .tourbox2 { width:250px; height:200px; top:-20px; z-index:0; } .tourbox3 { width:250px; height:100px; top:205px; padding-top:10px; font-family: Calibri; font-size: 15px; font-style: normal; line-height: 18px; font-weight: lighter; color: #ff9900; } .tourbox4 { width:250px; height:20px; font-family: Calibri; font-size: 13px; font-style: normal; line-height: 16px; font-weight: lighter; color: #ff9900; }
    <a href="http://www.cambodiantrips.com/day-trips/suntour/" style="text-decoration:none;"> <div class="tourbox0" style="margin-right: 25px;"> <div class="tourbox2" style="background: url('../wp-content/gallery/daytripssv/101_suntour.png'); background-repeat: no-repeat; text-decoration: none;"> <div class="tourbox1">SunBoat</div> </div> <div class="tourbox3">The sun takes you to Saracen Bay on Koh Rong Samlem. On this Trip you can go snorkling or diving. Do a Jungle and mangrove walk</div> <div class="tourbox4"><a href="../day-trips/suntour/">More information and Booking</a></div> </div></a>
  • Je hebt de border nu op de div gezet, maar je moet hem eigenlijk op de afbeelding zetten. De hover heb je nu ook op de div gezet, maar deze moet je op de A tag zetten. De hover gaat namelijk over een link en niet over een div. (vandaar ook a:hover in de css) Op je website staat de volgende code voor een afbeelding.


    Sweet :D Als ik weer in Nederland ben, ben ik je wat bier verschuldigd :D
  • Je hebt de border nu op de div gezet, maar je moet hem eigenlijk op de afbeelding zetten. De hover heb je nu ook op de div gezet, maar deze moet je op de A tag zetten. De hover gaat namelijk over een link en niet over een div. (vandaar ook a:hover in de css) Op je website staat de volgende code voor een afbeelding.

    <div class="picturebox1" style="margin-right:25px;margin-bottom:25px;"> <a rel="lightbox[82]" href="http://www.cambodiantrips.com/wp-content/gallery/sunboat-pictures/001_600x360-8.png"> <img width="250" height="150" alt="" src="http://www.cambodiantrips.com/wp-content/gallery/sunboat-thumbs/001_250x150.png"> </a> </div>
    Wat je CSS dan moet worden is:

    .picturebox1 img { border: solid 4px #FF9900; border-radius: 5px; }
    .picturebox1 a:hover img { border-color:#FFFFFF; }
  • Heb het alleen op de bovende drie plaatjes geprobeerd.

    De plaatjes blijven niet in de div en ik denk dat ik iets fout do met de hover over the div.

    http://www.cambodiantrips.com/day-trips/test/

    } a:hover picturebox11 { border-color:#FFFFFF; } .picturebox11 { width:242px; height:142px; float:left; margin-bottom:15px; border: solid 4px #FF9900; border-radius: 5px; }
    <div style="width:800px; margin:auto;">
    <div class="picturebox11" style="margin-right:25px;margin-bottom:25px;"><img src="http://www.cambodiantrips.com/wp-content/gallery/test/001.jpg" alt="" width="242" height="142" /></div> <div class="picturebox11" style="margin-right:25px;margin-bottom:25px;"><img src="http://www.cambodiantrips.com/wp-content/gallery/test/001.jpg" alt="" width="242" height="142" /></div> <div class="picturebox11" style="margin-right:0px;margin-bottom:25px;"><img src="http://www.cambodiantrips.com/wp-content/gallery/test/001.jpg" alt="" width="242" height="142" /></div>

    Heb het Javascript bestand not niet toegevoegd ( ben bezig in mozilla )
  • Dit kan met Border Radius. Het nadeel hiervan is dat Internet Explorer dit pas vanaf IE9 ondersteunt. Om in eerdere IE versies hetzelfde resultaat te krijgen moet je een klein Javascript bestand bijvoegen.

    De CSS (inclusief de witte rand bij mouse-over) wordt dan

    img { border: solid 4px #FF9900; border-radius: 5px; }
    a:hover img { border-color:#FFFFFF; }

    Je moet zelf dan even kijken of bovenstaande code nog aangepast moet worden naar eventuele classes die je zelf benoemd hebt.

    Hier staat alles uitgelegd:
    http://davidwalsh.name/css-rounded-corners
  • Op de 1 of andere manier kan ik mijn eigen account niet meer op ( tot ik daar weer op kan gebruik ik deze )

    Paar vraagjes.

    als je naar http://www.cambodiantrips.com/day-trips/suntour/ gaat heb ik een oranje rand rond de plaatjes. Iemand vertelde mij dat ik dat ook in css kan doen ( dan kan ik de plaatjes in jpg doen inplaats van png ( png is een stuk groter )

    Iemand enig idee hoe ik dat voor elkaar krijg. Volgens mij moet het dan ook mogelijk om een mousover te doen zodat de rand van oranje naar wit verandert.

    Graag wat help :)
  • Noob.

    Well Yeah, dat zei ik toch :P
  • Noob.

    Wat is dit nou weer? :')
  • Noob.
  • Vergeet Joomla, schakel over naar wordpress en installeer de plugin form builder (oid).

    Doing that. vreemd dat joomla dit

    http://wordpress.org/extend/plugins/visual-form-builder/

    niet heeft :s

    Thanks :)
  • Vergeet Joomla, schakel over naar wordpress en installeer de plugin form builder (oid).
  • Bijna een jaar geleden maar ben weer terug met wat vraagjes :)

    Tijdje niet met de website bezig geweest ( had andere dingen te doen ) maar ben er weer mee bezig. Ben verhuist naar het strand ( Sihanoukville ) en wil eerst voor hier de website afmaken. Ben al aardig opweg maar heb nog wat probleempjes.

    Mijn zusje heeft Joomla geinstalleerd en de layout is opgezet met divs.

    http://www.whattodoinsiemreap.com/forms/01frontpage.png

    http://www.whattodoinsiemreap.com/forms/02daytrips.png

    http://www.whattodoinsiemreap.com/forms/03boattrip.png

    http://www.whattodoinsiemreap.com/forms/04multipleoptions

    Nog niet af ( moet de foto's en informatie updaten., moet de pagina van de 2e foto nog afmaken ( ben bezig om de layout in divs te maken ( ben een webnoob dus net een puzzle )

    op dit moment heb ik het zo



    <html> <head> <link rel="shortcut icon" href="http://www.whattodoinsiemreap.com/icon.ico"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Trip Adviser Cambodia</title>
    <style type="text/css"> .picturebox1 { width:250px; height:150px; float:left; margin-bottom:15px; } .textbox1 { width:800px; height:250px; margin-bottom:15px; padding:5px; font-family: Verdana; font-size: 13px; font-style: normal; line-height: 16px; font-weight:bolder; text-align:center; color: #3333cc; z-index:0 } .picturebox2 { width:250px; height:500px; float:left; margin-right:15px; } .bookingformbox { width:535px; height:500px; float:left; } a:link { color: #F00; font-size: 15px; } a:visited { color: #F00; } a:hover { color: #F90; } a:active { color: #F90; }
    body { background-color: #333; } </style> </head>
    <body> <div style="width:800px; margin:auto;">
    <div class="picturebox1" style="margin-right:25px;"></div> <div class="picturebox1" style="margin-right:25px;"></div> <div class="picturebox1" style="margin-right:0px;"></div>
    <div class="textbox1">
    </div>
    <div class="picturebox1" style="margin-right:25px;"></div> <div class="picturebox1" style="margin-right:25px;"></div> <div class="picturebox1" style="margin-right:0px;"></div>
    <div class="picturebox2"> <div class="picturebox1" style="margin-bottom:15px;"></div> <div class="picturebox1" style="margin-bottom:15px;"></div> <div class="picturebox1" style="margin-bottom:15px;"></div>
    </div> <div class="bookingformbox"></div>
    </div> </html>

    ik wil graag de form in de bookingformbox plaatsen.

    Moet een booking extentie aan joomla toevoegen. iemand enig idee welke de beste optie is ?

    Voor de bungalows zou graag de optie hebben om een vanaf datum en een tot en met datum te hebben waarbij ik het zo kan regelen dat mensen kunnen zien dat bepaalde datums al vol zijn.

    Zoiets als did
    http://www.whattodoinsiemreap.com/forms/forms.html
    ( hoef er geen betaal optie bij te hebben )



    Sugesties zijn welkom :P
  • Waarom gebruik je frames?

    Ik woon in Cambodia en het internet is hier vrij langzaam,.

    Ik wil dat de navigationbar en de top picture 1 keer laden.

    plus ik ben een website builder n00b. laatste keer dat ik een website gemaakt had was toen ik 13 was en dat is 14 jaar geleden :P.

    Als je sugesties hebt om het beter te doen please indulge me.

    update:

    navigation bar ge-update, home, river boat, buggies en microlights werken.

    In mijn offline folders werkt het perfect alleen als ik het online zet worden de pagina's niet in het onderste frame geladen.. :s
  • Waarom gebruik je frames?
  • Misschien ligt het aan mij. Maar bij alle activiteit krijg ik een error als ik op het rode informatie linkje klik.

    omdat het nog niet af is,. river boat, microlights en buggies werken :)
  • Misschien ligt het aan mij. Maar bij alle activiteit krijg ik een error als ik op het rode informatie linkje klik.
  • http://www.whattodoinsiemreap.com/

    it's alive, alive :D :D :D

    Nog niet af tho :P
  • Ah koekie thnx,
    een vriend van me is de form aan het maken, mocht hij niet opschieten zal ik het zelf proberen.

    Ben bezig geweest met een navigatie bar.

    http://castelijn.tweakdsl.nl/website/Root/navigationbar/navigation.html

    Als ik het copier in mijn website ziet het er alleen niet zo uit.

    http://castelijn.tweakdsl.nl/website/Root/index.html

    Enig idee waar dit probleem kan zitten ?

    Ik hield ctrl ingedrukt en scrollde omlaag en vervolgens kreeg ik je nav zoals je hem in de eerste url hebt staan.

    Ctrl + scrolling is inzoomen/uitzoomen

    Het blijft hetzelfde bij mij. Alleen word alles groter of kleiner.

    Andere vraag. Hoe kan ik bar zo maken dat die niet elke keer als ik naar een andere pagina ga herladen wordt.
  • Ah koekie thnx,
    een vriend van me is de form aan het maken, mocht hij niet opschieten zal ik het zelf proberen.

    Ben bezig geweest met een navigatie bar.

    http://castelijn.tweakdsl.nl/website/Root/navigationbar/navigation.html

    Als ik het copier in mijn website ziet het er alleen niet zo uit.

    http://castelijn.tweakdsl.nl/website/Root/index.html

    Enig idee waar dit probleem kan zitten ?

    Ik hield ctrl ingedrukt en scrollde omlaag en vervolgens kreeg ik je nav zoals je hem in de eerste url hebt staan.
  • Ah koekie thnx,
    een vriend van me is de form aan het maken, mocht hij niet opschieten zal ik het zelf proberen.

    Ben bezig geweest met een navigatie bar.

    http://castelijn.tweakdsl.nl/website/Root/navigationbar/navigation.html

    Als ik het copier in mijn website ziet het er alleen niet zo uit.

    http://castelijn.tweakdsl.nl/website/Root/index.html

    Enig idee waar dit probleem kan zitten ?

Plaats reactie

Wanneer je een reactie plaatst ga je akoord
met onze voorwaarden voor reacties.

Log in om te reageren