[html, css, js] voor dummies #17

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_100587054
ik heb een foto-pagina gemaakt voor mn site
het vervelende is dat er staande en liggende foto's zijn gemaakt, een erg rommelige opmaak krijg ik dan dus.
Ik had 2 oplossingen gezien:
1) Uit alle foto's een vierkant nemen, dus niet schalen maar een stuk afknippen van zijkant of bovenkant zodat alle foto's gelijk van grote zijn. Dit lijkt me het mooiste maar ik wil niet alle foto's gaan bewerken. Kan dit met een css of php trucje..
Dit heeft mijn voorkeur maar ik denk dat het lastig is..dus

2) Om elke foto een vierkantje zetten met de breedte van een ligggende foto en de hoogte van een staande foto.
Hoe ga ik dat aanpakken? Iemand suggesties?
pi_100588501
Ik zou voor optie twee gaan. En dan wel 'onzichtbaar' vierkant tov de achtergrond.
pi_100590471
quote:
0s.gif Op donderdag 11 augustus 2011 09:59 schreef Tegan het volgende:
Ik zou voor optie twee gaan. En dan wel 'onzichtbaar' vierkant tov de achtergrond.
zoiets had ik ook al bedacht
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.

Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
pi_100592177
ik ben nu een beetje aan het pielen maar volgens mij kan niet wat ik wil :(

is het mogelijk om de border of vierkantje om een staande EN liggende foto evengroot te krijgen.
een border voegt een rand toe aan de foto

ik heb ze maar geschaalt...niet zo mooi..maar wel snel resultaat :)

nog een vraag
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker

[ Bericht 44% gewijzigd door MrNiles op 11-08-2011 13:32:09 ]
  donderdag 11 augustus 2011 @ 15:06:22 #230
42636 TheSeeker_NL
Damn fine coffee
pi_100601459
quote:
0s.gif Op donderdag 11 augustus 2011 11:49 schreef MrNiles het volgende:

ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
http://www.iconarchive.com/ is misschien wat voor jou.
  donderdag 11 augustus 2011 @ 15:10:06 #231
42636 TheSeeker_NL
Damn fine coffee
pi_100601631
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
pi_100603311
quote:
0s.gif Op donderdag 11 augustus 2011 15:10 schreef TheSeeker_NL het volgende:
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
@font-face

kun je alle lettertypes gebruiken
lettertype zet je bij je css files
  donderdag 11 augustus 2011 @ 15:55:49 #233
42636 TheSeeker_NL
Damn fine coffee
pi_100603868
quote:
0s.gif Op donderdag 11 augustus 2011 15:45 schreef MrNiles het volgende:

[..]

@font-face

kun je alle lettertypes gebruiken
lettertype zet je bij je css files
Fijn ga ik me even in verdiepen, mijn dank is groot.
pi_100604580
quote:
0s.gif Op donderdag 11 augustus 2011 15:55 schreef TheSeeker_NL het volgende:

[..]

Fijn ga ik me even in verdiepen, mijn dank is groot.
tis heel simpel
je zit zoiets in je css

@font-face {
font-family: Eroded;
src: url('28days.ttf');
}

en in je class/div van je waar je je lettertype wilt hebben zet je iets van
font-family: Eroded

je moet het lettertype wel uitgepakt op je server hebben staan
pi_100608121
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.

[ Bericht 10% gewijzigd door PimD op 11-08-2011 17:52:35 ]
Nee.
  donderdag 11 augustus 2011 @ 17:53:33 #236
42636 TheSeeker_NL
Damn fine coffee
pi_100608482
quote:
0s.gif Op donderdag 11 augustus 2011 17:43 schreef PimD het volgende:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed.
hmm..

Ik was ook al aan het stoeien want ik had een .otf bestand bij mijn font en Chrome kon de pagina niet weergeven. Ik dacht dat ik het misschien verkeerd gecodeerd had of dat ik een .ttf moest vinden maar dat lukt me nog niet.

En op fontsquirrel is mijn font ook niet te vinden. Hé vervelend, maar ik ga die site wel even doorbladeren, misschien is er een vergelijkbaar font.
  donderdag 11 augustus 2011 @ 18:02:20 #237
230788 n8n
Pragmatisch
pi_100608811
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.

http://www.google.com/webfonts
“Specialization is for insects”.—Robert Heinlein
  donderdag 11 augustus 2011 @ 18:51:25 #238
42636 TheSeeker_NL
Damn fine coffee
pi_100610672
quote:
14s.gif Op donderdag 11 augustus 2011 18:02 schreef n8n het volgende:
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.

http://www.google.com/webfonts
Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..
pi_100610732
quote:
0s.gif Op donderdag 11 augustus 2011 11:04 schreef MrNiles het volgende:

[..]

zoiets had ik ook al bedacht
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.

Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
combineer met lightbox ofzo et voilla.
zcflevo.nl
  donderdag 11 augustus 2011 @ 18:57:18 #240
230788 n8n
Pragmatisch
pi_100610908
quote:
0s.gif Op donderdag 11 augustus 2011 18:51 schreef TheSeeker_NL het volgende:

[..]

Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..
Is wel een nadeel inderdaad, ze moeten het hebben van de licentievrije fonts, worden er vast gestaag meer
“Specialization is for insects”.—Robert Heinlein
pi_100748918
quote:
0s.gif Op donderdag 11 augustus 2011 17:43 schreef PimD het volgende:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.
ow, ik dacht dat dit css3 common was, crossbrowser enzo
maar tis maar wat ik lees op andere pagina's
deze geeft wel veel info erover
http://randsco.com/index.php/2009/07/04/p680
  maandag 22 augustus 2011 @ 13:48:00 #242
1872 Jumparound
bedankt voor de vis
pi_101038615
Een onwijze noob vraag, maar ik moet hem toch stellen ;-)

Ik heb een output van een java script. Is het mogelijk om op basis van de output een style toe te wijzen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		{

sitePreset: 'site-dashboard',

shortName: 'test',

title: 'test',

description: 'Dit is een test',

isFavourite: true,

isSiteManager: true

},
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
pi_101041301
Zoiets?
1
2
3
4
5		<a href='#' onclick='functietje("test");'>Verander stijl</a><br>

function functietje(e) {
    $('link').attr('href',e+'.css');
}
Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.

Edit; wel jquery als dat geen probleem is.
  maandag 22 augustus 2011 @ 16:48:27 #244
1872 Jumparound
bedankt voor de vis
pi_101044955
quote:
7s.gif Op maandag 22 augustus 2011 15:08 schreef DaFan het volgende:
Zoiets?
[ code verwijderd ]

Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.

Edit; wel jquery als dat geen probleem is.
ik denk dat ik iets vollediger moet zijn ;-)

dit is het stuk script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<script type="text/javascript">//<![CDATA[
   new Alfresco.dashlet.MySites("${args.htmlid}").setOptions(
   {
      imapEnabled: ${imapServerEnabled?string},
      sites: [
<#if sites??>
   <#list sites as site>
      {
         sitePreset: '${site.sitePreset?js_string}',
         shortName: '${site.shortName?js_string}',
         title: '${site.title?js_string}',
         description: '${site.description?js_string}',
         isFavourite: ${site.isFavourite?string},
         <#if imapServerEnabled>isIMAPFavourite: ${site.isIMAPFavourite?string},</#if>
         isSiteManager: ${site.isSiteManager?string}
      }<#if (site_has_next)>,</#if>
   </#list>
</#if>

dus de uitvoer in de browser is
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48		<div id="page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard"> 


<script type="text/javascript">//<![CDATA[

new Alfresco.dashlet.MySites("page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard").setOptions(

{

imapEnabled: false,

sites: [

{

sitePreset: 'site-dashboard',

shortName: 'test',

title: 'test',

description: '',

isFavourite: true,


isSiteManager: true

},

{

sitePreset: 'site-dashboard',

shortName: 'test2',

title: 'test2',

description: '',

isFavourite: true,


isSiteManager: true

}

en wil ik op basis van de 'title' een css style definiëren. dus voor title x (test1) een background image (test1.png)
voor test2 -> test2.png enz.

Ik besef me dat ik zodra ik een nieuwe site aanmaak ik ook de css moet updates met een nieuwe class voor de desbetreffende title, maar het aantal opties zijn beperkt, dus dat heb ik er wel voor over ;-)

zou dat mogelijk zijn?

en e.e.a. is gelinkt met my-sites.css
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
pi_101048207
tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?
zcflevo.nl
  dinsdag 23 augustus 2011 @ 10:06:51 #246
1872 Jumparound
bedankt voor de vis
pi_101075131
quote:
0s.gif Op maandag 22 augustus 2011 18:21 schreef KomtTijd... het volgende:
tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?
ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
pi_101076750
quote:
0s.gif Op dinsdag 23 augustus 2011 10:06 schreef Jumparound het volgende:

[..]

ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?
...lees de documentatie?

Het is duidelijk een soortement library/plugin waar dit stukje code gebruik van maakt.
zcflevo.nl
pi_101117109
misschien met php ipv js?
  donderdag 25 augustus 2011 @ 12:15:01 #249
42636 TheSeeker_NL
Damn fine coffee
pi_101166054
Ugh okay, eerst content dan. Ik wilde gewoon even weten of ik hier de logische namen had gekozen.

Misschien even geduldig wachten op mijn boeken.

[ Bericht 97% gewijzigd door TheSeeker_NL op 25-08-2011 12:23:46 ]
pi_101166309
Wat moet je zeggen over semantiek als er nog geen content is? Helemaal niets eigenlijk. En al helemaal niet over 6 betekenisloze elementen zonder inhoud.

Als je het echt goed wilt doen en tevens in HTML5 wilt gaan verdiepen, doe dan ook de HTML5 semantiek-elementen gebruiken zou ik zeggen.
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #17
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')