IE 8 beta 2 werkt ookquote:Op maandag 26 januari 2009 22:44 schreef Swetsenegger het volgende:
Met de doctype lijkt hij het nu op alle browsers goed te doen. Getest in
Safari 3.2.x Mac
Firefox 3.0.xx Mac
Opera 9.6x Mac
IE 7.0.x Windows
Chrome 1.0.x Windows
In IE6 werkt het niet.quote:Op dinsdag 27 januari 2009 08:47 schreef Swetsenegger het volgende:
[..]
IE 8 beta 2 werkt ook
Opera 9.6x Windows ook
http://test.xploise.nl/align.html
quote:
1 2 3 4 5 | if (typeof document.body.style.maxHeight == "undefined") { document.write('<p class="emphasize"> Please update your browser!</p>') } </script> |
Als iets niet werkt in IE6 maar de site wordt er niet onbruikbaar door, dan ga ik er geen workaround voor zoeken.quote:
1 2 3 4 5 6 7 8 | .style1 {font-weight: bold} </style> <div class="footer"> <p>tekst <br/>tekst <br/><span class="style1">tekst</span></p> </div> |
laat maar ik ben er al uitquote:Op dinsdag 27 januari 2009 16:56 schreef Roy_T het volgende:
Wat is een tekstvak?
Misschien de contentfooter-div in de content-div plaatsen? Dan hoeft de contentfooter-div geen achtergrond te hebben, je ziet gewoon die van de content-div. Of is er iets speciaals waardoor dat niet kan?quote:Op vrijdag 30 januari 2009 17:49 schreef Chanty87 het volgende:
Halp!
[ afbeelding ]
Hoe zorg ik ervoor dat de background van mijn content div netjes aansluit op mijn contentfooter div?
De onderste rand neem ik aan. De "content div" heeft een herhalend patroon, en de footer niet.quote:Op vrijdag 30 januari 2009 19:01 schreef Light het volgende:
Of is er iets speciaals waardoor dat niet kan?
En dan het probleem naar de header verplaatsenquote:Op vrijdag 30 januari 2009 19:25 schreef veldmuis het volgende:
In de contentdiv met de background-position rommelen?
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.シ
Maar dan zit te contentfooter div over de content div heen, en aangezien mijn achtergronden transparante gifs zijn is het alsnog een zooitje onderin.quote:Op vrijdag 30 januari 2009 21:26 schreef veldmuis het volgende:
Dan dus de footer in de contentdiv plaatsen.
Absolute op de bottom van de contentdiv zetten, geen background meegeven.
Lijkt me zelfs niet nodig.quote:Op vrijdag 30 januari 2009 22:09 schreef n8n het volgende:
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
ik ben het met je eens, ik had niet gelezen of er nog iets in de footer kwam, omdat je over de 200px padding begon. maar anders vind ik het persoonlijk wel handig om bijvoorbeeld links te stijlen die in de content en footer anders vormgegeven zijn. Dan typ je gewoon #content a en #footer a, bijvoorbeeld.quote:Op vrijdag 30 januari 2009 22:11 schreef veldmuis het volgende:
[..]
Lijkt me zelfs niet nodig.
Hoe minder elementen hoe mooier!
Dat kan niet want de content div krijgt een variabele hoogte en heeft dus een herhalende achtergrond nodig.quote:Op vrijdag 30 januari 2009 22:09 schreef n8n het volgende:
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorlooptquote:Op vrijdag 30 januari 2009 22:06 schreef veldmuis het volgende:
Je kan de contentdiv toch een padding-bottom geven van 200px?
Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
Hey, iemand die leest Ben alleen inderdaad een zij, tyvmquote:Op vrijdag 30 januari 2009 22:12 schreef Roy_T het volgende:
Schiet je toch allemaal niks mee op? Hij heeft een repeterende afbeelding nodig voor de div met variabele hoogte, en een afbeelding voor de "onderrand". Een "lelijke aansluiting" is dan niet te vermijden, tenzij je met een grid based design werkt (zoals eerder gezegd: vaste line height en alle elementen een veelvoud van die hoogte geven, en de footer ook).
Dan los je in ieder geval de overloop van #content naar #footer op. Maar heb je de vaste line-height al geprobeerd?quote:Op vrijdag 30 januari 2009 22:17 schreef Chanty87 het volgende:
[..]
Dat kan niet want de content div krijgt een variabele hoogte en heeft dus een herhalende achtergrond nodig.
[..]
Je maakt #content 200px langer dan 'natuurlijk' en daar komt #footer gewoon onder.quote:Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorloopt
quote:Op vrijdag 30 januari 2009 20:49 schreef Chanty87 het volgende:
M'n layout is als volgt opgezet:
- contenttop div
- content div
- contentfooter div
Excusez-moiquote:Op vrijdag 30 januari 2009 22:19 schreef Chanty87 het volgende:
[..]
Hey, iemand die leest Ben alleen inderdaad een zij, tyvm
Wordt het dan tijd om de em te introduceren in de CSS?quote:Op vrijdag 30 januari 2009 22:12 schreef Roy_T het volgende:
Schiet je toch allemaal niks mee op? Hij heeft een repeterende afbeelding nodig voor de div met variabele hoogte, en een afbeelding voor de "onderrand". Een "lelijke aansluiting" is dan niet te vermijden, tenzij je met een grid based design werkt (zoals eerder gezegd: vaste line height en alle elementen een veelvoud van die hoogte geven, en de footer ook).
Het wordt gewoon tijd voor CSS3, met meerdere backgroundimagesquote:Op vrijdag 30 januari 2009 22:36 schreef Roy_T het volgende:
Helder moment: probeer je contentfooter eens in je content div te zetten met de huidige achtergrondafbeelding (dan heb je in feite dus twee achtergronden over elkaar). Maak dan van de footer achtergrond de hoek linksboven transparant, ter breedte van zo'n ringband en tot net boven het de onderste afkadering).
Je kunt dan nog steeds een halve ring krijgen, maar dan wel helemaal onderaan, waar het misschien minder opvalt?
Je kunt ipv een procentuele grootte ook gewoon een grootte in pixels opgeven. Net zo duidelijk, en browseronafhankelijk. En een line-height van 0.5em zou ik niet doen, da's te klein voor de letters.quote:Op vrijdag 30 januari 2009 22:40 schreef n8n het volgende:
em maakt volgens mij niet uit, em is fijner omdat het uitgaat van de browservoorkeuren, normaliter staat de standaard fontgrootte van een browser op 16px. 1em is standaard dus gewoon 16 pixels groot. Verdere voordelen zijn dat je het kan gebruiken om de lay-out schaalbaar te maken en dat IE fontgroottes in px niet schaalt.
Volgens mij moet je dan aan zoiets denken:
#content {
font-size: 62.5%; /* maakt 1em 10px groot */
line-height: 3.0em;
}
#content p {
line-height: 0.5em; /* anders heb je regelmarges van 30px */
}
Het hele idee van em is dat je dat juist wilt vermijdenquote:Op vrijdag 30 januari 2009 22:56 schreef Light het volgende:
Je kunt ipv een procentuele grootte ook gewoon een grootte in pixels opgeven.
Maar zo wordt het niet berekend. Relatieve groottes (waaronder dus die em-eenheid) zijn ten opzichte van het betreffende element. Uitzondering is bij font-size, dan gaat het ten opzichte van omvattende element. Dan heeft het ook zin om font-size: 1.2em te doen.quote:
Aan de andere kant, je weet niet wat de fontgrootte is (die wordt vast eerder in het document voor een ander element ook al ergens ingesteld). En daarbij vind ik het geen handig idee om er maar blind op te vertrouwen dat een gebruiker z'n browserinstellingen niet heeft aangepast. Of definieer je ook geen achtergrondkleur als je een witte achtergrond wilt hebben?quote:Op vrijdag 30 januari 2009 23:48 schreef Roy_T het volgende:
[..]
Het hele idee van em is dat je dat juist wilt vermijden
Zoals gezegd kun je bijvoorbeeld in IE (iig IE6) als gebruiker de fonts niet groter/kleiner maken wanneer je px gebruikt. Wanneer je em gebruikt wel.
Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?quote:Op zaterdag 31 januari 2009 00:26 schreef Light het volgende:
Aan de andere kant, je weet niet wat de fontgrootte is (die wordt vast eerder in het document voor een ander element ook al ergens ingesteld).
Dat maakt toch niks uit? Het mooie van een relatieve unit is dat het dus meeschaalt (vandaar het "relatieve"). De browserinstelling van de gebruiker maakt dus niets uit. Of denk je liever "de gebruiker stelt z'n browser in op "grote letters", maar daar heb ik niets mee te maken, hij doet het maar met 10px"?quote:En daarbij vind ik het geen handig idee om er maar blind op te vertrouwen dat een gebruiker z'n browserinstellingen niet heeft aangepast.
Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)quote:Of definieer je ook geen achtergrondkleur als je een witte achtergrond wilt hebben?
Klopt, heb het even geprobeer en ik kreeg het alleen voor elkaar 20px als maximale consistente afstand in te stellen waarbij de tekst nog leesbaar is.quote:Op zaterdag 31 januari 2009 00:18 schreef Light het volgende:
[..]
Maar zo wordt het niet berekend. Relatieve groottes (waaronder dus die em-eenheid) zijn ten opzichte van het betreffende element. Uitzondering is bij font-size, dan gaat het ten opzichte van omvattende element. Dan heeft het ook zin om font-size: 1.2em te doen.
Vind het bij mijn eigen site beter werken, als het inderdaad zo werkt als gedocumenteerd. in Safari schaalt nu iig de hele lay-out mee als ik de fontgrootte wijzig, dat zou ook in IE6 zo moeten zijn.quote:Op zaterdag 31 januari 2009 00:37 schreef Roy_T het volgende:
Kijk anders eens hoe relatieve units (em) prima werken op de NU.nl TV-gids, ook in IE6. En daar heb ik echt geen halsbrekende toeren voor uit hoeven halen
Daar stappen alle browsers op over (nou ja, Safari, Firefox, etc doen het al eeuwen natuurlijk), omdat het veel logischer is. Je kunt onmogelijk fontgroottes wijzigen zonder ergens een lay-out te breken, omdat je nou eenmaal beperkte ruimte e.d. hebt.quote:Op zaterdag 31 januari 2009 00:43 schreef n8n het volgende:
In Safari schaalt nu iig de hele lay-out mee als ik de fontgrootte wijzig, dat zou ook in IE6 zo moeten zijn.
True, maar ik had het idee dat n8n dat punt even vergat.quote:Op zaterdag 31 januari 2009 00:37 schreef Roy_T het volgende:
[..]
Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?
Ik weet niet wat een gebruiker doet met de instellingen, dus vind ik het handiger om een bekend punt als uitgangspunt te nemen. Daarbij kan die standaard ook nog browserafhankelijk zijn, en misschien zelfs fontafhankelijk.quote:Dat maakt toch niks uit? Het mooie van een relatieve unit is dat het dus meeschaalt (vandaar het "relatieve"). De browserinstelling van de gebruiker maakt dus niets uit. Of denk je liever "de gebruiker stelt z'n browser in op "grote letters", maar daar heb ik niets mee te maken, hij doet het maar met 10px"?
Niet bedoeld als sneerquote:Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)
Ik heb hier geen IE (laat staan IE6) om mee te kijken. Nu.nl/tvgids gebruikt idd alleen em-fonts, dit in tegenstelling tot de gewone nu.nl site. Mooi vergelijkingsmateriaal.quote:Kijk anders eens hoe relatieve units (em) prima werken op de NU.nl TV-gids, ook in IE6. En daar heb ik echt geen halsbrekende toeren voor uit hoeven halen
Dat ben ik ook niet Maar de site(s) van nu.nl heb ik niet gemaakt.quote:NB: Het design daarvan heeft niet altijd ruimte voor grote fonts, daar kan ik ook niks aan doen Maar dat doet niets af aan het prima bruikbare em. En ja, dit is ook een shameless plug om aan te geven dat ik echt geen n00b ben op dit gebied.
Ik wel Tenminste: die TV-gids (of was dat al duidelijk?)quote:Op zaterdag 31 januari 2009 01:05 schreef Light het volgende:
Dat ben ik ook niet Maar de site(s) van nu.nl heb ik niet gemaakt.
Ik vind relatieve units wel erg handig bij dingen als line-height en bij margins en paddings van headers en paragrafen. Dan hoef je dat niet bij iedere aanpassing in de fontgrootte aan te passenquote:Op zaterdag 31 januari 2009 02:26 schreef Roy_T het volgende:
Ik moet stiekem wel bekennen dat ik normaal ook liever px gebruik dan relatieve units
Eensch! Dat zijn inderdaad de uitzonderingen. Voor line-height gebruik ik dan vaak ook gewoon percentages ipv em, zoals "line-height: 150%".quote:Op zaterdag 31 januari 2009 08:45 schreef Light het volgende:
[..]
Ik vind relatieve units wel erg handig bij dingen als line-height en bij margins en paddings van headers en paragrafen. Dan hoef je dat niet bij iedere aanpassing in de fontgrootte aan te passen
Leuk stukje tekst, bij die link.quote:Op zaterdag 31 januari 2009 10:44 schreef n8n het volgende:
Ik gebruik altijd em's, eerst zet ik wel de grootte van de em op 10 px, wat het rekenen een stuk makkelijker maakt. Dit doe je met html { font-size: 62.5%; }, zie hier voor meer uitleg. Het enige waarvoor ik tegenwoordig geen em's meer voor gebruik is de breedte van de lay-out (of ik gebruik een max-width) en de afmetingen van afbeeldingen omdat dit bij vegroting de kwaliteit teniet doet.
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?quote:Het eerste wat je moet weten is de standaard corpsgrootte, dus zonder dat jij er in je css iets aan veranderd hebt. Dit is door W3C vastgesteld op 16px.
Waar het te vinden is weet ik niet, en ook niet of de w3c het wel heeft vastgelegd. Wat ik wel weet is dat (bijna?) elke browser een standaard corpsgrootte van 16px heeft voor platte tekst. Kijk maar bij elke wilekeurige browser in de voorkeuren. Het voordeel van em's is dan ook, als iemand de corpsgrootte op bijvoorbeeld 18px instelt, en alle developers zouden em gebruiken, alle websites voor die persoon direct een groter font en eventueel een grotere lay-out hebben. Maargoed de wereld is niet perfect, zeker niet in webdesign.quote:Op zaterdag 31 januari 2009 11:16 schreef Light het volgende:
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?
1 2 3 4 5 6 7 8 9 10 11 12 13 | background-color:#ffffff; width:960px;} #globalnav li{display:inline;margin-left:0.5em;padding-right:0.7em;border-right:1px solid #D4D4D4;} #navigation { float:right; text-align: right; background-color:#985e04; margin-right: 0%; width: 100%; font-size: 10px; background:url('logo.gif'); height:100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="globalnav"> <ul> <li><a href="http://www.flickr.com/photos/rcsmit/" target="_blank">Photos@FlickR</a> </li> <li><a href="http://petitmonde.yepcheck.com/" target="_blank">Lifelog</a></li> <li><a href="http://www.yeuxmarrons.com/contact.php" class="contact">Contact(er)</a></li> </ul> </div><!-- #globalnav --> <div id="navigation" onclick="location.href='http://www.yeuxmarrons.com';" style="cursor:pointer;"> <ul> <li><a href="http://www.yeuxmarrons.com/photos/B2614">B2614</a></li>ETCETERA</ul> </div> |
#globalnav een margin-top van x pixels geven?quote:Op zondag 8 februari 2009 11:45 schreef tim2308 het volgende:
Het is gelukt! en als ik die ruimte wel wil hebben, maar dan wit?
Ik zie dat zo snel niet eigenlijk. Je kunt de background wel aan de UL meegeven, maar ik weet niet of dat is wat je wilt?quote:Het is trouwens raar dat ik in het fototabel gedeelte geen achtergrond kan plaatsen, maar in het logogedeelte wel. Ik heb http://www.webmasterworld.com/forum83/6991.htm daarover gevonden, maar ken je nog een simpeler walkaround?
1 2 3 4 5 | <li>bla</li> <li>bla</li> <li>bla</li> </ul> |
1 2 3 | <li>bla</li><li>bla</li><li>bla</li> </ul> |
Op het werk gebruiken wij Smarty voor het schrijven van de templates. Dat heeft een functie {strip} die alle witruimte in je code weg haalt. Als je dus in je templates aan het werk bent krijg je keurig net ingesprongen code te zien, maar zodat het ingelezen wordt door de browser wordt alle witruimte verwijderd... Aangezien Smarty PHP-based is voor zover ik weet, zal er ook best een PHP-functie zijn waarmee je hetzelfde bereikt..?quote:Op zondag 8 februari 2009 14:16 schreef veldmuis het volgende:
Ik vraag me trouwens nog iets af. Ik heb vaak last van waardeloze marges als ik iets zo opzet:
[ code verwijderd ]
Dit werkt dan wel
[ code verwijderd ]
Het verschilt per browser hoe daarmee omgegaan wordt. Voor de duidelijkheid en netheid van de HTML heb ik liever het eerste, maar het tweede is helaas wel eens nodig.
Is daar een oplossing voor?
Thnx!quote:Op zondag 8 februari 2009 22:01 schreef veldmuis het volgende:
En waarom typ ik altijd die px erachter als het 0 is? .
quote:Op donderdag 12 februari 2009 09:54 schreef metallicattim het volgende:
Hallo,
Ik heb mijn site gemaakt met CSS, maar wat ik opeens ontdek bij heel veel pagina's is dat de DIV waar ik thumbnails in laadt opeens een pixel of 30 hoger staat, zonder dat ik een verandering heb aangebracht!!
Bij sommige, vooral nieuw aangemaakte pagina's staat ie gewoon goed waar ik hem ook neergezet heb, maar bij andere, vooral oudere pagina's staat ie niet meer op de plek waar ik hem in 1e instantie neergezet heb.
Ik zal een voorbeeld geven, hoop niet dat dat als spam word gezien:
http://www.e30fansite.nl/325i/Arjanos.html
Hele oude pagina's die ik gemaakt heb toen ik net begon met CSS waar ik elke foto in een aparte DIV zette ( stom... ) zijn ook ontregeld en staan allemaal hoger dan in eerste instantie:
http://www.e30fansite.nl/325i/Beamer.html
Pagina's die ik pas geleden heb aangemaakt, staan wel gewoon goed:
http://www.e30fansite.nl/318is/BMWDriver.html
Ik hoop dat iemand me kan helpen?? Nogmaals, ik heb op de bewuste pagina's NIKS veranderd
Thx alvast!
Grtz Tim
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
quote:Op donderdag 12 februari 2009 10:42 schreef PiRANiA het volgende:
[..]Hey,SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Ik heb ook een webbrowser, ik had het al gezien.
Groetjes,
veldmuis
neuh slecht niet want de validator zegt dat je op 1 foutje na valid bent. En dat is je alt tags in je plaatjesquote:Op donderdag 12 februari 2009 10:45 schreef metallicattim het volgende:
haha ben ik zo slecht?
Het is ooit de bedoeling de site in PHP te (laten) maken, maar dat duurt nog wel eff, dus voorlopig kan ik hier niks aan doen? Vind het maar een vreemd voorval, want in het begin stond alles goed en opeens staat de div hoger...
Wel slecht imo, en zo zie je maar dat slecht gebruikte maar syntactisch correcte HTML gewoon door de validator komtquote:Op donderdag 12 februari 2009 10:48 schreef miss_bleu het volgende:
neuh slecht niet want de validator zegt dat je op 1 foutje na valid bent. En dat is je alt tags in je plaatjes
Op zich best briljantquote:Op donderdag 12 februari 2009 10:50 schreef Roy_T het volgende:
[..]
Wel slecht imo, en zo zie je maar dat slecht gebruikte maar syntactisch correcte HTML gewoon door de validator komt
Sjah, ik had geen enkel verstand van CSS en heb het met en met een beetje geleerd, kdacht dat dit de methode was, maar niet dus hahaquote:Op donderdag 12 februari 2009 10:47 schreef Chanty87 het volgende:
Vraagje: Waarom heb je in vredesnaam voor vrijwel elk plaatje een aparte div?
Kijk, die website begon met 0 pagina'squote:Op donderdag 12 februari 2009 15:24 schreef Khadgar het volgende:
Als je handmatig 600 pagina's hebt gemaakt, ben je niet handig bezig. Dan is een database + serversides scripting een miljoen keer handiger.
Hmm had ik gedaan. Hij gaat wel tot onder door inderdaad, maar nu te ver naar onder zodat je moet scrollen. Dat komt waarschijnlijk omdat ie ruimte heeft overgeslagen bovenaan (hij begon onder de header).quote:Op vrijdag 13 februari 2009 17:02 schreef Roy_T het volgende:
html en body 100% hoogte geven, en dan kun je een div ook 100% hoogte geven.
Juistquote:Op vrijdag 13 februari 2009 17:11 schreef Nashje het volgende:
Hmm had ik gedaan. Hij gaat wel tot onder door inderdaad, maar nu te ver naar onder zodat je moet scrollen. Dat komt waarschijnlijk omdat ie ruimte heeft overgeslagen bovenaan (hij begon onder de header).
Waarom? Wat wil je visueel bereiken? Nogmaals, er zijn vaak andere oplossingen die hetzelfde visuele effect geven. Plaatje misschien?quote:Op vrijdag 13 februari 2009 17:06 schreef Nashje het volgende:
Ik wil dat omdat ik heel het beeld wil gebruiken. Zowel in Firefox als IE moet dat goed zijn.
Omdat dat dat bij het idee van de site hoort . Maar een plaatje is wel een verdomd goed idee ja . Verticaal laten repeaten, voila.quote:Op zaterdag 14 februari 2009 09:53 schreef Roy_T het volgende:
[..]
Juist
Het is 100% van de viewport, dus als er nog iets boven staat dan telt dat ook mee.
[..]
Waarom? Wat wil je visueel bereiken? Nogmaals, er zijn vaak andere oplossingen die hetzelfde visuele effect geven. Plaatje misschien?
Ben je altijd zo van de non-antwoorden? De vraag was niet waarom je iets er op een bepaalde manier uit wilt laten zien, maar waarom je het per se met een div van 100% hoogte wilt doenquote:Op zaterdag 14 februari 2009 14:36 schreef Nashje het volgende:
Omdat dat dat bij het idee van de site hoort .
Juistemquote:Maar een plaatje is wel een verdomd goed idee ja . Verticaal laten repeaten, voila.
classes worden overruled door ID's, ook al staat de class lager in de CSS. Dus anders reageren doet het zeker .quote:Op zaterdag 14 februari 2009 16:32 schreef Swetsenegger het volgende:
Nou ik heb wel gemerkt dat ID's soms anders reageren dan classes. En ik heb geen idee waarom. Ik heb nu geen concreet voorbeeld, is iets waar ik wel eens tegen aangelopen ben.
Ik gebruik eigenlijk ook altijd classes.
Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.quote:Op zaterdag 14 februari 2009 16:34 schreef veldmuis het volgende:
[..]
classes worden overruled door ID's, ook al staat de class lager in de CSS. Dus anders reageren doet het zeker .
Verder mag een ID uiteraard maar 1x per htmlletje voorkomen, en een class oneindig.
Da's mij nog nooit opgevallen. Dus een voorbeeld zou leuk zijnquote:Op zaterdag 14 februari 2009 16:46 schreef Swetsenegger het volgende:
[..]
Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.
Als ik er weer eens tegenaanloop zal ik het laten zien. Wat ik me ervan herinner ging het met relatief positioneren fout. Maakte ik van de ID een class werkte het zoals verwacht.quote:Op zaterdag 14 februari 2009 16:51 schreef Light het volgende:
[..]
Da's mij nog nooit opgevallen. Dus een voorbeeld zou leuk zijn
Ik gebruik tegenwoordig alleen classes als ik weet dat ik hetzelfde element meerdere keren gebruik op een paginaquote:Op zaterdag 14 februari 2009 16:28 schreef veldmuis het volgende:
Zeg. Vraagje!
Wanneer gebruiken jullie een class en wanneer een id?
Ik ga eigenlijk altijd voor een class, behalve als ik iets met JS wil gaan doen, dan hang ik de css aan het id (logisch, denk ik).
Ik zie echter ook volop sites waarbij de css er uitziet als een hekjesparade, alleen maar id's dus. Ik snap het nut er niet zo van, maar misschien is het er wel. Ben wel benieuwd hoe iedereen werkt eigenlijk, wie weet (ik!) kan ik er nog wat van leren!
Gewoon voor je eigen overzicht? (max) 1x voorkomen = id, anders class?quote:Op zaterdag 14 februari 2009 21:07 schreef Chanty87 het volgende:
[..]
Ik gebruik tegenwoordig alleen classes als ik weet dat ik hetzelfde element meerdere keren gebruik op een pagina
Dat is geen known bug iig voor zover ik weetquote:Op zaterdag 14 februari 2009 16:46 schreef Swetsenegger het volgende:
Nee ik bedoel dus ook in style gedrag. Dus een layer die onverklaarbaar lager geplaatst wordt bv als hij in een ID staat tov een class.
quote:Op maandag 16 februari 2009 09:29 schreef Nashje het volgende:
Het is te merken dat ik al een tijdje niet heb gespeeld met CSS . Ik ben er na 3 kwartier achter gekomen waarom m'n backgroundimage niet werd getoond. M'n style.css staat in de map css, en ik moest dus eerst uit die map komen om het plaatje in de map image te laten kunnen tonen.
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 | width: 270px; height: 105px; border: 1px solid; background: url(logo.png); } #menu { float: left; width: 270px; height: 400px; border: 1px solid; } #search { float: left; width: 900px; height: 200px; border: 1px solid; } #content { float: left; width: 900px; height: 200px; border: 1px solid; } |
1 2 3 4 | <div id="menu"></div> <div id="search">asdf</div> <div id="content">adsf</div> |
Oh toch wel.. Was al van plan om een leftrow en rightrow te maken, maar toch een containertje dus. Even proberen.quote:Op maandag 16 februari 2009 15:42 schreef veldmuis het volgende:
Ik snap het denk ik .
Denk in kolommen. Dit is normaal gedrag van de float. Als je om de dingen die naast of boven elkaar staan een containerdiv zet is je probleem over.
1 2 3 4 5 | border: 1px solid; width: 1200px; height: 600px; } |
1 2 3 4 5 6 | <div id="logo"><img src="images/logo1.png" /></div> <div id="menu"></div> <div id="search">asdf</div> <div id="content">adsf</div> </div> |
1 2 | [=2=] [=4=] |
Zolang je ze maar niet die namen geeft (leftrow, rightrow)quote:Op maandag 16 februari 2009 15:43 schreef Nashje het volgende:
Was al van plan om een leftrow en rightrow te maken, maar toch een containertje dus. Even proberen.
Je kan er een containertje omheen zetten. Container dan een vaste breedte meegeven, en de divs in die container erven die dan wel.quote:Op maandag 16 februari 2009 16:00 schreef Nashje het volgende:
a is waar, heb ik gedaan, maar wat moet ik dan met 3 en 4 doen?
Gelukt . Ik had al een container gemaakt voor 3 en 4 en gefloat naar left, maar deed het niet. Toen ik de container van 1 en 2 naar left had gefloat, deed ie het wel. Dank dank.quote:Op maandag 16 februari 2009 16:02 schreef veldmuis het volgende:
[..]
Je kan er een containertje omheen zetten. Container dan een vaste breedte meegeven, en de divs in die container erven die dan wel.
quote:Welke plaats woont u?:
<br />
<input type="radio" id="Apeldoorn" name="gender" value="man"> <label for="man">Apeldoorn</label>
<input type="radio" id="Deventer" name="gender" value="vrouw"> <label for="vrouw">Deventer</label>
<input type="radio" id="Zuthpen" name="gender" value="vrouw"> <label for="vrouw">Zuthpen</label>
<input type="radio" id="Buitengebied" name="gender" value="man"> <label for="man">Buitengebied</label>
<div class="place">
<div class="field">
<div class="place">
<div class="field">
<text> In welke wijk woont u?
</text>
<select name="Woonwijk">
<option value="Woonwijk">De Parken</option>
<option selected value="Woonwijk">Centrum</option>
<option value="Woonwijk">De Maten</option>
<option value="Woonwijk">Berg & Bos</option>
<option value="Woonwijk">Zuidbroek</option>
<option value="Woonwijk">Osseveld</option>
<option value="Woonwijk">Woudhuis</option>
<option value="Woonwijk">Welgelegen</option>
<option value="Woonwijk">Orden </option>
<option value="Woonwijk">Zevenhuizen</option>
<option value="Woonwijk">Kerstschoten </option>
<option value="Woonwijk">Zuid</option>
</select>
</form>
</div>
.quote:Op dinsdag 17 februari 2009 14:36 schreef Roy_T het volgende:
Het lijkt me overigens sterk dat al die wijken een value "woonwijk" moeten hebben en de steden stiekem geslachten zijn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | height: 100%; margin: 0; } body { background-color: #EFF8FD; height: 100%; font-family: arial, tahoma, verdana, sans-serif; font-size: 12px; } div#page { width: 960px; height: 100%; background-color: white; position: absolute; left: 50%; top: 0px; margin-left: -480px; } |
Volgens mij werkt dit gewoon?quote:Op vrijdag 20 februari 2009 11:36 schreef Intrepidity het volgende:
Ik ben al genoeg javascript-achtige oplossingen tegengekomen, maar dit moet afaik met CSS op te lossen zijn..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | html { height: 100%; margin: 0; } body { background-color: #EFF8FD; height: 100%; font-family: arial, tahoma, verdana, sans-serif; font-size: 12px; } div#page { width: 960px; min-height: 100%; background-color: white; margin:0 auto; [b]iets mooier dan left:50; margin-left:-480px ;)[/b] } </style> |
Volledig geaccepteerde manierquote:Op vrijdag 20 februari 2009 12:02 schreef Intrepidity het volgende:
Het gaat dus om een box van 960 pixels breed horizontaal gecentreerd, volgensmij kan ik dat effect niet in de body bereiken tenzij ik met een witte afbeelding ga lopen klooien..
nou je hebt 1 TD veld en die moet altijd 200 px breed zijn ongeacht de inhoudquote:
maar dat werkt nietquote:
Je .tekst moet een breedte hebben, in feite geeft FF het goed weerquote:Op maandag 23 februari 2009 16:37 schreef Buonissimo het volgende:
Hoi, ik ben net begonnen aan een nieuw siteje en loop tegen een probleem aan. Op http://chessatwork.leadhoster.com/ zie je dat het siteje goed wordt weergegeven in IE (hiermee bedoel ik: de tekst positioneert zich 'langs' het menu) maar in Firefox schuift de tekst onder het menu.
Mijn CSS code ziet er als volgt uit:
[knip]
Ik vermoed dat dit een vrij bekend probleem is en hoop dat er iemand weet hoe ik dit kan oplossen? Kan deze persoon mij ook de logica achter de oplossing uitleggen? Of eventueel doorverwijzen? Alvast bedankt
Heeft je body of de parent-div van je menu-div geen padding of margin?quote:Op maandag 23 februari 2009 16:56 schreef ikJur het volgende:
Het viel me op dat het menubalkje hier op fok meegaat. Ik ben nu ook bezig met een site waar me dat wel handig lijkt. Na ff de code bestudeerd te hebben bleek een simpele position:fixed; het te doen. Maarrrr mijn menu begint pas zo'n 150px vanaf de bovenkant. Ik wil dus dat ie blijft plakken aan de bovenkant zodra die dmv scrollen gepasseerd wordt.
Weet iemand hoe ik dit kan klaarspelen?
(is trouwens een ul ipv een div maar dat maakt geen verschil) het menu staat in een container div die een heeft een margin: 10px auto; om te centreren, hier kan ik dus vrij weinig aan veranderen.quote:Op maandag 23 februari 2009 17:17 schreef Chanty87 het volgende:
Heeft je body of de parent-div van je menu-div geen padding of margin?
En als je die ul nou uit de container haalt?quote:Op maandag 23 februari 2009 17:27 schreef ikJur het volgende:
[..]
(is trouwens een ul ipv een div maar dat maakt geen verschil) het menu staat in een container div die een heeft een margin: 10px auto; om te centreren, hier kan ik dus vrij weinig aan veranderen.
1 |
het werkt niet zodra ik top:0; geef blijft ie aan de bovenkant hangen. top overruled alles gewoon.quote:Op maandag 23 februari 2009 18:00 schreef n8n het volgende:
border-top op de html
edit, nuffsaid dat werkt alleen met een padding
misschien dan html { border-top } body { margin: 100px auto; } enz...
1 2 3 4 5 6 7 8 9 10 11 | display:none; } span.element:hover span.tekst1 { display:none; } span.element:hover span.tekst2 { display:block; } |
1 2 3 4 | <span class="tekst1">Dit is tekst 1</span> <span class="tekst2">Dit is tekst 2</span> </span> |
Helemaal top . Dank je.quote:Op woensdag 25 februari 2009 14:13 schreef PimD het volgende:
CSS:
[ code verwijderd ]
HTML:
[ code verwijderd ]
Heb het niet getest, maar dit zou moeten werken. Wel kans dat je verspringende elementen krijgt, maar dan zou je ".element" een vaste hoogte/breedte moeten geven.
Daarnaast moet je nog wel even een Javascriptje voor IE6 maken, aangezien die geen hover ondersteunt op elementen die geen <a> zijn.
in 1998 ja tegenwoordig zijn hovers het best met css te fixenquote:Op woensdag 25 februari 2009 14:29 schreef Roy_T het volgende:
Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.
Dat weet ik lolbroek, ik vraag me alleen of of je dit (het vervangen van een tekst in deze context) door CSS moet laten doen. Scheiding van structuur, gedrag en presentatie enzo. Semantiek, etc. Je kent het wel.quote:Op woensdag 25 februari 2009 14:34 schreef ikJur het volgende:
in 1998 ja tegenwoordig zijn hovers het best met css te fixen
ja eigenlijk heb je wel gelijk in deze context. zeker omdat het met css toch niet gaat werken in ie6.quote:Op woensdag 25 februari 2009 14:46 schreef Roy_T het volgende:
[..]
Dat weet ik lolbroek, ik vraag me alleen of of je dit (het vervangen van een tekst in deze context) door CSS moet laten doen. Scheiding van structuur, gedrag en presentatie enzo. Semantiek, etc. Je kent het wel.
ja jquery leent zich erg goed voor het verwijderen of tonen van attributes.quote:Op woensdag 25 februari 2009 15:47 schreef Roy_T het volgende:
Als het nou het uitklappen van een menu is (zoals suckerfish), dan zou ik CSS prima vinden (icm JS voor IE6), omdat het dan gaat om het tonen van data. Hier gaat het echter om het bewerken van data, vandaar
Mwah... aan de ene kant ben ik het met je eens dat content/gedrag/structuur/etc zo gescheiden mogelijk moet blijven, maar als iets met CSS simpel op te lossen is vind ik het ook weer onzin om het dan met Javascript te gaan doen...quote:Op woensdag 25 februari 2009 14:29 schreef Roy_T het volgende:
Wat mij betreft zou je dit gewoon met JavaScript moeten doen; het is gedrag en geen styling.
Dan heb je het over de weergave van een element, dus de fysieke kenmerken. Dat is imo iets anders dan de daadwerkelijke inhoud. En los daarvan zou je het imo dat echt met puur CSS moeten doen (met de content property), en niet op bovenstaande manier. Zo verneuk je je structuur (HTML) namelijk ook nog eensquote:Op woensdag 25 februari 2009 16:25 schreef PimD het volgende:
Sowieso, een :hover is dan toch ook gedrag? Een hover op een link waarbij je de kleur aanpast of de text-decoration weg haalt doe je ook niet met Javascript...
Dat het werkt, wil niet zeggen dat het goed isquote:Op donderdag 26 februari 2009 13:58 schreef Nashje het volgende:
Ja staat in een li, die dan weer in de class menu staat...
Maar dit zou toch sowieso zonder css moeten werken?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul> <li><a href="link" class="category_name">Naam van categorie</a></li> </ul> CSS a.category_name { width: #px; height: #px; display: block; text-indent: -9999px; background: url(plaatje.gif); } a.category_name:hover { background: url(plaatje_over.gif); } |
Je hoeft opzich niet eens 2 plaatjes te gebruiken, gewoon het eerste plaatje boven, tweede onder en in de css oplossen met de background positionquote:Op donderdag 26 februari 2009 15:06 schreef Roy_T het volgende:
[..]
Dat het werkt, wil niet zeggen dat het goed is
Als het gaat om een plaatje als menu item wat veranderd als je er overheen gaat zou ik dit doen:
[ code verwijderd ]
Voordeel: het ziet eruit hoe jij wilt, het werkt zonder JS én is semantisch correct (en dus toegankelijk). Google bijvoorbeeld ziet gewoon de link, en grafische user agents de afbeelding.
Dit kan ook met alle knoppen in 1 afbeelding, scheelt requests naar de server en net zo belangrijk, de afbeelding is pre-loaded dus je hebt geen geflikker bij :hover als gevolg.quote:Op donderdag 26 februari 2009 15:20 schreef veldmuis het volgende:
En als het veel links zijn zou ik de normale en de hover in één afbeelding zetten en de a:hover een background-position:bottom meegeven bijvoorbeeld. De li krijgt dan een class mee uiteraard.
Nja, you snep
Volgens mij niet. Ik snap niet waarom ze divs als alternatief voor frames zien . Frames zijn pagina's die je oproept en toont, divs zijn toch veel anders .quote:Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
n.a.v. dit topic: Website dilemma waaruit blijkt dat frames niet echt meer de bedoeling zijn, wordt div als alternatief gegeven.
Kun je in een div ook tekst tonen die in een ander htmlletje staat?
Nog mooier is om op te delen mbv includes (php).quote:Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
Het voordeel van frames vond ik altijd dat je je website dus mooi op kon delen in een header.html, menu.html en body.html.
Background-position werkt in mijn ervaring in alle browsers gelijk. Wat ging er bij jou mis dan?quote:Op donderdag 26 februari 2009 15:37 schreef Nashje het volgende:
Maar als je al die links in 1 plaatje ramt en gaat werken met background-position is het dan niet één groot gevecht tussen Firefox en IE? Die ervaring heb ik nl. met positions.
Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.quote:Op donderdag 26 februari 2009 16:09 schreef Roy_T het volgende:
[..]
Background-position werkt in mijn ervaring in alle browsers gelijk. Wat ging er bij jou mis dan?
frames zijn gewoon een beetje verouderd, mensen komen op loze pagina's uit via zoekmachines e.d en nog tal van andere nadelen die er aan kleven. Als ik simpele statische websites maak doe ik het gewoon met php includes.quote:Op donderdag 26 februari 2009 16:04 schreef kareltje_de_grote het volgende:
n.a.v. dit topic: Website dilemma waaruit blijkt dat frames niet echt meer de bedoeling zijn, wordt div als alternatief gegeven.
Kun je in een div ook tekst tonen die in een ander htmlletje staat? Het voordeel van frames vond ik altijd dat je je website dus mooi op kon delen in een header.html, menu.html en body.html.
ja tis echt easy je hoeft eigenlijk niet eens echt php te kennen.quote:Op donderdag 26 februari 2009 16:19 schreef kareltje_de_grote het volgende:
Hahh, tnx ik ga eens naar die includes kijken.
Dat ken ik dan ook nietquote:Op donderdag 26 februari 2009 16:20 schreef ikJur het volgende:
[..]
ja tis echt easy je hoeft eigenlijk niet eens echt php te kennen.
Een background-position heeft niets met een floatende en zwevende div te maken hoor .quote:Op donderdag 26 februari 2009 16:11 schreef Nashje het volgende:
[..]
Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.
neequote:Op donderdag 26 februari 2009 16:08 schreef Nashje het volgende:
[..]
Volgens mij niet. Ik snap niet waarom ze divs als alternatief voor frames zien . Frames zijn pagina's die je oproept en toont, divs zijn toch veel anders .
[..]
Nog mooier is om op te delen mbv includes (php).
ok je noemt je pagina php ipv htmlquote:Op donderdag 26 februari 2009 16:25 schreef kareltje_de_grote het volgende:
[..]
Dat ken ik dan ook niet
Jij hebt het over "position", ik over "background-position". Dat is wel even iets totaal andersquote:Op donderdag 26 februari 2009 16:11 schreef Nashje het volgende:
Divs die gingen zweven en niet vast stonden. Ik had sowieso moeite om divs vast te zetten met positions, vandaar dat ik tegenwoordig alleen maar met floats werk.
1 2 3 | font-size: 0%; } |
1 2 3 4 5 6 7 8 | height: 15px; width: 15px; cursor: pointer; text-indent: -9999px; border: none; background: url(http://www.mijnwerkgever.nl/images/final/arrow_double.png) no-repeat left top; } |
quote:Op vrijdag 27 februari 2009 09:30 schreef LeeHarveyOswald het volgende:
Hmm, weet iemand hoe ik vanuit mn style sheet text (link) uit een list kan verwijderen, zonder dat ik ook de afbeelding verwijder?
[ code verwijderd ]
Werkt niet in IE en Chrome omdat ik dan nog kleine stipjes zie. In FF gaat dit wel netjes.
Display none werkt niet, omdat in de link een afbeelding staat welke dan ook weg is (ik wil alleen dat de tekst weg gaat :) ).
XHTML kant is niet aan te passen, het gaat om een standaard snippet binnen het cms..
1 |
De div waar ze in staan de grootte van het vlaggetje maken dan, met overflow: hidden?quote:Op vrijdag 27 februari 2009 09:38 schreef LeeHarveyOswald het volgende:
De tekst is groter dan de afbeelding
Dan is zijn plaatje ook verdwenen, aangezien die gewoon in de text flow staatquote:Op vrijdag 27 februari 2009 09:51 schreef Light het volgende:
quote:Op donderdag 26 februari 2009 18:05 schreef cablegunmaster het volgende:
[..]
ok je noemt je pagina php ipv html
<?php
include 'blablabla.php';
?>
en dan heb je een stukje pagina erin gezet in een andere pagina
Dat is een bitch, maar ik heb ooit deze verzonnen:quote:Op vrijdag 27 februari 2009 09:38 schreef LeeHarveyOswald het volgende:
Overigens nog een leuke: Ik heb de searchbutton vervangen met een plaatje, alleen IE laat nog deels de zoektekst door het plaatje heen zien...
1 2 3 4 5 | height: #px; padding-top: #px; overflow: hidden; text-indent: -9999px; |
werktquote:Op vrijdag 27 februari 2009 11:40 schreef Roy_T het volgende:
[..]
Dat is een bitch, maar ik heb ooit deze verzonnen:
[ code verwijderd ]
Waarbij de padding-top gelijk moet zijn aan de height. De text-indent is nodig omdat anders Safari de bovenste pixel van de tekst alsnog laat zien.
Safari heeft standaard een kleinere line-height dan de andere browsers. Dat kan ook zorgen dat die bovenste pixel nog verschijnt.quote:Op vrijdag 27 februari 2009 11:40 schreef Roy_T het volgende:
[..]
Dat is een bitch, maar ik heb ooit deze verzonnen:
[ code verwijderd ]
Waarbij de padding-top gelijk moet zijn aan de height. De text-indent is nodig omdat anders Safari de bovenste pixel van de tekst alsnog laat zien.
Dat is dan een bug die ze snel moeten fixen 23px witruimte zou namelijk geen 22px moeten zijn.quote:Op vrijdag 27 februari 2009 12:43 schreef Light het volgende:
Safari heeft standaard een kleinere line-height dan de andere browsers. Dat kan ook zorgen dat die bovenste pixel nog verschijnt.
Als je gewoon een line-height instelt, is er niets aan de hand.quote:Op vrijdag 27 februari 2009 13:03 schreef Roy_T het volgende:
[..]
Dat is dan een bug die ze snel moeten fixen 23px witruimte zou namelijk geen 22px moeten zijn.
Dat maakt het niet minder een bug toch?quote:Op vrijdag 27 februari 2009 13:09 schreef Light het volgende:
Als je gewoon een line-height instelt, is er niets aan de hand.
Het is geen bug. Er staat nergens gedefinieerd of een tekst van 10 pixels een line-height van 12, 13, 14, 15 of 20 pixels moet hebben. En normaal gesproken maakt het ook niets uit. Maar als je uitgaat van een bepaalde line-height dan moet je die wel ergens instellen. En als je een vlak een hoogte geeft met als doel een deel van de inhoud erbuiten te laten vallen, dan gebruik je (impliciet) die line-height.quote:Op vrijdag 27 februari 2009 14:19 schreef Roy_T het volgende:
[..]
Dat maakt het niet minder een bug toch?
Als je een padding-top gebruikt, dan mag je wmb verwachten dat er binnen die hoogte geen tekst staat. Ik zie niet wat line-height hiermee van doen zou moeten hebbenquote:Op vrijdag 27 februari 2009 14:48 schreef Light het volgende:
[..]
Het is geen bug. Er staat nergens gedefinieerd of een tekst van 10 pixels een line-height van 12, 13, 14, 15 of 20 pixels moet hebben. En normaal gesproken maakt het ook niets uit. Maar als je uitgaat van een bepaalde line-height dan moet je die wel ergens instellen. En als je een vlak een hoogte geeft met als doel een deel van de inhoud erbuiten te laten vallen, dan gebruik je (impliciet) die line-height.
Jammer dat de hele site niet werkt zonder Javascript. Naar mijn mening moet Javascript gebruikt worden om de user experience te verhogen, door bijvoorbeeld extra functionaliteit toe te voegen of extra effecten. Maar functionaliteit moet m.i. nooit púúr op Javascript gebouwd worden.quote:Op dinsdag 3 maart 2009 20:23 schreef Flaccid het volgende:
www.jeroencoelen.nl
Hij is eindelijk af. Op en aanmerkingen?
Ik denk dat misschien 1 op de 100 of nog minder een browser gebruikt die geen javascript ondersteunt. Waarom nu nog lastig doen? Het werkt toch prima?quote:Op dinsdag 3 maart 2009 20:32 schreef PimD het volgende:
[..]
Jammer dat de hele site niet werkt zonder Javascript. Naar mijn mening moet Javascript gebruikt worden om de user experience te verhogen, door bijvoorbeeld extra functionaliteit toe te voegen of extra effecten. Maar functionaliteit moet m.i. nooit púúr op Javascript gebouwd worden.
Ja dat heb iuk toevallig al gedaan. Moest het nog even uploaden.quote:Verder inline Javascript-code, kun je toch veel makkelijker/mooier binden in een los Javascript-bestand? Zelfde geldt voor je CSS, waarom heb je deze allemaal in je HTML staan...?
Wat je nu hebt gemaakt kan op de precies dezelfde manier werken maar op zo'n manier dat het ook bij niet javascript users werkt. Op mijn mobiel zou ik nu onmogelijk je portfolio kunnen bekijken daar javascript altijd maar half werkt op die mobiele browsers.quote:Op dinsdag 3 maart 2009 20:37 schreef Flaccid het volgende:
[..]
Ik denk dat misschien 1 op de 100 of nog minder een browser gebruikt die geen javascript ondersteunt. Waarom nu nog lastig doen? Het werkt toch prima?
[..]
Ja dat heb iuk toevallig al gedaan. Moest het nog even uploaden.
Ook zonder javascript lukt dat niet, een mobiele browser zal meestal geen hoge resolutie hebben. En centreren wordt volledig gedaan door negatieve margins. Geen scrollbalken, en bij een klein venster mis je een deel van de content.quote:Op dinsdag 3 maart 2009 21:09 schreef ikJur het volgende:
[..]
Wat je nu hebt gemaakt kan op de precies dezelfde manier werken maar op zo'n manier dat het ook bij niet javascript users werkt. Op mijn mobiel zou ik nu onmogelijk je portfolio kunnen bekijken daar javascript altijd maar half werkt op die mobiele browsers.
Ontbrekende alt-tags vind ik niet zo'n heel groot probleem, hoewel het voor de toegankelijkheid wel netter is als ze er staan. Een & niet als entiteit schrijven is slordig. Ik vind de css-fouten storender, eerlijk gezegd.quote:Verder is je code verre van W3C valid wat voor een webdesign/develop bedrijf toch wel een must is.
Ik ga er van uit dat niemand mij mobiel bereikt.quote:Op dinsdag 3 maart 2009 22:51 schreef Light het volgende:
Ook zonder javascript lukt dat niet, een mobiele browser zal meestal geen hoge resolutie hebben. En centreren wordt volledig gedaan door negatieve margins. Geen scrollbalken, en bij een klein venster mis je een deel van de content.
Ik ben niet zo professioneel als jij misschien denkt. Ik klus hier en daar wat bij.quote:Ontbrekende alt-tags vind ik niet zo'n heel groot probleem, hoewel het voor de toegankelijkheid wel netter is als ze er staan. Een & niet als entiteit schrijven is slordig. Ik vind de css-fouten storender, eerlijk gezegd.
Ik had op mijn vorige website heel erg last van spam. Mij leek dit de beste manier om mijn e-mail adres toch openbaar te maken. Als je gewoon mijn adres daar plat op de site neerpleurt, is de kans op spam erg groot.quote:Op dinsdag 3 maart 2009 21:12 schreef ikJur het volgende:
verder vind ik je visitekaartje niet echt professioneel een 06 nummertje met spaties tussen elke 2 nummers en het email adres is ook erg slordig zo.
het is meer dat een mobiele browser overschakelt naar de html omdat ie de javascript overslaat. Verder wordt alles gewoon gecropt op dergelijke browsers.quote:Op dinsdag 3 maart 2009 22:51 schreef Light het volgende:
[..]
Ook zonder javascript lukt dat niet, een mobiele browser zal meestal geen hoge resolutie hebben. En centreren wordt volledig gedaan door negatieve margins. Geen scrollbalken, en bij een klein venster mis je een deel van de content.
hmm qua W3C fouten valt het idd nog mee. Maar css fouten storend? in wat voor opzicht want css fouten maak je niet zo snel volgens mij alleen met ie hacks enzo je kan ervoor kiezen om die in een aparte sheet te zetten maar daar heb ik nooit zin in.quote:Ontbrekende alt-tags vind ik niet zo'n heel groot probleem, hoewel het voor de toegankelijkheid wel netter is als ze er staan. Een & niet als entiteit schrijven is slordig. Ik vind de css-fouten storender, eerlijk gezegd.
Dat heb ik allang begrepen, en toen ik er mee begon vond ik dat ook niet erg. Er is niemand die mijn site mobiel bezoekt. Je moet ook aan je publiek denken. Ik ga toch ook geen iPhone versie maken van mijn website?quote:Op dinsdag 3 maart 2009 23:10 schreef ikJur het volgende:
[..]
het is meer dat een mobiele browser overschakelt naar de html omdat ie de javascript overslaat. Verder wordt alles gewoon gecropt op dergelijke browsers.
In deze versie van de website zou je niet verder dan homepage komen.
ik doelde meer op de manier waarop je het ik@bladibla is niet zo proffesioneel doe dan mail@ of info@ of contact@quote:Op dinsdag 3 maart 2009 23:04 schreef Flaccid het volgende:
Ik had op mijn vorige website heel erg last van spam. Mij leek dit de beste manier om mijn e-mail adres toch openbaar te maken. Als je gewoon ik@xxxxxxx.nl daar plat op de site neerpleurt, is de kans op spam erg groot.
bedenk wel dat google in feite ook een mobiele bezoeker is of eigenlijk gezegd een blinde bezoeker. Op deze manier kan google de links niet volgen en derhalve jouw site niet indexeren. Althans niet alle contentquote:Op dinsdag 3 maart 2009 23:11 schreef Flaccid het volgende:
[..]
Dat heb ik allang begrepen, en toen ik er mee begon vond ik dat ook niet erg. Er is niemand die mijn site mobiel bezoekt. Je moet ook aan je publiek denken. Ik ga toch ook geen iPhone versie maken van mijn website?
Dan nog... ik ben geen fan van verticaal centreren. En horizontaal centreren kan eenvoudig metquote:Op dinsdag 3 maart 2009 23:04 schreef Flaccid het volgende:
[..]
Ik ga er van uit dat niemand mij mobiel bereikt.
1 |
Je kunt eens op deze pagina kijken. En dan op de linkjes in de fouten klikken (font, cursor, display)quote:Ik ben niet zo professioneel als jij misschien denkt. Ik klus hier en daar wat bij.
Kan je een css fout opnieuw dan die ik maak? Ik wil graag nogsteeds leren.
Je kunt dan voor contact ook een contactformuliertje gebruiken. Dan maak je je mailadres niet bekend op de site (of niet als tekst) en kunnen mensen je wel bereiken.quote:Ik had op mijn vorige website heel erg last van spam. Mij leek dit de beste manier om mijn e-mail adres toch openbaar te maken. Als je gewoon <hier stond een mailadres> daar plat op de site neerpleurt, is de kans op spam erg groot.
Ik vond het mooi om hem vertical te centreren. Een absolute gepositioneerd object centreren (horizontaal) lukt niet met margin:0 auto;quote:Op dinsdag 3 maart 2009 23:17 schreef Light het volgende:
Dan nog... ik ben geen fan van verticaal centreren. En horizontaal centreren kan eenvoudig met
[ code verwijderd ]
Dit zijn dan misschien een soort hacks? Die font heb ik er inmiddels uitgehaald. Die cursor heb ik nodig in IE, omdat ik het anders minder mooi vind, en niet duidelijk is dat het klikbaar is. Verder moet ik dat op die gekke manier doen, inline-block. Als ik niks doe, gaat het mis, inline en block gaan ook mis. Welke display zoek ik hier? En dan zie ik dit: http://www.webmasterworld.com/forum83/4640.htm - Het is wel 4 jaar oud, maar dan nog. Het werkt ook in FireFox. Is W3C verder ook niet een richtlijn ipv een must?quote:Je kunt eens op deze pagina kijken. En dan op de linkjes in de fouten klikken (font, cursor, display)
[..]
Dat ga ik doen. reCaptcha erbij zetten?quote:Je kunt dan voor contact ook een contactformuliertje gebruiken. Dan maak je je mailadres niet bekend op de site (of niet als tekst) en kunnen mensen je wel bereiken.
En kijk nu eensquote:Op dinsdag 3 maart 2009 23:31 schreef ikJur het volgende:
cursor: pointer; will do the same job. en voor dat formulier zou ik wel captcha gebruiken ja.
nice, nu die 2 warnings nogquote:Op dinsdag 3 maart 2009 23:33 schreef Flaccid het volgende:
[..]
En kijk nu eens
http://jigsaw.w3.org/css-validator/validator?uri=www.jeroencoelen.nl&profile=css21&usermedium=all&warning=1&lang=en
en
http://validator.w3.org/check?uri=http%3A%2F%2Fjeroencoelen.nl%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0
Valid CSS en HTML.
Het viel wel mee toch?
BTW ik heb websolutions maar weggehaald. Beetje groot woord voor de kleine diensten die ik lever.
Edit rules. Het valt heel erg mee. Alleen mn contact dingetje, maar dat is een plaatje. Maar het is nu al beter dan eerst?quote:Op dinsdag 3 maart 2009 23:39 schreef ikJur het volgende:
je moet voor de grap je css eens uitzetten dan kan je zien wat google indexeert.
ik zie nu dat het nog wel meevalt maar voor grotere sites zou het wel problematisch zijn
Correct, ik positioneer dan ook bij voorkeur niet absoluut. Als ik iets verticaal moet centreren (omdat dat in het aangeleverde ontwerp zo staat en de klant niet op andere gedachten te brengen is) dan doe ik dat bij voorkeur met een extra div.quote:Op dinsdag 3 maart 2009 23:24 schreef Flaccid het volgende:
[..]
Ik vond het mooi om hem vertical te centreren. Een absolute gepositioneerd object centreren (horizontaal) lukt niet met margin:0 auto;
1 2 3 4 5 6 7 | <body> <div id="vcenter"></div> <div id="container"> --- site content --- </div> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | height: 100%; } #vcenter { height: 50%; margin-bottom: -123px; } #container { margin: 0 auto; height: 246px; width: 1000px; position: relative; /* Als je dan iets absoluut wilt/moet positioneren, kan dat netjes binnen de container */ } |
Ik zou om te beginnen al geen <span> in een <a> zetten. Dan heb je ook meteen die onmouseover niet meer nodig, je kunt een style maken voor a:hover (en dat werkt dan ook in alle browsers, inclusief IE6).quote:Dit zijn dan misschien een soort hacks? Die font heb ik er inmiddels uitgehaald. Die cursor heb ik nodig in IE, omdat ik het anders minder mooi vind, en niet duidelijk is dat het klikbaar is. Verder moet ik dat op die gekke manier doen, inline-block. Als ik niks doe, gaat het mis, inline en block gaan ook mis. Welke display zoek ik hier? En dan zie ik dit: http://www.webmasterworld.com/forum83/4640.htm - Het is wel 4 jaar oud, maar dan nog. Het werkt ook in FireFox. Is W3C verder ook niet een richtlijn ipv een must?
Lijkt me slim.quote:Dat ga ik doen. reCaptcha erbij zetten?
Maar dit is puur smaak neem ik aan? Ik vond dit het mooist, omdat ik geen poespas om mijn website wilde.quote:Op dinsdag 3 maart 2009 23:50 schreef Light het volgende:
[..]
Correct, ik positioneer dan ook bij voorkeur niet absoluut. Als ik iets verticaal moet centreren (omdat dat in het aangeleverde ontwerp zo staat en de klant niet op andere gedachten te brengen is) dan doe ik dat bij voorkeur met een extra div.
[ code verwijderd ]
[ code verwijderd ]
Zoiets.
Dat stuk is inderdaad best warrig. Op deze manier begrijp ik wel wat er staat. Ik weet niet of ik dit doe (eigenwijs, sorry)quote:Ik zou om te beginnen al geen <span> in een <a> zetten. Dan heb je ook meteen die onmouseover niet meer nodig, je kunt een style maken voor a:hover (en dat werkt dan ook in alle browsers, inclusief IE6).
Ik zie nu dat reCaptcha iets nieuws heeft: Mailhide. Dan moet je een captcha vraag beantwoorden en dan krijg je het e-mail adres.quote:[..recaptcha..]
Lijkt me slim.
Ik vind info minder persoonlijk staan. Ik wil niet zo professioneel overkomen als een echt bedrijf, want ze hebben gewoon te maken met een scholier.quote:Op dinsdag 3 maart 2009 23:12 schreef ikJur het volgende:
[..]
ik doelde meer op de manier waarop je het ik@bladibla is niet zo proffesioneel doe dan mail@ of info@ of contact@
Je bedoelt in een plaatje omdat bots dat kunnen lezen?quote:niet zo snugger overigens om nu alsnog je mail op deze manier op internet te zetten
ok dat is een keuze die ik wel begrijp.quote:Op dinsdag 3 maart 2009 23:56 schreef Flaccid het volgende:
[..]
Ik vind info minder persoonlijk staan. Ik wil niet zo professioneel overkomen als een echt bedrijf, want ze hebben gewoon te maken met een scholier.
nee je zet net je adres gewoon op fokquote:[..]
Je bedoelt in een plaatje omdat bots dat kunnen lezen?
Dat moet je zelf weten.quote:Op dinsdag 3 maart 2009 23:54 schreef Flaccid het volgende:
Ik zie nu dat reCaptcha iets nieuws heeft: Mailhide. Dan moet je een captcha vraag beantwoorden en dan krijg je het e-mail adres.
Contactformulier maken of de Mailhide?
Zou je mijn adres uit jouw quote ff kunnen verwijderenquote:
Failquote:Op woensdag 4 maart 2009 00:13 schreef ikJur het volgende:
[..]
ok dat is een keuze die ik wel begrijp.
[..]
nee je zet net je adres gewoon op fok
Zo ongeveer?quote:Op woensdag 4 maart 2009 00:21 schreef Flaccid het volgende:
[..]
Zou je mijn adres uit jouw quote ff kunnen verwijderen
waarom heb je geen toegang tot de file?quote:Op woensdag 4 maart 2009 10:28 schreef Flaccid het volgende:
Hoe kan ik aan de inhoud van een iframe, de src dus, een ander style sheet vastmaken? Ik heb geen toegang tot deze file.
1 2 | limit is dat alle iframe bestanden er zo gaan uitzien. } |
op deze manier hoeft het nog niet eens met class :Pquote:Op woensdag 4 maart 2009 10:37 schreef veldmuis het volgende:
Dus de iframe een class meegeven! Want dat kan wel, toch? Denk ik? Ik snap de toegang niet zo, maar dat gok ik. Verwacht ik. Neem ik aan.
1 2 3 4 | css file: iframepje { css } |
Snap ik maar omdat je zei van ja dan gaan alle iframe lollers er zo uitzien snapte witteni?quote:Op woensdag 4 maart 2009 10:42 schreef cablegunmaster het volgende:
[..]
op deze manier hoeft het nog niet eens met class
1 |
Mits de inhoud van het iframe op hetzelfde domein draait als de parent, kun je gewoon in de HTML rommelen met JS (en een stylesheet toevoegen aan de header).quote:Op woensdag 4 maart 2009 10:28 schreef Flaccid het volgende:
Hoe kan ik aan de inhoud van een iframe, de src dus, een ander style sheet vastmaken? Ik heb geen toegang tot deze file.
wat moet het worden?quote:Op woensdag 4 maart 2009 10:45 schreef Flaccid het volgende:
Mijn iframe had al een id. Het enige is, het gaat om een tabel die zijn kleur krijgt dmv:
[ code verwijderd ]
Heel lelijk om naar te kijken, maar ik weet niet hoe ik dit kan aanpakken.
En waar zou ik dan op moeten zoeken?quote:Op woensdag 4 maart 2009 10:47 schreef Roy_T het volgende:
[..]
Mits de inhoud van het iframe op hetzelfde domein draait als de parent, kun je gewoon in de HTML rommelen met JS (en een stylesheet toevoegen aan de header).
edit: Inline styles worden daarmee niet overschreven, die zul je dan ook met JS moeten verwijderen.
Ik wil een bg instellen met een simpele gradient. Het gaat om dit ding btw:quote:
Hoe wil ik dat aan de table meegeven als ik geen toegang heb tot die tabel?quote:Op woensdag 4 maart 2009 11:02 schreef cablegunmaster het volgende:
background: url(http://www.waar je plaatjestaat.nl/plaatje.png) no-repeat left top;
en dit dan aan de table meegeven en het plaatje gradient maken
zo zou ik het hebben opgelost
1 |
opdracht voor school ik zal het resultaat wel posten als het klaar is.quote:
1 2 3 4 5 6 7 | [...] background-image: url("../images/mains/grass_background.png"); background-position: bottom; background-attachment: fixed; background-repeat: repeat-x; } |
Thanks! Even bookmarkenquote:Op maandag 9 maart 2009 09:22 schreef Roy_T het volgende:
Gebruik DD_belatedPNG zou ik zeggen
Dan kun je ook background-repeat, etc gebruiken voor PNG's in IE6. Dat kan met supersleight toch niet?
Hmm, dat klopt, hoewel ik het niet zo erg vond, aangezien we ondersteuning voor 'perfectie' in IE6 hebben laten vallen Alle visuele elementen die niet goed werken en niet 1,2,3 aan de praat te krijgen zijn zijn jammer dan en vliegen de laan uit, zolang de informatie maar beschikbaar is.. Maar toch maar even kijken naar die link Thnx.quote:Op maandag 9 maart 2009 09:22 schreef Roy_T het volgende:
Gebruik DD_belatedPNG zou ik zeggen
Dan kun je ook background-repeat, etc gebruiken voor PNG's in IE6. Dat kan met supersleight toch niet?
waarom wil je dat nou weer ?quote:Op dinsdag 10 maart 2009 22:01 schreef Chandler het volgende:
Weet iemand of het mogelijk is om in een textarea een vaste achtergrond te zetten? zodat deze niet verspringt als je entert?
Thx, met deze opbouwende kritiek kan ik wel wat!! Ik ga ermee aan de slagquote:Op dinsdag 10 maart 2009 21:53 schreef Roy_T het volgende:
Stuk beter metallicattim!
Op basis van wat ik nu snel gezien heb:
Het is nu tijd om wat meer op semantiek te letten. Je lijst met menu items bijvoorbeeld, is een lijst en geen paragraaf. Het zou dus logischer zijn om hier een <ul> voor te gebruiken.
Zorg daarnaast dat de namen van de CSS classes en ID's beschrijvend zijn. Vermijd zaken als "red" en "rechts". Je regelt de lay-out nu met CSS, maar je krijg een vreemde situatie als je de tekst liever links en groen wilt hebben: je class "redrechts" dekt dan de lading niet meer. Maak het beschrijvend, zoals "introtekst", etc etc (wat het is dus, en niet hoe het eruit ziet).
PNG's kun je prima gebruiken, zolang je beseft dat de transparantie in PNG's niet werkt in IE6 (wél in IE7 en 8). Je kunt daar kunstgrepen voor uithalen, of denken "fuck IE6" Het voordeel van PNG's is dat ze het fenomeen "semi-transparant" kennen, waar in een GIF een pixel helemaal transparant is, of helemaal niet.
PS: Haal die <center> eens snel weg, dat kan ook in de CSS
Nee, dat kan niet. Wat je wél kunt doen is een div die achtergrond geven, met daarbinnen een textarea met dezelfde afmetingen als die div en background: transparent.quote:Op dinsdag 10 maart 2009 22:24 schreef Chandler het volgende:
om een afbeelding als achtergrond te gebruiken voor een textarea? vraag van een klantje, en het wil wel maar niet in alle browsers (IE7 bv)
PHPquote:Op woensdag 11 maart 2009 15:41 schreef metallicattim het volgende:
ik zit nu op werk, dus kan niet al te veel aan de site doen, maar nu valt me bv. in dat ik nog een menu-item wil toevoegen, dat moet ik nu dus op elke pagina erbij gaan plakken.
Is er geen mogelijkheid om een menu te maken en deze "op te vragen" op elke pagina, zodat je het menu maar op 1 plek hoeft aan te passen en dat op elke pagina doorgevoerd word ( Dat was toch de kracht van CSS? ) maar dit kan niet via een div in style.css of toch?
1 |
1 2 3 | include 'menu.php' ?> |
Zolang elk bestand waar het menu in voorkomt maar php heet snapt de php code je werkingquote:Op donderdag 12 maart 2009 00:10 schreef Roy_T het volgende:
Sterker nog, je mag 'm ook gewoon menu.html noemen en die includen in je iets.php
Hoeft niet eens, zolang er in de httpd.conf van apache maar staat aangegeven dat het betreffende bestandsformaat geparsed wordt door php is er niks aan de hand..quote:Op donderdag 12 maart 2009 00:53 schreef cablegunmaster het volgende:
[..]
Zolang elk bestand waar het menu in voorkomt maar php heet snapt de php code je werking
1 2 3 4 5 6 7 | height: 20px; left: 260px; background: #CCC; position: absolute; bottom: 20px; padding-top: 20px; |
SUPER!!quote:
wat staat er in de html? en wat is de css voor tekst?quote:Op donderdag 12 maart 2009 17:19 schreef klusmeister het volgende:
iemand een idee waarom in IE mijn footer div zo'n resultaat geeft:
[ afbeelding ]
en in FF en Chrome zo'n resultaat geeft:
[ afbeelding ]
En wat ik er aan zou kunnen doen om het goed te krijgen ? ;-)
[ code verwijderd ]
Probeer eens wat te varieren met { line-height: ##px } op het element waar de tekst in staat.quote:Op donderdag 12 maart 2009 17:19 schreef klusmeister het volgende:
iemand een idee waarom in IE mijn footer div zo'n resultaat geeft:
[ afbeelding ]
en in FF en Chrome zo'n resultaat geeft:
[ afbeelding ]
En wat ik er aan zou kunnen doen om het goed te krijgen ? ;-)
[ code verwijderd ]
Als dat in OP komt, dan heb ik nog wel een stuk of 10 libraries die erin kunnen. Je kunt je ook afvragen waarom je zo'n library nodig hebt. Je bent best wel een prutser als je een site in IE7 niet hetzelfde krijgt als in Firefox, zonder hier meer dan 5 minuten extra aan te besteden. Het is imo plain evil om dat met JS op te gaan lossen.quote:Op dinsdag 17 maart 2009 21:37 schreef cablegunmaster het volgende:
http://code.google.com/p/ie7-js/
toevoegen aan OP! svp Dat maakt het dat IE zich ook degelijk gedraagt ^^ als Firefox.
Wel eenvoudig.quote:Op woensdag 18 maart 2009 00:37 schreef Roy_T het volgende:
[..]
Als dat in OP komt, dan heb ik nog wel een stuk of 10 libraries die erin kunnen. Je kunt je ook afvragen waarom je zo'n library nodig hebt. Je bent best wel een prutser als je een site in IE7 niet hetzelfde krijgt als in Firefox, zonder hier meer dan 5 minuten extra aan te besteden. Het is imo plain evil om dat met JS op te gaan lossen.
Had het eigenlijk tegen degene die propageerde dat het in de OP moest. Maar heb al wat gevonden.quote:
Je zult echt eerst uit moeten leggen hoe een li iets "omhoog duwt"quote:Op vrijdag 20 maart 2009 15:11 schreef Nashje het volgende:
Is het mogelijk om een plaatje in een li te plaatsen, zonder dat die li de bovenliggende li omhoog duwt?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |