[html, css, js] voor dummies #18

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  donderdag 10 november 2011 @ 10:55:46 #226
56176 Catch22-
Ben je Blind?!
pi_104194869
ik zorg dat ik weet wat er mogelijk is en pas dat toe als het nodig is...
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104195035
maar als je niet weet wat ermee kan..is het nogal lastig te verzinnen

zoiets zocht ik..
http://visionwidget.com/t(...)mples-tutorials.html
kent iemand nog leuke sites
  donderdag 10 november 2011 @ 11:04:32 #228
137776 boem-dikkie
Jedi Mind Baby!
pi_104195087
quote:
0s.gif Op donderdag 10 november 2011 11:02 schreef MrNiles het volgende:
maar als je niet weet wat ermee kan..is het nogal lastig te verzinnen

Daarvoor is natuurlijk de documentatie.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  donderdag 10 november 2011 @ 11:06:27 #229
220026 Treces
Hier had uw tekst kunnen staan
pi_104195144
quote:
0s.gif Op donderdag 10 november 2011 11:02 schreef MrNiles het volgende:
maar als je niet weet wat ermee kan..is het nogal lastig te verzinnen

zoiets zocht ik..
http://visionwidget.com/t(...)mples-tutorials.html
kent iemand nog leuke sites
Google op "Best jQuery examples", dan vindt je er genoeg.
  donderdag 10 november 2011 @ 11:16:13 #230
63192 ursel
"Het Is Hier Fantastisch!
pi_104195422
quote:
0s.gif Op donderdag 10 november 2011 11:02 schreef MrNiles het volgende:
maar als je niet weet wat ermee kan..is het nogal lastig te verzinnen

zoiets zocht ik..
http://visionwidget.com/t(...)mples-tutorials.html
kent iemand nog leuke sites
Zitten wel aantal mooie tussen. :Y
pi_104242364
Volgens mij heb ik een heel simpel probleem, maar ik kom er niet uit.

Ik heb een table.

1
2
3
4
5
6		<table class="signuptable" width="366">    
        <tr>
            <td>First name *</td>
            <td><input type="text" name="First name" /></td>
        </tr>
</table>

Zoals je kunt zien heeft de table een class omdat iedere td (of tr als dat zou lukken) een margin-top moet krijgen van 10. En ik krijg het gewoon niet voor elkaar. De volgende dingen heb ik al geprobeerd (Mét en zonder extra spaties tussen table en .signuptable:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		table.signuptable td{
    margin-top:10px;
}
table.signuptable{
    margin-top:10px;
}
table.signuptable tr{
    margin-top:10px;
}
.signuptable tr{
    margin-top:10px;
}
.signuptable td{
    margin-top:10px;
}

Het enige wat iets doet is .signuptable en die een margin-top geven, maar dan krijgt de hele tabel een margin.
Ik zie volgens mij iets heel logisch over het hoofd, maar wát. Iemand enig idee?
pi_104242446
cell-spacing border-spacing zie je over het hoofd.

Of padding gebruiken.
zcflevo.nl
pi_104242494
quote:
14s.gif Op vrijdag 11 november 2011 12:56 schreef KomtTijd... het volgende:
cell-spacing borderspacing zie je over het hoofd.

Of padding gebruiken.
Die mag ik niet gebruiken, wel gelijk even op nul gezet.

Even met padding proberen, dankje O+
pi_104242506
.signuptable td met padding-top werkt, dankje O+
  vrijdag 11 november 2011 @ 13:00:08 #235
56176 Catch22-
Ben je Blind?!
pi_104242571
margins op td's werken idd.

2 tips:
- Width aangeven met css en niet inline
- zet cellpadding="0" cellspacing="0" in je table definitie en zet eventuele paddings handmatig.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104242703
Als je het helemaal sjiek wilt doen werk je natuurlijk met labels en zonder table.
zcflevo.nl
  vrijdag 11 november 2011 @ 13:04:32 #237
56176 Catch22-
Ben je Blind?!
pi_104242725
ik gebruik voor zulke dingen altijd tables, niets mis mee. Labels invoegen zou wel netjes zijn.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104242798
Wordt ook nog wel veel gedaan omdat het voor forms vaak toch wel makkelijker is ja. En SEO op een form is meestal ook dikke onzin.
zcflevo.nl
pi_104243234
quote:
11s.gif Op vrijdag 11 november 2011 13:00 schreef Catch22- het volgende:
margins op td's werken idd.

2 tips:
- Width aangeven met css en niet inline
- zet cellpadding="0" cellspacing="0" in je table definitie en zet eventuele paddings handmatig.
Punt is dat ik dan nóg meer classes moet geven, dat vind ik niet zo nuttig.
Cellpadding ed had ik al gedaan, dankje voor de tip O+
quote:
11s.gif Op vrijdag 11 november 2011 13:04 schreef Catch22- het volgende:
ik gebruik voor zulke dingen altijd tables, niets mis mee. Labels invoegen zou wel netjes zijn.
Als het goed is wordt dit toch een no-follow, het is een tweede registreerpagina. Maar goed, dar ga ik volgens mij niet over :') Dus ik zie wel.
  vrijdag 11 november 2011 @ 13:20:37 #240
56176 Catch22-
Ben je Blind?!
pi_104243297
niks mis met meerdere classes.... Het is makkelijker om deze table (en eventuele tables met dezelfde eigenschappen) van een class te voorzien.

Ennuh, geen tables voor SEO? Volgens mij maakt het geen klap uit of je het in een table zet of niet... En het kan juist een pré zijn als je tabletdata bij een formulier niet wordt geindexeerd.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104243446
De table heeft al wel een class... maar dan moeten al die TD's weer een class krijgen om hun breedte mee te krijgen.

Het is bijna klaar, 6 weken werk, eindelijk, ik hoef het niet meer te zien /euforie/
  vrijdag 11 november 2011 @ 13:25:05 #242
56176 Catch22-
Ben je Blind?!
pi_104243479
Uhm, je kan dan toch gewoon .registerform td doen?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104243532
quote:
11s.gif Op vrijdag 11 november 2011 13:25 schreef Catch22- het volgende:
Uhm, je kan dan toch gewoon .registerform td doen?
Zou kunnen als inderdaaad alle TD's dezelfde breedte zouden hebben. Ugh. Gedoe. Ik snap je gedachtengang hoor! Maar in dit geval niet even practisch.

Nu mijn forms een breedte meegeven. Als ze mee willen werken vandaag.
pi_104243556
quote:
0s.gif Op vrijdag 11 november 2011 13:24 schreef RenRen- het volgende:
De table heeft al wel een class... maar dan moeten al die TD's weer een class krijgen om hun breedte mee te krijgen.

Het is bijna klaar, 6 weken werk, eindelijk, ik hoef het niet meer te zien /euforie/
Neejoh, gewoon td:first-child O+
zcflevo.nl
  vrijdag 11 november 2011 @ 13:27:15 #245
56176 Catch22-
Ben je Blind?!
pi_104243557
voor de padding kan het in ieder geval. Met CSS3 kan je ook de eerste TD van een TR selecteren (:first-child )

Je zou in ieder geval de labels moeten toepassen (met for="" erbij), dus kan je die een breedte geven :)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104243653
quote:
0s.gif Op vrijdag 11 november 2011 13:27 schreef KomtTijd... het volgende:

[..]

Neejoh, gewoon td:first-child O+
Ja dat mag je me nog een keer uitleggen, het werkt nooit, wat inhoudt; snap er niets van. _O-
quote:
11s.gif Op vrijdag 11 november 2011 13:27 schreef Catch22- het volgende:
voor de padding kan het in ieder geval. Met CSS3 kan je ook de eerste TD van een TR selecteren (:first-child )

Je zou in ieder geval de labels moeten toepassen (met for="" erbij), dus kan je die een breedte geven :)
Met die padding ook gebruikt, super :D Als ik weer tijd heb even inlezen in die labels, klinkt wel handig.
  vrijdag 11 november 2011 @ 13:30:58 #247
56176 Catch22-
Ben je Blind?!
pi_104243678
Het zorgt er o.a. voor dat als je op het label klikt, de input wordt geselecteerd. Erg handig imo

quote:
0s.gif Op vrijdag 11 november 2011 13:30 schreef RenRen- het volgende:

[..]

Ja dat mag je me nog een keer uitleggen, het werkt nooit, wat inhoudt; snap er niets van. _O-
http://www.quirksmode.org/css/nthchild.html
http://www.quirksmode.org/css/firstchild.html
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104243781
quote:
11s.gif Op vrijdag 11 november 2011 13:30 schreef Catch22- het volgende:
Het zorgt er o.a. voor dat als je op het label klikt, de input wordt geselecteerd. Erg handig imo

[..]

http://www.quirksmode.org/css/nthchild.html
http://www.quirksmode.org/css/firstchild.html
Klinkt heel handig, zie het nu ook ja. Vooral bij Radio Buttons. Bedankt voor de linkjes :Y.
Pagina is bijna af. Dan nog 1 pagina.
  vrijdag 11 november 2011 @ 13:35:03 #249
56176 Catch22-
Ben je Blind?!
pi_104243831
Let wel op de browser-compatibility, IE implementeert het niet (optimaal)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104243871
quote:
11s.gif Op vrijdag 11 november 2011 13:35 schreef Catch22- het volgende:
Let wel op de browser-compatibility, IE implementeert het niet (optimaal)
First- en last-child in ieder geval wel hoor!
althans op zijn minst vanaf IE8.
zcflevo.nl
  vrijdag 11 november 2011 @ 13:39:23 #251
56176 Catch22-
Ben je Blind?!
pi_104243999
Ik los zulke issues vaak met jQuery op.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		$(function(){ 
  var browser = $.browser;
  var browserVersion = parseInt(browser.version);
  var htmlRootElement = $("html");
  if(browser.msie) {
    if(browserVersion == 9) {
      htmlRootElement.addClass("ie9");
    }
    if(browserVersion == 8) {
      htmlRootElement.addClass("ie8");
    }
    if(browserVersion == 7) {
      htmlRootElement.addClass("ie7");
    }
  }
});

Zulke scripts maak ik ook voor .first, .last, .odd e.d.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  vrijdag 11 november 2011 @ 13:40:54 #252
137776 boem-dikkie
Jedi Mind Baby!
pi_104244055
Labels. O+
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_104244218
http://www.w3.org/Style/Examples/007/evenodd

OMG! Nooit meer {cylce values="odd,even"}
zcflevo.nl
  vrijdag 11 november 2011 @ 13:46:36 #254
56176 Catch22-
Ben je Blind?!
pi_104244285
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

Niet handig als je IE7 moet supporten :)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104244388
De achtergrondkleur die ik de odd-rijen meegeef is een RGBA kleur, dus IE7 gebruikers zien het verschil toch niet :+
zcflevo.nl
  PR/Manusje van alles vrijdag 11 november 2011 @ 13:49:53 #256
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_104244406
quote:
14s.gif Op vrijdag 11 november 2011 13:49 schreef KomtTijd... het volgende:
De achtergrondkleur die ik de odd-rijen meegeef is een RGBA kleur, dus IE7 gebruikers zien het verschil toch niet :+
IE7 gebruikers. :')
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! ©yvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
  vrijdag 11 november 2011 @ 13:55:34 #257
50298 QM84
Het Orakel
pi_104244609
quote:
11s.gif Op vrijdag 11 november 2011 13:39 schreef Catch22- het volgende:
Ik los zulke issues vaak met jQuery op.
[ code verwijderd ]

Zulke scripts maak ik ook voor .first, .last, .odd e.d.
Waarom met JS en niet gewoon met conditional comments? Die werken gegarandeerd altijd voor IE. JS kan je uitzetten..
dat dus.
pi_104244682
Laatst iemand via de mail: Er zit geen duidelijke scheiding tussen de forum-reacties, dat is lastig!
teruggemaild: Die zit er wel, ga maar een fatsoenlijke browser gebruiken :6

Heerlijk als je die vrijheid hebt als developer 6.gif
zcflevo.nl
  vrijdag 11 november 2011 @ 13:58:29 #259
56176 Catch22-
Ben je Blind?!
pi_104244712
quote:
14s.gif Op vrijdag 11 november 2011 13:49 schreef KomtTijd... het volgende:
De achtergrondkleur die ik de odd-rijen meegeef is een RGBA kleur, dus IE7 gebruikers zien het verschil toch niet :+
Waarom zou je dat doen?
quote:
7s.gif Op vrijdag 11 november 2011 13:55 schreef QM84 het volgende:

[..]

Waarom met JS en niet gewoon met conditional comments? Die werken gegarandeerd altijd voor IE. JS kan je uitzetten..
onoverzichtelijke bron. Die styles geef ik wel aan in een CSS die met een conditional comment wordt geinclude
quote:
0s.gif Op vrijdag 11 november 2011 13:49 schreef Surveillance-Fiets het volgende:

[..]

IE7 gebruikers. :')
Wie betaalt bepaalt he :)

quote:
10s.gif Op vrijdag 11 november 2011 13:57 schreef KomtTijd... het volgende:
Laatst iemand via de mail: Er zit geen duidelijke scheiding tussen de forum-reacties, dat is lastig!
teruggemaild: Die zit er wel, ga maar een fatsoenlijke browser gebruiken :6

Heerlijk als je die vrijheid hebt als developer [ afbeelding ]
Mja, ik zie dat niet echt als een professionele houding... Als ik iets maak, moet het ook in 95%+ van de gebruikte browsers werken. En zulke 'foutjes' zijn meestal het gevolg van een verkeerde aanpak en niet van browserincompetence.

Maar het is natuurlijk nogal een verschil of je voor jezelf kleine projectjes maakt, of dat je voor een baas (en dus klanten) werkt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104244777
quote:
11s.gif Op vrijdag 11 november 2011 13:58 schreef Catch22- het volgende:

[..]

Waarom zou je dat doen?

[..]

onoverzichtelijke bron. Die styles geef ik wel aan in een CSS die met een conditional comment wordt geinclude

[..]

Wie betaalt bepaalt he :)
omdat RGBA(0,0,0,0.1) way makkelijker is dan met photoshop op zoek gaan naar een kleur die net een tintje donkerder is dan je achtergrond :s)
zcflevo.nl
  vrijdag 11 november 2011 @ 14:02:18 #261
56176 Catch22-
Ben je Blind?!
pi_104244839
Dat klopt, maar dat kan je ook met opacity en een filter voor IE.

welke ik heel stoer met LESS mixins fix ;)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104244891
quote:
11s.gif Op vrijdag 11 november 2011 13:58 schreef Catch22- het volgende:

[..]

Mja, ik zie dat niet echt als een professionele houding... Als ik iets maak, moet het ook in 95%+ van de gebruikte browsers werken. En zulke 'foutjes' zijn meestal het gevolg van een verkeerde aanpak en niet van browserincompetence.

Maar het is natuurlijk nogal een verschil of je voor jezelf kleine projectjes maakt, of dat je voor een baas (en dus klanten) werkt.
Helemaal mee eens, maar in dit geval ben ik zelf zowel de baas als de klant, ergo: lui :+
Die forumtemplate gaat nog wel veranderen trouwens, maar ik moest 'm updaten van een oude naar een nieuwe layout en heb toen even heel snel wat kleurtjes bij elkaar gegrabbeld. En voor dingen als een wisselend achtergrondkleurtje voor de oneven rijen, daarvan vind ik dat fossielen die een fossiele browser gebruiken ook prima zonder kunnen.

quote:
11s.gif Op vrijdag 11 november 2011 14:02 schreef Catch22- het volgende:
Dat klopt, maar dat kan je ook met opacity en een filter voor IE.

welke ik heel stoer met LESS mixins fix ;)
Nee want dan wordt ook de inhoud transparant. Met een opacity van 0.1 is de boel dan echt niet meer leesbaar.
zcflevo.nl
  vrijdag 11 november 2011 @ 14:10:32 #263
56176 Catch22-
Ben je Blind?!
pi_104245135
quote:
0s.gif Op vrijdag 11 november 2011 14:03 schreef KomtTijd... het volgende:

[..]

Helemaal mee eens, maar in dit geval ben ik zelf zowel de baas als de klant, ergo: lui :+
Die forumtemplate gaat nog wel veranderen trouwens, maar ik moest 'm updaten van een oude naar een nieuwe layout en heb toen even heel snel wat kleurtjes bij elkaar gegrabbeld. En voor dingen als een wisselend achtergrondkleurtje voor de oneven rijen, daarvan vind ik dat fossielen die een fossiele browser gebruiken ook prima zonder kunnen.
Ie7 is al fossiel bij jou?
quote:
Nee want dan wordt ook de inhoud transparant. Met een opacity van 0.1 is de boel dan echt niet meer leesbaar.
Klopt. Maar ik heb meestal een echt afwijkende kleur voor odd-rows
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104245222
Nice.


En ja IE7 is al fossiel bij mij. IE is alweer 2 versies verder. per browser 2 versies onderhouden vind ik eigenlijk wel genoeg. Zeker als het gaat om een achtergrondkleurtje, functioneel zorg ik wel dat alles ook in IE7 werkt.
zcflevo.nl
pi_104247633
Nog een vraag.

Als ik 3 divjes naast elkaar heb, met een container daaromheen. De container neemt de hoogte van de langste div (100% geloof ik). De twee kortste divs moeten ook die hoogte aannemen. Hoe bereik ik dat? Want 100% doet geen drol.

(center is hier de div met de variabele hoogte) Dus
1
2
3
4
5		<div id="container"> 
<div id="left"></div>
<div id="center"></div>
<div id="right"></div> 
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14		#container{
height:100%;
}
#left{
height:100%;
float:left;
}
#right{
height:100%;
float:left;
}
center{
float:left;
}


[ Bericht 5% gewijzigd door RenRen- op 11-11-2011 15:13:17 (Paar dingies vergeten.) ]
pi_104247991
"Faux columns" is je google-term ;)
zcflevo.nl
  vrijdag 11 november 2011 @ 15:24:43 #267
12221 Tijn
Powered by MS Paint
pi_104248145
quote:
11s.gif Op vrijdag 11 november 2011 14:10 schreef Catch22- het volgende:

[..]

Ie7 is al fossiel bij jou?
Bij wie niet dan? IE7 is echt het absolute minimum waar ik voor develop en veruit de oudste browser waar ik überhaupt nog aandacht aan schenk.
Verberg de nieuwsticker
pi_104248183
quote:
14s.gif Op vrijdag 11 november 2011 15:21 schreef KomtTijd... het volgende:
"Faux columns" is je google-term ;)
Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
  vrijdag 11 november 2011 @ 15:29:21 #269
56176 Catch22-
Ben je Blind?!
pi_104248326
quote:
5s.gif Op vrijdag 11 november 2011 15:24 schreef Tijn het volgende:

[..]

Bij wie niet dan? IE7 is echt het absolute minimum waar ik voor develop en veruit de oudste browser waar ik überhaupt nog aandacht aan schenk.
Sja, klanten die het vragen, krijgen het ook (Betalen er ook voor immers)
quote:
0s.gif Op vrijdag 11 november 2011 15:25 schreef RenRen- het volgende:

[..]

Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.

1$("#container div").each(function() { $(this).height($(this).parent().height(); });
Zoiets.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104248340
quote:
0s.gif Op vrijdag 11 november 2011 15:25 schreef RenRen- het volgende:

[..]

Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
zcflevo.nl
pi_104248402
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:
[..]

gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.
[ code verwijderd ]

Zoiets.
Die snap ik niet... Nog even KT.. zijn maniertje proberen.
quote:
14s.gif Op vrijdag 11 november 2011 15:29 schreef KomtTijd... het volgende:

[..]

Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
Die heb ik niet, dus dat valt mee. het is wel echt nodig, want dubbel lijntje... Eeeeven proberen.
pi_104248510
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:

[..]

gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.
[ code verwijderd ]

Zoiets.
Hmm ik denk dat dat tegenwoordig haast een betere oplossing is. De fallback is hooguit dat de kolommen niet even hoog zijn, wat meestal ook niet echt een probleem is.
zcflevo.nl
  vrijdag 11 november 2011 @ 15:36:59 #273
56176 Catch22-
Ben je Blind?!
pi_104248605
sja, of opmaak met JS doen (heeft niet mijn voorkeur) of extra DOMobjecten toevoegen...

Met Js weet ik vrijwel zeker dat het werkt. Wel even uitkijken met paddings en inner/outerheight mocht je die oplossing proberen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104248630
quote:
14s.gif Op vrijdag 11 november 2011 15:29 schreef KomtTijd... het volgende:

[..]

Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
Ik krijg het niet voor elkaar... Moet ik even uitbesteden denk ik...
  vrijdag 11 november 2011 @ 15:45:28 #275
56176 Catch22-
Ben je Blind?!
pi_104248941
waarom wil je die hoogte? kan je geen repeterende achtergrond instellen die de achtergrond van die 2 kleinere kolommen faked?

en dat je die dan op de container instelt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  vrijdag 11 november 2011 @ 15:48:25 #276
12221 Tijn
Powered by MS Paint
pi_104249063
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:

[..]

Sja, klanten die het vragen, krijgen het ook (Betalen er ook voor immers)
Oh natuurlijk, als IE7 specifiek wordt gevraagd, dan krijgen ze het ook. Maar die vraag krijg ik eigenlijk niet vaak.
Verberg de nieuwsticker
pi_104249222
quote:
11s.gif Op vrijdag 11 november 2011 15:45 schreef Catch22- het volgende:
waarom wil je die hoogte? kan je geen repeterende achtergrond instellen die de achtergrond van die 2 kleinere kolommen faked?

en dat je die dan op de container instelt.
Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.
  vrijdag 11 november 2011 @ 16:00:54 #278
56176 Catch22-
Ben je Blind?!
pi_104249618
Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64		<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #container {
    float:left; 
  }
  #container div {
    float:left; 
    width:100px;
  }
  #left { border-left:1px solid red; }
  #center { border-left:1px solid red; border-right:1px solid red; }
  #right { border-right:1px solid red; }
</style>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#container div").each(function() { $(this).height($(this).parent().height()); });
                                          });
  </script>
</head>
<body>
  <div id="container"> 
    <div id="left"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
      3. Ja
    </div>
  <div id="center">
    <h1>Ja hallo</h1>
     <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
    <p>
        Echt mooi!
    </p>
  </div>
  <div id="right"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
    3. Ja<br />
      1. ja<br />
      2. Nee<br />
      3. Ja</div> 
  </div>
</body>
</html>
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104250365
quote:
11s.gif Op vrijdag 11 november 2011 16:00 schreef Catch22- het volgende:
Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken
[ code verwijderd ]

Ik ga er strakjes even naar kijken, ben even naar iets anders aan het kijken (en ik ben niet zo goed in jQuery, dus moet er even de tijd voor nemen).
En die situatie die ik probeer werkt dus niet, om de een of andere reden pakt de container zijn 100% al niet, waardoor de linker en de rechter 100% ook niet pakken. De container klapt namelijk in, wat raar is, want er staat content in...
  vrijdag 11 november 2011 @ 16:23:11 #280
56176 Catch22-
Ben je Blind?!
pi_104250558
je moet de container ook floaten, anders gaat t niet goed :)

als je daar een margin auto op hebt, moet je de divs ff wrappen
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  vrijdag 11 november 2011 @ 17:00:23 #281
50298 QM84
Het Orakel
pi_104252169
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		<!doctype html>
<html lang="nl">
<head>
    <title>TEST</title>
    <style>
    #wrapper {
      margin: 0 auto;
      overflow: hidden;
    }
    .col {
      float: left;
      width: 33%;
      padding-bottom: 100000px;
      margin-bottom: -100000px;
    }
    #col_left {
      border-left: 1px solid red;
      background-color: #cacaca;
    }
    #col_middle {
      border-left: 1px solid green;
      border-right: 1px solid yellow;
      background-color: #ececec;
    }
    #col_right {
      border-right: 1px solid pink;
      background-color: #343434;
    }
  </style>
</head>

<body>

<div id="wrapper">
    
    <div id="col_left" class="col">
    content
  </div>
  <div id="col_middle" class="col">
    content
  </div>
  <div id="col_right" class="col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula dignissim sem, eu pulvinar turpis facilisis rhoncus. Nam vitae massa eu sem ornare pretium at nec felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu venenatis magna. Maecenas lacinia faucibus risus, a aliquam lacus auctor et. In cursus tempus rhoncus. Morbi nec luctus leo. Etiam risus nibh, viverra sit amet euismod non, lobortis a nibh. Vestibulum bibendum accumsan sapien, id sagittis purus sodales a. Nullam at lectus ipsum.
  </div>
    
</div>
</body>
</html>

werkt ook.. Is wel vrij smerig en eigenlijk af te raden. Maar dat is het hele idee van geforceerd meerdere kolommen op gelijke hoogte willen hebben ook ;)
dat dus.
pi_104254281
quote:
0s.gif Op vrijdag 11 november 2011 15:51 schreef RenRen- het volgende:

[..]

Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.
Dat is juist een schoolvoorbeeldje voor faux columns. Gewoon een afbeeling met alleen 1 of 2 pixels erin, repeat-y, hopsakee.

Ik vind die oplossing van QM84 ook nog wel wat hebben trouwens.
zcflevo.nl
pi_104356775
Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		<body>

    <div id="header">
        
        <img src="images/logo.gif" style="width:110px; height:110px;" alt="logo"/>
        <img id="top_picture" src="images/HeaderHome.jpg" alt="header"/>
        
    </div>
    
        <ul id="menu">
            <li><a class="clicked" href="home.html">Home</a></li>
            <li><a href="nieuws.html">Nieuws</a></li>
            <li><a href="kippen.html">Kippen</a></li>
            <li><a href="fotoboek.html">Fotoboek</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62		body {
    margin: 0 auto;
    width: 950px;
    background: #FF9932;
    font-family: candara;
}

h1 {
    Font-size: 20px;
    color: #060;
}

p {
    margin-top: 20px;
    font-size: 12px;
}

h2 {
    font-size: 16px;
}

#header {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

#top_picture {
    border: 3px solid #FFDE82;
    margin-left: 25px;
}

#menu {
    position: absolute;
    padding-left: 0px;
}

#menu li {
    list-style-type: none;
    margin-bottom: 20px;
}

#menu li a{
    display: block;
    width: 115px;
    height: 40px;
    background: #744F03;
    font-family: 'Open Sans Condensed', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #E8C31F;
    font-size: 24px;
    padding-top: 3px;
}

#menu li a:hover{
    background: #372202;
}

.clicked {
    color: white!important;
}

Iemand die mij kan vertellen wat ik fout doe?

[ Bericht 0% gewijzigd door #ANONIEM op 14-11-2011 16:51:18 ]
pi_104357750
Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.

[ Bericht 67% gewijzigd door KomtTijd... op 14-11-2011 17:24:34 ]
zcflevo.nl
  maandag 14 november 2011 @ 17:21:44 #285
56176 Catch22-
Ben je Blind?!
pi_104358367
indien ie probleem: breedtes en/of paddings.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104359631
quote:
0s.gif Op maandag 14 november 2011 16:47 schreef Dimens het volgende:
Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:
[ code verwijderd ]

[ code verwijderd ]

Iemand die mij kan vertellen wat ik fout doe?
Welk doctype gebruik je?
quote:
0s.gif Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:

Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.
En dat. :)
fokstok.nl
  maandag 14 november 2011 @ 17:53:44 #287
220026 Treces
Hier had uw tekst kunnen staan
pi_104359677
jQuery wil bij mij niet echt lekker werken. Zo heb ik een pagina met afbeeldingen, bij een hover komt er tekst te staan die ik met jQuery verticaal probeer te centreren. Bij de eerste keer laden staat deze te ver naar onderen, echter bij een refresh (F5) staat deze wel weer gecentreerd.

Zo ook met een kaart (Google Maps API), bij eerste keer laden geeft hij de foute coordinaten weer, en wordt de kaart half geladen, bij een refresh staat alles goed.

Eerste keer:


Na refresh:


Iemand dit ook eerder gehad?
pi_104362438
Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).
Nee.
  maandag 14 november 2011 @ 19:23:11 #289
220026 Treces
Hier had uw tekst kunnen staan
pi_104364219
quote:
0s.gif Op maandag 14 november 2011 18:50 schreef PimD het volgende:
Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).
Precies om die reden, hoop gezeik met positions, en displays waar ik geen zin in had. En dit is de quick en dirty manier.

Overigens is het opgelost door de tabs-oproep ($(element).tabs();) op het einde van mijn javascript-script te doen. Kaartje doet het nu ook!
pi_104364603
quote:
0s.gif Op maandag 14 november 2011 17:52 schreef Light het volgende:

[..]

Welk doctype gebruik je?

[..]

En dat. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Dat staat er.
pi_104365202
quote:
0s.gif Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:
Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.
Dit is hoe het eruit ziet in Chrome, Firefox en Safari en is hoe ik het wil.



Dit is wat Internet Explorer ermee doet, niet zoals de rest dus.



Hij zet de banner bovenin naar links en het menu naar rechts. Alsof hij de padding-left: 0px; niet pakt in #menu.
pi_104365286
Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).
Nee.
pi_104365535
quote:
0s.gif Op maandag 14 november 2011 19:40 schreef PimD het volgende:
Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).
Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?
pi_104365588
Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?
Nee.
pi_104366060
quote:
0s.gif Op maandag 14 november 2011 19:45 schreef PimD het volgende:
Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?
Wat doet dat en hoe doe ik dat?
  maandag 14 november 2011 @ 20:55:48 #296
137776 boem-dikkie
Jedi Mind Baby!
pi_104370269
Waarom gebruik je positions? Doe gewoon op je logo een float: left, op je banner ook en op je menu ook.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  maandag 14 november 2011 @ 20:56:26 #297
137776 boem-dikkie
Jedi Mind Baby!
pi_104370321
quote:
0s.gif Op maandag 14 november 2011 19:44 schreef Dimens het volgende:

[..]

Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?
Je HTML/CSS ergens online neerzetten zodat wij het probleem 'live' kunnen zien.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_104372967
Dit is wat ik nu heb:

SPOILER: HTML
Om 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.
SPOILER: CSS
Om 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.
Het foutje met de header is eruit, die staat nu in elke browser goed. Helaas kan Internet Explorer nog steeds niet goed omgaan met de list.
Hoe doen jullie dat?
  maandag 14 november 2011 @ 21:33:26 #299
137776 boem-dikkie
Jedi Mind Baby!
pi_104373298
Voeg dit eens toe aan je CSS:

1
2
3		ul#menu{
margin: 0;
}
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_104373508
quote:
14s.gif Op maandag 14 november 2011 21:33 schreef boem-dikkie het volgende:
Voeg dit eens toe aan je CSS:
[ code verwijderd ]

Het werkt nog steeds niet, ik heb nog steeds last dat IE het menu een stuk naar rechts duwt.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #18
Index

» digital corner

» development

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