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.
Tevens even het Wordpress topic gelinked, aangezien daar ook best wat vragen over gaan.
Hier de laatste posts, zet ze eventueel in de OP
quote:Op zaterdag 7 januari 2012 22:46 schreef Neraice het volgende:
Ik heb een inspiratieblock: Ik ben bezig met een theme voor telefoons. Nou heb ik een sidebar gemaakt waar plaats is voor een menu, maar ik ben er nog niet uit wat ik erin wil. Ik wil namelijk niet zo'n standaard lijstje maar iets leuks doen met de opmaak. Iemand een idee?
Hier een link: http://dahndesigns.net/theme.png
Ik ben zelf benieuwd wat de beste manier is om deze opstelling te nemen. Een body met een achtergrond (in mijn geval een patroon), met bovenaan een menucontainer, en erin 2 elementen. Dat het menu links margin-left heeft is niet zo belangrijk. Het gaat om die scheiding tussen de 2 elementen, waarbij het 2e element tot over de hele breedte van de pagina moet gaanquote:
Voor telefoonbrowsers? En wat zijn de menu-items? Als het bijv. over aardbeien en sinaasappels gaat, dan kan je die als knoppen doen bijvoorbeeld
Op het moment dat je een 2e element er naast zet die met margin-left gescheiden is vanaf het 1e, gaat 'ie niet tot 100% breedte,.
Zie www.mirelmasic.nl binnen m'n menu div.
[ Bericht 3% gewijzigd door Mirel op 08-01-2012 02:35:22 ]
Of anders beide floaten of display:inline-block geven, de achtergrondkleur + bottom border op de wrapper zetten en het eerste element een border links en rechts geven.
Die scheiding is in mijn geval de kleur van m'n achtergrond Even plaatje updaten. Voorlopig lijkt dit de beste manier. De hele container een kleurtje geven werkt niet want die overlapt dan de scheiding, of je die maakt met margins, lege divs of lege borders.Dit lijkt me nu de beste manier:
1e element float: left; zodat het 2e element er naast komt.
Als je het 2e element 10px vanaf het 1e element wilt, én tot aan het einde van het scherm wilt hebben, dan moet je met margin-left dat doen, MAAR, maar die margin-left heeft als nulpunt het eerste element.
Als je wilt dat het 0 punt rechts van het 1e element is, dan moet je float: left; ook bij het 2e element doen, maar in ruil daarvoor loopt je element niet over de hele breedte van je pagina.
[ Bericht 33% gewijzigd door Mirel op 08-01-2012 02:26:44 ]
Ik ben benieuwd of het beter kan, maar voorlopig is het dus bij mij margin-left: 430px; ipv 10;. Vanaf element 1 dus Slapen doei
http://jsfiddle.net/rBmYa/
http://jsfiddle.net/rBmYa/9/ ook niet[ Bericht 34% gewijzigd door Mirel op 08-01-2012 11:39:12 ]
Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.quote:Op zondag 8 januari 2012 02:36 schreef picodealion het volgende:
Hmm, ik ben bang dat je gelijk hebt. Zolang je zeker weet dat dat eerste item altijd even breed is is dat geen probleem. Het probleem is als die een variabele breedte heeft, daar zou toch een manier voor moeten zijn. Ik kom er alleen niet op.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.
Maarja mijn opbouw zou zijn
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #left{ float:left; background-color: #000 //black (short code hex 3 ipv 6) width: 5%; //of hoeveel percentage height: 20px; } #right{ float: right; background-color: #000; //black (short code hex 3 ipv 6) margin-left: 10px; width: 95%; height: 20px; } |
2 divs neer te zetten en deze percentages width mee te geven.
Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.aspquote:
Ik heb een background patroon voor de gehele body, kan in dat geval niet. En dan weet ik niet wat ik met border-right nog meer moet doen. Kleurtje geven is uit den boze. http://jsfiddle.net/rBmYa/4/ Hij maakt 'em weer dicht
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
| 1 2 3 4 5 6 7 8 | div { background: silver; } body { background: red; } #left { width: 200px; float: left; border-right: 1px #000 solid; } |
[ Bericht 6% gewijzigd door cablegunmaster op 08-01-2012 20:25:55 ]
Stel ik heb zoiets:
| 1 2 3 4 5 6 | <ol> <li> iets</li> <li> iets</li> <li> iets</li> <li> iets</li> </ol> |
Dan ontstaat daar zo'n soort lijstje uit:
Nu wil ik de opmaak van die getallen veranderen. Kan dat, of moet ik er dan een unordered list van maken en zelf de getallen toevoegen aan de list items?quote:1. iets
2. iets
3. iets
4. iets
list-style:decimal?
Niet dat het een probleem maar ik heb dus dit: www.mirelmasic.nl Het gedoe bovenaan is net zo lang als de post eronder, en de rest van het menu is dan gescheiden en loopt door tot het einde.quote:
[..]
Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.
Maarja mijn opbouw zou zijn
[ code verwijderd ]
Is een mogelijke oplossing. Mogelijke 2e oplossing is float: left geven aan beide Divs
2 divs neer te zetten en deze percentages width mee te geven.
[..]
Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.asp
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
[ code verwijderd ]
Ja, dat snap ik. Maar ik bedoel: stel ik wil de getallen die ontstaan door list-style-decimal te gebruiken bijvoorbeeld groter maken, of een andere kleur, zonder verder de inhoud van het list item te stylen.quote:Op dinsdag 10 januari 2012 15:50 schreef Catch22- het volgende:
http://www.handleidinghtm(...)ype/voorbeelden.html
list-style:decimal?
Ik denk niet dat het kan eerlijk gezegd.
De getallen/tekens van de list-style nemen de stijl (kleur/grootte) van je LI over namelijk. Als je in de inhoud in een span zet, kan je die weer apart stylen.
Jawel hoor, kan prima.quote:
[..]
Ik denk niet dat het kan eerlijk gezegd.
| 1 2 3 4 5 6 7 8 | ol { counter-reset:li; } li:before { content:counter(li); counter-increment:li; } |
Meer info: http://www.456bereastreet(...)rdered_list_numbers/
Uiteraard pas vanaf IE8 ofzo. Maar voor IE7 is normale nummering of een Javascript-fallback natuurlijk zo gemaakt, mocht je dat nog willen supporten.
Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper.
Wat moet in het midden? Alles?quote:
http://jsfiddle.net/codefuze/HYjEB/1/
Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper.
Gewoon een wrapper met
| 1 | width: 320px; margin: 0 auto; |
Edit: Niet meer nodig, heb al een beter script.
[ Bericht 18% gewijzigd door Neraice op 10-01-2012 20:16:45 ]
Is het sowieso wel de bedoeling dat de content naar rechts schuift?
Maar ik heb inmiddels al een beter script gevonden.
Baas!quote:
[..]
Jawel hoor, kan prima.
[ code verwijderd ]
Meer info: http://www.456bereastreet(...)rdered_list_numbers/
Uiteraard pas vanaf IE8 ofzo. Maar voor IE7 is normale nummering of een Javascript-fallback natuurlijk zo gemaakt, mocht je dat nog willen supporten.
Ik heb het toevallig pas nodig gehad op m'n werk, anders had ik het zo 1-2-3 ook niet geweten en was ik ws. ook gegaan voor het stylen van de li en de tekst in de li in een <span> zetten en die een andere kleur etc. gevenquote:
CSS
Contentblokken maximaal 600 breed en liever niet meer dan 2-3 alinea's per pagina (contentblokken dus)
Nee, dat heeft te maken met leesbaarheidquote:
960 breedte, hoogte niet vast.
Contentblokken maximaal 600 breed en liever niet meer dan 2-3 alinea's per pagina (contentblokken dus)
Dat is me wel bekend.Echt geen hoogte? Of gewoon de standaard 1024x... 800 is dat toch? Dan zal ik maar 700-800 aanhouden. Ik wil op de homepage een wow-effect meegeven. Dat mag dan niet wegvallen
Neee, het gaat me om wat je ziet als je een website opent, dus de bovenste x pixels. Sommige mensen willen niet scrollen, daar moet ik rekening mee houden en moet ik ze dus door de bovenste pixels teasen en de onderste pixels nieuwsgierig maken... Denk ik.quote:
De hoogte stuur je dmv de hoeveelheid content op de pagina. Als het te lang wordt staat er gewoon te veel content op.
Ik denk dat je dan iets van 700 pixels aan moet houden, gezien de populariteit van laptopschermen van 768 pixels...
Dankjewel!Nu linkt hij wel door, maar zijn mijn foto's en css opmaak weg. Hoe moet ik dat goedzetten?
| 1 2 3 4 | RewriteEngine On RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule . index.html [L] |
RewriteCond %{REQUEST_FILENAME} !\.(css|jpg|jpeg|gif|png)$
Zelf evt. bestandsextensies toevoegen die je gebruikt.
-edit-
Maar waarom doe je dat alleen als het bestaande mappen en/of bestanden zijn? Want dat is waar -f en -d op checken..
SPOILER
Je middelste vlakken zijn kleiner dan de boven en onder vlakken.quote:
Ik heb ff een eerste opzetje gemaakt voor een mobiele website, maar het is het toch nog net niet. Wat vinden jullie? Iemand tips?SPOILER[ afbeelding ]
Wie is dat in je avatar eigenlijk?
En de dame in m'n avatar, ik heb geen idee
.. Nog suggesties?Netbooks verkopen ook leuk en hebben een hoogte van 600 pixels... Evengoed is het wel handig om de belangrijkste dingen zo te plaatsen dat ze altijd eerst in beeld passen, in de eerste ca. 700 pixels.quote:
ahzo.
Ik denk dat je dan iets van 700 pixels aan moet houden, gezien de populariteit van laptopschermen van 768 pixels...
I dunno, had zoiets gevonden dus waarom niet uitproberen?quote:
Deze regel ertussen:
RewriteCond %{REQUEST_FILENAME} !\.(css|jpg|jpeg|gif|png)$
Zelf evt. bestandsextensies toevoegen die je gebruikt.
-edit-
Maar waarom doe je dat alleen als het bestaande mappen en/of bestanden zijn? Want dat is waar -f en -d op checken..
600? denk niet dat die veel in omloop zijn, dan zou het iets van 800/960*800 moeten zijn, daar hou ik persoonlijk geen rekening mee.quote:
[..]
Netbooks verkopen ook leuk en hebben een hoogte van 600 pixels... Evengoed is het wel handig om de belangrijkste dingen zo te plaatsen dat ze altijd eerst in beeld passen, in de eerste ca. 700 pixels.
Het lijkt me een beetje een overbodige regel om gewoon wat oude pagina's naar de voorpagina te redirecten.quote:
[..]
I dunno, had zoiets gevonden dus waarom niet uitproberen?
Het is de bedoeling dat de achtergrond, ongeacht de resolutie, altijd op exact dezelfde plaats blijft staan.
De achtergrond die ik wil toevoegen is 1680px breed, maar deze verspringt telkens als ik de site bekijk op een computer met een lagere resolutie.
Ik heb zelf met % en px zitten werken in background-position, maar dat is ook niet de oplossing die ik zoek omdat de achtergrond dan alsnog mee blijft schuiven.
Onderstaande tekening geeft aan wat ik zoek: een background-image die altijd op dezelfde plaats blijft staan, ongeacht de resolutie waarin de site bekeken wordt.
Hoe kan ik ervoor zorgen dat er ruimte tussen de tekst en het plaatje zit, want dit ziet er niet mooi uit.
| 1 | img { margin:0 10px 10px 0; } |
Sorry maar ben nog heel erg noob, ik wil dat het permanent goed staat, niet dat ik het elke keer moet aanpassen. Waar moet ik dit neerzetten?quote:
Toch bedankt.
In je css bestand. Waarschijnlijk hee het iets als style.cssquote:
[..]
Sorry maar ben nog heel erg noob, ik wil dat het permanent goed staat, niet dat ik het elke keer moet aanpassen. Waar moet ik dit neerzetten?
Toch bedankt.
Edit: Hoe kan het eigenlijk dat die ruimte daartussen ontstaat?
http://gyazo.com/106485d6de5d00c75a2d7aee8e2f804b
Of bedoel je nu iets anders? Is dat trouwens een oefensite ofzo? Want het ziet er heeel chaotisch uit, beter zoek je iets anders. Die margin was zodat er ruimte tussen de tekst en het plaatje zit.quote:
Door die margin die je net erin zet toch?
ergens staat text-align:justifyquote:
Gelukt.
Edit: Hoe kan het eigenlijk dat die ruimte daartussen ontstaat?
http://gyazo.com/106485d6de5d00c75a2d7aee8e2f804b
maar ga je ajb inlezen voor je hier dingen gaat vragen. Het topic is wel voor dummies, maar een klein beetje basiskennis is wel wenselijk.
Ik heb nog niet helemaal bereikt wat ik zoek.quote:
Momenteel heb ik:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | html { background-image:url(../images/siteachtergrond.png); background-attachment:fixed; background-position:center center; } #wrapper { margin-left: auto; margin-right:auto; margin-top: 20px; height: 650px; width: 870px; background-color: none; } |
Maak ik het venster lager dan schuift de site sneller dan de achtergrond.
Ik wil dus dat ongeacht de grootte van het venster en/of resolutie de achtergrond altijd op dezelfde positie blijft staan tov de site.
Fixed geeft toch aan dat de achtergrond blijft staan als je door een lange site naar beneden scrolled?quote:
Dat heeft toch niks te maken met de positie van de site tov de achtergrond als de resolutie/venstergrootte verandert volgens mij.
Ik neem aan dat jij met "de site" gewoon je wrapper bedoelt. Dan moet je 'm dus niet fixed zetten.
"de site" is inderdaad de wrapper.quote:
Met fixed positioneer je de achtergrond t.o.v. het browser window.
Ik neem aan dat jij met "de site" gewoon je wrapper bedoelt. Dan moet je 'm dus niet fixed zetten.
Ik heb geen idee hoe het voor elkaar kan krijgen.
Heb zitten experimenteren zonder de fixed maar dat levert ook niks op. Heb een speciale div gemaakt voor de achtergrond afbeelding maar dat helpt ook niet. In html de image een class gegeven en die in css bewerkt; geen resultaat.
Laatste hoop oplossing die ik nu kan bedenken is het samenvoegen van het websiteontwerp en de websiteachtergrond in 1 afbeelding, wat een rommeloplossing lijkt te zijn.
Of er moet iemand zijn die kan uitleggen hoe ik ervoor kan zorgen dat de site (aka: #wrapper) altijd opdezelfde positie tov de achtergrond blijft staan.
ik heb een form waarin ik een vlootnr opgeef.
| 1 2 3 4 | <tr> <td>Vlootnummer</td> <td><input style="text" name="vlootnr" id="vlootnr" onchange="go_vlootnr(this.form)" /> </td> </tr> |
(go_vlootnr vult momenteel een 4tal andere velden in aan de hand van database gegevens die ik ophaal).
van: http:sitenaam/pagina.php
naar: http:sitenaam/pagina/php?vl=(vlootnr)
waarbij (vlootnr) dus net het opgegeven vlootnr is. Maar ik wil geen refresh ofzo van de pagina.
Hoe kan ik dit het beste doen?
| 1 2 3 | <?php window.location.href = window.location.href + "#vlootnr=" + $("#vlootnr").val() ?> |
Dat zou natuurlijk ook kunnen. De situatie.quote:
[ code verwijderd ]
Ofzo. Maar waarom zou je dit willen? Denk namelijk dat je ergens een denkfout maakt.
Op het formulier vult men een vlootnr in. Vervolgens moet er een hele geschiedenislog worden weergegeven van dat betreffende vlootnr. En er zit een knop 'nieuw' bij, om dat geschiedenislog aan te vullen met nieuwe gegevens.
Ik heb dus in dat form dat de knop 'nieuw' opent wel het vlootnr dat net is ingegeven nodig.
Nu kan ik twee dingen doen volgens mij. Of er een submit button van maken waardoor het in een POST meegaat. Of het gewoon een button laten en het in de url meegeven, zodat ik hem eruit kan halen met een GET actie.
Ik weet niet welke hierin netter is.. of dat er nog andere opties zijn.
Dan zou ik er inderdaad een POST van maken, of alles via AJAX.quote:
[..]
Dat zou natuurlijk ook kunnen. De situatie.
Op het formulier vult men een vlootnr in. Vervolgens moet er een hele geschiedenislog worden weergegeven van dat betreffende vlootnr. En er zit een knop 'nieuw' bij, om dat geschiedenislog aan te vullen met nieuwe gegevens.
Ik heb dus in dat form dat de knop 'nieuw' opent wel het vlootnr dat net is ingegeven nodig.
Nu kan ik twee dingen doen volgens mij. Of er een submit button van maken waardoor het in een POST meegaat. Of het gewoon een button laten en het in de url meegeven, zodat ik hem eruit kan halen met een GET actie.
Ik weet niet welke hierin netter is.. of dat er nog andere opties zijn.
Ik denk dat de vraag eerder is wat je in hemelsnaam gedaan hebt dat dat níét meer het geval is want dat is gewoon standaard gedrag. (als je geen position:fixed gebruikt dus)quote:Op zondag 15 januari 2012 14:57 schreef karton2 het volgende:
[..]
"de site" is inderdaad de wrapper.
Ik heb geen idee hoe het voor elkaar kan krijgen.
Heb zitten experimenteren zonder de fixed maar dat levert ook niks op. Heb een speciale div gemaakt voor de achtergrond afbeelding maar dat helpt ook niet. In html de image een class gegeven en die in css bewerkt; geen resultaat.
Laatste hoop oplossing die ik nu kan bedenken is het samenvoegen van het websiteontwerp en de websiteachtergrond in 1 afbeelding, wat een rommeloplossing lijkt te zijn.
Of er moet iemand zijn die kan uitleggen hoe ik ervoor kan zorgen dat de site (aka: #wrapper) altijd opdezelfde positie tov de achtergrond blijft staan.
Heb het probleem opgelost.quote:
[..]
Ik denk dat de vraag eerder is wat je in hemelsnaam gedaan hebt dat dat níét meer het geval is want dat is gewoon standaard gedrag. (als je geen position:fixed gebruikt dus)
Door het geexperimenteer met divs e.d. ben ik vergeten de code verderop in de CSS aan te passen aan de nieuwe situatie.. Volgende keer verder kijken dan m'n neus lang is.
?Illustratie van de gewenste situatie:
De content mag nooit hoger zijn dan de viewfinder. Hartelijk dank voor uw inzichten
fixed in de viewport?quote:Op donderdag 19 januari 2012 04:02 schreef n8n het volgende:
Ben een tijdje met een lay-out bezig waar ik even geen oplossing voor weet te vinden. De bedoeling is dat de header en footer fixed zijn en het scrollen horizontaal gaat. Punt is dat de content 100% van de hoogte moet gebruiken minus de hoogte van de header en footer. Dit laatste is waar het mis gaat.
Illustratie van de gewenste situatie:
[ afbeelding ]
De content mag nooit hoger zijn dan de viewfinder. Hartelijk dank voor uw inzichten
En wat bedoel je met viewfinder? de viewport?
Je kan die content wrapper en die laten scrollen. Dit is wel een lastige case, hier moet je gewoon goed over nadenken en kijken hoe je het op kan lossen. Het is mij net even teveel werk om het voor te kauwen.
Dat is niet mogelijk met CSS, dat wordt javascripten. Maar ik denk dat je je nog eens achter de oren moet krabben of je dat echt wilt.
Bedenk ook eens hoe je layout er uitziet op een netbook met een viewport van 450px hoog ofzo.
Dan kan je het wel overwegen. Bij mijn sites zit het tussen de 20 a 30%quote:
netbooks kom op zeg. In stats zie ik bijna niets langskomen onder de 1024*768/1140*???
Wat betreft het probleem van n8n, misschien dat je hier nog wat aan hebt.
http://webdesign.tutsplus(...)nted-website-design/
Wickedly cool inderdaad. En bloedirritant, niet te vergeten.quote:
[..]
Dan kan je het wel overwegen. Bij mijn sites zit het tussen de 20 a 30%
Wat betreft het probleem van n8n, misschien dat je hier nog wat aan hebt.
http://webdesign.tutsplus(...)nted-website-design/
Betekent niet dat je er dan helemaal geen rekening mee hoeft te houden. Een normale website zal altijd te bekijken zijn op een klein scherm ookal is hij ontworpen voor grotere schermen. Met fixed headers en footers loop je gewoon heel snel het risico dat mensen met een klein scherm je website helemaal niet kunnen gebruiken.quote:
netbooks kom op zeg. In stats zie ik bijna niets langskomen onder de 1024*768/1140*???
Bedankt, maar ik kom er zelf nog niet uit na een beetje googlen.quote:
Dit is een standaard iframe code:
| 1 | <iframe src="http://www.w3schools.com"></iframe> |
Welke code kan ik hier aan toevoegen zodat in dit geval de w3schools.com in een iframe beland maar dan zonder het logo en het menu bovenaan?
Ow zo, dat is dus niet exact vast te stellen? Op elke browser zal dat er dus anders uit gaan zien? Ik dacht dat je wel iets kon doen als, de bovenste 100 pixels van website X niet laten zien en dus daaronder pas te beginnen in de iframe.quote:
dat wordt echt een bitch. IFrame's zijn heel schraal en crossbrowser erg lastig te implementeren. De exacte hoogte weet je ook niet, dat verschilt per browser.
Viewport, dat was ’m. Voorkauwen hoeft ook niet zie het wel als een uitdaging maar het tijdstip verraad wellicht dat het vrij pittig voor me was. Ga kijken wat ik met je tip kan doenquote:
[..]
fixed in de viewport?
En wat bedoel je met viewfinder? de viewport?
Je kan die content wrapper en die laten scrollen. Dit is wel een lastige case, hier moet je gewoon goed over nadenken en kijken hoe je het op kan lossen. Het is mij net even teveel werk om het voor te kauwen.
Dat is op zich te doen omdat het om afbeeldingen gaat, client heeft een vrij specifiek ontwerp in gedachte en is hier vrij secuur over. Dit is een van die gevallen waar het met een tabel zo opgelost zou zijn. Bij een netbook en mobiel scherm kan ik met media-queries een alternatief bieden onder een bepaalde hoogte.quote:
Je content moet dus horizontaal met de content meegroeien?
Dat is niet mogelijk met CSS, dat wordt javascripten. Maar ik denk dat je je nog eens achter de oren moet krabben of je dat echt wilt.
Bedenk ook eens hoe je layout er uitziet op een netbook met een viewport van 450px hoog ofzo.
Bedankt voor de link maar dit is niet echt een uitdaging of waar ik naar op zoek ben. Heb iets soortgelijks al een keer gedaan waar de artikelen een skyline moesten vormen over de horizon.quote:
[..]
Dan kan je het wel overwegen. Bij mijn sites zit het tussen de 20 a 30%
Wat betreft het probleem van n8n, misschien dat je hier nog wat aan hebt.
http://webdesign.tutsplus(...)nted-website-design/
Ga het in ieder geval nog proberen en zal mijn oplossing -mocht deze nog komen- hier delen.
Waarom is een lang verhaal, niet relevant!quote:
het kan wel, maar het is gepruts. Waarom zou je het mogelijk willen?
Ik wil het gewoon heel graag, is er niet een simpele code die er voor kan zorgen dat de iframe een paar pixels lager begint?
Ik hou me altijd ver van iFrames want het is echt verschrikkelijk om mee te werken dus ik kan je hier niet mee helpen
Dit is een beetje een vraag van het niveau "ik wil een huis bouwen, ik weet al hoe een deur werkt, hoe moet de rest?"quote:
[..]
Bedankt, maar ik kom er zelf nog niet uit na een beetje googlen.
Dit is een standaard iframe code:
[ code verwijderd ]
Welke code kan ik hier aan toevoegen zodat in dit geval de w3schools.com in een iframe beland maar dan zonder het logo en het menu bovenaan?
Wij weten ook niet alles uit ons hoofd hier. Je weet nu waar je op moet zoeken, dus probeer eerst eens zelf iets.
Kijk ik heb er helaas ook niet heel veel verstand van, werk voornamelijk en alleen met wordpress. Ik dacht dat iemand zoiets hier wel zou herkennen, helaas maar toch bedankt voor jullie meedenken! Echter als ik zoek op google krijg ik allemaal lange en vage codes te zien waar ik de ballen van snap. Had gehoopt op een heel klein stukje code dat ik dan ertens tussen kan schijten.quote:
[..]
Dit is een beetje een vraag van het niveau "ik wil een huis bouwen, ik weet al hoe een deur werkt, hoe moet de rest?"
Wij weten ook niet alles uit ons hoofd hier. Je weet nu waar je op moet zoeken, dus probeer eerst eens zelf iets.
Laat ik het zo zeggen wat probeer je te bereiken?
Lang verhaal om dat goed uit te kunnen leggen. Maar het komt er op neer dat ik mijn website gebruikers/abonnees toegang wil geven tot hun profiel zonder dat ze daadwerkelijk aan de achterkant van mijn website komen. Nu heb ik een aparte persoonlijke profiel pagina aangemaakt aan de voorkant met ee. Iframe, dit werkt goed, hetzij dat ik het dus nog iets wil tweaken.quote:
Omg Iframes waarom Iframes?
Laat ik het zo zeggen wat probeer je te bereiken?
Heb jij voor mij dan een alternatief zodat abonnees toch nog de achterkant van de website kunnen zien aan de voorkant? Aangezien ik de admin bar laat verdwijnen wil ik ze uberhaupt niet alleen maar aan de andere kant van de site laten.quote:
Met rechten werken?quote:
[..]
Heb jij voor mij dan een alternatief zodat abonnees toch nog de achterkant van de website kunnen zien aan de voorkant? Aangezien ik de admin bar laat verdwijnen wil ik ze uberhaupt niet alleen maar aan de andere kant van de site laten.
ik heb een container met daarin twee div's
div 1 = tekst
div 2 = foto
nu staat de tekst boven de foto, ik wil het iets veranderen en de tekst over de foto plaatsen met een 50% alpha achtergrond.
Die achtergrond enzo lukt wel, maar het lukt mij niet om de ene div over de andere te plaatsen, ik heb een aantal tutorials gelezen en uitgevoerd maar nog lukt het niet.
De css:
ledenbox is container
fotobox is foto
ledenboxtxt is de tekst
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #ledenbox { vertical-align: bottom; float:left; text-align:center; background: #eee; display:block; height:72px; width:78px; margin:2px; border:1px solid #ccc; padding:0px; } #fotobox { display: block; width:76px; height:70px; background: #333; } #ledenboxtxt { font-size:12px; font-family:Arial; } |
hoe het nu uitziet:
hoe ik het wil (dit ff in paint gedaan dus hier geen alpha bg, maar dat boeit niet)
anyone?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="ledenbox"> ledenbox <div id="fotobox"> foto hier <div id="ledenboxtxt"> tekst hier bla bla </div> </div> </div> |
Ik heb een formulier, hierop is een dropdownmenu met een aantal problemen
| 1 2 3 4 5 | <td>Probleemtype </td> <td><select name="probleemtype" id="probleemtype"> <? $problemen = $po->showProblemen($probleemid); ?> </select> </td> |
Afhankelijk van de selectie moet hij een tweede dropdownmenu tonen met de oplossingen die eraan gekoppeld zijn. (problemen aparte tabel / oplossingen aparte tabel / en een koppeltabel)
Maar hoe kan ik het beste de waarde uitlezen om vervolgens op 1 of andere manier bij een php qry uit te komen en het resultaat hiervan weer in een dropmenu te zetten?
De waarde heb van het probleem. Nu dus nog het ophalen van de oplossingen die eraan zijn gekoppeld en die gegevens in een dropmenu gooien.quote:
Zet een handler op het onchange event van de dropdown.
nog ideeen?
Ajax call dmv jQuery doen, vervolgens een content veld updaten met de waardes die je binnen krijgt en dan tonen?quote:
[..]
De waarde heb van het probleem. Nu dus nog het ophalen van de oplossingen die eraan zijn gekoppeld en die gegevens in een dropmenu gooien.
nog ideeen?
ja zoiets inderdaad. maar heb je evt soort van voorbeelden hoe dat eruit zou zien de diverse calls enzo?quote:
[..]
Ajax call dmv jQuery doen, vervolgens een content veld updaten met de waardes die je binnen krijgt en dan tonen?
Want het globale plaatje snap ik nu.
En dat het ook daadwerkelijk zou moeten lukken 
moet dat niet
<?=$po->showProblemen($probleemid); ?>
zijn?
Het lijkt me dat showProblemen() een functie is die zelf al echo't, maar dat was de hele vraag natuurlijk nietquote:
<? $problemen = $po->showProblemen($probleemid); ?>
moet dat niet
<?=$po->showProblemen($probleemid); ?>
zijn?
.| 1 2 3 4 5 6 7 8 9 10 11 | <?php $("#probleemtype").change(function() { var probleemid = $("option:selected", this).val(); $.get("/getprobleembyid.php?pid=" + probleemid, function(data) { $(data).each(function() { $("#probleemkeuze").append($("<option />").text(data.titel).attr("value", data.id)); }); /* ofzo */ }); }); ?> |
quote:
[..]
ja zoiets inderdaad. maar heb je evt soort van voorbeelden hoe dat eruit zou zien de diverse calls enzo?
Want het globale plaatje snap ik nu.
| 1 2 3 4 5 6 7 8 | <?php <select id="first" onchange="javascript: bla("first");"> <option></option> <option></option> </select> <select id="hiddenSelect" style="display: hidden;"></select> ?> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php var bla = function(id){ var selectedOption = $("#"+id+" option:selected"); ({ url: "test.html", context: document.body, success: function(data){ // doe hier updaten van je hidden select $(data).each(function(){ $("#hiddenSelect").append($("<option />").text(this.titel).attr("value", this.id)); }); $("#hiddenSelect").show(); } }); } ?> |
Ohja, die append is eigenlijk wel mooier. Alleen moet je wel even de loop nakijkenquote:
Die moet je dan niet assignen aan een variabele, dat slaat nergens op.
[ code verwijderd ]
Moet zeggen dat het nog een beetje abacadabra eruit ziet, maar wie weet kom ik ergens
Dit was halve pseudocode uit mijn mouwquote:
[..]
Ohja, die append is eigenlijk wel mooier. Alleen moet je wel even de loop nakijken
Cue: je moet dus eerst de opties weghalen. Wat je ook kan doen, wat makkelijker is als je geen jQuery kan, is de select in je php opbouwen en die gewoon in je dom pleuren.
Ik wil het volgende:
De inhoud van drop-down lists weergeven in een text box. In dit geval zijn er vier drop-down lists. Ik wil dat elke optie in de drop-down lists een stukje HTML-code 'doorstuurt' naar de text box. Uiteindelijk krijg je dus vier geselecteerde keuzes, die allemaal een stukje HTML-code in de text box plaatsen, achter elkaar.
Stel, ik kies bij 1 voor 'Links', bij 2 voor 'Ja', bij 3 voor 'Nee' en bij 4 voor 'Rechts'. Ik wil dan het volgende zien verschijnen in de text box:
| 1 | <img src="links.jpg" /><img src="ja.jpg" /><img src="nee.jpg" /><img src="rechts.jpg" /> |
Is zoiets mogelijk om te maken? Zo ja, waar moet ik dan naar zoeken?
[ Bericht 0% gewijzigd door #ANONIEM op 25-01-2012 19:42:30 ]
Je kan het beste met een JavaScript library werken (dat maakt de code wel zo gemakkelijk), bijv jQuery. Wat je dan nodig hebt:
1. een event afvangen in javascript (namelijk het veranderen van de dropdown) die een functie afvuurt.
Bijvoorbeeld in jQuery, met al je dropdowns in een form met de id #dropdown:
| 1 | $('#dropdown select').change(my_function()); |
Elke keer als er dan een dropdown verandert wordt die functie afgevoerd.
2. een functie die doet wat je wil. Ongetest voorbeeldje, waarbij elke input de class "selectx" heeft:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | my_function(){ //waardes uit de dropdowns pakken var option1 = $('.select1 option:selected'); var option2 = $('.select2 option:selected'); etc... //inhoud van het veld opbouwen var output = "<img src='" + option1 + ".jpg' /><img src='" + option2 + "' />"; //output naar het textvak sturen $('#outputveld').attr('value', output); } |
Kan je hiermee verder? Het is ongetest, maar geeft in elk geval een idee van waar je heen moet.
[ Bericht 0% gewijzigd door picodealion op 25-01-2012 20:15:52 ]
..text() in het geval van <option> elementen, en ik was vergeten 'function' voor de functienaam te zetten. We waren al per PM verder gegaan inmiddelsquote:
nog even. .value() achter de optionsselector doen en je bent er
.quote:
Op 
.| 1 2 3 4 5 6 7 | var eenHeleGroteObject = { "valueNiveau1": { "valueNiveau2IsEenArrayMetObjecten": [ { "key": "value" }, { "key2": "value2" } ] } }; |
| 1 | var mijnString = "valueNiveau1"; |
Zonder de variabel zou je kunnen doen: eenHeleGroteObject.valueNiveau1 wat dus een Array geeft.
Ik heb ook eventueel jQuery, dus functies van jQuery kan ik ook gebruiken indien nodig.
Iemand een idee? Bvd.
Klopt.quote:
Volgens mij gewoon eenHeleGroteObject[mijnString]? (Als ik tenminste je verhaal goed begrijp)
Ik was stom bezig
Thanks.
Ik wil dat "het van jou" op dezelfde plek begint als "Welke".
Het element is gewoon een <a> die op een volgende regel valt doordat de div niet breder is. De div breder maken is geen optie. De ">" zit bij het element in.
Ik kan er gewoon plaatjes van maken maar dat voorkom ik uiteraard liever.
http://jsfiddle.net/aAEhw/
Thanks!
Ik wil graag een minimalistisch HTML5 audio player. Nu zie ik dat het redelijk simpel is met het commando <audio> maar dan krijg je al een (naar mijn mening) te uitgebreide speler zoals:
Heeft/Weet iemand een manier om alleen een Play/Pause/Stop knop te krijgen met HTML5? Dus een play knop, zodra je die klikt start het muziek en dan heb je alleen nog de optie om te pauzeren/stoppen.
http://www.catswhocode.co(...)html5-audio-property
| 1 2 3 4 5 6 7 8 9 | <audio> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > </audio> <div> <button onclick="document.getElementById('player').play()"><img src="Play.png"></button> <button onclick="document.getElementById('player').pause()"><img src="Pause.png"></button> </div> |
Nu alleen uitvogelen hoe ik die button style kan bewerken zodat het past op mijn pagina.
.Dus kan ik die .png bestanden direct linken aan onclick?quote:
Je kan onclick ook aan andere elementen hangen hoor
Even uitproberen!
Javascript events kunnen aan vrijwel elke zichtbare HTML tag gekoppeld worden.quote:
[..]
Dus kan ik die .png bestanden direct linken aan onclick?
Even uitproberen!
Oke, wist ik niet!quote:
[..]
Javascript events kunnen aan vrijwel elke zichtbare HTML tag gekoppeld worden.
Hoe bedoel je dat precies?quote:
Is dit ongeveer iets in de goede richting:
| 1 | <img src="Play.png" onclick="document.getElementById('player').play()"> |
Kan het momenteel niet testen.
Maar je kan dit beter extern oplijmen, is toch netter.
Dit bedoelde ik inderdaad. En wat Catch22- zegt, je kan beter styles (en scripts) in aparte .css en .js bestanden zetten, maar als de onclick de enige javascript is die je gebruikt is dit wel prima zo.quote:
[..]
Oke, wist ik niet!
[..]
Hoe bedoel je dat precies?
Is dit ongeveer iets in de goede richting:
[ code verwijderd ]
Kan het momenteel niet testen.
Ik heb inderdaad bijna geen javascript verder en vandaar dat ik dit dan ook zo doe. Nog een laatste vraag (voor nu
);| 1 2 3 4 5 6 7 8 9 10 | <audio> <source src="audio/1.mp3" type="audio/mp3" > <source src="audio/1.ogg" type="audio/ogg" > </audio> <div> <img src="Play.png" style="cursor:pointer" onclick="document.getElementById('player').play()"> <img src="Pause.png" style="cursor:pointer" onclick="document.getElementById('player').pause()"> </div> |
Wat doe ik verkeerd? Muziek speelt niet af.
Hoe moet de browser anders weten wat getElementById('player') is?
Dat was het inderdaad, bedankt. Ik dacht dat de browser automatisch de audio speler herkent!quote:
doe eens <audio id="player"> ipv <audio>
Hoe moet de browser anders weten wat getElementById('player') is?
ik heb een formulier, met 1 submit button erop die ervoor zorgt dat de gegevens opgeslagen en gemaild worden.
Maar nu is het zo dat wat ik ook doe in het form, die button is gelecteerd (focus erop). zodat als ik maar 1x per ongeluk op enter druk het formulier wordt verzonden.
Hoe krijg ik dit het mooiste weg?
Naar mijn form?quote:
Op 
maar ik gebruik die functionaliteit zelf best vaak en het is standaard behaviour dus ik vraag me af of je dat moet willen.
Ik heb al twee gebruikers gehad die er last van hebben gehad. En dit zijn zeg maar de snuggere van degene die het gaan gebruiken.quote:
de onkeydown van de enterknop registreren en bij een enter een return false; doen?
maar ik gebruik die functionaliteit zelf best vaak en het is standaard behaviour dus ik vraag me af of je dat moet willen.
Maar die onkeydown.. dat zou ik dan bij elk veld moeten neerplempen?
Klopt is het ook. Want vervolgens verwerk ik de gegevens.quote:
Cue_: wss is het een submit button ipv een gewone knop.
| 1 2 3 | <?php $("button#fakeSubmit").click(function() { $(this).closest("form").submit(); }); ?> |
jQuery wordt niet gebruikt bij deze en zelf ook geen ervaring mee nog. Maar in ieder geval dus richting gewone button gaan.quote:
Dan zou ik de submitbutton vervangen door een <button> en dit stukje jQuery plaatsen (als je dat gebruikt, anders even vertalen.
[ code verwijderd ]
(phptags voor de highlighting)
| 1 2 3 | <?php <button value="Opslaan" onclick="document.getElementById('myForm').submit()"/> ?> |
Het probleem is dus dat mensen het formulier te vroeg versturen voordat ze alles ingevuld hebben? Zit daar dan geen validatie op?
Geweldigquote:
Was inderdaad al op zoek gegaan naar de juiste syntax voor de onclick.
Op dit moment maak ik voor deze opdracht nog geen validaties op velden. Het is eerst maar bekijken of het wordt gebruikt en hoe vaak.quote:
Enter in een text input = versturen. Dat is altijd al zo en standaard functionaliteit.
Het probleem is dus dat mensen het formulier te vroeg versturen voordat ze alles ingevuld hebben? Zit daar dan geen validatie op?
Daarbij zijn de mensen hier zo gewend om in andere applicaties met 'enter' naar het volgende veld te gaan dat dat gewoon geen optie is om dat als functie erachter te hebben.
I know, maarja gebruikers die gewend zijn aan BAAN enzo. Doen alles met enter.quote:
Enter naar een volgend veld? Daar heb je tab voor.
Tijd om ze te heropvoeden. Gewoon bij elke enter die ze geven in een textfield een dubbele alert geven, leren ze het snel genoeg af.quote:
[..]
I know, maarja gebruikers die gewend zijn aan BAAN enzo. Doen alles met enter.
quote:
Tijd om ze te heropvoeden. Gewoon bij elke enter die ze geven in een textfield een dubbele alert geven, leren ze het snel genoeg af.
zou leuk zijnHet gaat hier over een website met een aantal foto's, als je op één foto klikt zou het in een lightbox moeten komen. Als je nu op een foto klikt opent het zich in een nieuw venster in plaats van in een lightbox. Nu ben in al enige tijd aan het zoeken waar het probleem zit, ik heb namelijk het idee dat het iets kleins is. Is er iemand die dit probleem kent of die weet waar ik dan ongeveer moet gaan zoeken.
Alvast bedankt!
Kijk in een browser met een javascript console (firefox + firebug zou ik aanraden) welke foutmelding hij geeft.quote:
Ik houd wat websites bij voor een kennis van me, maar wij stuiten nu tegen een probleem. Ik ben er nu zelf naar aan het kijken, maar ik ben met dat betreft een leek.
Het gaat hier over een website met een aantal foto's, als je op één foto klikt zou het in een lightbox moeten komen. Als je nu op een foto klikt opent het zich in een nieuw venster in plaats van in een lightbox. Nu ben in al enige tijd aan het zoeken waar het probleem zit, ik heb namelijk het idee dat het iets kleins is. Is er iemand die dit probleem kent of die weet waar ik dan ongeveer moet gaan zoeken.
Alvast bedankt!
Dankje, weet je misschien ook hoe ik de javascript debugger inschakel?quote:
[..]
Kijk in een browser met een javascript console (firefox + firebug zou ik aanraden) welke foutmelding hij geeft.
"enabling javascript debugger to support console"
"enabling javascript debugger to support JavaScriptTool"
Misschien stomme vraag, maar jullie weten het mij waarschijnlijk zo te vertellen.
Dit is mijn foutmelding nu..
element.dispatchEvent is not a function
Volgens mij heeft die foutmelding niks met de lightbox te maken. Dat maakt het weer lastiger. Ik denk dat ik het maar aan een kundiger iemand overlaat. Ik denk dat het te complex is om het hier op te lossen. Toch bedankt voor jullie snelle reactie's!
[ Bericht 13% gewijzigd door StefannPSV op 02-02-2012 14:08:00 ]
.PopularPosts1 a {
font-size: 8px;
}
Echter maakt dit geen verschil. Waar kan dit door komen?
Is een link ,<a>, de gebruikte tag voor de titels? indien ja moet het met de # werken.
.bla is om een class te selecteren
#bla voor een id
quote:
Omdat je een id met # in je CSS verwerkt, niet met een punt.
Volgens mij had ik dat ook al geprobeerd maar ik ga het nogmaals proberenquote:
Omdat je een id met # in je CSS verwerkt, niet met een punt.
.edit: Niet dus! Super super super bedankt!
Ik wil graag dit effect op mijn site hebben,
http://webdesignerwall.co(...)ment-page-6#comments
Alleen het is voor mij onduidelijk wat ik moet doen.
De stappen zijn als volgt:
1. include a copy of jquery.js (Waar is die?)
2. paste the code as shown above (In mijn index.html neem ik aan?)
3. set the target image (eg: .post-img, img, .gallery img, etc.) (waar in de code kan ik mijn afbeeldingen toevoegen?)
4. you may change the animation speed (ie. 1000 = 1 second)
Ik heb 0,0 verstand van coderen vandaar al mijn vragen, met Google kwam ik er niet uit.. iemand ?
Ik wil best mensen helpen, maar het is een topic voor dummyes, niet "dump je vraag hier en de nerds lossen het wel op"
Of denken anderen hier anders over?
Help ik je toch iets op weg.quote:
Hallo !
Ik wil graag dit effect op mijn site hebben,
http://webdesignerwall.co(...)ment-page-6#comments
Alleen het is voor mij onduidelijk wat ik moet doen.
De stappen zijn als volgt:
1. include a copy of jquery.js (Waar is die?)
Zoek eens op "Jquery download"
2. paste the code as shown above (In mijn index.html neem ik aan?)
Waar je de code wil. Beste is in een los bestand die je include met een <script src="" ></script> tag
3. set the target image (eg: .post-img, img, .gallery img, etc.) (waar in de code kan ik mijn afbeeldingen toevoegen?)
Op de gele vlakken waar nu .item img staat. Dit doe je met CSS selectors. Dat mag je opzoeken.
4. you may change the animation speed (ie. 1000 = 1 second)
Oh daar heb ik ook geen problemen mee hoor, moet alleen nog even nadenken over mijn uurtarief.quote:
Begin eens met een tutorial.
Ik wil best mensen helpen, maar het is een topic voor dummyes, niet "dump je vraag hier en de nerds lossen het wel op"
Of denken anderen hier anders over?
Heb je zelf al iets geprobeerd?quote:
Hallo !
Ik wil graag dit effect op mijn site hebben,
http://webdesignerwall.co(...)ment-page-6#comments
Alleen het is voor mij onduidelijk wat ik moet doen.
De stappen zijn als volgt:
1. include a copy of jquery.js (Waar is die?)
2. paste the code as shown above (In mijn index.html neem ik aan?)
3. set the target image (eg: .post-img, img, .gallery img, etc.) (waar in de code kan ik mijn afbeeldingen toevoegen?)
4. you may change the animation speed (ie. 1000 = 1 second)
Ik heb 0,0 verstand van coderen vandaar al mijn vragen, met Google kwam ik er niet uit.. iemand ?
Excuses, het is niet mijn bedoeling om mijn werk op te laten lossen. Het staat je dan natuurlijk vrij om te reageren (of niet).
Waar is je code, hoe kunnen wij zien wat het wel en niet doet?
Wat heb je zelf gedaan om het op te lossen?
Op http://www.mirelmasic.nl/fotos/zwart-wit-edits/ staat er nu eentje met een like, dus het wolkje ernaast met het nummertje erin is te zien. En hier is een post zonder like: http://www.mirelmasic.nl/filmpjes/mensen-in-het-wild/
Ik heb het een rode achtergrond gegeven om te laten zien hoe het er nu uitziet. Er mag helemaal geen ruimte rechts zijn, en eronder ook niet.
In firefox is het ook nog eens 'vind ik leuk' ipv 'like', en op de addthis website staat ergens dat je het in andere talen kan doen, maar ik kan het niet vinden op hun site. Ik heb geprobeerd mijn eigen afbeelding te gebruiken door het tussen de <a> tags te doen maar dan werkt de counter niet.
Ik kan ook nergens vinden hoe je die ruimte weg kan halen
.addthis_toolbox{margin:0; padding:0;} doet bijvoorbeeld helemaal niks. De background:red; code staat daar wel in.Een user had hier laatst voor me deze code gevonden voor m'n FB post knopje: addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m. Ipv 300 staat er bij de like button een ander nummertje, maar als ik dan dit vervang met 250, het nummer van de like knop, gebeurt er niks.
Ook nergens te vinden op die site van hun.
TL;DR: Ik wil dit in iedere browser. Maar bij de pagina's zonder like zit er dus een leegruimte daar. En of die like knop dan doorschuift weet ik niet.. Eventueel dan omdraaien, maar weet niet of dat kan. Met like:
Zonder:
[ Bericht 2% gewijzigd door Mirel op 07-02-2012 11:26:56 ]
Is daar wel iets aan te doen?
Neuh het is een iframe en de knop lijnt uit naar links in het iframe.quote:
dat ding is niet lekker te plaatsen omdat de afmetingen dynamisch zijn ivm vertalingen. Kan je hem niet gewoon stijf rechts uitlijnen ofzo?
Beter zou imo eigenlijk zijn sowieso die hele facebook-api niet te gebruiken en gewoon zelf een link samen te stellen ofzo. Heb je ook niet dat iedereen door facebook getraced wordt op jouw website.
EDIT: Gefixt, was een overflow problem.
[ Bericht 12% gewijzigd door Neraice op 07-02-2012 19:31:53 ]
quote:
Ik heb het Facebook Like probleem opgelost: www.mirelmasic.nl
http://www.meijerbouwservice.nl/7/Over-Meijer
rechtsboven blijft home | inloggen op een vaste plaats
als je het venster groter of kleiner maakt dan wordt de foto niet uitgerekt
maar er wordt meer zichtbaar.
Hoe werkt zoiets?
gewoon een hele breede foto gebruiken??
Hij heeft een breedte meegekregen vanaf links (980 pixels) en is binnen dat element rechts uitgelijnd.quote:
site zegt meer dan woorden
http://www.meijerbouwservice.nl/7/Over-Meijer
rechtsboven blijft home | inloggen op een vaste plaats
als je het venster groter of kleiner maakt dan wordt de foto niet uitgerekt
maar er wordt meer zichtbaar.
Hoe werkt zoiets?
Ik zie nog steeds een klein stukje van waar normaal het aantal likes staat.quote:
Ik heb het Facebook Like probleem opgelost: www.mirelmasic.nl
Maar zal binnenkort wel wat elementen redesignen.http://www.meijerbouwserv(...)f92b13c-1895-610.jpgquote:
site zegt meer dan woorden
http://www.meijerbouwservice.nl/7/Over-Meijer
rechtsboven blijft home | inloggen op een vaste plaats
als je het venster groter of kleiner maakt dan wordt de foto niet uitgerekt
maar er wordt meer zichtbaar.
Hoe werkt zoiets?
gewoon een hele breede foto gebruiken??
Doet je rechtermuisknop het niet?
En Chrome.quote:
Ja dat is in Firefox. Geen idee waarom, die code is niet aangepast ofzo, komt rechtstreeks van hun site
Bijvoorbeeld <icon>?
Dan heb ik het dus over...
| 1 | <div eenattribuut='eenwaarde'> |
In HTML5 wel ja.quote:
daar mag je,met de correcte doctype, het data-* attribuut voor gebruiken
HTML (en CSS) is forward compatible, dus in principe worden niet herkende tags genegeerd.quote:
Er gaat niets kapot en je kan die dingen ook met JS gaan oplijmen, maar dat is niet altijd even handig.quote:
Ik vind het toch een lastig iets, die data-attributes. Ik ben nogal snel geneigd om er opties voor Javascript in te hangen (bijv. de duur van een animatie op een element o.i.d.)... Maar dan ben je die strikte scheiding tussen content, vorm en gedrag weer kwijt...
Browser resizen naar iets kleins.
http://dahndesigns.net/summit/
In Chrome laat ie wel een andere backside zien, maar in Safari en op de iPhone gewoon de gespiegelde voorkant? :S
Ofzo.
Heb nu dit:
$(".container").toggleClass("containeractive");
$(".mobilemenu").toggleClass("mobilemenuactive")
Maar goed, volgens mij heeft jQuery gewoon een delay() functie. Dan zou het zoiets worden gok ik (al maanden geen jQuery gedaan):
| 1 | $(".container").delay(500).toggleClass("containeractive"); |
H5BP en CSS heb ik geen jQuery voor nodig.
http://lmgtfy.com/?q=delay+jqueryquote:
Die functie had ik al geprobeerd, werkt helaas niet.
H5BP en CSS heb ik geen jQuery voor nodig.
Ik kwam er gewoon niet uit, ben nu bezig met een andere oplossing.
http://support.addthis.co(...)-it-right?new=176005
www.mirelmasic.nl random post
Code is gewoon:
| 1 2 3 4 | <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f30145f710099d4"></script> |
Even iets anders. Ik wil een custom scrollbalk, die de gewone vervangt van de browser. Ik weet dan niet of ik hier moet wezen:
http://jscrollpane.kelvinluck.com/
Heb de bestanden gedownload en in een map gezet, en dit geprobeerd in de head, maar het werkt niet:
| 1 2 3 4 5 6 7 8 | <link type="text/css" href="<?php bloginfo('stylesheet_url'); ?>/js/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery.jscrollpane.min.js"> $(function(){ $('#section-scroll').jScrollPane(); }); </script> |
[ Bericht 20% gewijzigd door Mirel op 13-02-2012 13:03:04 ]
Ik wil iets dat er een winner geselecteerd wordt uit een x aantal namen. Gezocht en dit gevonden: http://primaryschoolict.com/random-name-selector/. Het werkt en het ziet er nog eens mooi uit ook!
Code ietwat aangepast en getest, het werkt. Yay! (Voorbeeld met 10 namen: http://fok.zargon.nl/topic/1762349/naam.html.)
Maar nu kom ik erachter dat wanneer veel namen in de array zet, de winnaar pas een aantal seconden later gehighlight wordt. (Voorbeeld met véél meer namen: http://fok.zargon.nl/topic/1762349/namen.html.)
Te traag... Is er een manier om het hightlighten vlotter te maken? Ik heb gespeeld met de tijden en dergelijke, maar het ligt echt aan het aantal namen.
Of weten jullie misschien een betere methode?
| 1 2 3 4 5 | #result1 { background-color: black; color: rgb(223, 223, 223); height: 117px; } |
Alleen... dat de winnaar pas gehighlight wordt op het einde wil ik graag behouden. Enig idee hoe dat kan?
.Is het vmogelijk om een knopje te maken waarmee je die div vastzet? Voor gebruikers met een te klein scherm, voor als de div te lang wordt?
Bedankt
maak er .done #result1 van en voeg de .done class toe aan een parent als eea klaar is?quote:
Thanks! Dat werkt inderdaad. Beter dan niets!
Alleen... dat de winnaar pas gehighlight wordt op het einde wil ik graag behouden. Enig idee hoe dat kan?
Dat is mogelijk.quote:
Ik wil er met een scriptje voor zorgen dat een div (Of iets anders, als het moet) met de pagina meescrollt. Zoals de "Frontpage | Sport |Etc"-balk bovenin van FOK!.
Is het vmogelijk om een knopje te maken waarmee je die div vastzet? Voor gebruikers met een te klein scherm, voor als de div te lang wordt?
Bedankt
ben er een beetje mee aan het spelen
maar ik snap m nie..
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript"> $(document).ready(function(){ $(".??").mouseenter(function(){ $(".??").animate({top:"-40px"},"fast"); $(".??").animate({top:"-20px"},"fast"); }); $(".??").mouseleave(function(){ $(".??").animate({top:"20px"},"fast"); $(".??").animate({top:"0px"},"fast"); }); }); </script> </head> <body> <br /><br /> <div id="test"> <img src="facebook.png" /> <ul class="gallery"> <li><img src="facebook.png" /></li> <li><img src="facebook.png" /></li> </ul> </div> |
Als probeerseltje wil ik een icoontje een beweging laten maken
Nu lukt het wel om een div of class de beweging te laten maken zodat alle icons bewegen.
Hoe kan ik alle icoontjes nu aparte laten bewegen? Kan dit wel op mijn manier? Wat moet ik dan op de ?? zetten
| 1 2 3 | <?php $(".test img") ?> |
Geeft alle images binnen elementen met id "test"
| 1 2 3 | <?php $(".test") ?> |
Geeft alle elementen met id "test" terug.
| 1 2 3 | <?php $("#test") ?> |
Geeft alle elementen met class "test" terug.
Maar dan net andersomquote:
[ code verwijderd ]
Geeft alle images binnen elementen met id "test"
[ code verwijderd ]
Geeft alle elementen met id "test" terug.
[ code verwijderd ]
Geeft alle elementen met class "test" terug.
$(":image") All input elements with type="image"
is volgens w3schools
met
$(".test:img")
gaat toch alles mee...
misschien heb ik mijn probleem niet heel goed omschreven
maar van een rij icoontjes wil ik dat degene beweegt waar ik met de muis op kom
alleen die..en niet alle andere img die in de zelfde div of class staan
op ed.nl (halverwege de pagina) staat eigenlijk wat ik wil
probeer dit na te maken, om van te leren
Ik kan het trouwens niet zien hoe ze het daar gemaakt hebben
toch wel [ Bericht 39% gewijzigd door MrNiles op 16-02-2012 15:39:31 ]
| 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 | // FlexSlider <- dit moet geladen worden in de ajax content $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); $(document).ready(function() { // Check for hash value in URL var hash = window.location.hash.substr(1); var href = $('.menu li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #portfolio'; $('#portfolio').load(toLoad) } }); $('.menu li a').click(function(){ var toLoad = $(this).attr('href')+' #portfolio'; $('#portfolio').slideUp('fast',loadcontent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadcontent() { $('#portfolio').load(toLoad,'',showNewcontent()) } function showNewcontent() { $('#portfolio').slideDown('slow',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); }); |
[ Bericht 49% gewijzigd door Neraice op 17-02-2012 17:42:20 ]
quote:Op zondag 8 januari 2012 00:25 schreef picodealion het volgende:
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 ([ afbeelding ]), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Wat ik dus wil is de slider pas laden na de AJAX-load van de container, zoals PimD zegt. Dit lukt me echter niet ( ben niet zo'n jQuery held).
quote:
Hoe kan ik de AddThis Like knop fixen zodat 'ie het ook in Firefox doet? Als je iets liket, dan zie je het tekstwolkje naast de like knop niet. Op het AddThis forum zeggen ze niks. Ik ben niet te spreken over hun behulpzaamheid.
http://support.addthis.co(...)-it-right?new=176005
www.mirelmasic.nl random post
Code is gewoon:
[ code verwijderd ]
Even iets anders. Ik wil een custom scrollbalk, die de gewone vervangt van de browser. Ik weet dan niet of ik hier moet wezen:
http://jscrollpane.kelvinluck.com/
Heb de bestanden gedownload en in een map gezet, en dit geprobeerd in de head, maar het werkt niet:
[ code verwijderd ]
Met die like-buttons ben ik niet bekend, maar je scrollbalk zou met die header in feite gewoon moeten werken.quote:
Zie hier een werkend voorbeeld
SPOILER: En de 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<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mirel</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
<style type="text/css">
.scroll-pane{
width:760px;
height:200px
}
</style>
</head>
<body>
<div class="scroll-pane" style="width: 760px; height: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et semper ante. Duis dignissim velit arcu. Phasellus aliquet neque a leo dictum non pharetra magna porta. Maecenas ac purus diam, a sagittis tortor. Etiam hendrerit, ipsum vel congue dapibus, felis nisl ultrices arcu, pellentesque tincidunt nibh mi ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fringilla, dui non iaculis fermentum, nisi urna suscipit metus, sit amet condimentum eros odio vel nulla. Nullam vestibulum sollicitudin diam non ultrices. Donec ut felis libero. Nam rhoncus commodo elit, et dignissim magna facilisis sit amet. Sed id diam nisi, a varius sem. Donec vel lacus ligula, et elementum velit. Nullam elit orci, feugiat sit amet pretium et, gravida a nunc.</p>
<p>Phasellus id nibh enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin ultricies nunc eu eros mollis lacinia. Suspendisse tincidunt lectus a felis ornare aliquam. Aliquam rhoncus semper dui, in volutpat ante volutpat id. Etiam turpis libero, porttitor eu pretium a, tincidunt vel arcu. Aliquam bibendum semper massa, ut porttitor lectus sodales at. Quisque tempus enim sed tellus ornare dictum. Proin ac diam neque, vitae malesuada felis. Aliquam erat volutpat.</p>
<p>Phasellus lectus lectus, tempus ut pulvinar blandit, rutrum nec odio. Aenean consectetur dolor sed enim ullamcorper hendrerit bibendum libero convallis. Donec mollis quam nec quam consectetur vel pellentesque quam accumsan. In porttitor cursus turpis in hendrerit. Donec fringilla sagittis libero ut pellentesque. Praesent vulputate mattis enim, a tristique nisi tempor non. Sed porta imperdiet leo, eu placerat nibh adipiscing sodales. Sed id volutpat dolor.</p>
</div>
</body>
</html>
[ Bericht 2% gewijzigd door BBQSausage op 18-02-2012 12:51:11 ]
ik zie witte leegtequote:
[..]
Met die like-buttons ben ik niet bekend, maar je scrollbalk zou met die header in feite gewoon moeten werken.
Zie hier een werkend voorbeeldSPOILER: En de code[ code verwijderd ]
edit: inmiddels doet 'ie het. Maar ik wil een script waarbij de gewone scrollbalk van de browser zelf vervangen wordt. Helemaal rechts. Niet binnen een div
oh ja, natuurlijkquote:Op zaterdag 18 februari 2012 14:18 schreef Tijn het volgende:
Dan zet je het toch gewoon op het body-element ipv een div?
quote:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
Hoog hobby gehalte wat mij betreft. Als ik dat op een website zie ga ik vanquote:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
naar naar 
naar naar 
quote:Op zaterdag 18 februari 2012 14:03 schreef boem-dikkie het volgende:
Je werkende voorbeeld faalt hier nogal.
Vreemd, hier werkt ie prima in FF,Chrome & IE.designers hebben er nogal een handje van. niet doen inderdaad. gewoon nietquote:
Custom scrollbalken. Ik snap echt niet dat mensen browser gedrag/controls gaan proberen te customizen. Custom scrollbalken, zelf een select-box maken met CSS, print-knoppen aanbieden op de website, previous/next knoppen... Zo moe word ik er van.
Ik heb de volgende code: (code van de tekst op een footer)
| 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 | <div class="layout-col-01"> <div class="block"> <div style="margin-top: 0px;"> <table style="height: 221px;" class="klantenservice" border="0"> <tbody> <tr> <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left"> <strong><span style="color: #333333; font-size: 12px;">Website</span></strong> <ul> <p><li><a target="_self" href="http://www.site.nl">Bedrijfsinformatie</a></li></p> <p><li><a target="_self" href="http://www.site.nl">Contact</a></li></p> <p><li><a target="_self" href="http://www.site.nl"> Keurmerk</a></li></p> <p><li><a target="_self" href="http://www.site.nl">Site</a></li></p> </ul> </td> <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left"> <span style="color: #333333; font-size: 12px;"><strong>Bestellen</strong></span> <ul> <p><li><a target="_self" href="http://www.site.nl">Een bestelling plaatsen</a></li></p> <p><li><a target="_self" href="http://www.site.nl">Orderstatus volgen</a></li></p> <p><li><a target="_self" href="http://www.site.nl">Bestelling annuleren</a></li></p> </ul> </td> <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left"> <span style="color: #333333; font-size: 12px;"><strong>Betalen</strong></span> <p><img src="www.afbeelding.nl" height="45" width="89" /></p> </td> <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left"> <span style="color: #333333; font-size: 12px;"><strong>Keurmerk</strong></span> <p><img src="www.afbeelding.nl" height="45" width="89" /></p> </td> <td style="padding-left: 15px;" height="150" valign="top" width="25%" align="left"> <span style="color: #333333; font-size: 12px;"><strong>Vind ons op</strong></span> <img src="facebook.logo" height="32" width="32" /> facebook <img src="twitter.logo" height="32" width="32" /> twitter <img src="youtube.logo" height="32" width="32" /> hyves </td> </tr> </tbody> </table> </div> </div> </div> |
Ik wil de links die onder de titels staan , zoals bestelling plaatsen, orderstatus volgen e.d. (zijn niet de werkelijke teksten) onder elkaar hebben, en niet naast elkaar.
Ik heb dit opgelost door de <p> tags er voor en achter te zetten. Echter maken deze een hoop witregels tussen deze teksten.
> Mijn vraag dus: Hoe kan ik deze links (woorden) onder elkaar zetten zonder de <p> tags en zonder dat er een hele witregel tussen komt.
> Hoe kan ik eventueel ervoor zorgen dat de titel ''Vind ons op'' ook op één regel komt te staan? Want deze tekst staat nu op twee regels.
BVD!
Verder is je HTML echt verschrikkelijk, sorry. Elementen op plaatsen waar ze niet mogen (een <p> om een <li> heen), inline styles, tabellen voor de layout, elementen die gebruikt worden puur voor layout in plaats van om hun semantische waarde. Volg eens een paar tutorials (semantische) html en css.
Maar bedankt voor de tip, zal eens wat tutorials gaan bekijken.
En het zal dan inderdaad wel aan de css files ergens liggen. Want op een gewone tekstpagina werkt het wel zonder de P tags..
Met inline styles, bedoel je dat ik de style codes in de css moet plaatsen en niet de html file?
Nee. Gewoon niet doen. Nooit.quote:
| 1 2 | <a href="http://www.keurmerk.info" target="_blank" ><img src="{{ 'webshopkeurmerk-logo.png' }}" style="float:left; margin:-6px 9px; cursor:pointer; cursor:hand; border:0" width="149" height="55" alt="Webshop Keurmerk Certificaat" /></a> |
aangezien ik de styles e.d. in html code heb geplakt. En hoe is dit eventueel te verbeteren?
Ja. Volg eens een tutorial over hoe het wél moet.quote:
Is deze code dan ook zeer slecht?
[ code verwijderd ]
aangezien ik de styles e.d. in html code heb geplakt. En hoe is dit eventueel te verbeteren?
Geef de img een class of id (een id alleen als hij uniek is op die pagina, een class als 'ie vaker voorkomt). Als je bijvoorbeeld class="keurmerk" in de img tag zet, kan je de css zo doen:
| 1 2 3 4 5 6 7 | .keurmerk { float:left; margin:-6px 9px; cursor:pointer; cursor:hand; border:0 } |
Wat zijn die {{ }} om de src van je plaatje? Gebruik je Smarty oid?
Ligt er maar net aan, maar in dit geval is het wat raar.quote:
margin top en bottom beide negatief? Lijkt me niet handig
Echter is die in deze tekst nutteloos. Ik had de link ff ingekort, maar normaliter is ie www.blablabla.nl/kuermerklogo.jpg (dan heeft {{}} dus geen enig nut)
Maar met de {{ }} tags kan ik bijv. keurmerk.jpg opgeven als deze afbeelding in de assets file staat. Ik heb het niet uitgevonden..
Ik ga iig zorgen dat er meer in de css komt i.p.v. alles in html te proppen. Die tabel gaat ook weg, moet alleen nog een manier uitzoeken om in de css een code te plaatsen zodat de blokken tekst naast elkaar staan ipv onder elkaar.
Met dat negatief, heb ook maar wat nummers ingepropt en uiteindelijk kwam die op de goede plek op de website te staan.. Vandaar dat 't wss beide negatief zal zijn.
En op zich is dat negatief niet verkeerd, gewoon wat verrassend. Als het werkt, prima. Beter dat je met css pielt om het te krijgen hoe je wil dan dat je er elementen omheen gaat zetten die ook dat effect creëren.
Net als je <li>'s, door er een <p> omheen te zetten zet je er in feite gewoon een extra element omheen dat als oorspronkelijke waarde display: block heeft. In plaats daarvan kan je dus ook met css gewoon display: block op de li's zetten, krijg je het zelfde effect maar dan zonder extra <p>./
ik heb dat volgens mij nog nooit gedaan.quote:
[..]
Ligt er maar net aan, maar in dit geval is het wat raar.
De blokken daar hebben allemaal een padding van 5px, maar de eerste h1 is altijd een balk die de volle breedte nodig heeft (tot aan de border dus, niet de padding) dus geef ik die altijd standaard een -5px margin om dat weer recht te trekken.SPOILER: NSFW
Nu staat het dus mooi.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="footercol"><b>SERVICE</b> <ul> <li><a href="link1"> Ons </a></li> <li><a href="link1"> Voorwaarden </a></li> <li><a href="link1"> Nog iets </a></li> <li><a href="link1"> En iets </a></li> <li><a href="link1"> Kopen </a></li> </ul> </div> <div class="footercol"><b>POPULAIR</b> <ul> <li><a href="link1"> Tekst </a></li> <li><a href="link1"> Iets </a></li> <li><a href="link1"> Dat </a></li> <li><a href="link1"> Dit </a></li> </ul> </div> |
Bij css heb ik nu:
| 1 2 3 4 | .footercol { background: url(col02.png) no-repeat; display: inline-block; } |
Hier is niets mis mee toch?
Nog wat optimaliseren met afbeeldingen die in de footer moeten en wat afstand creeren tussen de blokken.. Moet ik er wel komen. En dan nog wat tutorials bekijken om alle teksten te verbeteren.
En waarom positioneer je je achtergrondafbeelding niet?
Als ik echt wil mierenneuken: de <b> tag is tegenwoordig wat achterhaald. Je kan beter <strong> gebruiken. Daarnaast is het wat overbodig om álle <li>'s in een lijst dezelfde class te geven. In plaats daarvan kan je de <ul> gewoon die class geven en dan in plaats van
| 1 2 3 | .link1 { styles } |
gewoon
| 1 2 3 | .link1 li { styles } |
doen. Op die manier hoef je de class maar 1 keer te zetten, en selecteer je nog steeds alle li's.
Verder ziet dit er echt al vele malen beter uit!
.Hij moet toch iets hebben om de lijsten + titel te wrappen? Div is daar een prima element voor in dit geval, imo.quote:
jawel. Waarom gebruik je een div als je hem niet als blockelement gebruikt?
En waarom positioneer je je achtergrondafbeelding niet?
Ja heb je gelijk in.quote:
jawel. Waarom gebruik je een div als je hem niet als blockelement gebruikt?
En waarom positioneer je je achtergrondafbeelding niet?
Moet
| 1 | background-position:0 18px; |
Geen idee wat een blockelement is. Het moet wel als blokken naast elkaar worden weergegeven.
@picodealion, had inderdaad ook de strong tag zien langskomen. Ben wat gewend met de b tag maar kan het ook omruilen als dat beter is.
Zal dat met die li's verbeteren. Bedankt voor de tip
Een inline-element is een element dat standaard in lijn met de tekst blijft, zoals <strong>, <span> en <a>.
Door met css de display waarde op wat anders te zetten kan je een block-element zoals div bijvoorbeeld toch gewoon inline maken (display: inline) of juist een <strong> element laten stapelen door hem display:block te maken.
Een inline-block is een speciale vorm die pas later is ingevoerd. Het is een block element in die zin dat je hem hoogte, breedte, margin en padding kan geven, maar ze lijnen wel naast elkaar uit in plaats van onder elkaar.
IE6 en lager hebben daar moeite mee, maar tegenwoordig kan je dat vrij veilig gebruiken.
ga dan alsjeblieft wat HTML en css tutorials doorlezen, want het is niet de bedoeling dat je hier wat post en wij maar uit gaan zoeken hoe jij het moet oplossenquote:
Geen idee wat een blockelement is. Het moet wel als blokken naast elkaar worden weergegeven.
| 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 | $(document).ready(function() { // Check for hash value in URL var hash = window.location.hash.substr(1); var href = $('.menu li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #portfolio'; $('#portfolio').load(toLoad) } }); $('.menu li a').click(function(){ var toLoad = $(this).attr('href')+' #portfolio'; $('#portfolio').slideUp('fast',loadcontent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); $('.flexslider').flexslider({ animation: "slide" }); function loadcontent() { $('#portfolio').load(toLoad,'',showNewcontent()) } function showNewcontent() { $('#portfolio').slideDown('slow',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); }); |
Waarom werkt die Flexslider niet?
Zou handig zijn als je er ook even een stukje HTML bij post, of desnoods een linkje naar de niet werkende pagina.quote:
[ code verwijderd ]
Waarom werkt die Flexslider niet?
Link1 zijn in de werkelijkheid natuurlijk niet identieke links. Dan zou ik voor 20 links aparte regels in het css bestand moeten maken. Is dat niet erg omslachtig?quote:
Stukken beter dit.
Als ik echt wil mierenneuken: de <b> tag is tegenwoordig wat achterhaald. Je kan beter <strong> gebruiken. Daarnaast is het wat overbodig om álle <li>'s in een lijst dezelfde class te geven. In plaats daarvan kan je de <ul> gewoon die class geven en dan in plaats van
[ code verwijderd ]
gewoon
[ code verwijderd ]
doen. Op die manier hoef je de class maar 1 keer te zetten, en selecteer je nog steeds alle li's.
Verder ziet dit er echt al vele malen beter uit!
ja tis de laatste tijd wel erg...quote:
Je kunt toch stylen op de classname van je UL ofzo. Lees eens een keer een boek ofzo voor je ergens mee begint
Ik heb wel kort geleden de eerste 4 boeken van A Book Apart gelezen, vooral Responsive Web Design (Ethan Marcotte) was erg interessant.
Mobile First heb ik nog niet gelezen. Merk wel dat het voor veel 'creatieve' mensen nog lastig is om vanuit deze insteek te werken, en niet meer totale controle te hebben over een ontwerp. Helemaal in combinatie met de responsive/adaptive hype nu natuurlijk.
Ik heb nu dus 4 ''blokken'' tekst naast elkaar staan. Onder het ene blok zit 1 regel minder tekst als onder het andere. Ik wil de blokken natuurlijk allemaal vanaf boven gelineerd hebben en niet vanaf onder. Het ene blok begint daarom ook 1 regel lager als het andere. Ik wil deze witregel graag onder het blok hebben en niet er boven.
Zou iemand zo vriendelijk willen zijn om mij deze code te geven of mij de juiste term te geven waarop ik het antwoord kan zoeken?
Margin-top e.d. werken niet. De witregel schuift gewoon mee. Height: of min-height werkt ook niet.
Heb o.a. deze voorbeeldcode gevonden:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style> ul#display-inline-block-example, ul#display-inline-block-example li { /* Setting a common base */ margin: 0; padding: 0; } ul#display-inline-block-example li { display: inline-block; width: 100px; min-height: 100px; background: #ccc; } </style> <ul id="display-inline-block-example"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> |
maar die geeft ook hetzelfde probleem. Wil ik onder het ene blok 2 regels hebben dan verschuift de bovenkant.
Probeer ze eens op display:block en float:left ?
-edit-
ff uit mijn hoofd, dus het kan zijn dat ik 't mis heb. later wel ff tijd om te pielen
Ik neem aan dat je dit bedoelt:quote:
Dan zet je het toch gewoon op het body-element ipv een div?
| 1 2 3 4 5 6 7 8 9 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script> <script> $(function() { $('body').jScrollPane(); }); </script> |
Waarom is het in je voorbeeld trouwens blauw? Waar komen die eigenschappen vandaan? jquery.jscrollpane.min.js?
Fuck it, ik neem de gelijknamige wordpress plugin wel.
[ Bericht 12% gewijzigd door Mirel op 18-02-2012 21:09:11 ]
creatievelingen zijn wel vrij stug. helaas... ze denken echt vanuit een statische situatie, erg zonde. heb t sowieso niet op grafici aangezien ik in mijn rol als interaction designer vaak wordt tegengewerkt omdat designers iets onlogisch ontwerpen 'omdat het mooier is' maar wel onbruikbaar of onlogisch.quote:
Wij hebben ze ook op het netwerk staan, ik vertik het om zelf te betalen voor PDF-jes
Mobile First heb ik nog niet gelezen. Merk wel dat het voor veel 'creatieve' mensen nog lastig is om vanuit deze insteek te werken, en niet meer totale controle te hebben over een ontwerp. Helemaal in combinatie met de responsive/adaptive hype nu natuurlijk.
ik lees veel op smashingmag en.met name van hun network. daarnaast volg ik een aantal frontenddevs op twitter (waaronder @paul_irish ) en lees ik veel van hun css en javascript artikelen.
Echter met float:left; is dat opgelost en werkt het wel! Thanks.
Alleen de copyright tekst wordt naar rechts gepropt. Valt vast wel te fixen.
/ opgelost met een aantal <br>'s maar ik kan er volgens mij al van uit gaan dat dit niet de juiste manier is
(terwijl het wel werkt)[ Bericht 15% gewijzigd door Snoepje5 op 18-02-2012 23:27:19 ]
blockelementen breng je in een flow en daarmee regel je de positionering (heel basis gezegd)
ik wist het gewoon niet meer.Juist wel.quote:
dan schaalt hij niet mee he. Dat kan problemen opleveren in je flow, of als je container een achtergrond heeft.
Mijn container heeft een achtergrond, en de div schaalt nu wel goed mee.quote:
dan schaalt hij niet mee he. Dat kan problemen opleveren in je flow, of als je container een achtergrond heeft.
en de drie floatende divs zijn ook nog op zn plek. Als ik weer ergens ben met usbverbinding zal ik de code even posten met een shotjequote:
[..]
Ik ben de weg kwijt vandaar dat ik nogal traag van begrip ben
Als ik de complete link van de afbeelding aan moet geven dan krijg je D:\werk\wamp\www\joomla\templates\testtemplate\images\favo.jpg
En die link komt inderdaad niet overeen met de eigenschappen van de afbeelding in de browser.
Op aangeven van Catch22- held in wording ga ik in dit topic maar verder.quote:
en als je /images/favo.jpg van je link maakt?
en dit is trouwens meer iets voor [html, css, js] voor dummies #21
Ik heb zelf al zitten sleutelen aan die /images map in die html link maar het probleem blijft bestaan.
als je er nu /template/testtemplate/images/favo.jpg van maakt?
Ik heb geen andere afbeeldingen die naar de image map verwijzen.quote:
Heb je geen andere afbeeldingen in die pagina die naar dezelfde map verwijzen?
als je er nu /template/testtemplate/images/favo.jpg van maakt?
Ik gebruik nu gewoon een localhost template als speeltuin om dingen uit te proberen.
Als ik jouw link /template/testtemplate/images/favo.jpg gebruik dan doet deze het niet.
De volgende twee doen het ook niet:
D:/Werk/wamp/www/joomla/templates/testtemplate/images/favo.jpg
img src="file:///D|/Werk/wamp/www/joomla/templates/testtemplate/images/favo.jpg
Bij de tweede link verandert de afbeelding van het plaatje zoals hieronder te zien is:
Het gaat dus om de rechter afbeelding.
Bij de eigenschappen bij de rechter krijg ik 'niet beschikbaar'.
edit:
Maar als ik het online ipv localhost zou zetten en ik verwijs naar /images/favo/jpg dan zou ie het moeten doen toch?
Als je img src="http://localhost/joomla/images/favo.jpg bedoelt; levert ook niks op.quote:
Waarom maak je je paden niet gewoon absoluut t.o.v. je webroot?
Heb vanalles geprobeerd om de afbeelding zichtbaar te krijgen maar niks lijkt te werken.
...maar daar staan ze ook niet.quote:
[..]
Als je img src="http://localhost/joomla/images/favo.jpg bedoelt; levert ook niks op.
Heb vanalles geprobeerd om de afbeelding zichtbaar te krijgen maar niks lijkt te werken.