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 (
), 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.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Dat doet elke browser in principe. Kan je dus oplossen door in je css:quote:Op dinsdag 21 augustus 2012 13:38 schreef KomtTijd... het volgende:
[..]
Verschilt misschien per browser. Firefox bijv. laat allen een scrollbalk zien als het nodig is, vandaar dat gecentreerde pagina's een paar pixels verspringen als ze langer worden, er verdwijnt rechts 20px beeldruimte dus de gecentreerde pagina moet 10px naar links.
| 1 | html {overflow-y: scroll;} |
te zetten. Dan krijg je altijd een scrollbalk, ook als er niets te scrollen is.
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).quote:Op dinsdag 21 augustus 2012 16:16 schreef QM84 het volgende:
[..]
Dat doet elke browser in principe. Kan je dus oplossen door in je css:
[ code verwijderd ]
te zetten. Dan krijg je altijd een scrollbalk, ook als er niets te scrollen is.
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.quote:Op dinsdag 21 augustus 2012 16:20 schreef n8n het volgende:
Zou een website sowieso nooit fixed maken qua breedte. Iedereen browsed tegenwoordig anders. niet iedereen heeft vensters full screen staan en mobiele apparaten verschillen nog meer onderling.
IE7 en hoger iig niet meer.quote:
[..]
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).
daarom moet je een website niet door een amateur laten maken. Sinds wanneer is er iets mis met na moeten denkenquote:
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.
text-align:right; in het #contentmenu erbij zetten werkt niet...wat doe ik fout?
HTML
| 1 2 3 4 5 6 7 8 | <div id="contentmenu"> <ul> <li><a href="index.php?p=ontstaan">ONTSTAAN</a></li> <li><a href="index.php?p=nieuws">NIEUWS</a></li> <li><a href="index.php?p=agenda">AGENDA</a></li> <li><a href="index.php?p=gastenboek">GASTENBOEK</a></li> </ul> </div> |
CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #contentmenu ul li { padding:0px; list-style-type: none; } #contentmenu { display:block; position: absolute; left:500px; top:300px; } #contentmenu a { border: 0px; line-height:16px; text-decoration: none; color: #000; font-weight:bold; letter-spacing:-0.5px; } |
werkt ook niet directquote:Op zaterdag 25 augustus 2012 11:52 schreef Tijn het volgende:
Ik denk dat je de links eerst als block moet laten weergeven.
nu zit contentmenu in menu...en ik zie in firebug dat contentmenu een float:left mee krijgt, als ik die uitzet dan lijnt ie wel rechts uit
maar nu weet ik eigenlijk niet hoe ik dat nu in css moet vertellen dat ie die float in het contentmenu niet mee krijgt
thanx...soms is het te simpelquote:
Als ik bijvoorbeeld deze functie heb:
| 1 2 3 | $('.hover_items').projectHover({ color: '#222222' }); |
Is er dan een manier om deze te laten stoppen bij een bepaalde callback?
Op deze site heeft het menu (bovenste gedeelte) bepaalde eigenschappen in de CSS-file staan. Ik heb ontdekt dat dat navr heet (als ik het goed heb), maar ik zie ook nav1, nav-left, nav-right enz staan.
Nu heb ik een submenu eronder gezet, maar deze heeft nog niet de eigenschappen van het zojuist genoemde menu.
Hoe kan ik het submenu dezelfde eigenschappen (zoals achtergrond) geven als het menu er vlak boven zodat ik daarna kan stoeien hoe ik die code kan aanpassen zodat het onderste menu (dat ik submenu noem) qua kleuren mooi bijpassend kan maken?
Hoe kan ik het submenu iets naar rechts op laten schuiven zodat het pas onder Home begint?
Mijn dank is groot voor iedereen die even meedenkt! Mocht je een suggestie hebben hoe het mooier kan, is dat natuurlijk ook goed!
[ Bericht 4% gewijzigd door -J-D- op 26-08-2012 19:58:28 ]
@Neraice
Wat is dat voor functie projectHover?
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Pfff, ik ben echt een beginner. Dat gaat me een berg tijd kosten, want ik weet nog niet precies waar ik moet beginnen.quote:
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Bedankt voor de tips iig.
ik moet echt kotsen van zulke sites. Ik browse wel eens op 1920 pixels breedte en als je dan een textblock van 1400pixels voor je krijgt dan ben ik weg, want dat is onleesbaar.quote:
[..]
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).
[..]
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.
Vanuit usability-oogpunt is dat juist de meest optimale situatie: geef de gebruiker de controle over hoeveel tekst deze op 1 regel wilt hebben.
Daarnaast: als iedere website 100% is en zich aan de richtlijnen voor fontgroottes houdt, hoef je je browservenster echt niet voor íedere website te schalen, maar slechts 1x. Op een grootte die de gebruiker het beste vindt.
Er is letterlijk niemand die het prettig vindt om tekstregels van 1500px te lezen. Dat je als gebruiker enige invloed hebt op hoe de content wordt weergegeven is natuurlijk mooi, maar je moet geen situatie kunnen creëren die alleen maar hinderlijk is.quote:
Daarvoor kan je je browservenster kleiner maken...
Vanuit usability-oogpunt is dat juist de meest optimale situatie: geef de gebruiker de controle over hoeveel tekst deze op 1 regel wilt hebben.
Je geeft mensen de vrijheid om de website zo te lezen hoe ze het zelf het liefst willen.
Scriptje voor een speciaal hover-effect.quote:
Nieuwe versie van Twitter Bootstrap is best netjes. Wat vinden jullie?
@Neraice
Wat is dat voor functie projectHover?
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Het gaat mij erom hoe ik zo'n jQuery plugin cancel na 'm gecalled te hebben. Enig idee?
Als je zoomt, wordt de breedte ook breder. Ik denk echt niet dat je iemand een plezier doet door tekstregels van meer dan 1000 pixels aan te bieden.quote:
Denk hierbij ook aan mensen die de font-instellingen van hun OS groter hebben ingesteld, waardoor de tekst bij een 1000px-website standaard buiten de containers zou gaan lopen, of de hele lay-out verneukt. Of mensen (zoals ik), die standaard inzoomen op een website, omdat 99% van de websites een te klein font heeft. Of mensen die het gewoon prettig vinden om veel tekst naast elkaar te hebben.
Je geeft mensen de vrijheid om de website zo te lezen hoe ze het zelf het liefst willen.
Nu staat er qua css voor de button:
| 1 2 3 4 5 | #container-bottom #classic-pagination #next-page{ background: url(http://i387.photobucket.com/albums/oo315/Maartel/newer1.png) no-repeat top left; width:231px; height:81px; } |
Nu zou ik denken dat een vergelijkbare code plaatsen maar dan met a:hover toevoeging het 'm zou moeten doen, maar dat werkt niet.. waar ga ik de fout in?
Gebruik gewoon het id, of de drie id's als je alle drie die elementen een hover wilt geven.
Ik vermoedde al dat het hier anders zit omdat het een # element is.quote:
Een button is geen <a> element.
Gebruik gewoon het id, of de drie id's als je alle drie die elementen een hover wilt geven.
In de html staat alleen dit:
| 1 | {block:NextPage} <a href="{NextPage}" id="next-page">Next Page</a>{/block:NextPage} |
Bedoel je nu dat ik een nieuw id aan zou moeten maken en dan in de html dat id toevoegen als reactie op het hooveren?
(Ik besef dat ik nu enorm clueless overkom.. de basis heb ik inmiddels aardig onder de knie, maar zodra er met id's geslingerd wordt ben ik 'm helemaal kwijt
)
Ben er nu op mijn werk een beetje mee bezig ja.quote:
Iemand ervaringen met XmlHttpRequests?
Als het niet werkt even met de development tools (F12) kijken waarom je CSS regel niet toegepast wordt.quote:
Hmm, dat is wel wat ik geprobeerd had, maar ik zal nog maar een poging doen dan
Enigzins een idee waarin XmlHttpRequests verschillen in Firefox ten opzichte van elke andere browser? Want wat ik ook doe, ik krijg om een of andere reden via Ajaxform (plugin om bestanden asynchroon te uploaden). Elke keer een error. Met na wat onderzoek heb ik boven water getoverd dat er niks gebeurd. ( 0 ready state alles op 0 wat betekende dat er niks gestart is) Het idee was dat er een laadscherm bijgehouden werd hoeveel bytes er geupload werd. In elke browser werkt dit behalve Firefox. Terwijl volgens de XmlhttpRequest support tabel daar juist veel "support" voor is. (Ik gebruik zelf Firefox 14.0).quote:
[..]
Ben er nu op mijn werk een beetje mee bezig ja.
Bron: https://www.clickenweb.nl/bestel&id=2079&aantal=25&prijs=1 (vervolgens in File upload) gedeelte. Ik snap niet wat ik er fout doe.
ik zit nu op open(); gedeelte te googlen* iets zegt me dat het in die richting zit
.[ Bericht 4% gewijzigd door cablegunmaster op 30-08-2012 22:07:39 ]
excuus, dan heb je weer een profiel nodigquote:
Doe eens een linkje naar een demo/voorbeeld? Die link die je noemt zie ik geen file upload.
. probeer user: banaan ww: banaan.
Fx 14.0.1 op Ubuntuquote:Bestand: stuiterbal.JPG Grootte: 81.13 KiB Succesvol geupload!
Ik doe alleen maar $.getJSON() joh
Probeer nu eens iets van 3 - 4 Mb. Dan gaat het fout .quote:
[..]
Fx 14.0.1 op Ubuntu
Ik doe alleen maar $.getJSON() joh
Ik begrijp het maar half waarom het fout gaat.
quote:Bestand: cmsmadesimple-1.10.3-full.tar.gz is afgewezen vanwege de bestands extensie.
Dat doen we even nietquote:
upload 4 mb PDF file als voorbeeldquote:
.Object { readyState=0
, status=0
, statusText="error"
}
Krijg ik de hele tijd terug als ik zoiets probeer.
probeer het anders eens in safe-mode ofzo...quote:Bestand: takeaction.pdf Grootte: 3.24 MiB Succesvol geupload!
Goed puntquote:
[..]
probeer het anders eens in safe-mode ofzo...
, maar raar genoeg wil ik snappen waarom dit gebeurt. Wat ik snap dusverre is dat het script open(); niet aanroept en dat heeft met iets met security in firefox te maken.quote:
Dat begint met achterhalen hoe het komt.
Iets met same origin policy.Wat ik wel snap is dat ik verzoekheaders bij de errors terug vind maar geen antwoord headers.
Ik ga dit eens uit testen
. Blijkbaar iemand gevonden met het zelfde probleem 
[ Bericht 7% gewijzigd door cablegunmaster op 30-08-2012 22:51:02 ]
Op mijn website loopt een twitterfeed en ik heb deze als widget rechts ingesteld: nu zie ik helaas dat er een raar foutje in de kleuren zit:
Het is de widget: Tweetblender.SPOILER
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<br>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: 'sr12',
interval: 30000,
title: 'Serious Request 2012',
subject: 'Twitterfeed #sr12',
width: 180,
height: 470,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
</script>
Ziet iemand van jullie de fout?
Jep , zelf gebruik ik voor dit soort fouten Firebug op Firefox dan kun je het element selecteren dat de foute kleur heeft of uit testen wat voor margin het heeft.quote:
Een vraagje
Op mijn website loopt een twitterfeed en ik heb deze als widget rechts ingesteld: nu zie ik helaas dat er een raar foutje in de kleuren zit:
[ afbeelding ]Het is de widget: Tweetblender.SPOILER[ code verwijderd ]
Ziet iemand van jullie de fout?
| 1 2 3 4 5 6 7 8 | .sidebar h3 { background: -moz-linear-gradient(#3C9CD2, #1F6EB6) repeat scroll 0 0 transparent; border-bottom: 1px solid #195392; border-radius: 5px 5px 0 0; margin: -15px 0 5px -12px; padding: 7px 12px; width: 100%; } |
Dit zorgt voor de gare achtergrond voornamelijk omdat het een H3 tag is binnen je .sidebar class.
Wat je het beste kan doen is de H3 tag niet voor de achtergrond gebruiken die nu staat ingesteld.
maar een
| 1 | <div class='subheader'><h3>Volg Glazenhuis3FM op Twitter!</h3></div> |
Dit in je CSS zetten daarnaast ipv de bovenstaande CSS. (naam verandering)
| 1 2 3 4 5 6 7 8 | .subheader { background: -moz-linear-gradient(#3C9CD2, #1F6EB6) repeat scroll 0 0 transparent; border-bottom: 1px solid #195392; border-radius: 5px 5px 0 0; margin: -15px 0 5px -12px; padding: 7px 12px; width: 100%; } |
Daarnaast op : http://www.glazenhuis3fm.nl/videos/ loopt je video's onder je twitter feed door.
[ Bericht 27% gewijzigd door cablegunmaster op 31-08-2012 02:29:52 ]
.Thanks alleen al die naamswijziging naar subheader heeft al geholpen om het blauwe weg te krijgen. Alleen de opmaak van de kopjes terugkrijgen nog niet.quote:
[..]
Jep , zelf gebruik ik voor dit soort fouten Firebug op Firefox dan kun je het element selecteren dat de foute kleur heeft of uit testen wat voor margin het heeft.
[ code verwijderd ]
Dit zorgt voor de gare achtergrond voornamelijk omdat het een H3 tag is binnen je .sidebar class.
Wat je het beste kan doen is de H3 tag niet voor de achtergrond gebruiken die nu staat ingesteld.
maar een
[ code verwijderd ]
En dit bij elke blauwe kop ombouwen.
Dit in je CSS zetten daarnaast ipv de bovenstaande CSS. (naam verandering)
[ code verwijderd ]
Daarnaast op : http://www.glazenhuis3fm.nl/videos/ loopt je video's onder je twitter feed door.
Waar moet ik:
| 1 | <div class='subheader'><h3>Volg Glazenhuis3FM op Twitter!</h3></div> |
Draai je wordpress?quote:
[..]
Thanks alleen al die naamswijziging naar subheader heeft al geholpen om het blauwe weg te krijgen. Alleen de opmaak van de kopjes terugkrijgen nog niet.
Waar moet ik:
[ code verwijderd ]
En die voor elke andere Widget titel plaatsen? Aangezien het allemaal widgets zijn durf ik niet te zeggen waar ik dit het beste kan plaatsen.
Heel de browser opnieuw geinstalleerd en alle andere ook , nog steeds de error bij grotere bestanden.quote:
een nieuw profiel instellen (of safe-mode gebruiken) lost vaak meer op...
Ja het is wordpress met de theme Graphenequote:
Nou dan weet je waar je moet zijn! binnen je Theme aanpassenquote:
[..]
Ja het is wordpress met de theme Graphene
Dat is kwestie van de map Theme vinden en uiteindelijk de headers opzoeken. Daarnaast, je video's "youtube" 550 width zijn te breed! net als je feed van je Webcam van het glazen huis fix dat ook eens . naar 500 ipv 550!Mocht dit niet zo blijken kunje altijd terug gaan naar wat je eerst had en je plugin zelf aanpassen door te zoeken waar dat stukje van de header staat. en ipv H3 er H4 van maken. (genoeg mogelijkheden).
De hovers op images werken prima, maar hoewel ik volgens mij gewoon netjes volgens de regel werk met 'div:hover naam{eigenschappen}" wordt zodra ik dit toepas zo'n beetje de hele pagina een grote hoversectie, zodra ik met mijn muis al een beetje beweeg wordt het effect toegepast terwijl de DIV zelf echt niet zo groot is. Ik heb alles al geisoleerd tot een heel basic design waarin verder niks gaande is. Waar kan dit aan liggen?
Momenteel is de css
| 1 2 3 4 5 6 7 8 9 10 | .shadpic{ border-radius:0px; box-shadow: 0px 0px 2.5px 0px #000000; behavior: url(/PIE.htc)} div:hover .shadpic { border-radius:0px; box-shadow: 0px 0px 2px 2px #ffffff; behavior: url(/PIE.htc)} |
En de html <div class="shadpic">inhoud div</div>
[ Bericht 78% gewijzigd door Maartel op 01-09-2012 15:19:00 ]
Ik heb onderstaande tabel gemaakt, maar Internet Explorer wil niet meewerken. Iemand enig idee hoe ik dit kan oplossen? Of iemand die een mooi alternatief weet?
Code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <h2 class="content"><span class="white"> Team </span></h2> <table summary="table summary" class="content"> <tr> <td colspan="3"> </td> </tr> <tr> <td width="25px"></td> <td> <!-- content here --> </td> <td width="25px"></td> </tr> <tr> <td height="20px"></td> <td></td> <td></td> </tr> </table> |
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* =Content -------------------------------------------------------------- */ table.content { width: 700px; border-collapse: collapse; border: 1px solid #000000; font-family: Arial, Verdana, sans-serif; font-size: 13px; } h2.content { width: 200px; margin-left: 50px; margin-bottom: -.5em; font-family: Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; } .white { background: #FFFFFF; } |
Alvast bedankt voor jullie hulp!
Het ziet er nu precies uit zoals een fieldset en een legend standaard worden gerenderd. Dat impliceert inderdaad wel een formulier, maar misschien komt er ook wel een formulier in?
Ik heb het zojuist ook al geprobeerd om het met een plaatje op te lossen, ipv platte tekst als titel, maar ook daar gaat de tabel in Internet Explorer keihard doorheen
.En wat maakt het uit hoe ik mijn classes noem...?
en je moet idd zelf weten watvoor classnames je gebruikt, maar voor je eigen gemak is het wel handig om ze een beetje semantisch te houden...
.Bedankt voor de reacties!
Aangezien je er nu ook mee zit, waarom niet gewoon even met een div en een header? Zo moeilijk is het niet.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <style> body { font-family: sans-serif; } h1 { font-size: 150%; } .fieldset { border: 1px black solid; padding: 1em; position: relative; } .fieldset > h2 { background-color: #fff; font-size: 100%; padding: 0 5px 5px 0; position: absolute; top: -1.4em; } </style> </head> <body> <h1>Voorbeeld van een fieldset-achtige layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Ok, komt 'ie:</p> <div class="fieldset"> <h2>Titel van dit blokje</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <p>Dat was het.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html> |
Bekijk hier een voorbeeld.
Ik denk dat dit werkt in alle browsers (kheb IE7 hier niet paraat, maar IE8 in elk geval wel en IE9 ook).
.quote:Op dinsdag 4 september 2012 16:56 schreef picodealion het volgende:
Mag ik even huilen? Een kennis wilde graag dat ik een site maakte, maar aangezien ik niet kan ontwerpen heeft zij zelf een ontwerpster gevonden. Ik heb zojuist van diegene niet alleen een ontwerp maar zelfs een complete site aangeleverd gekregen. Het is gemaakt door deze dame. http://www.dingen-drama.nl/kijkopdewebsite/
Laat eens zienquote:
Mag ik even huilen? Een kennis wilde graag dat ik een site maakte, maar aangezien ik niet kan ontwerpen heeft zij zelf een ontwerpster gevonden. Ik heb zojuist van diegene niet alleen een ontwerp maar zelfs een complete site aangeleverd gekregen. Het is gemaakt door deze dame. http://www.dingen-drama.nl/kijkopdewebsite/
'Websites voor kunstenaars', dan weet je het al
Kun jij dan niemand regelen met wél een fatsoenlijk ontwerp?quote:
Mag ik even huilen? Een kennis wilde graag dat ik een site maakte, maar aangezien ik niet kan ontwerpen heeft zij zelf een ontwerpster gevonden. Ik heb zojuist van diegene niet alleen een ontwerp maar zelfs een complete site aangeleverd gekregen. Het is gemaakt door deze dame. http://www.dingen-drama.nl/kijkopdewebsite/
ZHE HORROR.
quote:
Mag ik even huilen? Een kennis wilde graag dat ik een site maakte, maar aangezien ik niet kan ontwerpen heeft zij zelf een ontwerpster gevonden. Ik heb zojuist van diegene niet alleen een ontwerp maar zelfs een complete site aangeleverd gekregen. Het is gemaakt door deze dame. http://www.dingen-drama.nl/kijkopdewebsite/
quote:
Mag ik even huilen? Een kennis wilde graag dat ik een site maakte, maar aangezien ik niet kan ontwerpen heeft zij zelf een ontwerpster gevonden. Ik heb zojuist van diegene niet alleen een ontwerp maar zelfs een complete site aangeleverd gekregen. Het is gemaakt door deze dame. http://www.dingen-drama.nl/kijkopdewebsite/
download dan alsjeblieft gewoon een gratis wordpress-template.http://i.imgur.com/0vRVC.pngquote:
[..]
Laat eens zien
'Websites voor kunstenaars', dan weet je het al
Het is toch een stuk lastiger dan ik had gedacht.
Iemand hier al ervaring mee en die wat tips/hints heeft.
Het viel me mee inderdaad. De HTML bestaat uit geneste font tags, maar het ontwerp is in elk geval nog bij te schaven. Maar alleen al het portfolio van die damen deed me huilen en lachen tegelijk.quote:
hmm daar valt toch wel wat van te maken? Niet bepaald uitdagend of verfrissend maargoed als de klant er tevreden mee is...
Wat precies vind je lastig?quote:
Ik ben nu bezig met het maken van een eigen Word Press theme, deze ben ik om de lege Starkers theme heen aan het bouwen.
Het is toch een stuk lastiger dan ik had gedacht.
Iemand hier al ervaring mee en die wat tips/hints heeft.
Als je het wegflikkert en opnieuw begint ja.quote:
hmm daar valt toch wel wat van te maken?
Jij bent vormgever van beroep, nietwaar? Zo'n site als dat, simpel ontwerp maar dan wel goed. Wat mag dat kosten tegenwoordig?quote:Op woensdag 5 september 2012 13:39 schreef nietzman het volgende:
[..]
Als je het wegflikkert en opnieuw begint ja.
Ik zie liever een website met zo'n ontwerp en fatsoenlijke programmatuur erachter, dan een hip design wat is gebouwd met bulky en onsemantische spaghetticode.quote:
[..]
Als je het wegflikkert en opnieuw begint ja.
Sja ik ook, maar uiteindelijk ontwerp je toch voor de gemiddelde facebook-gebruiker.quote:
[..]
Ik zie liever een website met zo'n ontwerp en fatsoenlijke programmatuur erachter, dan een hip design wat is gebouwd met bulky en onsemantische spaghetticode.
Mja die code kun je allemaal wegtyfen. Deze layout nabouwen from scratch is hooguit een paar uurtjes werk voor iemand met jouw ervaring.quote:
[..]
Het viel me mee inderdaad. De HTML bestaat uit geneste font tags, maar het ontwerp is in elk geval nog bij te schaven. Maar alleen al het portfolio van die damen deed me huilen en lachen tegelijk.
Ik ontwerp niet veel hoorquote:
[..]
Sja ik ook, maar uiteindelijk ontwerp je toch voor de gemiddelde facebook-gebruiker.
Bouw een site inderdaad niet voor je gebruiker, stel je voor.quote:
Ik zie liever een website met zo'n ontwerp en fatsoenlijke programmatuur erachter, dan een hip design wat is gebouwd met bulky en onsemantische spaghetticode.
Voor zover mijn blik er op rijkt hou ik van nette code hoor, begrijp me niet verkeerd, maar ik snap niet hoe je code die alleen jij als developer zelf ziet in Hemelsnaam boven je gebruiker kunt zetten.
Inderdaad, 't valt uiteindelijk reuze mee. Maar ik heb wel gezegd dat ze voortaan maar gewoon een echte designer moet zoekenquote:
[..]
Mja die code kun je allemaal wegtyfen. Deze layout nabouwen from scratch is hooguit een paar uurtjes werk voor iemand met jouw ervaring.
.Hangt er vanaf, zou daar zelf ws niet meer dan een paar honderd euro voor durven vragen, maar op m'n werk brief ik de studio daar nog niet voor.quote:Op woensdag 5 september 2012 13:40 schreef picodealion het volgende:
Jij bent vormgever van beroep, nietwaar? Zo'n site als dat, simpel ontwerp maar dan wel goed. Wat mag dat kosten tegenwoordig?
.Ik denk dat ik juist voor de gebruiker bouw als ik snelle en semantisch correcte code aflever. Het gaat er wat mij betreft om dat een bezoeker zo snel mogelijk kan vinden wat 'ie zoekt. Dat garandeer je in eerste instantie met een logische indeling van de content en daarna is de kwaliteit van de code een belangrijk aspect. Pas als dat in orde is, doet het ertoe of het er ook aantrekkelijk uitziet wat mij betreft.quote:
[..]
Bouw een site inderdaad niet voor je gebruiker, stel je voor.
Voor zover mijn blik er op rijkt hou ik van nette code hoor, begrijp me niet verkeerd, maar ik snap niet hoe je code die alleen jij als developer zelf ziet in Hemelsnaam boven je gebruiker kunt zetten.
Kwaliteit van code zegt absoluut niets over het al dan niet gebruiksvriendelijk zijn van een site.quote:Op woensdag 5 september 2012 14:22 schreef Tijn het volgende:
[..]
Ik denk dat ik juist voor de gebruiker bouw als ik snelle en semantisch correcte code aflever. Het gaat er wat mij betreft om dat een bezoeker zo snel mogelijk kan vinden wat 'ie zoekt. Dat garandeer je in eerste instantie met een logische indeling van de content en daarna is de kwaliteit van de code een belangrijk aspect. Pas als dat in orde is, doet het ertoe of het er ook aantrekkelijk uitziet wat mij betreft.
Nee, daarom zeg ik dat het allerbelangrijkste is dat de indeling van de content logisch is. Als dat niet zo is, maakt de rest ook niet uit, dan wordt het nooit wat.quote:
[..]
Kwaliteit van code zegt absoluut niets over het al dan niet gebruiksvriendelijk zijn van een site.
Maar nog minder dan de kwaliteit van de code maakt wat mij betreft uit hoe het eruit ziet, als het maar boven een bepaalde ondergrens zit waardoor de site überhaupt leesbaar is natuurlijk.
quote:
[..]
Nee, daarom zeg ik dat het allerbelangrijkste is dat de indeling van de content logisch is. Als dat niet zo is, maakt de rest ook niet uit, dan wordt het nooit wat.
Maar nog minder dan de kwaliteit van de code maakt wat mij betreft uit hoe het eruit ziet, als het maar boven een bepaalde ondergrens zit waardoor de site überhaupt leesbaar is natuurlijk.
Je spreekt jezelf nu tegenquote:
[..]
Ik denk dat ik juist voor de gebruiker bouw als ik snelle en semantisch correcte code aflever. Het gaat er wat mij betreft om dat een bezoeker zo snel mogelijk kan vinden wat 'ie zoekt. Dat garandeer je in eerste instantie met een logische indeling van de content en daarna is de kwaliteit van de code een belangrijk aspect. Pas als dat in orde is, doet het ertoe of het er ook aantrekkelijk uitziet wat mij betreft.
UX dus, het belangrijkste deel van het ontwerpproces. Niet van het codeproces.quote:
Nee, daarom zeg ik dat het allerbelangrijkste is dat de indeling van de content logisch is. Als dat niet zo is, maakt de rest ook niet uit, dan wordt het nooit wat.
Nouja, de kwaliteit van je code is iets wat überhaupt niemand gaat zien.quote:
Maar nog minder dan de kwaliteit van de code maakt wat mij betreft uit hoe het eruit ziet, als het maar boven een bepaalde ondergrens zit waardoor de site überhaupt leesbaar is natuurlijk.
Nee, helemaal niet. Het stuk tussen de twee zinnen die je nu hebt vetgemaakt is het allerbelangrijkste, dat zeg ik.quote:
Eerst is het belangrijk dat het goed is bedacht. Daarna is het belangrijk dat het goed is gemaakt. Tot slot is het belangrijk dat het er goed uit ziet. Logisch toch?
Ik denk dat mensen het verschil wel ervaren tussen een website die slecht is gebouwd en eentje die goed is gebouwd, ook als ze er verder precies hetzelfde uitzien.quote:
[..]
Nouja, de kwaliteit van je code is iets wat überhaupt niemand gaat zien.
Op welke manier bedoel je? Bugs?quote:
[..]
Ik denk dat mensen het verschil wel ervaren tussen een website die slecht is gebouwd en eentje die goed is gebouwd, ook als ze er verder precies hetzelfde uitzien.
Nee, in dingen als laadtijden, vindbaarheid van content met zoekmachines, cross browser/device compatibility, toegankelijkheid.quote:
[..]
Op welke manier bedoel je? Bugs?
Ik zie niet helemaal in hoe je die dingen kan linken aan de mate van kwaliteit van code.quote:
[..]
Nee, in dingen als laadtijden, vindbaarheid van content met zoekmachines, cross browser/device compatiblity, toegankelijkheid.
Op de laadtijden na zijn al die dingen niet mogelijk met bulky en onsemantische spaghetticode?quote:
Nee, in dingen als laadtijden, vindbaarheid van content met zoekmachines, cross browser/device compatibility, toegankelijkheid.
Goede code geeft geen garantie op snellere rendering of betere doorzoekbaarheid van content.quote:Op woensdag 5 september 2012 14:51 schreef Catch22- het volgende:
Goede code rendert sneller, maakt content beter doorzoekbaar etc
Klopt, maar dat maakt dit niet minder waar:quote:
[..]
Goede code geeft geen garantie op snellere rendering of betere doorzoekbaarheid van content.
quote:
Goede code rendert sneller, maakt content beter doorzoekbaar etc
Onmogelijk natuurlijk niet, maar wel moeilijker en dus duurder.quote:
[..]
Op de laadtijden na zijn al die dingen niet mogelijk met bulky en onsemantische spaghetticode?
Precies. Een site die goed is gebouwd is prettiger in het gebruik, ook als 'ie lelijk is. Dat is imho beter dan een mooie site die slecht is gebouwd.quote:
Goede code rendert sneller, maakt content beter doorzoekbaar etc
Als goede code niet beter werkt dan slechte code, dan is die goede code niet heel goed of die slechte code niet heel slechtquote:
[..]
Goede code geeft geen garantie op snellere rendering of betere doorzoekbaarheid van content.
dan is jouw definitie van goede code anders dan de mijne.quote:
[..]
Goede code geeft geen garantie op snellere rendering of betere doorzoekbaarheid van content.
Ach, ik heb ze hier ook wel eens vieze hacks zien gebruiken om maar te voorkomen dat ze buitensporig veel meer tijd kwijt waren om het echt netjes te doen.quote:
Onmogelijk natuurlijk niet, maar wel moeilijker en dus duurder.
Dat ligt dus inderdaad aan de definitie 'slechte' of 'goede' code. Maar ik pas wel op met garanties geven omtrend rendering, doorzoekbaarheid van content of toegankelijkheid van de website an sich met mijn code.quote:
[..]
Als goede code niet beter werkt dan slechte code, dan is die goede code niet heel goed of die slechte code niet heel slecht
Stel dat ik een tering-trage productie omgeving heb waarop een query minimaal 5 seconden duurt, dan kan ik goede code schrijven wat ik wil aan de voorkant, 'snel' content zoeken gaat dan niet, buiten mijn schuld om. Door schade en schande wijs geworden op dat vlak overigens, want die manager staat wel bij jou aan je bureautje omdat jij hem de garantie gaf dat het goed ging werken.
Dat kan natuurlijk een keertje gebeuren. Maar als je dat te vaak doet, ga je geheid de deksel later een keer op de neus krijgen. Als je geen tijd hebt om het goed te doen, waar haal je dan de tijd vandaan om het later te repareren?quote:
[..]
Ach, ik heb ze hier ook wel eens vieze hacks zien gebruiken om maar te voorkomen dat ze buitensporig veel meer tijd kwijt waren om het echt netjes te doen.
Dat zal het dan wel zijn jaquote:
[..]
dan is jouw definitie van goede code anders dan de mijne.
Zat. Waar loop je tegenaan?quote:
Niemand hier die wel eens een eigen Wordpress theme gemaakt heeft?
Tsja, dat klinkt een beetje als broken window syndrome. Omdat de backend kut is, is dat nog geen reden om ook maar met de pet te gooien naar de frontend, toch?quote:
[..]
Dat ligt dus inderdaad aan de definitie 'slechte' of 'goede' code. Maar ik pas wel op met garanties geven omtrend rendering, doorzoekbaarheid van content of toegankelijkheid van de website an sich met mijn code.
Stel dat ik een tering-trage productie omgeving heb waarop een query minimaal 5 seconden duurt, dan kan ik goede code schrijven wat ik wil aan de voorkant, 'snel' content zoeken gaat dan niet, buiten mijn schuld om. Door schade en schande wijs geworden op dat vlak overigens, want die manager staat wel bij jou aan je bureautje omdat jij hem de garantie gaf dat het goed ging werken.
Maar goed, met managers heb ik verder niks te maken, dus ik heb ook wel makkelijk praten. En als ik te maken heb met een trage server, dan kan ik in 9 van de 10 gevallen gewoon een andere regelen die sneller is of in elk geval duidelijk aan de klant maken dat dat buiten mijn verantwoordelijkheid ligt, dus dat 'ie maar iets anders moet regelen als 'ie een snellere webapplicatie wil.
Dat zeg ik toch ook niet? Ik zeg dat ik verder kijk dan mijn eigen domein als het gaat om garanties afgeven die ik niet kan waarborgen omdat er dingen buiten mijn invloedsfeer zijn. Ik doe geen enkele uitspraak over de code en de kwaliteit die ik oplever.quote:
[..]
Tsja, dat klinkt een beetje als broken window syndrome. Omdat de backend kut is, is dat nog geen reden om ook maar met de pet te gooien naar de frontend, toch?
Daar verschillen we dan inderdaad in. Ik heb iets meer te maken met verschillende afdelingen, structuren en verantwoordelijkheden waar ik weinig tot geen invloed op heb.quote:Maar goed, met managers heb ik verder niks te maken, dus ik heb ook wel makkelijk praten. En als ik te maken heb met een trage server, dan kan ik in 9 van de 10 gevallen gewoon een andere regelen die sneller is of in elk geval duidelijk aan de klant maken dat dat buiten mijn verantwoordelijkheid ligt, dus dat 'ie maar iets anders moet regelen als 'ie een snellere webapplicatie wil.
Maar afgezien van dat alles, jij denkt niet dat slechte front-end code een negatief effect op de gebruikerservaring heeft?quote:
[..]
Dat zeg ik toch ook niet? Ik zeg dat ik verder kijk dan mijn eigen domein als het gaat om garanties afgeven die ik niet kan waarborgen omdat er dingen buiten mijn invloedsfeer zijn. Ik doe geen enkele uitspraak over de code en de kwaliteit die ik oplever.
[..]
Daar verschillen we dan inderdaad in. Ik heb iets meer te maken met verschillende afdelingen, structuren en verantwoordelijkheden waar ik weinig tot geen invloed op heb.
Dat is waarschijnlijk wel het gevolg ja, maar het hoeft niet. Er zijn zat voorbeelden te vinden waar je met slecht geprogrammeerde websites een tig duizend bezoekers per dag afhandelt.quote:
[..]
Maar afgezien van dat alles, jij denkt niet dat slechte front-end code een negatief effect op de gebruikerservaring heeft?
Designers zijn gewoon homofiele hipsters en programmeurs zijn autistische nerds.quote:
jamaar jongens, uiteindelijk draait het toch alleen maar om de content? Layout en code zijn way ondergeschikt aan de inhoud van een site.
[ afbeelding ]
En wat als je beide doet?quote:Op woensdag 5 september 2012 15:13 schreef Scorpie het volgende:
[..]
Designers zijn gewoon homofiele hipsters en programmeurs zijn autistische nerds.
Dan hou je van gesandwiched worden.quote:
Dan ben je een genetische dwaling.quote:
Dan ben je een autistische homo.quote:
Een lelijke site is nog geen slechte site en een mooie site is zeker geen goede site.Of een goede designer die goed is met usability.
Development is een vak apart en het bijna per definitie zo dat een goede designer niet goed kan developen.
Misschien in oposite-world waarin het niet om het plaatje gaat.quote:
Hoe dan ook, design is overgewaardeerd
Dat je tig duizend bezoekers afhandelt wil niet zeggen dat het niet beter kan. Dit is gewoon een drogreden.quote:
[..]
Dat is waarschijnlijk wel het gevolg ja, maar het hoeft niet. Er zijn zat voorbeelden te vinden waar je met slecht geprogrammeerde websites een tig duizend bezoekers per dag afhandelt.
Eensch.quote:
jamaar jongens, uiteindelijk draait het toch alleen maar om de content? Layout en code zijn way ondergeschikt aan de inhoud van een site.
[ afbeelding ]
Front-end.quote:
Hebben we het over front- of backendcode?
Eensch.quote:
Hoe dan ook, design is overgewaardeerd
Niet vaak nee. Ik kende wel een goede designer die ook nog eens goed in html/css was, maar ze zijn zeldzaam.quote:
Ik heb nog nooit een goede designer gezien die goed kan developen of andersom.
Of een goede designer die goed is met usability.
Development is een vak apart en het bijna per definitie zo dat een goede designer niet goed kan developen.
Het gaat bijna niemand uiteindelijk om het plaatje. Het plaatje is alleen belangrijk om iets te verkopen. Als je moet kiezen tussen twee dingen, kies je de mooiste.quote:
[..]
Misschien in oposite-world waarin het niet om het plaatje gaat.
Maar als je ergens elke dag mee moet werken, kweek je vanzelf een voorkeur voor iets wat beter werkt, zelfs als het lelijker is. Niet dat dat een vrijbrief is om lelijke dingen te maken, maar dat iets er goed uitziet is geen garantie tot succes.
en JS?quote:
[..]
Dat je tig duizend bezoekers afhandelt wil niet zeggen dat het niet beter kan. Dit is gewoon een drogreden.
[..]
Eensch.
[..]
Front-end.
[..]
Eensch.
[..]
Niet vaak nee. Ik kende wel een goede designer die ook nog eens goed in html/css was, maar ze zijn zeldzaam.
Tja hoe meer je de taken verdeelt onder gespecialiseerde mensen hoe beter, maar dat betekent niet dat je goed kan zijn in meerdere dingen, maar je ziet het niet vaak dat mensen zich evenveel specialiseren in meerdere richtingen.quote:
Ik heb nog nooit een goede designer gezien die goed kan developen of andersom.
Of een goede designer die goed is met usability.
Development is een vak apart en het bijna per definitie zo dat een goede designer niet goed kan developen.
Ik vind wel dat je als webdesigner enige kennis van front-end en het liefst ook back-end moet hebben zodat je weet waar je voor ontwerpt.
Erm, ja, maar het is m'n werk, niet m'n hobby. Het verkopen is een essentiële eerste stap voordat er ook maar een regel code geschreven is.quote:
Het gaat bijna niemand uiteindelijk om het plaatje. Het plaatje is alleen belangrijk om iets te verkopen. Als je moet kiezen tussen twee dingen, kies je de mooiste.
Zoiets heet een CSS Reset. Hier staan er een paar: http://www.cssreset.comquote:Op woensdag 5 september 2012 15:30 schreef DutchErrorist het volgende:
Ik moet even een simpele website voor iemand maken, is het dan handig om te beginnen met een CSS waarin alle waarden voor browsers worden gelijk gezet, en zoja waar kan ik die vinden?
Ik vind het zelf een beetje overdreven om *alle* CSS defaults weg te mikken, want veel dingen zijn gewoon handig en maak je in de praktijk weer precies zo na als ze stonden. Maar sommige elementen hebben wel irritant standaardgedrag in verschillende browsers wat je op zo'n manier makkelijk kunt uitsluiten.
Er zijn felle voorstanders en felle tegenstanders, echt een objectief "ja" of "nee" is er niet. Ik zou gewoon proberen of het je bevalt.
Als verkoper is een goed design ook hartstikke fijn. Maar we hebben het hier over het ontwikkelen van sites, niet het verkopen ervan.quote:
[..]
Erm, ja, maar het is m'n werk, niet m'n hobby. Het verkopen is een essentiële eerste stap voordat er ook maar een regel code geschreven is.
Dat weet ik niet.quote:
Ik ken ook maar weinig backenders die echt weten hoe JS werktquote:
Tja, wat ik zeg, zonder een koper ontwikkelen wij in ieder geval bijzonder weinig.quote:
Als verkoper is een goed design ook hartstikke fijn. Maar we hebben het hier over het ontwikkelen van sites, niet het verkopen ervan.
Het wil ook niet zeggen dat een slecht gecodeerde website per definitie ruk is, wat dus ook een drogreden is.quote:
[..]
Dat je tig duizend bezoekers afhandelt wil niet zeggen dat het niet beter kan. Dit is gewoon een drogreden.
hohoho!quote:
[..]
Zoiets heet een CSS Reset. Hier staan er een paar: http://www.cssreset.com
Ik vind het zelf een beetje overdreven om *alle* CSS defaults weg te mikken, want veel dingen zijn gewoon handig en maak je in de praktijk weer precies zo na als ze stonden. Maar sommige elementen hebben wel irritant standaardgedrag in verschillende browsers wat je op zo'n manier makkelijk kunt uitsluiten.
Er zijn felle voorstanders en felle tegenstanders, echt een objectief "ja" of "nee" is er niet. Ik zou gewoon proberen of het je bevalt.
tegenwoordig heb je normalize.css
http://necolas.github.com/normalize.css/
En over JS; er zijn helaas maar weinig mensen die dat goed beheersen. Gelukkig heb ik mezelf daar wel aardig in gespecialiseerd.
Normalizeeeeeeeeeeeee FTWquote:
[..]
hohoho!
tegenwoordig heb je normalize.css
http://necolas.github.com/normalize.css/
Ah, ook goed. Beter zelfsquote:
[..]
hohoho!
tegenwoordig heb je normalize.css
http://necolas.github.com/normalize.css/
Klopt. Maar de discussie begon om deze opmerking:quote:
[..]
Het wil ook niet zeggen dat een slecht gecodeerde website per definitie ruk is, wat dus ook een drogreden is.
Het hoeft dus niet per sé wat erover te zeggen, maar gebruiksvriendelijkheid kan zeker worden beinvloed door slechte code, en dat wordt het dan ook vaak.quote:
[..]
Kwaliteit van code zegt absoluut niets over het al dan niet gebruiksvriendelijk zijn van een site.
Lets agree to disagree op dat punt.quote:
[..]
Klopt. Maar de discussie begon om deze opmerking:
[..]
Het hoeft dus niet per sé wat erover te zeggen, maar gebruiksvriendelijkheid kan zeker worden beinvloed door slechte code, en dat wordt het dan ook vaak.
Hoe kan ik het beste beginnen. Heb mezelf laten vertellen dat dmv van de Starkers theme te downloaden, je hem daarom heen kan gaan bouwen (alle functies etc zijn al vermeld) en dit moet dan gewoon in de editor gedaan worden.quote:
Maar geen idee hoe ik het beste kan beginnen met programmeren. Een menu balk ed. dien ik deze zelf te programmeren in de CSS en dan de 'widget' weg laten, of hoe heb jij dit bijvoorbeeld opgelost.
* {quote:
[..]
hohoho!
tegenwoordig heb je normalize.css
http://necolas.github.com/normalize.css/
En over JS; er zijn helaas maar weinig mensen die dat goed beheersen. Gelukkig heb ik mezelf daar wel aardig in gespecialiseerd.
margin: 0;
padding: 0;
}
Normalize normaliseert de boel. Dus alle inspringingen gelijk zetten (bij ul's etc) en alle koppen dezelfde grootte maken etc.
Ik probeer deze ajax tabs aan te passen:
Demo: http://demo.tutorialzine.(...)y-ajax-css/demo.html
Tutorial: http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/
Ik wil alleen maar in contentHolder de derde tab openen. Dus bijvoorbeeld op page1.html een link naar page3.html maken
Ik ben best wel bekend met html, maar totaaaaal niet met jquery
Heb al in de link target= geprobeerd, en via deze link een extra script in de head van page1.html gezet:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
en dat werkt op zich, alleen kan ik dan niet meer de eerste pagina (page1.html) openen.
Al die linkjes gaan naar tutorials. Waar is je eigen werk?Heel simpel gezegd, ik wil eerst weten of ik wat hiermee kan, voordat ik er zelf heel veel tijd in ga steken.quote:
je wilt wát precies
Voorlopig lukt het mij prima om de stylesheet en alles aan te passen, maar van jquery weet ik (nog) te weinig.
Ik zal het even uittypen, misschien wordt het dan wat duidelijker:
(stuk van de htmlpagina)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="main"> <ul class="tabContainer"> <!-- The jQuery generated tabs go here --> </ul> <div class="clear"></div> <div id="tabContent"> <div id="contentHolder"> <!-- The AJAX fetched content goes here --> </div> </div> </div> |
en hier script.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ /* Defining an array with the tab text and AJAX pages: */ var Tabs = { 'Tab one' : 'pages/page1.html', 'Tab two' : 'pages/page2.html', 'Tab three' : 'pages/page3.html', 'Tab four' : 'pages/page4.html' } /* The available colors for the tabs: */ var colors = ['blue','green','red','orange']; /* The colors of the line above the tab when it is active: */ var topLineColor = { blue:'lightblue', green:'lightgreen', red:'red', orange:'orange' } /* Looping through the Tabs object: */ var z=0; $.each(Tabs,function(i,j){ /* Sequentially creating the tabs and assigning a color from the array: */ var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>'); /* Setting the page data for each hyperlink: */ tmp.find('a').data('page',j); /* Adding the tab to the UL container: */ $('ul.tabContainer').append(tmp); }) /* Caching the tabs into a variable for better performance: */ var the_tabs = $('.tab'); the_tabs.click(function(e){ /* "this" points to the clicked tab hyperlink: */ var element = $(this); /* If it is currently active, return false and exit: */ if(element.find('#overLine').length) return false; /* Detecting the color of the tab (it was added to the class attribute in the loop above): */ var bg = element.attr('class').replace('tab ',''); /* Removing the line: */ $('#overLine').remove(); /* Creating a new line with jQuery 1.4 by passing a second parameter: */ $('<div>',{ id:'overLine', css:{ display:'none', width:element.outerWidth()-2, background:topLineColor[bg] || 'white' }}).appendTo(element).fadeIn('slow'); /* Checking whether the AJAX fetched page has been cached: */ if(!element.data('cache')) { /* If no cache is present, show the gif preloader and run an AJAX request: */ $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />'); $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); /* After page was received, add it to the cache for the current hyperlink: */ element.data('cache',msg); }); } else $('#contentHolder').html(element.data('cache')); e.preventDefault(); }) /* Emulating a click on the first tab so that the content area is not empty: */ the_tabs.eq(0).click(); }); |
Op de voorpagina wordt page1.html geopend in div contentHolder
Ik wil dus op page1.html een link maken naar page3.html, zodat als men daarop klikt, deze geopend wordt in die contentHolder.
Is dit duidelijker? Het is voor mij ook een leerproces met jQuery
| 1 | $("a.linkToFirstTab").click(function() { $("#tab-3").click(); }); |
waarbij je de eventhandler aan de juiste tab linked en tab-3 vervangt door het id van het tab dat je wil openen
Bedankt voor jullie antwoorden
http://jqueryui.com/demos/tabs/
dat werkt als een trein.
Must-read als je wat met jQuery wil gaan doen, of doet, maar er niets van snapt
als ik een extra tab wil invoegen, is dat dan een webpagina die geintergreerd wordt in facebook?
en heb ook voorbeelden gezien (ben ze ff kwijt) die daadwerkelijk tabbladen maken
kan er alleen geen goede uitleg over vinden hoe dat werkt, heeft iemand een idee?
Daar geef je het antwoord al..quote:
Tabs aanmaken, is gewoon een link toevoegen naar een pagina die je zelf ergens host. Deze wordt dan in een iframe ingeladen. Alle uitleg hierover staat trouwens op de developerspagina's van Facebook.
[ Bericht 5% gewijzigd door QM84 op 11-09-2012 13:46:30 ]
http://fixingthesejquery.com/quote:
http://jqfundamentals.com/
Must-read als je wat met jQuery wil gaan doen, of doet, maar er niets van snapt
die ok trouwens
Jezus wat een misselijkmakende usability-failurequote:
[..]
http://fixingthesejquery.com/
die ok trouwens
Als je niet wilt dat mensen je website bezoeken, haal 'm dan gewoon offline Goed voorbeeld van iemand die wel weet hoe jQuery werkt, maar niet hoe websites werken..
Site A heeft bijvoorbeeld info (komt via PHP uit een DB):
Dag: maandag
Te doen: sporten
Site B (een site die geen PHP ondersteund en niet bij de DB kan van site A) moet via een script, dat ophalen:
En printen: Maandag: Sporten bijvoorbeeld.
Mag je een h2 heading boven meerdere paragrafen gebruiken, of moet je dan perse een h3 gebruiken na een h2? Met andere woorden: is het toegestaan/netjes om dat te doen?
@Meteoric: Volgens mij hoeft dat niet, maar een H3 na een H2 is natuurlijk wel een 'mooie' oplossing die duidelijk gelezen kan worden door zoekmachines, waarde van H2 is hoger dan een H3.
SITE A (vraagt info op van site b):
<script type="text/javascript"><!--
day_id = 1;
//-->
</script>
<script type="text/javascript"
src="http://www.site-b.nl/iframe.js">
</script>
SITE B (iframe.js):
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://www.site-b.nl/getinfo.php?id=" + day_id);
ifrm.style.width = 800+"px";
ifrm.style.height = 600+"px";
ifrm.style.border = 0;
document.body.appendChild(ifrm);
}
makeFrame();
En dat terwijl ik nog nooit met JavaScript heb gewerkt!
Kon wel al PHP btw.
ligt eraan hoe je het wilt gebruiken. Als beide titels het zelfde niveau hebben moet je dezelfde tag gebruiken. Als de een een subkopje is van de ander, moet je een niveau lager (dus hogere index) gebruiken.quote:
Ik weet nog heel weinig van scripten, ben echt net begonnen. Nu focus ik me op de semantiek van HTML dus wil graag alles netjes neerzetten zoals het hoort. Nou heb ik een hele suffe vraag, en ik heb al in een boek gekeken op op w3schools en nog wat sites maar ik kan het antwoord niet zo letterlijk vinden.
Mag je een h2 heading boven meerdere paragrafen gebruiken, of moet je dan perse een h3 gebruiken na een h2? Met andere woorden: is het toegestaan/netjes om dat te doen?
Kijk anders ook eens naar de <section> tag
en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)
maar waarschijnlijk niets. Je kan in principe elke extensie gebruiken.
Tuurlijk niet, dat werkt alleen met muis. Met andere vormen van navigatie (toetsenbord, touch) heb je dan geen hover-state meer. Gewoon op de a:href dus.quote:
Of ik snap niet wat hij wil, dat kan ook nog
Sowieso line-height gebruiken, anders krijg je glitches met verschillende fontrenderings of ontbrekende fonts.quote:
li:hover
en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)
Het werkt wel (in Chrome, heb nog geen andere dingen getest), maar ik heb zo'n vermoeden dat het qua CSS allemaal erg lelijk is
De rode pijl geeft weer waar de muis zich bevindt, het is de bedoeling dat dus de hele hoogte van het element klikbaar is.| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .top-menu ul { height: inherit; margin-left: 8px; } .top-menu li { display: inline; list-style-type:none; padding: 10px 0 95px; -webkit-border-bottom-right-radius:.6em; -moz-border-bottom-right-radius:.6em; border-bottom-right-radius:.6em; } .top-menu li:hover { background-color: #fff; color: #223053; } .top-menu li a { font-weight: bold; font-size:15px; color: #fff; padding: 0 8px 95px; } .top-menu > li:first-child > a { border-left:none; } .top-menu li a:hover { color: #223053; } |
In chrome doet hij het wel, bij mijn zusje niet, en bij mij op Firefox ook niet.
Ik weet dat hij te breed is, maar dat is voor latere zorg.SPOILER
Hmm ik zie eigenlijk niks vreemds in de scriptcode, heeft iemand enig idee waar het aan kan liggen dat hij het niet consequent doet.
| 1 2 3 4 5 6 7 | <object id="MediaPlayer" width="550" height="309" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"><param name="filename" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" /> <param name="Showcontrols" value="True" /><param name="autoStart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" /> <param name="showcontrols" value="True" /><param name="autostart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" /> <embed id="MediaPlayer" width="550" height="309" type="application/x-mplayer2" src="http://livestreams.omroep.nl/npo/3fm_vsr-bb" filename="http://livestreams.omroep.nl/npo/3fm_vsr-bb" Showcontrols="True" autoStart="True" url="http://livestreams.omroep.nl/npo/3fm_vsr-bb" showcontrols="True" autostart="True" /></object> <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
Op www.popkoor2000.nl/site kan je zien dat ik de 3 modules onderin naast elkaar wil hebben. Ze moeten in totaal net zo breed worden als het stuk erboven.
In index.php staat
| 1 2 3 | <div id="wrapper2" class="user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div id="wrapper2" class="user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div id="wrapper2" class="user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
In styles.css staat
| 1 | #wrapper2 {margin:0 auto; width:300px ; height:160px; margin-top: 3px; text-shadow: none; position: relative; background-image: url('http://www.heartofstone.co.uk/HOS/UL/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);padding: 4px;text-shadow: 0 1px 0 #FDFDFF;} |
| 1 2 3 | .user1 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: left; width: 250px; margin: 10px;} .user2,{ text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: center; width: 250px; margin: 10px;} .user3 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: right; width: 250px; margin: 10px;} |
Ik zal vast een domme fout maken, aangezien ik hier weinig van snap. Ik heb al een paar uur gepuzzeld, ook door een % te nemen bij de user123 in de CSS. Helaas werkte dat ook niet.
Kan iemand me vertellen hoe ik die drie modules naast elkaar krijg, met een kleine ruimte er tussen?
Daarnaast de komma achter .user2, { verwijderen
<div id="wrapper2" > drie keer kan dus niet, maak daar een class van.
Ik heb ze alledrie float left gegeven en ook de komma weggehaald.
Dat derde onderdeel snap ik nog, aangezien ik nog geen kaas heb gegeten van class.
Ik zie echter dat de drie modules nu nog niet samen de gehele breedte van het middenstuk vormen. Als ik echter de getallen aanpas bij width van user1 en 2 en 3 wordt het niet breder.
Wat doe ik fout?
Voor de rest zoals donroyco al zegt, left floaten.
Heb van #wrapper2 nu .wrapper2 gemaakt en
| 1 | <div id="wrapper2" class="user1"> |
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.
Je kunt er <div class="wrapper2 user2"> van maken. Dan kun je user 2 nog apart opmaken voor stijlen die je bij de andere divs met wrapper2 niet wil. Bijvoorbeeld je middelste blok, met een margin left en right, om zo ruimte te creëren.quote:
Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en
[ code verwijderd ]
veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.
Heb net wrapperuser1 en 2 en 3 aangemaakt en alleen wrapperuser2 krijgt een margin.
Kom nog niet op de hele breedte uit en als ik het getal iets aanpas, springt het laatste blok naar de volgende regel.
Vind het nog wel raar, want ik heb alledrie de vakken 277 breed gemaakt en de middelste een margin van 3 gegeven.
3x277+3+3 = 837 en dat is minder dan de breedte van dat middenstuk (980 dacht ik).
Ergens maak ik een domme cijferfout.
| 1 2 3 | <div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
| 1 2 3 | .wrapperuser1 {width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} .wrapperuser2 {margin:3px; width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} .wrapperuser3 {width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} |
In de div zelf staat geen padding maar bij de wrapperuser123 wel, namelijk 2px.
[ Bericht 2% gewijzigd door -J-D- op 24-09-2012 11:31:52 ]
| 1 2 3 | <div class="wrapper2 user1"></div> <div class="wrapper2 user2"></div> <div class="wrapper2 user3"></div> |
Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:
| 1 | .wrapper2 { width: 200px; height: 100px; } |
En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.
| 1 | .user2 { margin: 0px 20px 0px 20px; } |
Dat is het idee van meerdere classes gebruiken.
Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.
Ben nu met Chrome Web Developer aan het klooien om te kijken of ik een getal kan veranderen zodat de rechter ook tot rechts aansluit,.
Dat snap ik, maar na een paar uur puzzelen zie je soms de oorzaak niet.quote:
dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.
Ik ben al zover dat het niet in de eigenschappen van wrapperuser1, wrapperuser2 en wrapperuser3 zit.
Volgens Web Developer eindigt wrapperuser3 iets links van het einde, dus het gat dat daar zit ligt niet aan een marge van wrapperuser3, lijkt me.
Wat het wel is, is nog een raadsel.
index.php
| 1 2 3 | <div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
styles.css
| 1 2 3 | .wrapperuser1 {width:315px; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} .wrapperuser2 {margin:3px; width:314px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} .wrapperuser3 {width:315px; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} |
De rechtermodule loopt niet helemaal rechts door tot aan de rand en ik vroeg me af waar ik de fout maak. Als ik de breedte van een van drie modules 1 px groter maak, dan gaat de laatste naar de volgende regel.
- waarom heeft die middelste een margin:3px en margin-top:3px
- waarom hebben ze position:relative?
- waarom maak je classes aan als je daar ID's invult? Ik zou gewoon deze classnames door ID vervangen en een wrapper class aanmaken met de gedeelde stijlen.
En dit is de index.php
Kan je hier wat mee? Ik hoop dat dit genoeg informatie is.SPOILER<?php /** * @copyright Copyright (C) 2012 - All Rights Reserved. **/
defined( '_JEXEC' ) or die( 'Restricted access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
?>
<?php include (YOURBASEPATH.DS . "/modules/req_parameters.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<?php if ($this->params->get( 'jchecker' )) : ?>
<script type="text/javascript">if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/modules/jquery171.js' type='text/javascript'%3E%3C/script%3E")); } </script>
<script type="text/javascript">jQuery.noConflict();</script>
<?php endif; ?>
<?php require(YOURBASEPATH . DS . "functions.php"); ?>
<?php require(YOURBASEPATH . DS . "/modules/req_css.php"); ?>
<?php if ($this->params->get( 'jcopyright' )) : ?> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/modules/jcopyright.js"></script><?php endif; ?>
<?php if ($this->params->get( 'jtabs' )) : ?> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/modules/jtabs.js"></script><?php endif; ?>
<?php if ($this->params->get( 'jscroll' )) : ?> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/modules/jscroll.js"></script><?php endif; ?>
</head>
<body class="background">
<div id="main">
<div id="header-w">
<div id="header"><br>
<div class="topmenu">
<div class="topleft"></div><div class="topright"><jdoc:include type="modules" name="position-1" style="none" /></div>
<jdoc:include type="modules" name="position-0" style="none" />
</div>
<div id="wrapper">
<div id="navr">
<div class="searchbutton"><!-- Social Buttons -->
<?php if ($this->params->get( 'socialbuttons' )) : ?><?php include "modules/socialbuttons.php"; ?><?php endif; ?>
<!-- END--> </div>
<div id="navl">
<div id="nav">
<div id="nav-left"><jdoc:include type="modules" name="menuload" style="none" /></div><div><ul id="submenu" class="menu"><jdoc:include type="modules" name="Submenu" style="none" /></div>
<div id="nav-right">
<?php include "html/com_content/archive/component.php"; ?>
<!-- Slideshow -->
<?php if ($this->params->get( 'slidedisable' )) : ?> <?php include "modules/slideshow.php"; ?><?php endif; ?>
<!-- END Slideshow -->
<?php if ($this->countModules('breadcrumb')) : ?>
<jdoc:include type="modules" name="breadcrumb" style="none"/>
<?php endif; ?><br>
<div id="message">
<jdoc:include type="message" />
</div>
<?php if($this->countModules('left')) : ?>
<div id="leftbar-w"><div id="sidebar"><jdoc:include type="modules" name="left" style="jaw" /></div></div><?php endif; ?>
<?php if($this->countModules('left') xor $this->countModules('right')) $maincol_sufix = '_md';
elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_bg';
else $maincol_sufix = ''; ?>
<div id="centercontent<?php echo $maincol_sufix; ?>">
<div class="clearpad"><jdoc:include type="component" /> </div></div>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<div id="rightbar-w">
<!-- Tabs -->
<?php if ($this->params->get( 'jtabs' )) : ?><?php include "modules/jtabs-content.php"; ?><?php endif; ?>
<!-- END Tabs -->
<div id="sidebar">
<jdoc:include type="modules" name="right" style="jaw" />
</div>
<?php if ($this->params->get( 'googletranslate' )) : ?> <?php include "modules/googletranslate.php"; ?><?php endif; ?>
</div>
<?php endif; ?>
<div class="clr"></div>
<?php $menu = JSite::getMenu(); ?>
<?php $lang = JFactory::getLanguage(); ?><?php if ($menu->getActive() == $menu->getDefault($lang->getTag())) { ?>
<div style="font-size:10px"><a href="http://www.freetemplatespot.com" target="blank" title="joomla template 2.5">Joomla template 2.5</a> © <a href="http://www.freetemplatespot.com" target="blank" title="freetemplatespot">Freetemplatespot</a></div>
<?php } ?>
</div>
</div>
<!--- To Top -->
<div style="display:none;" class="nav_up" id="nav_up"></div>
<!-- End -->
<div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
<div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
<div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
<div class="tg">
<p style="display:inline"><jdoc:include type="modules" name="copyright"/> <?php if ($this->params->get( 'footerdisable' )) : ?><?php echo ($footertext); ?><?php endif; ?>. <a href="http://www.freshjoomlatemplates.com/" target="_blank" ></a></p>
</div>
</div>
</div></div></body>
</html>
Margin top hebben ze alledrie, om een buffer te vormen met het stuk erboven.quote:
Ja, maar hier kan ik niets mee. Wat staat er om heen, wat voor stijlen hebben die elementen, hoe groot is de parent?
- waarom heeft die middelste een margin:3px en margin-top:3px
- waarom hebben ze position:relative?
- waarom maak je classes aan als je daar ID's invult? Ik zou gewoon deze classnames door ID vervangen en een wrapper class aanmaken met de gedeelde stijlen.
De middelste heeft een margin om een scheiding aan te brengen met de twee andere modules.
position:relative weet ik niet. Dat stond standaard in deze template.
Ik heb de aanpassingen met classes gedaan omdat geadviseerd werd op de vorige pagina. Volgens mij heb ik die tips goed gebruikt, maar misschien zie ik het verkeerd.
Weer een hardnekkig probleempje met de header. Ik heb een header, waarbij ik de navigatie en het logo (rood) in een breedte van 960px in het midden van de pagina wil weergeven.
Dat staat nu wel goed, maar de Wordpress-theme die ik gebruik heeft als feature dat'ie responsive is. Met mijn huidige knutselwerk lukt dat echter niet.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="header-wrapper"> <div id="header"> <ul> <li>link #1</a></li> <li>link #2</a></li> <li>link #3</a></li> <li>link #4</a></li> <li>link #5</a></li> </ul> <div id="logo"> <img blabla> </div><!-- end of #logo --> </div><!-- end of #header --> </div> |
De CSS die ik eraan meegeef is:
| 1 2 3 4 5 6 7 8 9 10 11 | #header-wrapper { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(34, 48, 83); /* RGBa with 0.9 opacity */ background: rgba(34, 48, 83, 0.9); } #header { margin: 0 auto; width: 960px; } |
De #header-wrapper heb ik zelf toegevoegd om de achtergrond van de header over de volledige breedte door te laten lopen, maar die hoort niet bij het theme. Als ik de width van #header op 960px zet dan wordt het wel correct weergegeven, maar past hij zichzelf niet meer aan aan de schermgrootte.
Als ik de width daar weghaal dan doet hij het wel, maar staat hij dus weer niet in een blok van 960px in het midden van het venster (dan staat de navigatie volledig links, het logo volledig rechts).
Wat doe ik fout?
Hm, dat klinkt wel logisch. Daar moet ik maar eens even induiken danquote:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.
Hoe zou men dat bijvoorbeeld doen?quote:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.
quote:
[..]
Hoe zou men dat bijvoorbeeld doen?
| 1 2 3 4 5 | @media (max-width:768px) { body { background-color:#f0f; } } |
Oops, dat heb ik nog niet gedaan.quote:
Als je nou gewoon eens precies doet wat boem-dikkie zegt heh. Wat gaat er dan nog verkeerd?
Morgenavond ga ik er mee verder puzzelen. Dank!
Aha! Dankjewelquote:
Beste boem-dikkie,quote:
Okay als alle blokken dezelfde stijl hebben maar hier en daar een extra padding of margin kun je het zo doen.
[ code verwijderd ]
Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:
[ code verwijderd ]
En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.
[ code verwijderd ]
Dat is het idee van meerdere classes gebruiken.
Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.
Ik heb geëxperimenteerd met jouw tips. Ik begrijp de strekking en het nut.
Alleen krijg ik nu niet de blokken naast elkaar, maar deels onder elkaar. Zie www.popkoor2000.nl/site
Code index.php
| 1 2 3 | <div class="wrapper2 user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapper2 user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapper2 user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
Code styles.css
| 1 2 3 4 | .user1 { } .user2 { margin: 0px 20px 0px 20px; } .user3 { } .wrapper2 {background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;margin-top: 3px;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; width: 287px; height: 200px; } |
Uhh, nooitquote:
Wanneer besloot je dat je nu geen float:left meer nodig zou hebben?
Is dat de domme fout? Let me check it!
-edit-
Ja dus, dat was dom van me. Had ik zelf kunnen bedenken. Nu eens zien of het probleem met het doorlopen naar rechts is opgelost als ik de getallen aanpas.
-edit-op-edit-
Ik heb nu ook de tips van KomtTijd en boem-dikkie gebruikt. Alleen zie ik dat ik nog steeds niet de gehele breedte van het middenstuk kan gebruiken.
Als ik de blokken 1px breder maak, gaat het laatste blok naar de volgende regel. Exact hetzelfde probleem dus als gisteren toen ik deze laatste verbeteringen van boem-dikkie nog niet gebruikt had.
Het blijft een onopgelost raadsel
Het gaat dus om dit rare gat (rechts, niet erboven) dat ik niet kan opvullen door de blokken iets breder te maken.
[ Bericht 9% gewijzigd door -J-D- op 25-09-2012 19:12:37 ]
Nee hoor. Je sluit je div #header pas af ná die blokken, wat dus betekent dat hij wrapped om die blokken, en je header is net zo breed als dat je blokken nu zijn. Verander de width van je div#header maar eens naar 20px groter (als voorbeeld). Als je dan je blokken breder maakt, of meer margin, blijven ze wel netjes naast elkaar staan op de gewenste breedte.quote:
[..]
Uhh, nooit
Is dat de domme fout? Let me check it!
-edit-
Ja dus, dat was dom van me. Had ik zelf kunnen bedenken. Nu eens zien of het probleem met het doorlopen naar rechts is opgelost als ik de getallen aanpas.
-edit-op-edit-
Ik heb nu ook de tips van KomtTijd en boem-dikkie gebruikt. Alleen zie ik dat ik nog steeds niet de gehele breedte van het middenstuk kan gebruiken.
Als ik de blokken 1px breder maak, gaat het laatste blok naar de volgende regel. Exact hetzelfde probleem dus als gisteren toen ik deze laatste verbeteringen van boem-dikkie nog niet gebruikt had.
Het blijft een onopgelost raadsel
[ afbeelding ]
Het gaat dus om dit rare gat (rechts, niet erboven) dat ik niet kan opvullen door de blokken iets breder te maken.
Dank voor de tip.
met getallen, heb ik alleen links nog een ruimteprobleem, alleen nu iets teveel ipv te weinig blok.
-edit-
Hebbes. Vast niet elegant, vast niet volgens de manier hoe het moet, maar het werkt.
Op naar het volgend probleem. Het werkend krijgen van rounded corners in IE.
Maar goed, daar ga ik eerst een paar uur op puzzelen voordat ik jullie weer lastig val.
[ Bericht 20% gewijzigd door -J-D- op 25-09-2012 19:52:16 ]
Het invulveld voor het bericht zelf is echter heel klein. Mijn vraag is hoe ik deze groter kan maken.
Al onderzocht:
* Standaard instellingen van Easy Guestbook (in Joomla) biedt die mogelijkheid niet.
* Met Web Developer wel gevonden dat bij dat vak de volgende regel thuis hoort:
<textarea name="gbtext" id="gbtext" class="inputbox" style="width:245px;" rows="15" cols="50"></textarea>
Als ik echter inputbox een grotere waarde geeft geldt dat voor ELK invulveld en dat is niet de bedoeling.
Mijn eigen gedachten:
Misschien moet ik wel een inputbox2 kan aanmaken waarbij die waarde groter is. Ik kan echter niet vinden waar ik een aanpassing moet maken in de bestanden van Easybook om dat veld te laten verwijzen naar inputbox2 ipv de gewone.
Iemand adviseerde mij om een override te maken. Onderstaande code heb ik toegevoegd aan styles.css.
| 1 2 3 4 | .textarea#gbtext{ background:none; line-height:100px; } |
Iemand een idee wat ik kan doen?
style.css, regel 260 krijgt hij 20px hoogte.
[ Bericht 38% gewijzigd door Catch22- op 01-10-2012 12:45:56 ]
| 1 2 3 4 | .textarea#gbtext{ background:none; rows="6"; cols="50";} |
Helaas werkt het niet als ik die gegevens invoer, zoals in mijn vorige post. Ik probeer dus die override te gebruiken maar zie geen verschil.
Volgens mij gebruik ik wel de juiste naam (textarea#gbtext) maar het werkt nog niet.
Klopt de tip die ik kreeg over die override wel? Of is dat de verkeerde aanpak?
Ik merk dat easybookreloaded.css ook aangeroepen wordt. Ik zie daar alleen in staan wat de breedte van zo'n textarea moet zijn.quote:
dan zit er iets beperkend in de rest van je code
Zie ik iets over het hoofd en zien jullie wel iets waardoor mijn wijzigingen overruled worden?SPOILER
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57.easy_frame {border: #ededed solid 1px; background-color:#FFFFFF;}
.easy_top {background-color:#f7f7f6; height: 30px;}
.easy_top_left {padding-left: 10px; padding-top: 5px; padding-bottom: 10px; float: left;}
.easy_top_right {float: right; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;}
.easy_big {font-size: 16px; vertical-align: middle;}
.easy_small {font-size: 9px; vertical-align: middle; padding-left: 10px;}
.easy_small_red {color: #e8523e; font-size: 9px; vertical-align: middle;}
.easy_small_notice {font-size: 0.85em; padding-left: 50px;}
.easy_pagination {font-size: 16px; text-align:center; display: block;}
div.easy_pagination {font-size: 16px; text-align:center; display: block;margin-top:16px;}
div.easy_pagination li {display: inline !important; padding: 0 5px !important;}
.easy_align_middle {vertical-align: middle; padding-right:1px;}
.easy_admincomment {margin-left: 10px; margin-right: 10px; padding: 10px; padding-bottom: 15px; margin-bottom: 8px; background-color:#fafafa; border-right: #ededed solid 5px; border-left: #ededed solid 5px; background-image: url(../images/entry_bg.gif); background-position:bottom; background-repeat:repeat-x; color: #666666;}
.easy_contact {margin-left: 10px; text-align:left; margin-right: 10px; margin-top: 8px; padding: 5px; padding-bottom: 10px; background-color:#fafafa; border-right: #ededed solid 5px; border-left: #ededed solid 5px; position:relative; background-image: url(../images/entry_bg.gif); background-position:bottom; background-repeat:repeat-x;}
.easy_content {margin-left: 10px; text-align:left; margin-right: 10px; margin-top: 8px; padding: 10px; padding-bottom: 15px; margin-bottom: 8px; background-color:#fafafa; border-right: #ededed solid 5px; border-left: #ededed solid 5px; background-image: url(../images/entry_bg.gif); background-position:bottom; background-repeat:repeat-x;}
.easy_title {margin-left: 10px; text-align:left; margin-right: 10px; margin-top: 8px; padding: 10px; padding-bottom: 15px; margin-bottom: 8px; background-color:#fafafa; border-right: #ededed solid 5px; border-left: #ededed solid 5px; background-image: url(../images/entry_bg.gif); background-position:bottom; background-repeat:repeat-x; font-size: 130%; font-weight: bold;}
.easy_intro {}
.easy_entrylink{padding-top: 10px;background:#FFFFFF;color: #555; padding: 7px;border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #FFFFFF;}
.easy_center{text-align: center;}
#easybook {}
#easyfooter {margin-top: 10px;font-size: 90%;text-align: center;}
#easyfooterinv {margin-top: 10px;font-size: 90%;text-align: center; display: none;}
#easybook span.pagination {text-align:center; display: block;}
#easybook h2 {margin: 0;}
#easybook p.clr {clear: none;}
#easybook dl {margin: 0;padding: 0;padding-top: 5px;padding-bottom: 5px;}
#easybook p.date {margin: 0;padding: 0;border-bottom: 1px solid #5F5F5F;}
#easybook p.rate {float: right;margin: 0;padding: 0;margin-right: 10px;}
#easybook dt {float: left;}
#easybook dt strong {display: block;margin-left: 5px;}
#easybook dt em {margin: 0;padding: 0;font-size: 12px;margin-left: 5px;}
#easybook dd {min-height: 40px;height: auto !important;height: 40px;margin-left: 150px;}
#easybook a span {display: none;}
#easybook a.hp {float: left;display: block;height: 16px;width: 16px;margin-top: 3px;margin-right: 2px;}
#easybook img.msn {float: left;display: block;height: 16px;margin-right: 2px;width: 16px;}
#easybook a.view {float: right;}
#easybook a.sign {float: right;}
#easybook a.email {float: left;display: block;height: 16px;width: 16px;margin-top: 3px;margin-right: 2px;}
#easybook a.icq {float: left;display: block;height: 16px;width: 16px;margin-right: 2px;margin-top: 3px;}
#easybook a.aim {float: left;display: block;height: 16px;width: 16px;margin-top: 3px;margin-right: 2px;}
#easybook a.yah {float: left;display: block;height: 16px;margin-top: 3px;margin-right: 2px;width: 16px;}
#easybook a.skype {float: left;display: block;height: 16px;width: 16px;margin-top: 3px;margin-right: 2px;}
#easybook fieldset#form {border: 0;width: 460px;}
#easybook fieldset#form legend {display: none;}
#easybook fieldset#form p {margin: 0;font-size: 13px;margin: 18px;}
#easybook fieldset#form label {display: block;width: 7em;float: left;}
#easybook fieldset#form input {width:545px;}
#easybook fieldset#form textarea {width: 545px;}
#easybook fieldset#form input.button {padding: 0;width: 60px;cursor: pointer;}
#easybook p.admincomment{margin: 0;padding: 0;border-top: 1px solid #5F5F5F;margin-top: 6px;}
#easybook div#bbcode {margin-left: 105px;}
#easybook #smile {float: right;margin-top: 15px;}
ul.pagination {font-size:14px;text-align:center !important;}
#easybook pre {font:1.2em/1.5 "Courier News",monospace;margin:0;padding:8px;background:none repeat scroll 0 0 #F6F6F6;border-left:5px solid #999999;}
#easybook tr, #easybook td {border: none !important; padding: 5px !important;}
#easybook a.star:hover {text-decoration: none !important; background-color: transparent !important;}
#easybookvotetip {font-weight: bold; padding-left: 10px; padding-bottom: 3px;}
quote:
dat doet niets. Als jij op regel 260 die hoogte weghaalt is het klaar.
Dank In elk geval heb ik mijn menu inline-block gemaakt zodat ik nog goed met de margins en paddings kan werken. Hiervoor had ik hem inline gemaakt, toen stond mijn menu perfect horizontaal in het midden (ik had geloof ik toen ook text-align:center). Nu komt mijn menu horizontaal links uitgelijnd op de pagina. Ik heb met google al meer mensen met dit probleem gezien, en zij geven allemaal aan dat dit op te lossen is met text-align:center, alleen dat doet niks bij mij. Ziet iemand het probleem/de oplossing?Mijn menu is gewoon standaard
| 1 2 3 4 5 6 | <nav> <ul> <li><a href="link.html">text</a></li> etc etc </ul> </nav> |
CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | nav { display: inline-block; padding: 2px; margin: 2px; list-style: none; margin:auto; text-align: center; } nav ul li { display: inline-block; list-style:none; } nav li a { color: silver; font-family: "Courier New", Courier, Monospace; font-size: 16px; width: 18%; line-height: auto; text-decoration: none; margin:1px; } |
Heb overigens die text-align ook toegevoegd bij 'nav li a' en 'nav li ul' maar het mocht niet baten helaas.
En waarom inline-block gebruiken, als ik je stuk zo lees doet inline precies hetzelfde voor je, en kun je ook gewoon margin en padding gebruiken op je list item.
Euh, zo?quote:
Nou het probleem/de vraag is eigenlijk hoe ik met inline-block mijn menu centreer ten opzichte van de wrapper.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <style> #wrapper { text-align: center; } #wrapper > nav { display: inline-block; } </style> </head> <body> <div id="wrapper"> <nav> hallo, dit is gecentreerd </nav> </div> </body> </html> |
)Hoe zet ik de focus op een veld aan de hand van de tabindex?
Dus ik stond eerst op veld A met tabindex 2.. en nu wil ik naar tabindex 3.
De tabindex verkrijgen via JS is geen probleem. Maar nu wil ik dus de focus zetten op het veld dat die verkregen tabindex + 1 heeft.
De voorbeelden die ik tegenkom die maken allemaal gebruik van het veldID en die is eigenlijk soort van onbekend (of ik moet hem aan de hand van de next-tabid moeten kunnen ophalen).
Iemand ideeen?
[ Bericht 16% gewijzigd door Cue_ op 02-10-2012 16:27:54 ]
Met iets als jquery is dit namelijk wel erg gemakkelijk, maar het is wat overbodig het alleen hiervoor te includen. Zonder library ga je in elk geval een functie nodig hebben die elementen op attribuut kan vinden.
Zoiets als dit zou werken:
| 1 2 3 4 5 6 7 8 9 10 11 12 | function getElementByAttributeValue(attribute, value) { var allElements = document.getElementsByTagName('*'); for (var i = 0; i < allElements.length; i++) { if (allElements[i].getAttribute(attribute) == value) { // Element exists with attribute. Add to array. return allElements[i]; } } } |
dus dan geeft:
| 1 | var nextElement = getElementByAttributeValue('tabindex', currentTabIndex + 1); |
Dus dan zou je die kunnen gebruiken door te zeggen:
Let wel dat dit script dus door alle elementen loopt, en op grote pagina's dat nog best wel wat kan zijn.
| 1 | $("input[tabindex='" + (curTabindex + 1) + "']").focus(); |
Dan dat jaquote:
.Straks eens uit proberenquote:
maar is het mogelijk om een directory met foto's uit te lezen?
met php is het me wel gelukt maar ik wil de foto's lokaal zetten en er is geen mogelijkheid voor wamp oid
doeleinde is voor mijn werk, om snel 2 series foto's (voor en na een bepaalde handeling)
naast elkaar te kunnen zien zonder deze eerst in powerpoint oid te zetten
Zijn vaak veel foto's, +500
Als iemand een andere slimme oplossing weet om dit op te lossen dan hoor ik het graag
Je kunt natuurlijk wel gewoon <img src="file:///home/user/image.jpg"> doen als de pagina maar op een systeem hoeft te draaien en je weet waar de foto's staan.
ik weet idd het pad (een dir op het netwerk)quote:
Als je het pad weet en de fotos een vast formaat hebben (bijvoorbeeld DSC_{NUMMER}.JPG) kan je er gewoon overheen itereren. Uitlezen is inderdaad niet echt mogelijk.
en de foto's hebben een redelijk vast formaat..
dus er is iets voor te maken
en hoe heet zoiets in js?
dan kan ik gerichter zoeken naar voorbeelden
Het heeft niet zoveel met JS te maken. je zou hooguit een loopje kunnen maken zodat je geen gigantisch lange HTML-code krijgt voor 200 afbeeldingen, maar of dat nou echt een voordeel is...quote:
[..]
ik weet idd het pad (een dir op het netwerk)
en de foto's hebben een redelijk vast formaat..
dus er is iets voor te maken
en hoe heet zoiets in js?
dan kan ik gerichter zoeken naar voorbeelden
Op een of andere manier loopt het script in IE9 altijd vast de eerste keer dat je de pagina laadt (onbekend waarop), maar daarna gaat het gewoon goed. Ookal gooi ik de chache leeg, start ik de browser opnieuw op, enz. Kortom zie dat maar eens te debuggen
Weet iemand misschien of er bekende bugs zijn in IE die zoiets kunnen veroorzaken? We zitten hier een beetje te denken dat misschien jQuery (of een van de plugins) nog niet geladen is terwijl het script al doorloopt ofzo... maar volgens mij zou je het dan moeten kunnen reproduceren door de cache leeg te gooien...
ja..dat is een voordeelquote:
[..]
Het heeft niet zoveel met JS te maken. je zou hooguit een loopje kunnen maken zodat je geen gigantisch lange HTML-code krijgt voor 200 afbeeldingen, maar of dat nou echt een voordeel is...
want anders moet ik met de hand al die foto's er in gaan zetten
initieer je alles wel op het juiste moment? Niet toevallig wat console.log dingetjes aanstaan zonder dat er een console is?quote:
Ik heb ook iets raars trouwens. Ik heb een pagina die nogal wat JSON requests doet en een hoop jqeury bevat.
Op een of andere manier loopt het script in IE9 altijd vast de eerste keer dat je de pagina laadt (onbekend waarop), maar daarna gaat het gewoon goed. Ookal gooi ik de chache leeg, start ik de browser opnieuw op, enz. Kortom zie dat maar eens te debuggen
Weet iemand misschien of er bekende bugs zijn in IE die zoiets kunnen veroorzaken? We zitten hier een beetje te denken dat misschien jQuery (of een van de plugins) nog niet geladen is terwijl het script al doorloopt ofzo... maar volgens mij zou je het dan moeten kunnen reproduceren door de cache leeg te gooien...
Ik kwam er ook achter dat het google charts script nog wat scripts van de google servers aanroept. Die heb ik maar even helemaal onderaan gezet.
zet dit bovenin je script/pagina en je bent daarvan af
quote:if(typeof(console) === 'undefined') {
var console = {}
console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}
IE9 heeft volgens mij met de ontwikkeltoolbar wel ondersteuning voor console.log.quote:
Ja. Als je dingen naar het console schrijft en er geen console is, naait IE vast.
zet dit bovenin je script/pagina en je bent daarvan af
[..]
But then, met console open krijg ik het probleem niet gereproduceerd. (met console gesloten ook nauwelijks maar heb ik het af-en-toe). Zou dus inderdaad weleens dit kunnen zijn.quote:
[..]
IE9 heeft volgens mij met de ontwikkeltoolbar wel ondersteuning voor console.log.
Heb catch22's code erin gezet, maar voor de productieomgeving mogen die logs er sowieso wel uit eigenlijk.
Als die open staat wel jaquote:
[..]
IE9 heeft volgens mij met de ontwikkeltoolbar wel ondersteuning voor console.log.
Als je de devtools niet open hebt looptie er op stukPost maar raak.quote:
Ik zoek iemand met JS en PHP kennis die mij even zou kunnen helpen.
[PHP/(My)SQL] voor dummies #104 Waar veiligheid > allesquote:
Ik zoek iemand met JS en PHP kennis die mij even zou kunnen helpen.
Misschien ook wat meer informatie geven?
PHP-codes, kan je die ook lokaal vanaf een Windows computer URL's laten aanroepen? Kan ik dan ook communiceren met een server of moet de code dan op een Apache server staan?quote:
Als het de bedoeling is dat de output in een webpagina komt is een webserver ook wel handig ja.
Het makkelijkste is gewoon een alles-in-een pakket te installeren zoals WAMP http://www.wampserver.com/en/
Of om gewoon een webhostingpakketje aan te schaffen.
Ik heb XAMPP geïnstalleerd, dat is gewoon hetzelfde idee als WAMP toch?quote:
Als je PHP-scripts wilt uitvoeren moet je PHP geinstalleerd hebben.
Als het de bedoeling is dat de output in een webpagina komt is een webserver ook wel handig ja.
Het makkelijkste is gewoon een alles-in-een pakket te installeren zoals WAMP http://www.wampserver.com/en/
Of om gewoon een webhostingpakketje aan te schaffen.
Als ik in de browser: "localhost/.../test.php" typ bedoel je? Ik heb geen flauw idee hoe ik XAMPP gebruik.quote:
Watvoor foutmelding geeft het script als je het probeert?
Nvm, ik ga wel even googlen.
[ Bericht 10% gewijzigd door pascal08 op 05-10-2012 16:25:53 ]
| 1 2 3 4 5 6 | <tr class="Row0" onmouseover="this.className = 'RowHighlight';" onmouseout="this.className = 'Row0';" onclick="markRow(this);"> ... </tr> <tr class="Row1" onmouseover="this.className = 'RowHighlight';" onmouseout="this.className = 'Row1';" onclick="markRow(this);"> ... </tr> |
En dat 250x herhaald onder elkaar.
Handig toch, unieke ID`s voor elke rij.quote:
Dit kom ik net tegen in onze backend:
[ code verwijderd ]
En dat 250x herhaald onder elkaar.
Dit soort Javascript was pre-jQuery niet zo raar. Maar waarom in godsnaam 250 keer onder elkaar? Waarom niet gewoon 1 loopje die dat doet?quote:
Dit kom ik net tegen in onze backend:
[ code verwijderd ]
En dat 250x herhaald onder elkaar.
Dit komt ongetwijfeld uit een loopquote:
[..]
Dit soort Javascript was pre-jQuery niet zo raar. Maar waarom in godsnaam 250 keer onder elkaar? Waarom niet gewoon 1 loopje die dat doet?
PHP loop, maar idd.quote:
ik wilde een afbeelding op mijn site plaatsen, maar het lukt niet.
zo orgineel als ik ben moet dat natuurlijk een appeltje zijn
ik krijg "apple" (dat was mijn alt="code.) ipv de afbeelding te zien.
hoe moet ik dat oplossen?
dit is mijn code
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <head> <title>HTML LEREN</title> <style type="text/css"> .fontArial { font-family: Arial; font-size: 40 px; } .fontTimes { font-family:"Times New Roman"; font-size: 40px;} .borderSolid { border-style: solid; border-color: grey; } .borderDouble { border-style: double; border-color: green; } .borderDotted {border-style:dotted;border-color:white;border width:12px;} p {font-family:"arial";font-size:17px;} p.A {font-family:"comic sans ms";font-size:40px;} body {margin: 2px;padding: 20px;background-color:red;border-style:solid;border-color:black;border width:12px;} h1 {color:black; text-align:center;} {border: 20px dotted #64FA00} </style> </head> <body> <h1> HTML AND CSS </h1> <p class="one"> Mijn naam is ... en ik ben bezig met mijn eerste HTML. </p><p><center><img src="C:\Users\appleocean\Documents\www\AppleLogo.png" alt="apple"></center></p> <p> tekst en border in 1 regel:</p> <p class="fontArial borderSolid">Lettertype Arial + solid border</p> <p class="fontTimes borderSolid">Lettertype Times New Roman + solid border</p> <p class="fontArial borderDouble">Lettertype Arial + double border</p> <p class="fontTimes borderDouble">Lettertype Times New Roman + double border</p> <p class="A"> Font Test </p> </body> </html> |
wie weet het?
het gaat om regel 29
.je moet de relative map nemen
dus van waar je website (index.html) staat
| 1 | <img src="plaatje.png" alt="mijn toffe plaatje" /> |
fuckquote:
Je volgt een verouderde HTML-tutorial, lijkt me. Om antwoord te geven op je vraag: ik zou het plaatje eerst uploaden naar het web (via imgur.com of zo) en daarna de src-waarde vervangen met de online link van het plaatje.
http://cesarsite.com/html/bouwjesite/stap5.php
deze is het, ziet er idd vrij oud uit
HTML5
dit werkt, thanxquote:
Zet het plaatje en je html-file in dezelfde map en gebruik daarna gewoon de bestandsnaam.
[ code verwijderd ]
.laat ik idd maar een andere tut nemen
heb ik geen html 5?quote:
ik dacht dat <!DOCTYPE html> voor HTML5 stondquote:
Probeer W3Schools, zij hebben actuele tutorials.quote:
[..]
fuck
http://cesarsite.com/html/bouwjesite/stap5.php
deze is het, ziet er idd vrij oud uit
SPOILER<center>, auw auw m'n ogen
Dat is ook zo.quote:
[..]
ik dacht dat <!DOCTYPE html> voor HTML5 stond
klopt <center> niet meer?quote:
[..]
Probeer W3Schools, zij hebben actuele tutorials.SPOILER<center>, auw auw m'n ogen
hoorde al wel dat <i>, <u> en <b>. niet meer klopten.
volgens mij heb ik het gewoon keihard fout geleerd
ohke, mooiquote:
.<center> is inderdaad verouderdquote:
[..]
klopt <center> niet meer?
hoorde al wel dat <i>, <u> en <b. niet meer klopten.
volgens mij heb ik het gewoon keihard fout geleerd
kut.quote:
klopt de rest wel, of is dat ook oude meuk?
Ik zou opnieuw beginnen.quote:
[..]
kut.
klopt de rest wel, of is dat ook oude meuk?
Hij gebruikt toch CSS? Het zit alleen niet in een externe file, maar dat maakt qua werking en syntax niks uit.quote:
qua HTML zit je (redelijk) goed alleen word nu over het algemeen CSS gebruikt voor de opmaak
ik zie het nu ookquote:
[..]
Hij gebruikt toch CSS? Het zit alleen niet in een externe file, maar dat maakt qua werking en syntax niks uit.
niet helemaal goed gelezenheb p.A toch maar even veranderd.quote:
h1, p en img zijn nog steeds gangbare elementen, ook in HTML5.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <head> <title>HTML LEREN</title> <style type="text/css"> .fontArial { font-family: Arial; font-size: 40 px; } .fontTimes { font-family:"Times New Roman"; font-size: 40px;} .borderSolid { border-style: solid; border-color: grey; } .borderDouble { border-style: double; border-color: green; } .borderDotted {border-style:dotted;border-color:white;border width:12px;} .fontArial {font-family:"arial";font-size:17px;} .fontComic {font-family:"comic sans ms";font-size:40px;} body {margin: 2px;padding: 20px;background-color:red;border-style:solid;border-color:black;border width:12px;} h1 {color:black; text-align:center;} {border: 20px dotted #64FA00} </style> </head> <body> <h1> HTML AND CSS </h1> <p class="one"> Mijn naam is ... en ik ben bezig met mijn eerste HTML. </p><p><center><img src="AppleLogo.png" alt="apple"></center></p> <p> tekst en border in 1 regel:</p> <p class="fontArial borderSolid">Lettertype Arial + solid border</p> <p class="fontTimes borderSolid">Lettertype Times New Roman + solid border</p> <p class="fontArial borderDouble">Lettertype Arial + double border</p> <p class="fontTimes borderDouble">Lettertype Times New Roman + double border</p> <p class="fontComic borderDouble">lettertype comic sans + double border</p> <p class="fontComic"> Font Test </p> </body> </html> |
dit is vrij nieuw hoop ik?
Nee, geen inline styles gaan zitten promoten.quote:
In plaats van in de CSS de fonts te definiëren zou je ook <span style='font-family: blablabla'> kunnen doen. Is wellicht sneller
Css was toch juist goed?quote:
In plaats van in de CSS de fonts te definiëren zou je ook <span style='font-family: blablabla'> kunnen doen. Is wellicht sneller
Sorry, maar het is soms zo verleidelijkquote:Op woensdag 10 oktober 2012 21:19 schreef Tijn het volgende:
[..]
Nee, geen inline styles gaan zitten promoten.
Jup, dit is ook eigenlijk meer een trucje voor luie devvers als ondergetekendequote: