[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_113519841
Defineer "te groot"?
zcflevo.nl
  donderdag 28 juni 2012 @ 17:53:43 #102
292596 Faux.
Fan van zichzelf
pi_113520178
quote:
5s.gif Op donderdag 28 juni 2012 17:45 schreef KomtTijd... het volgende:
Defineer "te groot"?
Na even testen blijkt het aan de enters te liggen. Zodra er een enter in de tekst staat doet 'ie het niet meer.
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
pi_113549341
zet de enter om met nl2br
--edit--
oeps ik dacht dat ik in het php subforum zat lol

[ Bericht 57% gewijzigd door stefan1218 op 29-06-2012 11:28:52 ]
tjah :P
pi_113550226
als #textarea ook daadwerkelijk een <textarea> element is zou ik zeggen probeer het eens met innerHTML. Als het een input is is het natuurlijk logisch dat er geen enters in kunnen.
zcflevo.nl
pi_113574730
Een perl/js vraag die al opgelost is maar toch wat vragen oproept,
ik heb een regexp patroon [^a-z]/g, en wanneer ik een string waar geen alfabetisch karakter in voor komt test levert dit afwisselend true of false op. De global flag verwijderen zorgt dat de uitkomst constant wordt, maar dit hoort toch niet?

[ Bericht 0% gewijzigd door Quir op 29-06-2012 22:10:18 ]
"Social order at the expense of liberty is hardly a bargain."
  woensdag 4 juli 2012 @ 23:57:21 #106
220026 Treces
Hier had uw tekst kunnen staan
pi_113788123
Ik wil een grid van afbeeldingen maken op een fullscreen scherm, maar om te voorkomen dat er aan de rechterkant een zwarte balk komt kan ik mij een plugin herinneren die dit voorkomt (dus kijkt naar de schermbreedte en de afbeeldingen hierop aanpast).

Echter kan ik mij niet meer de naam herinneren, iemand die het zo weet?
pi_113788370
Waarom geen clear?
"Social order at the expense of liberty is hardly a bargain."
  donderdag 5 juli 2012 @ 00:22:13 #108
220026 Treces
Hier had uw tekst kunnen staan
pi_113789262
Zoals je ziet heb ik nu aan de rechterkant een witruimte.



Het liefst wil ik dat ie precies uitrekent hoe breed een afbeelding moet zijn wil ik dat kunnen voorkomen.
pi_113794284
quote:
7s.gif Op donderdag 5 juli 2012 00:22 schreef Treces het volgende:
Zoals je ziet heb ik nu aan de rechterkant een witruimte.

[ afbeelding ]

Het liefst wil ik dat ie precies uitrekent hoe breed een afbeelding moet zijn wil ik dat kunnen voorkomen.
width in % in plaats van px ?
  zaterdag 7 juli 2012 @ 09:50:59 #110
298746 Dalando
18, niet meer gefrustreerd
pi_113884262
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		function drawline(div1, div2, color, thickness) {
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + (off1.width / 2);
    var y1 = off1.top + (off1.height / 2);
    // top right
    var x2 = off2.left + (off2.width / 2);
    var y2 = off2.top + (off2.height / 2)
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    var angle_because_ie8_is_incompatible_garbage_radians = Math.atan2((y1-y2),(x1-x2));
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=" + angle_because_ie8_is_incompatible_garbage_radians + "); transform:rotate(" + angle + "deg);' />";
    
    document.body.innerHTML += htmlLine; 
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    var _w = el.offsetWidth|0;
    var _h = el.offsetHeight|0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x, width: _w, height: _h };
}
1drawline($('.player[data-playerid=52]'), $('.player[data-playerid=54]'), '#000', '3');

Waarom werkt het onderste stukje code niet?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
  zaterdag 7 juli 2012 @ 10:34:25 #111
137776 boem-dikkie
Jedi Mind Baby!
pi_113884846
Wat krijg je voor fout in je Chrome?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  zaterdag 7 juli 2012 @ 10:39:49 #112
298746 Dalando
18, niet meer gefrustreerd
pi_113884938
quote:
14s.gif Op zaterdag 7 juli 2012 10:34 schreef boem-dikkie het volgende:
Wat krijg je voor fout in je Chrome?
Geenenkele, maar de lijn die er moet komen komt er niet. Nouja, hij komt er wel, maar:

1<div style="padding:0px; margin:0px; height:3px; background-color:#000; line-height:1px; position:absolute; left:0px; top:-1.5px; width:0px; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transform:rotate(0deg);"></div>

Niet op de juiste positie.
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_114109114
Wat is het risico van het gebruiken van twee achtergronden, is die er of kan dit foutloos?

1
2
3
4		body {
    background-image: url(images/bg.png), url(images/bgtop.png);
    background-repeat: repeat, repeat-x;
}
  donderdag 12 juli 2012 @ 14:53:00 #114
56176 Catch22-
Ben je Blind?!
pi_114109226
het risico is dat het niet werkt in (oudere) browsers.

En background-repeat:repeat, repeat-x? Je maakt het jezelf wel moeilijk zo
1
2
3
4		body {
    background: url(images/bg.png) top left repeat-x, 
                          url(images/bgtop.png) top left no-repeat;
}
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?
  donderdag 12 juli 2012 @ 22:48:02 #115
75710 Sheep666
counting sheep
pi_114131710
Jáááááren geleden heb ik wel eens wat hobby sites gemaakt en ik dacht laatst, laat ik weer eens wat knutselen. De basis ken ik nog wel een beetje maar ik liep al snel vast. Dus een gratis template gevonden en daar verder op gaan borduren. Het lukt aardig, al zeg ik het zelf *) , maar ik zit nu toch met iets in de knoop...

Er zit een dropdownmenuutje in m'n menu bovenin, bij Collection (plaatje 1). Als ik bij Home ben dan is Home blauw (plaatje 1), zit ik bij Contact (plaatje 2), dan is Contact blauw maarrrrr... wil ik dat dropdownmenuutje (Collection) blauw hebben, dan wordt dat hele menuutje blauw en kun je de donkere tekst niet meer lezen (plaatje 3).







Dat blauwe krijg ik dan door class="selected" erbij te zetten (regel 12):
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		    <header>
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html"><span class="logo_colour">Sterling imitations</span></a></h1>
          <h2>And contemporary forgeries</h2>
        </div>
      </div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.html">Home</a></li>
          <li class="selected"><a>My Collection</a>
            <ul>
              <li><a>Short Cross Sterlings</a>
                <ul>
                  <li><a href="shortcrosssterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="shortcrosssterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              <li><a>Voided Long Cross Sterlings</a>
                <ul>
                  <li><a href="voidedlongcrosssterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="voidedlongcrosssterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              </li>
              <li><a>Edwardian Sterlings</a>
                <ul>
                  <li><a href="edwardiansterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="edwardiansterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              <li><a>Related Imitations</a>
                <ul>
                  <li><a href="relatedimitations.html">Jetons, Unknown, ...</a></li>
                </ul>
            </ul>
          </li>
          <li><a href="information.html">Information</a></li>
          <li><a href="articles.html">Articles</a></li>
          <li><a href="updates.html">Updates</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </nav>
    </header>

Dit is het stukje CSS code waar het om gaat (denk ik):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106		/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 200px;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
}

ul.sf-menu { 
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* Theming the menu */
ul#nav { 
  float: right;
}

ul#nav ul { 
  background: #09D4FF;
  margin-top: 5px;
  padding-bottom: 15px;
}

ul#nav li a { 
  padding:7px 0px 6px 15px;
  font: 170% 'Yanone Kaffeesatz', arial, sans-serif;
  text-shadow: 1px 1px #000;
  text-decoration: none;
  color: #FFF;
  margin-right: 2px;
}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
  color: #09D4FF;
  text-shadow: none;
}

ul#nav ul li a { 
  color: #FFF;
  text-shadow: none;
}

ul#nav ul li a:hover { 
  color: #222;
  margin-right: 2px;
}

Ik heb de maker van de template al een mailtje gestuurd maar daar komt geen antwoord op helaas... Niet dat het dramatisch is dat ik het niet blauw krijg, maar ik vind het nogal frustrerend dat het overal werkt, behalve bij dat menuutje |:(

Uh... help -O-
pi_114140822
Wat je nodig hebt is background-color: ipv color dat lost je probleem wel op :).
klinkt alsof je niet zo heel veel snapt van websites aanpassen als ik zo de pagina doorlees.

Voeg bij elke <ul> tag een class toe. (welke je een blauwe achtergrond wil geven.)
Dan ziet het er zo uit: <ul class='blue'>
voeg onderstaande code aan je CSS toe en vervolgens is je website aangepast.
1
2
3		.blue{
background-color: #09D4FF;
}
Dit zou je achtergrond van je menu blauw laten kleuren.
Best simpel knullig probleempje trouwens. ik raad je aan om je meer in CSS en html te verdiepen. Of een eigen begin van een website te maken.

[ Bericht 20% gewijzigd door cablegunmaster op 13-07-2012 06:40:32 ]
Redacted
pi_114140839
quote:
0s.gif Op donderdag 12 juli 2012 14:50 schreef Snoepje5 het volgende:
Wat is het risico van het gebruiken van twee achtergronden, is die er of kan dit foutloos?
[ code verwijderd ]

De vraag is wat je ermee wilt bereiken? Waarom zou je hiervan niet 1 plaatje maken? :{
Redacted
pi_114140850
quote:
2s.gif Op zaterdag 7 juli 2012 10:39 schreef Dalando het volgende:

[..]

Geenenkele, maar de lijn die er moet komen komt er niet. Nouja, hij komt er wel, maar:
[ code verwijderd ]

Niet op de juiste positie.
Dan moet je de code backtracen en kijken waar het fout gaat. voeg waar je denkt dat het fout gaat een alert(variabel naam); toe waarmee je echo't wat je eruit krijgt. Zodat je voor jezelf weet wat je eruit moet krijgen.

Snap namelijk ook niet wat je met het script probeert te bereiken.
Redacted
pi_114141165
quote:
10s.gif Op vrijdag 13 juli 2012 06:27 schreef cablegunmaster het volgende:

[..]

De vraag is wat je ermee wilt bereiken? Waarom zou je hiervan niet 1 plaatje maken? :{
Ik heb bijvoorbeeld een 'balk' aan de bovenkant van de website, repeat-x.

Wanneer het bijvoorbeeld pasen is, kerst e.d. kan ik een achtergrond plaatsen. Die komt dan achter die balk aan de bovenkant en naast de zijkanten van de content op de website. Als ik dit 1 afbeelding maak moet ik de balk aan de bovenkant breder maken, want dat is gewoon 10 px breed nu ongeveer.
pi_114141177
Dan maak je een div met een achtergrond erin? :P
Dit zou uiteindelijk het zelfde effect bereiken.
Dan dat je 2x een achtergrond op de body gooit.
Redacted
  vrijdag 13 juli 2012 @ 10:32:48 #121
75710 Sheep666
counting sheep
pi_114143862
quote:
10s.gif Op vrijdag 13 juli 2012 06:20 schreef cablegunmaster het volgende:
Wat je nodig hebt is background-color: ipv color dat lost je probleem wel op :).
Klinkt logisch!
quote:
klinkt alsof je niet zo heel veel snapt van websites aanpassen als ik zo de pagina doorlees.
Dit topic is toch voor dummies? :P
quote:
Voeg bij elke <ul> tag een class toe. (welke je een blauwe achtergrond wil geven.)
Dan ziet het er zo uit: <ul class='blue'>
voeg onderstaande code aan je CSS toe en vervolgens is je website aangepast.
Dit zou je achtergrond van je menu blauw laten kleuren.
Enorm bedankt voor je uitleg, ik ga er vanavond eventjes mee stoeien.
quote:
Best simpel knullig probleempje trouwens. ik raad je aan om je meer in CSS en html te verdiepen. Of een eigen begin van een website te maken.
Ik zal me inderdaad weer eens wat gaan inlezen, want er is toch wel eea veranderd tov 15 jaar geleden. Zeker dat hele CSS gebeuren is nieuw voor me.
Heb inderdaad zitten twijfelen tussen opnieuw beginnen of een template pakken, maar met 2 kleine kids heb ik al zo weinig tijd dus maar voor een template gekozen. Ik maak het me verder ook niet moeilijker dan nodig is, gewoon verder simpel wat tekst en plaatjes. Clean & simple, hou niet zo van 100 kleurtjes en knipperende lampjes.
Nogmaals dank en ik meld me nog dat het gelukt is (uitgaan van het positieve)! ^O^
  vrijdag 13 juli 2012 @ 11:13:48 #122
298746 Dalando
18, niet meer gefrustreerd
pi_114145415
quote:
10s.gif Op vrijdag 13 juli 2012 06:29 schreef cablegunmaster het volgende:

[..]

Dan moet je de code backtracen en kijken waar het fout gaat. voeg waar je denkt dat het fout gaat een alert(variabel naam); toe waarmee je echo't wat je eruit krijgt. Zodat je voor jezelf weet wat je eruit moet krijgen.

Snap namelijk ook niet wat je met het script probeert te bereiken.
Ik ben erachter, de selector werkt op een een of andere manier niet? Toch is de div er wel, ik weet het zeker...
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_114145555
quote:
2s.gif Op vrijdag 13 juli 2012 11:13 schreef Dalando het volgende:

[..]

Ik ben erachter, de selector werkt op een een of andere manier niet? Toch is de div er wel, ik weet het zeker...
Welke site gaat dit om? want als ik dit zo lees: $('.player[data-playerid=52]') is dit dan een div? o.0
Volgens jou logica zou er een div moeten bestaan met een class="player[data-playerid=52]"
Redacted
pi_114145692
quote:
0s.gif Op vrijdag 13 juli 2012 10:32 schreef Sheep666 het volgende:

[..]

Klinkt logisch!

[..]

Dit topic is toch voor dummies? :P

[..]

Enorm bedankt voor je uitleg, ik ga er vanavond eventjes mee stoeien.

[..]

Ik zal me inderdaad weer eens wat gaan inlezen, want er is toch wel eea veranderd tov 15 jaar geleden. Zeker dat hele CSS gebeuren is nieuw voor me.
Heb inderdaad zitten twijfelen tussen opnieuw beginnen of een template pakken, maar met 2 kleine kids heb ik al zo weinig tijd dus maar voor een template gekozen. Ik maak het me verder ook niet moeilijker dan nodig is, gewoon verder simpel wat tekst en plaatjes. Clean & simple, hou niet zo van 100 kleurtjes en knipperende lampjes.
Nogmaals dank en ik meld me nog dat het gelukt is (uitgaan van het positieve)! ^O^
Ja maar we gaan er wel van uit dat je er de nodige tijd insteekt!
Bij leest en bijleert. we zijn geen "Fix het wel even voor je " topic ;)
Redacted
  vrijdag 13 juli 2012 @ 11:22:57 #125
298746 Dalando
18, niet meer gefrustreerd
pi_114145761
quote:
0s.gif Op vrijdag 13 juli 2012 11:17 schreef cablegunmaster het volgende:

[..]

Welke site gaat dit om? want als ik dit zo lees: $('.player[data-playerid=52]') is dit dan een div? o.0
Volgens jou logica zou er een div moeten bestaan met een class="player[data-playerid=52]"
Oh nee, ik bedoel een DIV met een de class player en diezelfde div moet ook als data-playerid "52" hebben
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
actieve topics nieuwe topics
abonnement Unibet Coolblue
[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26
Index

» digital corner

» development

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