DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
[html, css, js] Voor Dummies
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
Ik zit nog hiermee:
quote:Op donderdag 8 december 2011 10:56 schreef Tijn het volgende:
Stel ik heb een hele lange lijst met korte items. Daar zou ik dan graag twee kolommen in willen aanbrengen. Maar ik wil er niet twee aparte lijsten van maken. Wat doe ik dan?
moet het echt per sé in 2 uls dan?
Je moet je nooit door 'regels' en 'semantiek' laten leiden als je het daardoor jezelf onnodig moeilijk maakt.
Je moet je nooit door 'regels' en 'semantiek' laten leiden als je het daardoor jezelf onnodig moeilijk maakt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Op
Hoe kan je met CSS instellen dat een regel tekst bij een bepaalde breedte (einde van de div) wordt afgebroken en dat de laatste drie characters "..." worden? Ik ben dit ooit tegengekomen maar ik kan het niet meer terugvinden. Iets met overflow?
http://www.quirksmode.org/css/textoverflow.html
| 1 2 3 4 5 6 7 | p.test { border: 1px solid #000000; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } |
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Super bedankt!quote:Op donderdag 8 december 2011 11:29 schreef Catch22- het volgende:
http://www.quirksmode.org/css/textoverflow.html
[ code verwijderd ]
In veel gevallen geef ik je gelijk, maar het is in dit geval belangrijk dat het echt zo correct mogelijk is.quote:
Je moet je nooit door 'regels' en 'semantiek' laten leiden als je het daardoor jezelf onnodig moeilijk maakt.
oke, wat voor data heb je? want je bent vrij summier in je specs.
misschien dat je wat kan stoeien met display:inline enzo, maar het blijft gekunstel. Kan je de data niet anders aanleveren?
In plaats van 1.2.3.4.5.6 > 1.4.2.5.3.6
misschien dat je wat kan stoeien met display:inline enzo, maar het blijft gekunstel. Kan je de data niet anders aanleveren?
In plaats van 1.2.3.4.5.6 > 1.4.2.5.3.6
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Oh wacht, ik heb dat wel eens gedaan maar dat was in een form. Ik denk niet dat list items scheiden met een div een heel correct resultaat oplevert.quote:
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Het is een lijstje met gemeentes.quote:
oke, wat voor data heb je? want je bent vrij summier in je specs.
misschien dat je wat kan stoeien met display:inline enzo, maar het blijft gekunstel. Kan je de data niet anders aanleveren?
In plaats van 1.2.3.4.5.6 > 1.4.2.5.3.6
Gewoon zo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul> <li>Alblasserdam</li> <li>Albrandswaard</li> <li>Alphen aan den Rijn</li> <li>Barendrecht</li> <li>Bergambacht</li> <li>Bernisse</li> <li>Binnenmaas</li> <li>Bodegraven-Reeuwijk</li> <li>Boskoop</li> <li>Brielle</li> <li>Capelle aan den IJssel</li> <li>Cromstrijen</li> <li>'s-Gravenhage</li> <li>Delft</li> <li>Dirksland</li> <li>Dordrecht</li> <li>Giessenlanden</li> <li>Goedereede</li> <li>Gorinchem</li> <li>Gouda</li> </ul> |
Maar dan een heleboel (alle gemeentes van een provincie). Omdat het zo'n lange lijst wordt, wil ik graag dat het visueel in twee kolommen wordt verdeeld. Maar het is belangrijk dat dat zo toegankelijk en w3c-correct mogelijk wordt gedaan. Het is eigenlijk niet acceptabel om er twee lijst-elementen van te maken. En het is dus de bedoeling dat de volgorde min of meer in tact blijft.
misschien sub-koppen maken
A - B - C - ....- Z
als je dan op een letterklikt dat je dan de lijst krijgt met de steden die beginnen met die letter?
A - B - C - ....- Z
als je dan op een letterklikt dat je dan de lijst krijgt met de steden die beginnen met die letter?
| 1 2 3 4 | <ul width=evenbreedals 2 li's met wat padding erbij > <li class="floatLeft">Alblasserdam</li><li class="floatright">Albrandswaard</li> etccetc.. </ul> |
Ja, zoiets heb ik nu dus. Dat kan op zich wel hoor, maar eigenlijk is de volgorde dan verkeerd. Maar ik zou het mooier vinden als het zo werd:quote:
1 4
2 5
3 6
Ik weet niet hoe ik dat voor elkaar zou moeten krijgen.
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:quote:Op donderdag 8 december 2011 11:45 schreef Tijn het volgende:
[..]
Ja, zoiets heb ik nu dus. Dat kan op zich wel hoor, maar eigenlijk is de volgorde dan verkeerd. Maar ik zou het mooier vinden als het zo werd:
1 4
2 5
3 6
Ik weet niet hoe ik dat voor elkaar zou moeten krijgen.
http://www.css3.info/preview/multi-column-layout/
Wat je dan nog zou kunnen doen is
Maar ik weet niet in hoeverre dat semantisch nog helemaal volgens de regels is. In principe zou het eventuele compabiliteit dingen niet in de weg staan denk ik.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <ul> <div id="Links"> <li>1</li> <li>2</li> <li>3</li> </div> <div id="Rechts"> <li>4</li> <li>5</li> <li>6</li> </div> </ul> |
quote:
[..]
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:
http://www.css3.info/preview/multi-column-layout/
Laat me raden. IE doet niet mee ?quote:Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:
Ja, dat is best tof. Maar gaat natuurlijk nooit werken in IE enzoquote:
[..]
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:
http://www.css3.info/preview/multi-column-layout/
Aan zoiets zat ik ook te denken... maar ik weet niet hoe erg ze het vinden dat er een div in een ul staat zonder li eromheen. Volgens mij valideert dat niet (althans niet met XHTML strict, waarin ik deze pagina maak).quote:Op donderdag 8 december 2011 11:48 schreef GI het volgende:
Wat je dan nog zou kunnen doen is
[ code verwijderd ]
Maar ik weet niet in hoeverre dat semantisch nog helemaal volgens de regels is. In principe zou het eventuele compabiliteit dingen niet in de weg staan denk ik.
Je kan ook iets proberen als display: table op de container en display: table-cell op de column 
Edit: lees net dat het niet werkt op IE7 en lager.
Edit: lees net dat het niet werkt op IE7 en lager.
💍 💍 💍 💍 💍 💍 🍌 ☎
Misschien is dit trouwens uiteindelijk ook niet zo'n slechte oplossing. Dan maar geen kolommen.quote:Op donderdag 8 december 2011 11:40 schreef MrNiles het volgende:
misschien sub-koppen maken
A - B - C - ....- Z
als je dan op een letterklikt dat je dan de lijst krijgt met de steden die beginnen met die letter?
ik denk dat de leesbaarheid veel beter is...quote:
[..]
Misschien is dit trouwens uiteindelijk ook niet zo'n slechte oplossing. Dan maar geen kolommen.
2 kolommen kan toch best verwarrend werken
en om hoeveel regels gaat het wel niet?
Ja, ik denk dat je gelijk hebt. Sommige provincies (zoals Zuid-Holland) hebben tegen de 100 gemeenten, dus dat loopt aardig op.quote:
[..]
ik denk dat de leesbaarheid veel beter is...
2 kolommen kan toch best verwarrend werken
en om hoeveel regels gaat het wel niet?
Is het essentieel dat het in één lijst staat dan ? Je zou ook via jquery of iets in die geest een zoekfilter in kunnen bouwen.quote:
[..]
Ja, ik denk dat je gelijk hebt. Sommige provincies (zoals Zuid-Holland) hebben tegen de 100 gemeenten, dus dat loopt aardig op.
Als je alle gemeenten moet opsommen zou ik inderdaad gewoon gaan voor de A-B-C-..-Z lijst. Veel overzichtelijker.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ja. Het is semantisch één lijst, dus het moet ook in één lijstelement zitten.quote:
[..]
Is het essentieel dat het in één lijst staat dan ?
Het is echt compleet onacceptabel dat het niet zou werken zonder Javascript, dus ik denk niet dat zoiets een oplossing gaat zijnquote:Je zou ook via jquery of iets in die geest een zoekfilter in kunnen bouwen.
Bedankt voor het meedenken, mensen. Zo'n forum is echt ideaal voor de eenzame ZZP'er die geen collega's heeft om mee te overleggen 
Maar je werkt voor de overheid dus?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Het is een ZZPerquote:
Maar je werkt voor de overheid dus?
die kunnen niet voor de overheid werken?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Nee, het is voor een belangenorganisatie voor mensen met een handicap, maar het heeft wel met de overheid te maken. Ze willen wel graag het goede voorbeeld geven door zich te houden aan dingen als Drempelvrij en de Webrichtlijnen van de Overheid te houden.quote:
Maar je werkt voor de overheid dus?
Een ul mag alleen li's bevatten, en moet ten minste 1 li bevatten om geldige (x)html te zijn.quote:
Aan zoiets zat ik ook te denken... maar ik weet niet hoe erg ze het vinden dat er een div in een ul staat zonder li eromheen. Volgens mij valideert dat niet (althans niet met XHTML strict, waarin ik deze pagina maak).
Op mijn site wil ik graag een map waarop alle sushirestaurants staan. De gegevens van de sushirestaurants staan in dit kml-bestand. Nu gebruik ik de standaard methode van google om de kml aan te roepen, echter krijg ik geen markers te zien (zelfs geen kaart) op http://www.japansesushi.nl/restaurants.
[ Bericht 31% gewijzigd door _superboer_ op 09-12-2011 02:24:48 ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; var geoXml; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); geoXml = new GGeoXml("http://www.japansesushi.nl/restaurantskml.kml"); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(52.18958,5.29524), 7); map.addControl(new GLargeMapControl()); map.addOverlay(geoXml); } } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map-canvas" style="width: 500px; height: 400px"></div> |
[ Bericht 31% gewijzigd door _superboer_ op 09-12-2011 02:24:48 ]
Laat maar, lijkt het nu wel te doen
[ Bericht 48% gewijzigd door _superboer_ op 09-12-2011 04:30:55 ]
[ Bericht 48% gewijzigd door _superboer_ op 09-12-2011 04:30:55 ]
Ik heb een sticky footer gemaakt voor op mn website (zie de code hieronder) hij werkt nu overal, behalve op de iphone/ipad
ik heb ergens gelezen dat dit met position fixed te maken heeft
is er iemand die weet hoe ik dit kan verhelpen?
<div class="push"></div>
<div class="footer">
<div class="footer-align">
<p>Copyright Marcel Woudstra all rights reserved 2011</p> </div>
</div>
</div>
</div>
.footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color:#202020;
font-family : Helvetica, Verdana, sans-serif;
font-size : 10px;
color:#9e9e9e;
}
.footer-align {
padding-top:10px;
text-align:center;
}
.push {
height:50px;
}
ik heb ergens gelezen dat dit met position fixed te maken heeft
is er iemand die weet hoe ik dit kan verhelpen?
<div class="push"></div>
<div class="footer">
<div class="footer-align">
<p>Copyright Marcel Woudstra all rights reserved 2011</p> </div>
</div>
</div>
</div>
.footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color:#202020;
font-family : Helvetica, Verdana, sans-serif;
font-size : 10px;
color:#9e9e9e;
}
.footer-align {
padding-top:10px;
text-align:center;
}
.push {
height:50px;
}
ik wel?quote:
Op mijn site wil ik graag een map waarop alle sushirestaurants staan. De gegevens van de sushirestaurants staan in dit kml-bestand. Nu gebruik ik de standaard methode van google om de kml aan te roepen, echter krijg ik geen markers te zien (zelfs geen kaart) op http://www.japansesushi.nl/restaurants.
[ code verwijderd ]
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Je gebruikt een oude versie van Google Maps (versie 2). Maar er is niks mis mee hier.quote:
Op mijn site wil ik graag een map waarop alle sushirestaurants staan. De gegevens van de sushirestaurants staan in dit kml-bestand. Nu gebruik ik de standaard methode van google om de kml aan te roepen, echter krijg ik geen markers te zien (zelfs geen kaart) op http://www.japansesushi.nl/restaurants.
[ code verwijderd ]
Laat dit gewoon weg op een telefoon, daar heb je sowieso al weinig schermruimte. Om dan een footer constant in beeld te hebben is gewoon schermvervuiling.quote:
Ik heb een sticky footer gemaakt voor op mn website (zie de code hieronder) hij werkt nu overal, behalve op de iphone/ipad
ik heb ergens gelezen dat dit met position fixed te maken heeft
is er iemand die weet hoe ik dit kan verhelpen?
<div class="push"></div>
<div class="footer">
<div class="footer-align">
<p>Copyright Marcel Woudstra all rights reserved 2011</p> </div>
</div>
</div>
</div>
.footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color:#202020;
font-family : Helvetica, Verdana, sans-serif;
font-size : 10px;
color:#9e9e9e;
}
.footer-align {
padding-top:10px;
text-align:center;
}
.push {
height:50px;
}
Ben bezig met een ontwerp voor een eindexamenopdracht. Dit ontwerp is voor een applicatie die de klant in de toekomst misschien veelvuldig gaat verspreiden. Het ontwerp is gratis voor de klant maar kan ik hier auteursrechten etc. contractueel met de klant over vastleggen zodat deze gratis versie slechts unicum is en niet voor publicatie?
Anonieme tievesclown
Ja dit soort punten kun je vastleggen in een contract.quote:
Ben bezig met een ontwerp voor een eindexamenopdracht. Dit ontwerp is voor een applicatie die de klant in de toekomst misschien veelvuldig gaat verspreiden. Het ontwerp is gratis maar kan ik hier auteursrechten etc. contractueel met de klant over vastleggen zodat deze gratis versie slechts unicum is en niet voor publicatie?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Misschien is het een beetje grof, maar het ontwerp is erg sterk. En als die het ontwerp in de toekomst veelvoudig gaat publiceren heb ik er niets aan.quote:
[..]
Ja dit soort punten kun je vastleggen in een contract.
Bedankt in ieder geval
.
Anonieme tievesclown
Contract? Gewoon de goeie licentie kiezen voor je software is voldoende.quote:
[..]
Ja dit soort punten kun je vastleggen in een contract.
Al kan het nooit kwaad om met de opdrachtgever af te spreken wat je precies zult opleveren natuurlijk.
Het gaat om een ontwerp. Tekeningen en onderzoeken voor de website.quote:
[..]
Contract? Gewoon de goeie licentie kiezen voor je software is voldoende.
Al kan het nooit kwaad om met de opdrachtgever af te spreken wat je precies zult opleveren natuurlijk.
Anonieme tievesclown
Alleen de plaatjes laden zo snel dat soms de plaatjes nog niet helemaal geladen zijn maar dan moeten ze toch al worden weergegevenquote:
[..]
Een simpele jQuery slideshow plugin:
http://jquery.malsup.com/cycle/
Is er een preload functie ofzo?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
994a040db3f025e25771e045468fc121
Ik wil dat als mensen in de div 'content' op het linkje werk klikken er in de footer een link highlight. Nou heb ik met jQuery dit gemaakt maar het werkt niet. Zou niet weten waarom niet, iemand enig idee?
| 1 2 3 4 5 | $(document).ready(function() { $('a#werk').hover(function () { $(this).find('a#werkfooter').css("background-color", "#343434"); }); }); |
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Daar heb je die hele find niet voor nodig. Gewoon
zou moeten voldoen.
| 1 | $('a#werkfooter').css("background-color", "#343434"); |
Als aanvulling: 'find' begint met de DOM doorzoeken bij het element waar je op dat moment bent, en wordt vaak gebruikt om de dichtstbijzijnde element van iets te vinden.
Als je een class of element hebt dat vaker voorkomt en je wil degene vinden die het dichtst bij is gebruik je 'find'. Als je een ID hebt weet je dat het element uniek is op de pagina, en hoef je dus niet te zoeken. Het is namelijk al bekend welk element je op doelt.
Als je een class of element hebt dat vaker voorkomt en je wil degene vinden die het dichtst bij is gebruik je 'find'. Als je een ID hebt weet je dat het element uniek is op de pagina, en hoef je dus niet te zoeken. Het is namelijk al bekend welk element je op doelt.
Ik heb vijf linkjes onder elkaar met dezelfde class 'naarboven'.
Nou wil ik dat dat eerste linkje niet zichtbaar is. Dus ik heb dit toegevoegd:
Hij laat nu geen één meer zien, iemand enig idee waarom?
Nou wil ik dat dat eerste linkje niet zichtbaar is. Dus ik heb dit toegevoegd:
| 1 2 3 | a.naarboven:first-child{ display:none; } |
Hij laat nu geen één meer zien, iemand enig idee waarom?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ik gok dat je die a href's ieder in een <li> ofzo hebt staan?
[ Bericht 10% gewijzigd door boem-dikkie op 10-12-2011 19:40:24 ]
[ Bericht 10% gewijzigd door boem-dikkie op 10-12-2011 19:40:24 ]
Bleuh.
Ho. Verkeerde knopje.
Maar nee, heb ik niet.
Maar nee, heb ik niet.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
| 1 | <div class="goup"><a href="#wrapper" class="naarboven">naar boven</a></div> |
Die div staat 5 keer onder elkaar.
En dit is mijn css.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .goup{ margin-top: 20px; width: 250px; height: 285px; float: left; background-color: #FFFFFF; padding-top: 15px; } a.naarboven{ text-transform: uppercase; color: #99cd21; font-family: Arial, Helvetica; font-size: 11px; margin-top: 25px; } a.naarboven:first-child{ display: none; } |
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Je hebt dus wel een wrapper om iedere a heen. Dan is iedere a automatisch :first-child.
Als je nou
doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.
Als je nou
| 1 2 3 | .goup:first-child a { blaat... } |
doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.
Bleuh.
Het werkt. Wat bedoel je met andere elementen?quote:
Je hebt dus wel een wrapper om iedere a heen. Dan is iedere a automatisch :first-child.
Als je nou
[ code verwijderd ]
doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.
Het linkje is het enige wat in de div .goup komt te staan. Het is een divje die naast elke post komt te staan met een linkje die naar bovenaan de pagina gaat. Dat hoeft niet bij de eerste post vandaar.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.
Bleuh.
Maar als je .goup:first-child a doet pakt hij toch het eerste linkelement binnen de div .goup? Zoals ik al zei er zit niks anders in die div op het linkje na.quote:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
In dat geval zou een :first-of-type wel moeten werken als im me niet vergis?quote:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.
.
HTML5 bestaat uit zo gigantisch veel onderdelen/modules, er is volgens mij nog geen enkele browser die alles ondersteunt. Het beste kun je feature detection doen, bijvoorbeeld met een library als Modernizr.
Bleuh.
..quote:
HTML5 bestaat uit zo gigantisch veel onderdelen/modules, er is volgens mij nog geen enkele browser die alles ondersteunt. Het beste kun je feature detection doen, bijvoorbeeld met een library als Modernizr.
Dat zegt me niets. Het punt is dat ik html5 ga gebruiken, maar nog niet weet wat precies (Waarschijnlijk kleine animaties in een site)(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ). Dus moet ik IE detecteren met codes en daar een workaround voor creëren. Door daar gewoon een statische elementen voor te bouwen die zien dat een website IE is en dan die afbeelding laten zien. Maar dat is dus niet mogelijk?
Waarom überhaupt zo veel moeite doen voor een workaround om iets te laten werken dat nog niet eens officieel af is?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets.quote:Op zondag 11 december 2011 14:01 schreef boem-dikkie het volgende:
Waarom überhaupt zo veel moeite doen voor een workaround om iets te laten werken dat nog niet eens officieel af is?
Ik verwar mezelf ook, ik hoop dat ik een beetje duidelijk uitleg wat het probleem is (en of het mogelijk is)
Je gaat html5 gebruiken voor animaties? Good luck want dat lukt je niet.
Ik zou het persoonlijk met CSS3 proberen.
Ik zou het persoonlijk met CSS3 proberen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Nee, echt totaal nietquote:
[..]
Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets.
. Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?
Serieus niet?quote:
Je gaat html5 gebruiken voor animaties? Good luck want dat lukt je niet.
Ik zou het persoonlijk met CSS3 proberen.
Oh. Ik ha namelijk een site gezien waarbij er veel geanimeerd is, wat gebruik maakt van html5 en jquery. Was ik al bang voorquote:
[..]
Nee, echt totaal niet
Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?
Nou ja, dan een workaround maken voor wat ik dan bouw. Ik heb wat op papier gezet, hoop dat het dan wordt goedgekeurd, dan kan ik eindelijk onderzoek gaan doen
Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleertquote:
Serieus niet?
Bleuh.
"DHTML".quote:
[..]
Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert
Dat waren nog eens tijden.
Dat hele verhaal leg ik aan m'n klanten niet eens meer uit als ze weer eens komen vragen of ik geen HTML5 site voor ze kan bouwenquote:
[..]
Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert
Als klanten je überhaupt al benaderen met de vraag of je een HTML5 website kunt bouwen voor ze weet je al dat het project sowieso veel gezeur gaat veroorzaken vanwege onkennis.quote:Op zondag 11 december 2011 15:16 schreef Tijn het volgende:
[..]
Dat hele verhaal leg ik aan m'n klanten niet eens meer uit als ze weer eens komen vragen of ik geen HTML5 site voor ze kan bouwen
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ik kom het veel tegen, hoor.quote:
[..]
Als klanten je überhaupt al benaderen met de vraag of je een HTML5 website kunt bouwen voor ze weet je al dat het project sowieso veel gezeur gaat veroorzaken vanwege onkennis.
Klant: "Ja, jij kunt toch van die HTML5 sites bouwen?"
Tijn: "Euh... Ja, ik denk het..."
Klant: "Ok, ja dat het er een beetje hip uitziet, animaties enzo, maar dat 'ie het ook op m'n iPad doet he"
Tijn: "Ja, gewoon zonder Flash bedoel je? Ik kan sowieso geen Flash."
Klant: "Nee precies, Flash is uit man, HTML5 is het helemaal!"
Tijn: "Ja, ok..."
Klant: "Maar hij moet het ook gewoon in IE7 doen he, niet dat gelul dat je Chrome moet hebben ofzo"
Tijn: "Dus je wilt een HTML5 site die het doet op je iPad en in IE7?"
Klant: "Ja precies! En een beetje snel he, volgende week ofzo eerste demo?"
En dan lever je uiteindelijk gewoon XHTML met jQuery aan en dan zijn ze helemaal blij
HTML5 wordt vaak gezien als een soort synoniem voor hyperdynamische moderne websites. Het grootste probleem daarbij is eigenlijk, dat HTML5 dat helemaal niet is.
HTML5 (alhoewel het '5' ondertussen ook al nergens meer op slaat, aangezien de versienummering losgelaten wordt vanaf nu) is niets meer of minder dan een extra set tags en attributen, die toegevoegd zijn aan de HTML-specificatie. Een paar ouderwetste elementen zijn er definitief uitgehaald. Alhoewel de specificatie nog niet volledig af is, is het overgrote deel ervan al gewoon te gebruiken. Zeker de 'semantische tags', zoals nav, article, section, etc. kan je zonder problemen al gebruiken. Voor support in IE8 en lager, kan je een klein javascriptje schrijven, of gewoon htmlshiv.js googlen en downloden (net zo makkelijk), die deze tags on-the-fly aanmaakt, zodat je ze gewoon kan CSS'en.
Er is op dit moment eigenlijk geen enkele reden meer om nog XHTML te gebruiken.
CSS3 is een ander verhaal. Hierbij zijn veel eigenschappen nog maar half geïmplementeerd, of verschilt de implementatie tussen browsers (vandaar de vendor-prefixes). Als je hier veel gebruik van gaat maken (wat best kan overigens), moet je ervoor zorgen dat je pagina zonder alle typische CSS3-shit er nog steeds normaal uit ziet. Met conditional comments kan je bvb aan de HTML-tag in je document een speciale IE-class toevoegen, zodat je bepaalde zaken die niet ondersteund worden in IE8 <, kan overriden obv die class.
het jQuery-framework is zo ontworpen, dat deze in elke browser hetzelfde resultaat geeft. Voor animaties en dergelijke, is dit nog altijd de meest veilige oplossing.
HTML5 (alhoewel het '5' ondertussen ook al nergens meer op slaat, aangezien de versienummering losgelaten wordt vanaf nu) is niets meer of minder dan een extra set tags en attributen, die toegevoegd zijn aan de HTML-specificatie. Een paar ouderwetste elementen zijn er definitief uitgehaald. Alhoewel de specificatie nog niet volledig af is, is het overgrote deel ervan al gewoon te gebruiken. Zeker de 'semantische tags', zoals nav, article, section, etc. kan je zonder problemen al gebruiken. Voor support in IE8 en lager, kan je een klein javascriptje schrijven, of gewoon htmlshiv.js googlen en downloden (net zo makkelijk), die deze tags on-the-fly aanmaakt, zodat je ze gewoon kan CSS'en.
Er is op dit moment eigenlijk geen enkele reden meer om nog XHTML te gebruiken.
CSS3 is een ander verhaal. Hierbij zijn veel eigenschappen nog maar half geïmplementeerd, of verschilt de implementatie tussen browsers (vandaar de vendor-prefixes). Als je hier veel gebruik van gaat maken (wat best kan overigens), moet je ervoor zorgen dat je pagina zonder alle typische CSS3-shit er nog steeds normaal uit ziet. Met conditional comments kan je bvb aan de HTML-tag in je document een speciale IE-class toevoegen, zodat je bepaalde zaken die niet ondersteund worden in IE8 <, kan overriden obv die class.
het jQuery-framework is zo ontworpen, dat deze in elke browser hetzelfde resultaat geeft. Voor animaties en dergelijke, is dit nog altijd de meest veilige oplossing.
Wel raar, dat je plan bij voorbaat afgewezen gaat worden, als je verteld wát je precies van plan bent.. Komt een beetje raar en dubieus overquote:(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ).
dat dus.
Ik wil mbv CSS een afbeelding verticaal centreren in een div.
Mijn div opbouw ziet er zo uit:
<div id="container">
<div id="content">
<div id="producten"></div>
</div>
<div>
Bijbehorende CSS:
#container {
margin-left: auto;
margin-right: auto;
height: 750px;
width: 870px;
background-color: #d4d4d4;
}
#content {
width: 858px;
height: 610px;
margin-top: auto;
margin-left: auto;
text-align: center;
background-image: url(images/content_achtergrond.png);
position: relative;
}
#producten {
background-image: url(images/producten.png);
width: 472px;
height: 324px;
margin-left: 280px;
margin-top: 50px;
text-align:center;
}
In <div id="producten"></div> zit de afbeelding die ik vertikaal wil centeren in de div Content.
Op internet is er veel te vinden over dat het lastig is een afbeelding vertikaal te centeren in een div, maar ik begrijp niet wat het beste voor mijn code is gezien ik nogal een beginner ben met css/html.
Mijn div opbouw ziet er zo uit:
<div id="container">
<div id="content">
<div id="producten"></div>
</div>
<div>
Bijbehorende CSS:
#container {
margin-left: auto;
margin-right: auto;
height: 750px;
width: 870px;
background-color: #d4d4d4;
}
#content {
width: 858px;
height: 610px;
margin-top: auto;
margin-left: auto;
text-align: center;
background-image: url(images/content_achtergrond.png);
position: relative;
}
#producten {
background-image: url(images/producten.png);
width: 472px;
height: 324px;
margin-left: 280px;
margin-top: 50px;
text-align:center;
}
In <div id="producten"></div> zit de afbeelding die ik vertikaal wil centeren in de div Content.
Op internet is er veel te vinden over dat het lastig is een afbeelding vertikaal te centeren in een div, maar ik begrijp niet wat het beste voor mijn code is gezien ik nogal een beginner ben met css/html.
