abonnement bol.com Unibet Coolblue
pi_108193309
[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
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress 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 (code.png), 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 SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.

[ Bericht 3% gewijzigd door KomtTijd... op 20-02-2012 17:52:26 ]
  maandag 20 februari 2012 @ 17:26:37 #2
56176 Catch22-
Ben je Blind?!
pi_108193439
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?

Wij waarderen het heel erg als je zelf een beetje hebt rongezocht als je een vraag stelt. Ikzelf vind het leuk om je te helpen als je er niet uitkomt, maar toon wel zelf inzet. Als je het niet snapt, zoek dan even op internet wat we mogelijk bedoel, voordat je post "wat is een blockelement?". We kunnen je namelijk de goede richting opwijzen, maar kunnen niet alles voor je gaan uitdenken. Dus toon zelf initiatief. Kom je er niet uit of heb je een duwtje de juiste richting nodig, dan mag je dat natuurlijk gewoon posten.
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?
pi_108196297
quote:
11s.gif Op maandag 20 februari 2012 17:22 schreef Catch22- het volgende:
Heb je een base href gedefinieerd?
Wat ik gedaan heb is dit in de <head> gezet: <base href="http://localhost/joomla/images">

Vervolgens wordt er gezegd dat je in de body aangeeft wat de naam van de image is, heb ik gedaan maar geen resultaat.

Dus mijn code ziet er nu zo uit:
1
2
3
4
<head><base href="http://localhost/joomla/images"></head>
<body>
<a href="javascript:bookmarksite('Google', 'http://www.google.nl')"><img src="favo.jpg" alt="bookmark"  />
</body>

Als ik de theorie goed begrijp geef je met de base href aan waar de browser moet zoeken en met img src geef je specifiek aan welk bestand de browser moet verwerken, in mijn geval dus favo.jpg.

Het 'try it yourself' voorbeeld van W3schools laat mbt <img src="stickman.gif" width="24" height="39" /> een afbeelding zien nadat ze in de <head> die base href hebben neergezet. Als ik dat voorbeeld gebruik in mijn testomgeving gebeurd er wederom niks.
Het pad naar de images map klopt gewoon niet, -alles- werkt behalve de afbeelding zelf.
Als ik in base href D:/Werk/wamp/www/joomla/templates/testtemplate/images/ neerzet weigert ie ook dienst.
pi_108196555
Als www je webroot is, dan zie je toch zelf ook dat je pad niet klopt lijkt me?
  maandag 20 februari 2012 @ 19:20:36 #5
84244 Scorpie
Abject en infaam!
pi_108197758
quote:
14s.gif Op maandag 20 februari 2012 18:49 schreef KomtTijd... het volgende:
Als www je webroot is, dan zie je toch zelf ook dat je pad niet klopt lijkt me?
Www is de webroot van Wamp.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
pi_108198004
Daarom.
/www/joomla/templates/testtemplate/images/
/www/joomla/images

Zoek de verschillen
pi_108249829
Oke, html/css vraagje. Ik wil boxen met ronde hoeken en schaduw om een aantal divjes op mijn pagina maken. Nu weet ik dat dit kan middels een tabel, of (zoals ik het nu heb) een background die zich herhaalt en een losse boven en onderkant.
Echter merk ik in beide gevallen dat de inhoud (tekst/afbeelding/object) natuurlijk gelijk met de background ophoudt, waardoor met de redelijke schuine hoeken er best een dikke rand overblijft, dikker dan ik zou willen. Is er een manier om ofwel de achtergrond voortijdig te laten stoppen, of een losse box te maken die ik naar wens kan resizen waar ik de inhoud gewoon 'voor' plaats?
pi_108251758
Ik zou zeggen Fuck IE7, gewoon CSS3 gebruiken.
pi_108251816
CSS3 in combinatie met CSS3pie voor IE. Werkt prima.
  woensdag 22 februari 2012 @ 09:15:30 #10
12221 Tijn
Powered by MS Paint
pi_108252108
Ronde hoeken en schaduwen doe ik tegenwoordig alleen nog maar met CSS3. Sinds IE9 dat ook gewoon ondersteunt, is er imho geen reden meer om bizarre constructies aan te gaan om oude versies ook te ondersteunen. Mensen updaten maar lekker naar de nieuwste versie van hun browser, of ze gebruiken de site zonder ronde hoeken en schaduwen. Het is immers ook niet alsof het niet werkt zonder die dingen.
  woensdag 22 februari 2012 @ 09:19:43 #11
56176 Catch22-
Ben je Blind?!
pi_108252209
quote:
14s.gif Op woensdag 22 februari 2012 08:59 schreef picodealion het volgende:
CSS3 in combinatie met CSS3pie voor IE. Werkt prima.
Dit dus. Maar PIE werkt niet altijd, is vrij zwaar en kan soms iets onvoorspelbaar zijn.

Ik leg het tegenwoordig bij de klant neer. Of CSS3 en geen IE8 en lager, of met afbeeldingen, maar dan kost het meer tijd.
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?
pi_108252435
quote:
11s.gif Op woensdag 22 februari 2012 09:19 schreef Catch22- het volgende:

[..]

Dit dus. Maar PIE werkt niet altijd, is vrij zwaar en kan soms iets onvoorspelbaar zijn.

Da's het probleem van dinosauriėrs die hun browsers niet updaten hoor.
  woensdag 22 februari 2012 @ 09:31:44 #13
56176 Catch22-
Ben je Blind?!
pi_108252474
Mja, zo werkt het niet helemaal in een professionele omgeving.

En niet iedereen kan zijn browser updaten. Als je een siteje voor studenten maakt kan je gewoon schijt hebben aan IE8 en lager, maar als je wat serieuzere webapps voor grote bedrijven maakt moet je er gewoon rekening mee houden.\

Gisteren nog 2 uur bezig geweest om een dropdownmenu werkend te maken in IE7 (ging wat mis met layers)
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?
  woensdag 22 februari 2012 @ 09:33:36 #14
12221 Tijn
Powered by MS Paint
pi_108252516
Ik maak trouwens de laatste tijd ook steeds vaker webapplicaties die niet publiek beschikbaar zijn, maar bv alleen benaderbaar via een touchscreen in een museum.

Dat is echt een luxe, dat kun je je gewoon niet voorstellen. Niet alleen kun je zelf de browser bepalen en wordt de applicatie ook echt alleen via die browser benaderd, je weet zelfs de schermafmetingen O+ _O_
pi_108252535
quote:
11s.gif Op woensdag 22 februari 2012 09:31 schreef Catch22- het volgende:
Mja, zo werkt het niet helemaal in een professionele omgeving.

En niet iedereen kan zijn browser updaten. Als je een siteje voor studenten maakt kan je gewoon schijt hebben aan IE8 en lager, maar als je wat serieuzere webapps voor grote bedrijven maakt moet je er gewoon rekening mee houden.\

Gisteren nog 2 uur bezig geweest om een dropdownmenu werkend te maken in IE7 (ging wat mis met layers)
Gewoon zeggen dat je alle browsers van max 3 jaar oud ondersteunt. Dan kun je IE8 over een maand laten vallen *O*
  woensdag 22 februari 2012 @ 09:34:50 #16
56176 Catch22-
Ben je Blind?!
pi_108252539
Ja zo werkt het dus niet.

En serieus, als je extra tijd kwijt bent om alles in IE8 te laten werken ben je aan het prutsen. Buiten de CSS3 features werkt over het algemeen alles gewoon goed in IE8.

Zelfs IE7 geeft bij mij maar zeer zelden echt problemen. Zolang je CSS3 met graceful degradation toepast gaat alles prima.
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?
pi_108257076
quote:
11s.gif Op woensdag 22 februari 2012 09:34 schreef Catch22- het volgende:
Ja zo werkt het dus niet.

En serieus, als je extra tijd kwijt bent om alles in IE8 te laten werken ben je aan het prutsen. Buiten de CSS3 features werkt over het algemeen alles gewoon goed in IE8.

Zelfs IE7 geeft bij mij maar zeer zelden echt problemen. Zolang je CSS3 met graceful degradation toepast gaat alles prima.
Wacht maar tot je baas verwacht dat de site precies doet en eruit ziet zoals hij dat wil. In IE9 op IE7 compatibility mode. En omdat hij zijn scherm altijd zo heeft, ook max 900px breed.

Het kan niet altijd zo luxe als we graag zouden willen.
  woensdag 22 februari 2012 @ 12:40:04 #18
56176 Catch22-
Ben je Blind?!
pi_108258572
Mijn baas is realistisch. En alles wat ik maak werkt in IE7 net als in IE9/Chrome. Tenzij ik CSS3 effecten gebruik, dit wordt echter altijd met de klant besproken. Maar alles blijft werken en ziet er nagenoeg hetzelfde uit.

Positionering e.d. sowieso, evt (custom) fonts renderen natuurlijk niet hetzelfde in alle browsers, maar daar doe je niets aan.
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?
pi_108259799
Alleen maar als je er afbeeldingen van maakt. Maar dat is nou ook niet bevorderlijk voor de vindbaarheid.
pi_108259831
Nog een vraag.



Boven is wat ik heb in html/css, onder is wat het moet worden. Er loopt dus een lijn door mijn tekst, die moet stoppen bij de tekst en doorgaan er naast.

Hoe moet ik dit oplossen? Twee zwevende divjes?
  woensdag 22 februari 2012 @ 13:18:10 #21
56176 Catch22-
Ben je Blind?!
pi_108259894
Ja. Of een fieldset en de tekst in de legend, beetje hackerig maar het kan
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?
pi_108259931
Ligt er aan hoe je code eruit ziet.
Ik neem aan dat het <h*> elementen zijn. Als je dan de tekst in een <span> zet met achtergrond zodat de blauwe streep bedekt wordt ben je een heel eind.
pi_108259964
quote:
11s.gif Op woensdag 22 februari 2012 13:18 schreef Catch22- het volgende:
Ja. Of een fieldset en de tekst in de legend, beetje hackerig maar het kan
Dit is abra cadabra. ;(
Maar als het werkt sta ik ervoor open. Google open.
quote:
14s.gif Op woensdag 22 februari 2012 13:19 schreef KomtTijd... het volgende:
Ligt er aan hoe je code eruit ziet.
Ik neem aan dat het <h*> elementen zijn. Als je dan de tekst in een <span> zet met achtergrond zodat de blauwe streep bedekt wordt ben je een heel eind.
De achtergrond heeft een tekstuur, dus om een solid kleur over de span heen te zetten is ook niet zo'n strak plan denk ik. Althans, dat bedoel je toch? :o
  woensdag 22 februari 2012 @ 13:20:53 #24
56176 Catch22-
Ben je Blind?!
pi_108259998
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?
pi_108260053
Dus het beste is om dat te doen met een border? Het is nu een afbeelding, volgens mij. Even proberen om te zien of het lukt, dankje
abonnement bol.com Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')