[CSS] voor dummies #15

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_84831326
Uit het vorige topic:

quote:
Op dinsdag 3 augustus 2010 20:22 schreef Black-Hole het volgende:

[..]

Laat eens wat van je code zien, cross browser compatability is een bitch soms.
Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.
fokstok.nl
pi_84832274
Waarom is HTML/CSS toch iets geworden dat iedere gebruiker met een computer denkt te moeten kunnen zonder enige relevante research te doen? Ik ga toch ook niet een tafel in elkaar timmeren zonder daar op z'n minst een boek over te lezen of research over te doen :D
Bleuh.
  woensdag 4 augustus 2010 @ 10:00:53 #4
71610 Black-Hole
Deep in my soul
pi_84843354
quote:
Op dinsdag 3 augustus 2010 22:13 schreef Light het volgende:
Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.
Met HTLM5 is dat nu ontzettend simpel :)
1<!doctype HTML>
pi_84844298
Dit is 'm dus, in Firefox ziet hij er netjes uit, niks geen pro website ofzo maar voor ons is het goed genoeg. Als jullie 'm in Firefox openen ziet hij er dan ook redelijk uit? Ik bedoel, rechte stukjes tekst en geen blauwe lijnen om de afbeeldingen heen?
  woensdag 4 augustus 2010 @ 10:40:52 #6
84244 Scorpie
Abject en infaam!
pi_84844326
Pom pom :P
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
pi_84860290
Bij mij in Firefox 3.6 op de Mac lijkt hetnaar behoren te werken.
Bleuh.
  woensdag 4 augustus 2010 @ 20:55:32 #8
71610 Black-Hole
Deep in my soul
pi_84868082
quote:
Op woensdag 4 augustus 2010 10:39 schreef Gitaarmat het volgende:
Dit is 'm dus, in Firefox ziet hij er netjes uit, niks geen pro website ofzo maar voor ons is het goed genoeg. Als jullie 'm in Firefox openen ziet hij er dan ook redelijk uit? Ik bedoel, rechte stukjes tekst en geen blauwe lijnen om de afbeeldingen heen?
Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.
pi_84868164
Wel mooie Mystery Meat Navigation trouwens, chapeau! :D
Bleuh.
pi_84887646
quote:
Op woensdag 4 augustus 2010 20:55 schreef Black-Hole het volgende:

[..]

Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.
En nu dan? Bij mij ziet het er nu zo uit:

pi_84898893
Waarom werkt tekst transparantie in de volgende situatie niet?

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		<style>
        
    .container {
        background-color: #000000;  /* the background          */
        filter:alpha(opacity=60);   /* Internet Explorer       */
        -moz-opacity:0.6;           /* Mozilla 1.6 and below   */
        opacity: 0.6;               /* newer Mozilla and CSS-3 */
    }
    .opaquetext {
       filter:alpha(opacity=100);  /* discarded */
       -moz-opacity:1.0;           /* discarded */
       opacity: 1.0;               /* discarded */
       color: #FFFFFF;
    }
    
</style>

<div class="container" style="margin-bottom: 10px;">
    <div class="opaquetext">
      This is a normal text
      on a translucent background
    </div>
</div>

<div style="background-color: #FF0000; height: 100px;">
    <div class="container" style="margin-bottom: 10px;">
        <div class="opaquetext">
          This is a normal text
          on a translucent background
        </div>
    </div>
</div>
Zoals te zien is dat bij de eerste div situatie de tekst gewoon mooi wit is, maar bij de twee is de tekst ineens roodachtig ook al zou je anders verwachten :?
  donderdag 5 augustus 2010 @ 16:51:34 #12
91039 mstx
2x1/2 = 1/2 x 1/2
pi_84899364
quote:
Op donderdag 5 augustus 2010 16:37 schreef Pakspul het volgende:
Waarom werkt tekst transparantie in de volgende situatie niet?
[ code verwijderd ]

Zoals te zien is dat bij de eerste div situatie de tekst gewoon mooi wit is, maar bij de twee is de tekst ineens roodachtig ook al zou je anders verwachten :?
Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.
Dat die bovenste tekst wel mooi wit is komt omdat de achtergrond daar ook wit is, wit+wit blijft altijd wit. Daaronder echter zit alles in een container die een rode achtergrondkleur heeft. Wit+rood = roze. ;)
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_84899455
quote:
Op donderdag 5 augustus 2010 16:51 schreef mstx het volgende:

[..]

Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.
Dat die bovenste tekst wel mooi wit is komt omdat de achtergrond daar ook wit is, wit+wit blijft altijd wit. Daaronder echter zit alles in een container die een rode achtergrondkleur heeft. Wit+rood = roze. ;)
Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?
  donderdag 5 augustus 2010 @ 17:00:23 #14
91039 mstx
2x1/2 = 1/2 x 1/2
pi_84899649
quote:
Op donderdag 5 augustus 2010 16:54 schreef Pakspul het volgende:

[..]

Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?
- Halftransparante PNG als achtergrond nemen en geen opacity instellen
- Tekst in een aparte div er absoluut/relatief overheen plaatsen
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_84902311
Of gewoon rgba-kleuren gebruiken.
Bleuh.
  donderdag 5 augustus 2010 @ 22:25:22 #16
71610 Black-Hole
Deep in my soul
pi_84913671
quote:
Op donderdag 5 augustus 2010 11:24 schreef Gitaarmat het volgende:

En nu dan? Bij mij ziet het er nu zo uit:

Nu ziet het er prima uit, zowel in FF als Chrome.
pi_84934596
quote:
Op donderdag 5 augustus 2010 22:25 schreef Black-Hole het volgende:

[..]

Nu ziet het er prima uit, zowel in FF als Chrome.
Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen. :@
pi_84934922
quote:
Op vrijdag 6 augustus 2010 13:17 schreef Gitaarmat het volgende:

[..]

Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen. :@
Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.
fokstok.nl
pi_84935170
quote:
Op vrijdag 6 augustus 2010 13:25 schreef Light het volgende:

[..]

Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.
Daar begrijp ik het al niet. :@
pi_84936429
quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet. :@
Hier staat meer informatie: http://www.w3.org/QA/2002/04/valid-dtd-list.html
fokstok.nl
  vrijdag 6 augustus 2010 @ 14:09:04 #21
71610 Black-Hole
Deep in my soul
pi_84936860
quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet. :@
Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.
pi_84938014
quote:
Op vrijdag 6 augustus 2010 14:09 schreef Black-Hole het volgende:

[..]

Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.
Maar daarmee wordt de html gegarandeerd niet valide.
SPOILER
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.
fokstok.nl
  vrijdag 6 augustus 2010 @ 14:42:52 #23
71610 Black-Hole
Deep in my soul
pi_84938386
quote:
Op vrijdag 6 augustus 2010 14:34 schreef Light het volgende:

[..]

Maar daarmee wordt de html gegarandeerd niet valide.
SPOILER
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.
Fonts stijl je toch met css? Ik zie het probleem niet.
pi_84940099
quote:
Op vrijdag 6 augustus 2010 14:42 schreef Black-Hole het volgende:

[..]

Fonts stijl je toch met css? Ik zie het probleem niet.
De link die Gitaarmat gaf, gaat naar een frameset. Daar wordt dan 1 pagina geladen: http://ageless.nu/andthegodsmadecoffee/index.html . Die pagina is niet html4, niet xhtml1 en zeker niet html5.
fokstok.nl
  maandag 9 augustus 2010 @ 21:23:12 #25
71610 Black-Hole
Deep in my soul
pi_85067661
Vraagje over hoe jullie dit zouden aanpakken.

Voor de site die ik aan het bouwen ben ga ik gebruik maken van horizontale lijnen die de gedeeltes van de pagina's moeten scheiden. hiervoor gebruik ik een png-file van 1px die ik over de hele breedte wil herhalen. Alleen lukt het me niet goed om dit voor elkaar te krijgen aangezien de div die ik hiervoor gebruik verder leeg is. De volgende opmaak werkt wel maar is dus niet zichtbaar vanwege de lege div.

1
2
3
4		#lijn{
margin-top: 30px;
background: url('../images/line.png') repeat-x;
}
Werken met borders is geen optie aangezien de png-file bestaat uit 2 kleuren zodat de lijn een soort schaduweffect meekrijgt.

Hoe zouden jullie dit oplossen?
pi_85068025
1
2
3
4
5		#lijn {
background:url(../images/line.png) repeat-x;
display:block;
height:1px;
}
Zou moeten werken. Overigens raad je ik aan om hier het horizontal rule element voor te gebruiken (<hr />), aangezien het daarvoor bedoeld is en die dan een background e.d. geven. Wel zo netjes :)
Bleuh.
  maandag 9 augustus 2010 @ 21:44:52 #27
71610 Black-Hole
Deep in my soul
pi_85068993
quote:
Op maandag 9 augustus 2010 21:29 schreef PimD het volgende:

[ code verwijderd ]

Zou moeten werken. Overigens raad je ik aan om hier het horizontal rule element voor te gebruiken (<hr />), aangezien het daarvoor bedoeld is en die dan een background e.d. geven. Wel zo netjes :)
Dat werkt inderdaad ^O^

Nadeel van de <hr> tag is dat ik hm niet goed gestyled krijg en heel de ruimte inneemt en dat terwijl ik nog wat margins nodig heb links en rechts.
pi_85070295
quote:
Op maandag 9 augustus 2010 21:44 schreef Black-Hole het volgende:

[..]

Dat werkt inderdaad ^O^

Nadeel van de <hr> tag is dat ik hm niet goed gestyled krijg en heel de ruimte inneemt en dat terwijl ik nog wat margins nodig heb links en rechts.
Wat margins links en rechts kan toch gewoon?
1
2
3
4
5
6
7		hr {
    height: 2px;
    margin: 0 50px;
    background-color: #f00;
    border: 0;
    border-bottom: 1px solid #00f;
}
fokstok.nl
  maandag 9 augustus 2010 @ 22:29:53 #29
71610 Black-Hole
Deep in my soul
pi_85071938
quote:
Op maandag 9 augustus 2010 22:05 schreef Light het volgende:

[..]

Wat margins links en rechts kan toch gewoon?
[ code verwijderd ]


De styling ervan zorgt voor problemen in IE als ik ga werken met een background image, wat je weer kan verhelpen met een div maar dat maakt het allemaal nog complexer.
pi_85073367
Maar wel semantisch correct.
Bleuh.
pi_85074004
Ik heb hier zo geen IE om mee te testen :) Maar volgens mij moet het gewoon met een hr zonder div kunnen. Ook in IE.
fokstok.nl
  woensdag 18 augustus 2010 @ 06:02:19 #32
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_85423862
Ik heb 2 div'jes naast elkaar in een andere div (container) staan.

Als ik de container bijvoorbeeld een rode background-color meegeef, dan is de container rood.

Float ik het linker div'je naar links dan werkt alles nog goed.
Float ik het rechter div'je naar rechts, dan verdwijnt de rode achtergrond in de container.

:?



Wit is pagina.
Rood is container.
Groen is linker div.
Blauw is rechter div.
Een ballonvaarder die door de mand valt is nooit grappig...
pi_85424120
Je moet de container "overflow:hidden" geven om de floats te clearen. Of de clearfix gebruiken (Googlen op clearfix) als je de bulletproof oplossing wilt gebruiken.
Bleuh.
pi_85429522
Hoi,

Ik heb een menu, en als je over een link hovert, komt er een achtergrondafbeelding boven de link. Die afbeelding is 165 px ongeveer, kleiner zou gewoon misstaan.

Het punt is echter dat sommige menuitems veel smaller zijn dan 165 px, en dat de afbeelding wordt afgesneden. Hoe krijg ik het hokje waar een item in zit breder, zodat de afbeelding erin past?

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		#menu ul{

    display:inline-block;
    padding: 0;
    margin: 0;
    white-space: no-wrap;
}

#menu ul li{
    display: inline;
    list-style-type: none;
    float:left;
}

#menu ul li a{
    display:block;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    padding:10px 0px 10px 0px;
    text-indent:0px;
    font-size:15px;
    font-weight:bold;
    margin-right:30px;
    margin-left:60px;
    
}

#menu ul li a:hover{
    background-image:url(img/linkhovermenu.png);
    background-repeat:no-repeat;
    background-position:center;
    
}
pi_85429691
Gewoon een breedte opgeven bij de links:

1
2
3		#menu ul li a {
    width: 165px;
}
fokstok.nl
pi_85429769
Bedankt!
  woensdag 18 augustus 2010 @ 15:07:14 #37
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_85437405
quote:
Op woensdag 18 augustus 2010 07:17 schreef PimD het volgende:
Je moet de container "overflow:hidden" geven om de floats te clearen. Of de clearfix gebruiken (Googlen op clearfix) als je de bulletproof oplossing wilt gebruiken.
Div 1(wat eigenlijk eigenlijk een UL is wat ook een blokelement is) en div 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.

Als ik de de floats in de container ga clearen, gebeurt er dit:



Voor de zekerheid de code zoals het nu is:

1
2
3
4
5
6
7
8
9
10
11
12
13		<?php
<div id="container">
  <ul id="menu">
    <li><a href="cam1.html">CAMERA 1</a></li>
    <li class="active"><a href="cam2.html">CAMERA 2</a></li>
    <li><a href="cam3.html">CAMERA 3</a></li>
    <li><a href="cam4.html">CAMERA 4</a></li>
  </ul>
  <div id="camera">
    <!-- hier staat een stukje javascript -->
  </div>
</div>
?>
En de CSS opmaak:

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		<?php
* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    font-family: Verdana;
}

#container {
    margin: 0 auto 0 auto;
    width: 800px;
    heigth: auto;
    background-color: #FF0000;
}

ul#menu {
    float: left;
    margin: 0 auto 0 auto;
    list-style-type: none;
}

ul#menu li {
    margin: 0 0 10px 0;
}

ul#menu li a {
    display: block;
    color: #28549E;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    border: solid 2px #28549E;
    width: 125px;
    padding: 0.3em 0.2em 0.3em 0.3em;
    text-decoration: none;
}

ul#menu li a:hover {
    background-color: #E6EEF9;
}

ul#menu li.active a {
    color: #FFFFFF;
    background-color: #28549E;
}

ul#menu li.active a:hover {
    color: #28549E;
    background-color: #E6EEF9;
}

#camera {
    float: right;
    margin: 0 auto 0 auto;
    border: solid 1px #000000;
    width: 640px;
    height: 480px;
}
?>


[ Bericht 44% gewijzigd door F4T4L_3RR0R op 18-08-2010 15:15:06 ]
Een ballonvaarder die door de mand valt is nooit grappig...
pi_85437749
quote:
Op woensdag 18 augustus 2010 15:07 schreef F4T4L_3RR0R het volgende:

[..]

Div 1 en 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.
Een div positioneren met text-align? Text-align is bedoeld voor tekst, niet voor divs. Dus hoe je dat wilt gebruiken, snap ik niet.

Het zou kunnen dat het in een enkele browser wel werkt, maar da's dan geen browsers die je moet willen gebruiken voor het ontwikkelen van een site. Hooguit op het laatst, om te kijken of alles daar ook goed staat.
fokstok.nl
  woensdag 18 augustus 2010 @ 15:19:25 #39
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_85437961
Ik zie nu dat ik de container toch heb gepositioneerd met: margin: 0 auto 0 auto;

Ik heb ook de code toegevoegd aan mijn vorige bericht.
Een ballonvaarder die door de mand valt is nooit grappig...
pi_85523257
Welke tut raden jullie een complete noob aan? Vroegah een beetje geklooid met frontpage maar dat is verschrikkelijk. Ik neem aan dat ik genoeg heb aan dreamweaver?
Medicine must bring back the joy in the life of the patient.Medicine must give the patient something to celebrate.When medicine cannot achieve this, the goal must be to allow the patient to die a death as quickly and as painlessly as possible
pi_85523930
Tutorials heb je vrij weinig aan naar mijn idee. Boeken als Handcrafted CSS, Transcending CSS of CSS Mastery geven je een veel beter beeld van WAAROM je iets doet, iets wat bij veel tutorials vaak niet of nauwelijks wordt gedaan naar mijn idee.

CSS is niet iets dat je even erbij leert van een tutorial. Goede HTML en CSS zijn een vak apart, zeker nu we steeds vaker voor verschillende soorten media ontwikkelen (iPad en andere mobiele devices). Het is vooral een kwestie van veel doen, proberen en lezen IMO.
Bleuh.
  vrijdag 20 augustus 2010 @ 23:34:04 #42
71610 Black-Hole
Deep in my soul
pi_85530814
quote:
Op vrijdag 20 augustus 2010 20:04 schreef ZwarteSteen het volgende:
Welke tut raden jullie een complete noob aan? Vroegah een beetje geklooid met frontpage maar dat is verschrikkelijk. Ik neem aan dat ik genoeg heb aan dreamweaver?
Dit is een erg handige video guide die wel alle basics uitlegt (wel betaald) http://net.tutsplus.com/t(...)mplete-video-series/

Sowieso is net.tutsplus.com een erg goede site met veel tutorials, heb er zelf erg veel aan gehad als complete noob :)
  woensdag 25 augustus 2010 @ 17:41:30 #43
37634 wobbel
Da WoBBeL King
pi_85696617
Hoe heet die techniek waarmee je met 1 background plaatje de hele div kan vormgeven?

Gaat om een plaatje met daarin alle borders maar de div die wisselt steeds van afmetingen
Hosted VoIP SIP trunks Vast mobiel VoIP
pi_85697548
CSS sprites is bedoeld om zoveel mogelijk decoratieve elementen in 1 image te doen. Of dit is wat jij bedoelt vraag ik me echter af. Voor bijv. een box met ronde hoeken e.d. zul je toch meerdere div's moeten nesten. Of je moet gebruik maken van multiple backgrounds / border images natuurlijk, maar dat werkt nog niet echt cross-browser.
Bleuh.
  woensdag 1 september 2010 @ 14:09:03 #45
27454 InTrePidIvity
Looks like it's broken...
pi_85948369
CSS kan toch niet de functionaliteit van een HTML-element wijzigen?

Met deze code werkt m'n search-bar namelijk niet:

1.mini-search { position:absolute; bottom:0px; left:47px; width:300px; height:28px; }
Maar zo werkt het wel:

1.mini-search { position:absolute; top:115px; right:0px; width:300px; height:28px; }
Nadeel is echter dat hij dan niet staat op de plaats waar ik het wil :?

Hoe kan dit (opgelost worden)?
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
pi_85956231
Geen idee, klinkt als een z-index probleem. Kun je ook je HTML online zetten?
Bleuh.
  woensdag 1 september 2010 @ 18:03:18 #47
27454 InTrePidIvity
Looks like it's broken...
pi_85956307
quote:
Op woensdag 1 september 2010 18:00 schreef PimD het volgende:
Geen idee, klinkt als een z-index probleem. Kun je ook je HTML online zetten?
Het is al opgelost, het stond inderdaad niet goed in de HTML :)
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
pi_86109911
Goh, ben ik weer. Ik probeer een footer aan de onderkant van mijn pagina te zetten. Dit werkt echter niet. Iemand had me al de tip gegeven mijn container een positie te geven, dit hielp echter niet. Ik krijg gewoon geen footer te zien.

Waar mis ik iets?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#container{
    width:820px;
    min-height:400px;
    margin:0 auto;
    background-color:#FFF;
    padding-top:30px;
    position:relative;
    
}
#footer{
    width:790;
    height:11px;
    background-image:url(img/bottomswirls.png);
    background-repeat:no-repeat;    
    position: absolute;
    bottom:0;
}
Edit: Als ik er text in tik, in de footer, wordt hij een vierkantje van ca 30 bij 30 met de text erin. Wél aan de onderkant van de pagina.
pi_86115857
Staat de footerdiv wel in de containerdiv?
fokstok.nl
  vrijdag 17 september 2010 @ 01:02:45 #50
134533 donroyco
dus niet Donroyco
pi_86523507
Ik wil graag een footer die buiten de wrap omgaat (er na dus), die een eigen achtergrond-afbeelding heeft die 100% width heeft. Bij mijn probeerselen houd ik aan beide kanten (en onderkant) nog pixels over. Als body-achtergrond meegeven is geen optie, gezien de mogelijk variabele content. Iemand een oplossing?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  vrijdag 17 september 2010 @ 08:33:12 #51
25889 Sitethief
Fulltime Flapdrol
pi_86525718
quote:
Op vrijdag 17 september 2010 01:02 schreef donroyco het volgende:
Ik wil graag een footer die buiten de wrap omgaat (er na dus), die een eigen achtergrond-afbeelding heeft die 100% width heeft. Bij mijn probeerselen houd ik aan beide kanten (en onderkant) nog pixels over. Als body-achtergrond meegeven is geen optie, gezien de mogelijk variabele content. Iemand een oplossing?
Kijk eerst even met Firebug of een andere tool welke eigenschappen allemaal van toepassing zijn op de footer. Misschien ontdek je dan wat de boosdoener is.
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
  vrijdag 17 september 2010 @ 09:01:19 #52
134533 donroyco
dus niet Donroyco
pi_86526152
quote:
Op vrijdag 17 september 2010 08:33 schreef Sitethief het volgende:

[..]



Kijk eerst even met Firebug of een andere tool welke eigenschappen allemaal van toepassing zijn op de footer. Misschien ontdek je dan wat de boosdoener is.
Heeft tot nu toe geen nut gehad. Is er geen andere oplossing?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_86526831
Gooi eens een voorbeeld online dan? In principe zou dat geen enkel probleem moeten zijn, dus wellicht zit er inderdaad iets anders in je code wat voor een probleem zorgt. Ik neem aan dat je net zoiets bedoelt als op mijn website?
Bleuh.
  vrijdag 17 september 2010 @ 09:47:37 #54
134533 donroyco
dus niet Donroyco
pi_86527215
quote:
Op vrijdag 17 september 2010 09:30 schreef PimD het volgende:
Gooi eens een voorbeeld online dan? In principe zou dat geen enkel probleem moeten zijn, dus wellicht zit er inderdaad iets anders in je code wat voor een probleem zorgt. Ik neem aan dat je net zoiets bedoelt als op mijn website?
Precies, zoiets als jouw website (tof met Last.fm integratie!). Zie: http://www.bringindoorback.com/test Thanks alvast :)
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_86527864
Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima :)
Bleuh.
  vrijdag 17 september 2010 @ 10:35:42 #56
134533 donroyco
dus niet Donroyco
pi_86528371
quote:
Op vrijdag 17 september 2010 10:13 schreef PimD het volgende:
Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima :)
Thanks, even proberen.
Als het internet meewerkt ;(
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_86528828
quote:
Op vrijdag 17 september 2010 10:13 schreef PimD het volgende:
Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima :)
Je kunt ook gewoon de volgende code toevoegen aan het css-bestand:
1
2
3
4		html, body {
  margin: 0;
  padding: 0;
}
Om daar nou een css reset voor te gaan laden, is wat overkill.
fokstok.nl
pi_86528919
Ja dat kan ook. Maar ik gok dat je dan nog op 100 andere plekken margin:0 en padding:0 gaat krijgen. Ik gebruik persoonlijk gewoon de reset van Eric Meyer als een op zich zelf staande file, maar als je het in je main CSS-file gooit werkt het natuurlijk ook prima.
Bleuh.
  vrijdag 17 september 2010 @ 11:02:14 #59
134533 donroyco
dus niet Donroyco
pi_86529101
Ik ga wat aanklooien, thanks beiden ^O^
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_86530708
CSS Resets moet je sowieso vermijden als de pest, en alleen gebruiken als het écht niet op een andere manier kan. Je lost één probleem op, maar creëert er weer 2 voor latere scenario's. :)

Daarbij, ik heb in al de jaren dat ik al met CSS klooi, nog nóóit een CSS reset hoeven te gebruiken. Wel heb ik in templates/websites moeten werken waar men dat wél gedaan had, en dat was verschrikkelijk kan ik je vertellen. :r
pi_86531689
quote:
Op vrijdag 17 september 2010 10:55 schreef PimD het volgende:
Ja dat kan ook. Maar ik gok dat je dan nog op 100 andere plekken margin:0 en padding:0 gaat krijgen. Ik gebruik persoonlijk gewoon de reset van Eric Meyer als een op zich zelf staande file, maar als je het in je main CSS-file gooit werkt het natuurlijk ook prima.
Ik heb die reset css eens bekeken en ik zie alleen maar een hoop problemen ontstaan die achteraf weer moeten worden opgelost.
fokstok.nl
pi_86532805
quote:
Op vrijdag 17 september 2010 12:11 schreef Light het volgende:

[..]

Ik heb die reset css eens bekeken en ik zie alleen maar een hoop problemen ontstaan die achteraf weer moeten worden opgelost.
Ik vind sommige 'standaard' stylen van bepaalde elementen juist handig. Denk aan marges bij bijvoorbeeld (un)ordered lists, paragrafen, kopjes, enzovoorts. Ik heb aan websites gewerkt waar een CSS reset was toegepast, en moest daar naderhand pagina's toe gaan voegen met bijvoorbeeld lijsten aan nieuwsberichten. Vre-se-lijk irritant om dan achteraf weer voor elk element een hele stijl op te gaan bouwen.

Beter maak je gewoon, in zoverre dat mogelijk is, je layout schaalbaar/flexibel zodat deze er tegen kan dat sommige elementen onder omstandigheden kunnen verschillen qua afmetingen, marges en uitlijning. Dan hou je ook nog eens beter rekening met dingen als groter ingestelde lettertypen e.d. ^O^
pi_87594584
Even een vraagje, ik wil als ik met m'n muis over een woord ga dat er dan een Textbox opent, soort van dropdown menu dus maar dan niet met linkjes en met een hele tekst ipv korte zinnetjes.

Alvast bedankt :)
76.000.000 2009-12-24 01:28 Semmm
  zaterdag 16 oktober 2010 @ 00:48:31 #64
134533 donroyco
dus niet Donroyco
pi_87594683
quote:
Op zaterdag 16 oktober 2010 00:45 schreef Semmm het volgende:
Even een vraagje, ik wil als ik met m'n muis over een tekst ga dat er dan een Textbox opent, soort van dropdown menu dus maar dan niet met linkjes en met een hele tekst ipv korte zinnetjes.

Alvast bedankt :)
http://jackosborne.co.uk/(...)-the-pseudo-element/
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_87595247
quote:
Op zaterdag 16 oktober 2010 00:48 schreef donroyco het volgende:

[..]

http://jackosborne.co.uk/(...)-the-pseudo-element/
Bedankt voor de snelle reactie, dit is inderdaad wat ik bedoel maar ik krijg het niet voor elkaar om meerdere regels onderelkaar te zetten, het wordt 1 lange regel die uiteindelijk buiten beeld valt. Iemand nog ideeën?
76.000.000 2009-12-24 01:28 Semmm
  zaterdag 16 oktober 2010 @ 01:10:56 #66
134533 donroyco
dus niet Donroyco
pi_87595308
quote:
Op zaterdag 16 oktober 2010 01:08 schreef Semmm het volgende:

[..]

Bedankt voor de snelle reactie, dit is inderdaad wat ik bedoel maar ik krijg het niet voor elkaar om meerdere regels onderelkaar te zetten, het wordt 1 lange regel die uiteindelijk buiten beeld valt. Iemand nog ideeën?
Mag JavaScript ook?

Dan kan dit van toepassing zijn:
http://www.bosrup.com/web/overlib/
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_87598056
Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.
Bleuh.
pi_87599618
quote:
Op zaterdag 16 oktober 2010 09:36 schreef PimD het volgende:
Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.
Ja inderdaad, daar kwam ik later ook achter. Ik zit nu met een ander probleempje, de tekst wordt nu 2x weergegeven, 1x zoals in het tekstvak wat ik wil, en 1x als naam van de tekst zegmaar


Hoe haal ik die 2e weg zodat ik alleen het tekstvak heb.
76.000.000 2009-12-24 01:28 Semmm
pi_87600154
quote:
Op zaterdag 16 oktober 2010 09:36 schreef PimD het volgende:
Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.
Dat wordt alsnog een probleem als je bij de rechterkant van het (browser)scherm komt. Met een beetje pech komt je :after-element alsnog buiten het scherm.
fokstok.nl
pi_87600183
quote:
Op zaterdag 16 oktober 2010 11:13 schreef Semmm het volgende:

[..]

Ja inderdaad, daar kwam ik later ook achter. Ik zit nu met een ander probleempje, de tekst wordt nu 2x weergegeven, 1x zoals in het tekstvak wat ik wil, en 1x als naam van de tekst zegmaar
[ afbeelding ]

Hoe haal ik die 2e weg zodat ik alleen het tekstvak heb.
Dan zal de tekst ook wel twee keer in de html-broncode staan. Daar moet het dus 1 keer uit.
fokstok.nl
pi_87600202
quote:
Op zaterdag 16 oktober 2010 11:36 schreef Light het volgende:

[..]

Dat wordt alsnog een probleem als je bij de rechterkant van het (browser)scherm komt. Met een beetje pech komt je :after-element alsnog buiten het scherm.
Nee, ik heb de Margin-Left op ongeveer -100 staan zodat het textvak niet buiten de site valt.
76.000.000 2009-12-24 01:28 Semmm
pi_87600256
quote:
Op zaterdag 16 oktober 2010 11:36 schreef Light het volgende:

[..]

Dan zal de tekst ook wel twee keer in de html-broncode staan. Daar moet het dus 1 keer uit.
Nee, dat is het niet, hier is de code.

1
2		<a name="Beschrijving"><span title="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
" class="tooltip" >Beschrijving </span>
76.000.000 2009-12-24 01:28 Semmm
pi_87601364
quote:
Op zaterdag 16 oktober 2010 11:39 schreef Semmm het volgende:

[..]

Nee, dat is het niet, hier is de code.
[ code verwijderd ]

Dat lichte vlak met donkere tekst komt door het title-attribuut. Waarom die tekst dan twee keer verschijnt, kan ik niet zien aan die halve regel html. Kun je de hele zooi (html/css/javascript) ergens online zetten?
fokstok.nl
pi_87601558
quote:
Op zaterdag 16 oktober 2010 12:21 schreef Light het volgende:

[..]

Dat lichte vlak met donkere tekst komt door het title-attribuut. Waarom die tekst dan twee keer verschijnt, kan ik niet zien aan die halve regel html. Kun je de hele zooi (html/css/javascript) ergens online zetten?
html: http://codeviewer.org/view/code:12c0
css: http://codeviewer.org/view/code:12c1
76.000.000 2009-12-24 01:28 Semmm
pi_87602847
quote:
Op zaterdag 16 oktober 2010 12:28 schreef Semmm het volgende:

[..]

html: http://codeviewer.org/view/code:12c0
css: http://codeviewer.org/view/code:12c1
Ah, de title wordt door de browser netjes weergegeven (donkere tekst op lichte achtergrond) zoals de bedoeling is bij een title-attribuut. De tweede versie (lichte tekst op donkere achtergrond) komt door css.
1
2		.tooltip:hover:after {
    content: attr(title);
Die eerste kun je niet voorkomen.

Overigens is je (x)html ook verre van valide, maar dat heeft in dit geval geen invloed op het probleem.
fokstok.nl
pi_87604335
quote:
Op zaterdag 16 oktober 2010 13:14 schreef Light het volgende:

[..]

Ah, de title wordt door de browser netjes weergegeven (donkere tekst op lichte achtergrond) zoals de bedoeling is bij een title-attribuut. De tweede versie (lichte tekst op donkere achtergrond) komt door css.
[ code verwijderd ]

Die eerste kun je niet voorkomen.

Overigens is je (x)html ook verre van valide, maar dat heeft in dit geval geen invloed op het probleem.
Kan ik de tekst lichte tekst op donkere achtergrond dan niet op een andere manier laten weergeven zodat de donkere text op lichte achtergrond niet komt of eventueel op een andere positie zodat die buiten beeld valt?

En dat de site niet valid is weet ik, is gemaakt in dreamweaver, ik haal de fouten er achteraf uit.
76.000.000 2009-12-24 01:28 Semmm
pi_87604639
quote:
Op zaterdag 16 oktober 2010 14:01 schreef Semmm het volgende:

[..]

Kan ik de tekst lichte tekst op donkere achtergrond dan niet op een andere manier laten weergeven zodat de donkere text op lichte achtergrond niet komt of eventueel op een andere positie zodat die buiten beeld valt?

En dat de site niet valid is weet ik, is gemaakt in dreamweaver, ik haal de fouten er achteraf uit.
Het is me gelukt,

heb in de css
1
2		.tooltip:hover:after {
    content: attr(title);
veranderd in
1
2		.tooltip:hover:after {
    content: attr(alt);
en in html de title ook vervangen door alt, nu werkt het prima :)

Dankje voor jullie hulp ook
76.000.000 2009-12-24 01:28 Semmm
pi_87623396
quote:
Op zaterdag 16 oktober 2010 14:10 schreef Semmm het volgende:

[..]

Het is me gelukt,

heb in de css
[ code verwijderd ]

veranderd in
[ code verwijderd ]

en in html de title ook vervangen door alt, nu werkt het prima :)

Dankje voor jullie hulp ook
Nu stuit ik op het volgende probleem, ik wil de regel zelf handmatig kunnen afbreken en naar de volgende gaan, is dit mogelijk?
76.000.000 2009-12-24 01:28 Semmm
pi_87626178
quote:
Op zondag 17 oktober 2010 02:11 schreef Semmm het volgende:

[..]

Nu stuit ik op het volgende probleem, ik wil de regel zelf handmatig kunnen afbreken en naar de volgende gaan, is dit mogelijk?
Hoe zou je dat in html doen, en heb je die oplossing al geprobeerd?
fokstok.nl
pi_87627424
Het alt-attribuut wordt in IE trouwens volgens mij nog steeds getoond in zo'n gele ballon. Ik weet zo 1-2-3 niet of het ook nog in IE8 en IE9 is (zal wel niet), maar in IE6 en IE7 weet ik het vrij zeker.
Bleuh.
pi_87627626
quote:
Op zondag 17 oktober 2010 11:54 schreef PimD het volgende:
Het alt-attribuut wordt in IE trouwens volgens mij nog steeds getoond in zo'n gele ballon. Ik weet zo 1-2-3 niet of het ook nog in IE8 en IE9 is (zal wel niet), maar in IE6 en IE7 weet ik het vrij zeker.
Dat doen die browsers dan fout. Maar het was al bekend dat IE zich niet altijd volledig aan de standaarden houdt.
fokstok.nl
pi_87627746
Dat die browsers het verkeerd doen moge duidelijk zijn. Waar heb je die tooltips trouwens nu opzitten? Want alleen img's/area's mogen een ALt-attribuut hebben, dus een span/div/whatever niet.
Bleuh.
pi_87633715
quote:
Op zondag 17 oktober 2010 12:05 schreef PimD het volgende:
Dat die browsers het verkeerd doen moge duidelijk zijn. Waar heb je die tooltips trouwens nu opzitten? Want alleen img's/area's mogen een ALt-attribuut hebben, dus een span/div/whatever niet.
kon hem veranderen in alles wat ik wil, heb hem nu maar "tekst"genoemd, het gaat me er nu even niet om of het wel of niet mag, maar of het werkt :)

De zin afbreken met <br /> werkt niet omdat het binnen een atribuut is. heb   al geprobeerd heel vaak achter elkaar te zetten maar dan staat het wel goed in Google Chrome maar niet in IE en FF
76.000.000 2009-12-24 01:28 Semmm
pi_87678407
quote:
Op zondag 17 oktober 2010 15:11 schreef Semmm het volgende:

[..]

kon hem veranderen in alles wat ik wil, heb hem nu maar "tekst"genoemd, het gaat me er nu even niet om of het wel of niet mag, maar of het werkt :)

De zin afbreken met <br /> werkt niet omdat het binnen een atribuut is. heb   al geprobeerd heel vaak achter elkaar te zetten maar dan staat het wel goed in Google Chrome maar niet in IE en FF
Iemand? :)
76.000.000 2009-12-24 01:28 Semmm
pi_88022856
Ik ben op zoek naar een eenvoudige photoviewer voor op een website, liefst helemaal CSS.
bestaat er iets op internet of een programmatje waar je foto's "inlaadt" en er code (en thumbnails) uit komt zodat ik weinig programmeer werk moet doen.
Als ik dan nog meer eisen mag stellen dan zou ik graag een thumbnail overzicht hebben van alle foto's en als je dan een foto aanklikt dat deze dan groter wordt getoont (midden op het scherm oid)
  woensdag 27 oktober 2010 @ 14:43:58 #86
134533 donroyco
dus niet Donroyco
pi_88023002
quote:
1s.gif Op woensdag 27 oktober 2010 14:39 schreef MrNiles het volgende:
Ik ben op zoek naar een eenvoudige photoviewer voor op een website, liefst helemaal CSS.
bestaat er iets op internet of een programmatje waar je foto's "inlaadt" en er code (en thumbnails) uit komt zodat ik weinig programmeer werk moet doen.
Als ik dan nog meer eisen mag stellen dan zou ik graag een thumbnail overzicht hebben van alle foto's en als je dan een foto aanklikt dat deze dan groter wordt getoont (midden op het scherm oid)
Eerst: :')

Serieus: alleen CSS gaat niet werken. Zoek eens op Google naar jQuery Photo Viewer of iets dergelijks.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_88023377
quote:
1s.gif Op woensdag 27 oktober 2010 14:43 schreef donroyco het volgende:

[..]

Eerst: :')

Serieus: alleen CSS gaat niet werken. Zoek eens op Google naar jQuery Photo Viewer of iets dergelijks.
Eerst: :')

maar goed...allemaal leuke voorbeelden maar ik kan niet vinden die voor mij de code "maakt"
Ik heb geen zin om voor heel veel foto's code te gaan zitten tikken
  woensdag 27 oktober 2010 @ 15:00:56 #88
134533 donroyco
dus niet Donroyco
pi_88023611
quote:
1s.gif Op woensdag 27 oktober 2010 14:54 schreef MrNiles het volgende:

[..]



Eerst: :')

maar goed...allemaal leuke voorbeelden maar ik kan niet vinden die voor mij de code "maakt"
Ik heb geen zin om voor heel veel foto's code te gaan zitten tikken
Luie flikker :{w
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_88024155
quote:
1s.gif Op woensdag 27 oktober 2010 15:00 schreef donroyco het volgende:

[..]

Luie flikker :{w
klopt..liever lui dan moe!
pi_88033776
Gebruik dan gewoon flickr als je te lui bent om een paar regels code te schrijven :')
Bleuh.
pi_88059853
quote:
1s.gif Op woensdag 27 oktober 2010 19:06 schreef PimD het volgende:
Gebruik dan gewoon flickr als je te lui bent om een paar regels code te schrijven :')
luie flickr :D

en een luie flickr ben ik :Y

maar dankzij de paar steekwoorden als jquery is het na 2dagen proberen gelukt
met galleria, mooie vloeiende overgangen...enne...dankzij een phpscriptje op een forun vd site kan ik nu jpg in het mapje pleuren en komen ze mooi op de site te staan
THANX ^O^

[ Bericht 28% gewijzigd door MrNiles op 28-10-2010 16:17:49 ]
  zondag 28 november 2010 @ 10:45:55 #92
298746 Dalando
18, niet meer gefrustreerd
pi_89249872
Jongens, ik heb hulp nodig...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		body {
                background-color: #DDDDDD;
                text-align:center;
            }
 
            body, td, div, ul, button, textarea, input {
                font: 12px helvetica,arial,sans-serif;
            }

#header2 {
                background-color: #C90000;
            }
 a.menubutton {
                display:inline;
                margin: 1px;
                background-color:#D80000  ;
                width:90px;
            }
 
            a.menubutton:hover {
                background-color:#C00000;
            }

1
2
3
4		<div id="header2">
            <a href="#" class="menubutton">Menu</a>
            <a href="#" class="menubutton">Menu</a>
        </div>

Nu zouden de menuknopjes van .menubutton veranderen in width en height, maar dat doen ze dus niet. Help? :)
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
  zondag 28 november 2010 @ 12:15:08 #93
134533 donroyco
dus niet Donroyco
pi_89251730
quote:
6s.gif Op zondag 28 november 2010 10:45 schreef Dalando het volgende:
Jongens, ik heb hulp nodig...
[ code verwijderd ]

[ code verwijderd ]

Nu zouden de menuknopjes van .menubutton veranderen in width en height, maar dat doen ze dus niet. Help? :)
dan moet je bij :hover wel de gewenste hoogte en breedte meegeven.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  zondag 28 november 2010 @ 13:13:16 #94
298746 Dalando
18, niet meer gefrustreerd
pi_89253527
quote:
1s.gif Op zondag 28 november 2010 12:15 schreef donroyco het volgende:

[..]

dan moet je bij :hover wel de gewenste hoogte en breedte meegeven.
Doet niks... :N
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_89278185
quote:
2s.gif Op zondag 28 november 2010 13:13 schreef Dalando het volgende:

[..]

Doet niks... :N
Bij een inline element worden hoogte en breedte genegeerd. Je zou er display: block; of display: inline-block; van moeten maken.

Je kunt ook overwegen om alle menu-items dezelfde onderlinge afstand te geven, dat kan met margin en/of padding. En dat werkt ook bij inline elementen.

Overigens zie ik een menu als een lijst van linkjes:

1
2
3
4
5
6		<ul id="menu">
  <li><a href="#">Knop 1</a></li>
  <li><a href="#">Knop 2</a>
    <ul><li><a href="#">Knop 2.1</a></li></ul>
  </li>
</ul>

Die kun je ook net zo stylen als je zelf wilt.
fokstok.nl
pi_89484264
ik probeer de <dfn> tag te restylen zodat hij een gestippeld of gestreept (dotted/dashed) streepje weergeeft in rood onder de tekst...
ik gebruik nu
1
2
3
4
5		border-bottom-color: #FF0000;
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4D528C;
font-style:normal
dit komt echter te dicht op de volgende regel tekst te staan, ik kan e.v.t. kijken of ik de verticale ruimte tussen de tekst kan vergroten, maar het liefst zet ik het streepje op dezelfde plek als wanneer er een link is...

CSS3 heeft wel een mogelijkheid om de underline style aan te passen.., maar daar doe ik nog eff niet aan.
iemand tips hoe dit e.v.t. wel goed op te lossen is zonder de verticale ruimte tussen tekst aan te passen?

en als ik dan toch bezig ben:
ik heb een form knopje aangepast zodat er rond de knop een border verschijnt zodra er overheen gehovered wordt
1
2
3
4
5
6
7
8		.submitsearch{
    border:1px hidden;
    background-color:transparent;
}

.submitsearch:hover{
    border:1px solid;    
}
in FF pakt hij hem vrijwel altijd goed (volgens mij 1x niet goed gegaan)
in IE8 pakt hij hem van boven, links en rechts zover ik gezien heb altijd goed.. echter pakt hij hem van onderen (lees: je komt met je muis op de button van onderen) bijna nooit, veel vaker niet dan wel iig. bugje in IE? of ligt het wellicht ergens anders aan? (omdat hij het immers een enkele keer in FF niet doet)

[ Bericht 34% gewijzigd door mschol op 03-12-2010 17:51:36 ]
pi_89561957
Ik ben bezig een mobiele site te maken.

Ik heb een menu, daarin twee divjes. De informatie in beide divs moet in het midden zitten. Ik gebruik geen pixels of iets om alles te centreren, omdat de site schaalbaar moet zijn. Maar daardoor krijg ik niets in het midden.

Ik heb het geprobeerd door margin-left en -right op auto te zetten, float-left of -right en dan 100px, maar dan is de site niet meer schaalbaar en schiet de rechter url onder de andere url.

Iemand een idee hoe ik ze in het midden kan krijgen zonder gezeik te krijgen met schaalbaarheid?

(Door het schaalbaarheidverhaal kon ik de divs ook niet een breedte geven, waardoor een align in de html ook niet werkte)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#menuitems{ 

    float:left;
    margin-left:auto;
    margin-right:auto;
}

#menuitems2{ 
    float:right;
    margin-right:auto;
    margin-left:auto;

}
 <div id="menu"><div id="menuitems"><a href="lost.html">Lost</a></div>
        <div id="menuitems2"><a href="found.html">Found</a></div>
  zondag 5 december 2010 @ 20:28:25 #98
134533 donroyco
dus niet Donroyco
pi_89562044
Je moet wel een breedte aangeven, anders weet ie niet waar ie op moet uitlijnen.

Probeer eens: width: 100%;
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_89562166
quote:
1s.gif Op zondag 5 december 2010 20:28 schreef donroyco het volgende:
Je moet wel een breedte aangeven, anders weet ie niet waar ie op moet uitlijnen.

Probeer eens: width: 100%;
Hm, nu snapt hij het al helemaal niet meer, krijg ik gelijk dat ze onder elkaar gaan staan ipv naast elkaar :o

Wel een goede trouwens, even 50% proberen.
pi_89562189
Dankje! 50/49 werkt wel, en is schaalbaar :D
  zondag 5 december 2010 @ 20:35:21 #101
134533 donroyco
dus niet Donroyco
pi_89562365
quote:
1s.gif Op zondag 5 december 2010 20:31 schreef RenRen- het volgende:
Dankje! 50/49 werkt wel, en is schaalbaar :D
Cool.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_89571236
quote:
1s.gif Op zondag 5 december 2010 20:31 schreef RenRen- het volgende:
Dankje! 50/49 werkt wel, en is schaalbaar :D
Als je ze allebei 49% maakt, zijn ze even breed en passen ze ook naast elkaar :) Ik weet niet of het belangrijk is dat ze allebei even breed zijn, maar het kan leuker lijken.
fokstok.nl
pi_89571285
quote:
1s.gif Op zondag 5 december 2010 23:27 schreef Light het volgende:

[..]

Als je ze allebei 49% maakt, zijn ze even breed en passen ze ook naast elkaar :) Ik weet niet of het belangrijk is dat ze allebei even breed zijn, maar het kan leuker lijken.
Het stoort niet in ieder geval. Maar kan ik er geen kritiek op krijgen, dat is altijd positief.
Edit: Done
  zaterdag 18 december 2010 @ 00:05:59 #104
12221 Tijn
Powered by MS Paint
pi_90070738
Weet iemand of Opera 11 nu eindelijk ook CSS gradients ondersteunt?
Verberg de nieuwsticker
pi_90108618
Hallo,

Op de pagina www.yepcheck.com/icharts/ heb ik volgende CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#links ul
{
padding:5px; margin:2px;color:#fff;font-family: arial, helvetica, sans-serif;
font-size:75%;list-style-type:none;
}

#links ul li { display: inline;   }

#links li a
{padding:0.7em 0.7em 0.2em 0.7em; background:#6cf;
color:#000;text-decoration:none; border:1px solid #000;
}

#links li a:hover
{
background:#c80;color:#fff;
}

en de volgende HTML (verkort)
1
2
3		<div id='links'><UL>
<LI><A HREF='http://www.google.com'><IMG SRC='icon_google.gif'  border='0'></A></LI>
</UL></DIV>

levert dit op



Maar hoe krijg ik het plaatje nu verticaal gecentreerd in het blokje? Hij blijft maar bovenin als ik de padding verhoog. Ik heb het idee dat het heel simpel is, maar ik kom er niet achter. (trouwens het twitterdingetje opmaken/positioneren is een vraag apart, waar ik nu even geen aandacht aan besteed)
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
pi_90115256
Je zou kunnen proberen wat te klooien met vertical-align. Maar mooier zou IMO zijn om de afbeelding als background-image te gebruiken (en dan via CSS te centreren) en de tekst (bijv. "Google") met een negatieve text-indent buiten beeld te plaatsen. Google maar eens op image replacement.
Bleuh.
pi_90116169
Ik zou juist de css aanpassen:
1
2
3
4
5
6
7
8
9		#links ul li {
    display: block;
    float: left;
    width: auto;
}
#links li a {
    display: block;
    width: auto;
}
En die rare <li>&nbsp;</li> in de broncode van de pagina hoort daar natuurlijk ook niet. Dat kun je met margins veel beter oplossen :)
fokstok.nl
pi_90116709
En sowieso alles lowercase uiteraard, hoewel het in HTML5 weer gewoon mag zoals je zelf wilt... Ik blijf lekker XHTML strict-style coden :)
Bleuh.
pi_90161233
Dank voor de antwoorden, met een beetje puzzelen (en valsspelen door twee <BR>'s toe te voegen - anders kreeg ik het opvolgende nummer meteen na het laatste plaatje en de lijn te hoog. Ik moet nog ergens display:block invoegen, maar waar?) ;)) is het gelukt!

Die <li> </li> was omdat ik alleen dààr een lege ruimte wil, maar is verandert nu :)... Maar valt idd ook onder het kopje valsspelen. Ik moet me maar eens in de basiskennis duiken ipv alleen maar te kopieren/plakken ;)

[ Bericht 11% gewijzigd door tim2308 op 20-12-2010 03:01:47 ]
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
  donderdag 23 december 2010 @ 21:23:15 #110
316115 BigSmurf
Groots in kleinigheden!
pi_90361589
Ik ben bezig met een website in XHTML en CSS, waarbij ik op de contact-pagina graag een formulier wil maken. Niet te moeilijk, gewoon een formulier met Voornaam, Achternaam, Telefoonnummer, E-mailadres, Onderwerp en daaronder een vak voor het bericht.

Nou wil ik dit verzonden hebben naar een e-mailadres, maar het schijnt dat onderstaande heel spam-gevoelig is?

<form method="post" action="Mailto:mail@mail.nl">

Is hier een "veiligere" oplossing voor zonder PHP te hoeven gebruiken, aangezien ik daar geen ervaring mee heb? :)
 | Wat smurfig! | Winnaar Yvonne Award V&A 2013!
pi_90361690
Volgens mij werkt dat niet eens? Of ja, de mail zal dan in de outbox van je mailprogramma worden gezet - terwijl veel mensen bijv. GMail of Hotmail gebruiken en daardoor dus geen mailprogramma hebben ingesteld. Het beste kun je toch gewoon een server-side formulier maken lijkt me. Er zijn vast zat PHP (of wat dan ook) tutorials te vinden voor een simpel formuliertje.
Bleuh.
  donderdag 23 december 2010 @ 21:30:38 #112
316115 BigSmurf
Groots in kleinigheden!
pi_90361951
quote:
1s.gif Op donderdag 23 december 2010 21:25 schreef PimD het volgende:
Volgens mij werkt dat niet eens? Of ja, de mail zal dan in de outbox van je mailprogramma worden gezet - terwijl veel mensen bijv. GMail of Hotmail gebruiken en daardoor dus geen mailprogramma hebben ingesteld. Het beste kun je toch gewoon een server-side formulier maken lijkt me. Er zijn vast zat PHP (of wat dan ook) tutorials te vinden voor een simpel formuliertje.
Daar was ik dus al bang voor. Nou ja, dan toch maar wat gaan verdiepen in PHP. Is het met PHP wel mogelijk om de opmaak te behouden die ik heb gemaakt in CSS?
 | Wat smurfig! | Winnaar Yvonne Award V&A 2013!
pi_90362044
quote:
1s.gif Op donderdag 23 december 2010 21:23 schreef BigSmurf het volgende:
Ik ben bezig met een website in XHTML en CSS, waarbij ik op de contact-pagina graag een formulier wil maken. Niet te moeilijk, gewoon een formulier met Voornaam, Achternaam, Telefoonnummer, E-mailadres, Onderwerp en daaronder een vak voor het bericht.

Nou wil ik dit verzonden hebben naar een e-mailadres, maar het schijnt dat onderstaande heel spam-gevoelig is?

<form method="post" action="Mailto:mail@mail.nl">

Is hier een "veiligere" oplossing voor zonder PHP te hoeven gebruiken, aangezien ik daar geen ervaring mee heb? :)
Misschien heeft je hoster wel een standaard cgi-scriptje dat je kunt gebruiken. Andere optie zou kunnen zijn dat je gewoon een linkje maakt van het mailadres en dat de bezoeker dan gewoon zelf in z'n mailprogramma het een en ander kan invullen. Maar dan heb je geen voorbedrukt formulier.
fokstok.nl
pi_90362421
quote:
1s.gif Op donderdag 23 december 2010 21:30 schreef BigSmurf het volgende:

[..]

Daar was ik dus al bang voor. Nou ja, dan toch maar wat gaan verdiepen in PHP. Is het met PHP wel mogelijk om de opmaak te behouden die ik heb gemaakt in CSS?
De uitvoer van een php-script is (over het algemeen) een html-pagina. :) Voor je browser maakt het niet uit of die html uit een statische pagina of uit een php-script komt.
fokstok.nl
  donderdag 23 december 2010 @ 21:51:33 #115
316115 BigSmurf
Groots in kleinigheden!
pi_90363092
quote:
1s.gif Op donderdag 23 december 2010 21:39 schreef Light het volgende:

[..]

De uitvoer van een php-script is (over het algemeen) een html-pagina. :) Voor je browser maakt het niet uit of die html uit een statische pagina of uit een php-script komt.
Dan ga ik me maar eens verdiepen in zo'n PHP-scriptje. Merci. :)
 | Wat smurfig! | Winnaar Yvonne Award V&A 2013!
  vrijdag 24 december 2010 @ 01:01:24 #116
71610 Black-Hole
Deep in my soul
pi_90374226
quote:
1s.gif Op donderdag 23 december 2010 21:51 schreef BigSmurf het volgende:

[..]

Dan ga ik me maar eens verdiepen in zo'n PHP-scriptje. Merci. :)
Helemaal kant en klaar en volledig aan te passen inclusief Catpcha voor $ 3,-. Gebruik hem zelf ook en het werkt fantastisch http://codecanyon.net/item/simple-php-contact-form/46679
pi_90374928
quote:
14s.gif Op vrijdag 24 december 2010 01:01 schreef Black-Hole het volgende:

[..]

Helemaal kant en klaar en volledig aan te passen inclusief Catpcha voor $ 3,-. Gebruik hem zelf ook en het werkt fantastisch http://codecanyon.net/item/simple-php-contact-form/46679
Hmm 3 euro? Zou ik toch even doorzoeken, er zijn zat gratis scriptjes te vinden.
zcflevo.nl
  vrijdag 24 december 2010 @ 09:50:43 #118
71610 Black-Hole
Deep in my soul
pi_90382410
quote:
1s.gif Op vrijdag 24 december 2010 01:17 schreef KomtTijd... het volgende:

[..]

Hmm 3 euro? Zou ik toch even doorzoeken, er zijn zat gratis scriptjes te vinden.
Ik heb zelf ook lang gezocht naar goed werkende scriptjes inclusief Captcha maar veel werkten niet, niet volledig of waren lastig te stijlen. Waarom dan moeilijk doen voor $ 3,-. Alle tijd die je bezig bent met zoeken kost eigenlijk ook geld dus dan is zo'n bedrag te verwaarlozen. Maar goed dat is allemaal off-topic.
pi_90393781
Hoe kan je de space tussen div's bepalen? Volgens mij is het sowieso niet mogelijk om ze helemaal weg te halen.

Tussen header, content en footer zit nu een lege regel (ook nog eens verschillend in grootte omdat bv. de footer een kleiner lettertype gebruikt. Ik wil dat al die lege regels allemaal bv. 20px zijn.

Ik kan het makkelijk door de header, content en footer padding te geven, maar dat is toch minder mooi vind ik.

1
2
3
4
5
6
7
8
9		<BODY>
<DIV id="container">
    <DIV id="wrap">
        <DIV id="header"></DIV>
        <DIV id="content"></DIV>
        <DIV id="footer"></DIV>
    </DIV>
</DIV>
</BODY>
pi_90393844
Zit je wel in strict mode? Een div zou namelijk sowieso geen margin moeten hebben.
zcflevo.nl
pi_90393975
Een div heeft toch de eigenschap om op de volgende regel pasdoor te gaan, er zit dus een lege regel tussen div's.

*googled strict mode*
pi_90394085
Een div is niets anders dan een block-level element zonder enige semantische waarde of standaardopmaak. Alles wat je er aan margins en paddings aan wilt hebben moet je zelf defineren. Dus als het goed is zouden 2 opvolgende divs waar je niets aan gedaan hebt, gewoon met de boven- en onderkant tegen elkaar aan moeten staan.
zcflevo.nl
pi_90394138
quote:
1s.gif Op vrijdag 24 december 2010 15:05 schreef Tegan het volgende:
Een div heeft toch de eigenschap om op de volgende regel pasdoor te gaan, er zit dus een lege regel tussen div's.
Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft :)
fokstok.nl
pi_90394198
quote:
1s.gif Op vrijdag 24 december 2010 15:09 schreef Light het volgende:

[..]

Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft :)
Ohja. Margin-collapse, wie dat ooit verzonnen heeft, mogen ze van mij afschieten :')
zcflevo.nl
pi_90394233
quote:
1s.gif Op vrijdag 24 december 2010 15:09 schreef Light het volgende:

[..]

Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft :)
Dat dacht ik ook. Maar, als ik mijn verschillende div's een kleurtje geef krijg ik dit.



Zwart = BODY, wit = container, geel = header, blauw = content, rood = footer, paars = wrap.
pi_90394275
quote:
11s.gif Op vrijdag 24 december 2010 15:10 schreef KomtTijd... het volgende:

[..]

Ohja. Margin-collapse, wie dat ooit verzonnen heeft, mogen ze van mij afschieten :')
Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.
fokstok.nl
pi_90394332
quote:
1s.gif Op vrijdag 24 december 2010 15:13 schreef Light het volgende:

[..]

Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.
Overflow defineren werkt ook dacht ik.
zcflevo.nl
pi_90394338
quote:
1s.gif Op vrijdag 24 december 2010 15:11 schreef Tegan het volgende:

[..]

Dat dacht ik ook. Maar, als ik mijn verschillende div's een kleurtje geef krijg ik dit.

[ afbeelding ]

Zwart = BODY, wit = container, geel = header, blauw = content, rood = footer, paars = wrap.
Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?
fokstok.nl
pi_90394379
quote:
14s.gif Op vrijdag 24 december 2010 15:14 schreef KomtTijd... het volgende:

[..]

Overflow defineren werkt ook dacht ik.
Zou kunnen, ik ben meer een fan van float :)
fokstok.nl
pi_90394404
quote:
1s.gif Op vrijdag 24 december 2010 15:14 schreef Light het volgende:

[..]

Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?
Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven wel ;( . Die wil ik weg.
pi_90394482
quote:
1s.gif Op vrijdag 24 december 2010 15:16 schreef Tegan het volgende:

[..]

Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven wel ;( . Die wil ik weg.
Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:
quote:
1s.gif Op vrijdag 24 december 2010 15:01 schreef Tegan het volgende:
Hoe kan je de space tussen div's bepalen? Volgens mij is het sowieso niet mogelijk om ze helemaal weg te halen.

Tussen header, content en footer zit nu een lege regel (ook nog eens verschillend in grootte omdat bv. de footer een kleiner lettertype gebruikt. Ik wil dat al die lege regels allemaal bv. 20px zijn.

Ik kan het makkelijk door de header, content en footer padding te geven, maar dat is toch minder mooi vind ik.

[ code verwijderd ]

Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?
zcflevo.nl
pi_90394620
quote:
1s.gif Op vrijdag 24 december 2010 15:18 schreef KomtTijd... het volgende:

[..]

Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:

[..]

Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?
Hm, dan wel. Even spelen.
pi_90394751
quote:
1s.gif Op vrijdag 24 december 2010 15:22 schreef Tegan het volgende:

[..]

Hm, dan wel. Even spelen.
Ok, het komt door de <H1> en <P> enzo ;( .
pi_90394789
quote:
1s.gif Op vrijdag 24 december 2010 15:25 schreef Tegan het volgende:

[..]

Ok, het komt door de <H1> en <P> enzo ;( .
Scroll terug naar <margin-collapse>
zcflevo.nl
pi_90394911
quote:
14s.gif Op vrijdag 24 december 2010 15:26 schreef KomtTijd... het volgende:

[..]

Scroll terug naar <margin-collapse>
Nou ok. Hoe fix ik dat?
pi_90394923
quote:
14s.gif Op vrijdag 24 december 2010 15:14 schreef KomtTijd... het volgende:

[..]

Overflow defineren werkt ook dacht ik.
zcflevo.nl
pi_90395213
1
2
3
4		H1 {margin:0px;padding:0px;}
H2 {margin:0px;padding:0px;}
H3 {margin:0px;padding:0px;}
P {margin:0px;padding:0px;}

Hiermee zijn ze iig weg.
pi_90395396
Ja, maar dan hebben je headings en paragrafen ook geen margins en paddings meer.
zcflevo.nl
pi_90395421
Dat is wel jammer ja :P .
pi_90395989
Alle div's op padding:1px ipv 0px werkt. Alleen dan nog hebben ze nog de top en bottom padding van de content, en niet een fixed grootte. Het was mooier als de eerste en laatste paragraaf in een div geen top danwel bottom padding hadden.
pi_90396275
Laten we daar nou de psuedo-classes voor hebben? p:first-child en p:last-child
zcflevo.nl
pi_90396312
quote:
14s.gif Op vrijdag 24 december 2010 16:07 schreef KomtTijd... het volgende:
Laten we daar nou de psuedo-classes voor hebben? p:first-child en p:last-child
Beter :o . Even kijken of dat werkt.
pi_90396694
1
2		H1:first-child, H2:first-child, H3:first-child, P:first-child {padding-top:0px;}
H1:last-child, H2:last-child, H3:last-child, P:last-child {padding-bottom:0px;}
Werkt niet.

Dit moest het zijn.
1
2		H1:first-child, H2:first-child, H3:first-child, P:first-child {margin-top:0px;}
H1:last-child, H2:last-child, H3:last-child, P:last-child {margin-bottom:0px;}
_O_ .

[ Bericht 39% gewijzigd door Tegan op 24-12-2010 16:47:19 ]
pi_90398364
Ok, mooi. Thanks voor alle hulp O+ . Nu is mijn content compleet apart van de weergave :9~ :9~ .
pi_90398498
Ok, nog een ding.



Ik wil dat dat wit doorgaat tot onderaan de pagina ipv dat het stopt als er geen content meer is. Dit gaat automatisch goed als het scherm te klein is, maar anders dus niet.
pi_90398849
Body en wrapper min-heigth: 100%

Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.
zcflevo.nl
pi_90399107
quote:
14s.gif Op vrijdag 24 december 2010 17:04 schreef KomtTijd... het volgende:
Body en wrapper min-heigth: 100%

Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.
Kan je iets specifieker zijn?
pi_90400689
Faux columns is het gebruik van een achtergrond-afbeelding om kolommen te simuleren die tot onderaan het scherm doorlopen.
Bleuh.
pi_90468739
quote:
1s.gif Op vrijdag 24 december 2010 16:18 schreef Tegan het volgende:

[ code verwijderd ]

Werkt niet.

Dit moest het zijn.

[ code verwijderd ]

_O_ .
Alleen jammer dat last-child nog te weinig ondersteund wordt. IE8 snapt het ook niet.
fokstok.nl
pi_90468893
Inderdaad. Ik gebruik zelf nog steeds vaak classes .first en .last. Erg jammer, goede support voor al die pseudo-classes maakt het werk zo veel makkelijker. Tuurlijk zijn er Javascript hacks die moderne CSS ook werkend maakt in IE6/7/8 - maar mijn ervaring is dat de performance van dat soort scripts nogal eens te wensen over laat.
Bleuh.
pi_90469694
Ik probeer meestal een combi van margins/paddings te verzinnen zodat het zowel boven- als onderaan gewoon goed uit komt. Meestal is dat wel te doen maar ik kan me idd wel situaties indenken waarin je daar niet mee weg komt.
zcflevo.nl
pi_90472179
ik probeer op een template (geleend uit Dreamweaver) een aanpassing te maken zodat de onderkant een x aantal pixels van de browser rand zit, zodat je dus de body background ziet..
alleen pakt hij om de 1 of andere wazige reden margin-bottom niet..
ik heb met firebug gekeken of hij wellicht werd overruled ofzo, maar daar komt bar weinig uit..
iemand die een zetje in de goede richting kan geven?
http://tinyurl.com/2v7r9zl <- een voorbeeld

het gaat mij dus om de #pagecel1 die ik een stukje van de browser rand wil hebben...
wat doe ik verkeerd?
pi_90472368
Ding is absoluut gepositioneerd.... Dat kun je wel schudden dus!
zcflevo.nl
pi_90472589
quote:
1s.gif Op zondag 26 december 2010 22:23 schreef KomtTijd... het volgende:
Ding is absoluut gepositioneerd.... Dat kun je wel schudden dus!
hmm oke, jammer dan :P

edit:
dit heeft me wel de goede richting op geduwd..
ik heb het element nu relative i.p.v. absoluut gepositioneerd
de top:109px weggehaald en
Margin-bottom:10px;
Margin-top:109px;
toegevoegd, wellicht is dit een erg smerige manier van doen, maar de site oogt zowel in FF als in IE nog zoals bedoeld, maar nu met een onderrandje...
ik weet echter niet wat er gebeurd als de content veranderd :+ (mocht dat toch problemen opleveren, draai ik het terug :P

[ Bericht 39% gewijzigd door mschol op 26-12-2010 22:48:11 ]
pi_90477140
quote:
1s.gif Op zondag 26 december 2010 21:00 schreef PimD het volgende:
Inderdaad. Ik gebruik zelf nog steeds vaak classes .first en .last. Erg jammer, goede support voor al die pseudo-classes maakt het werk zo veel makkelijker. Tuurlijk zijn er Javascript hacks die moderne CSS ook werkend maakt in IE6/7/8 - maar mijn ervaring is dat de performance van dat soort scripts nogal eens te wensen over laat.
Maarja, dat is lastig als niet zeker is welke paragraaf de eerste en welke de laatste wordt.
pi_90477604
Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.
Bleuh.
pi_90477606
quote:
1s.gif Op zondag 26 december 2010 22:27 schreef mschol het volgende:

[..]

hmm oke, jammer dan :P

edit:
dit heeft me wel de goede richting op geduwd..
ik heb het element nu relative i.p.v. absoluut gepositioneerd
de top:109px weggehaald en
Margin-bottom:10px;
Margin-top:109px;
toegevoegd, wellicht is dit een erg smerige manier van doen, maar de site oogt zowel in FF als in IE nog zoals bedoeld, maar nu met een onderrandje...
ik weet echter niet wat er gebeurd als de content veranderd :+ (mocht dat toch problemen opleveren, draai ik het terug :P

Zo'n div uberhaupt absoluut positioneren is de smerige manier van doen. Maar in principe moet het zo gewoon goed gaan denk ik.
zcflevo.nl
pi_90477678
quote:
1s.gif Op maandag 27 december 2010 00:09 schreef PimD het volgende:
Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.
Inderdaad. Schijt hebben aan IE is steeds vaker ook mijn oplossing voor datsoort details.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/
zcflevo.nl
pi_90478037
Precies. Nu de opdrachtgevers van mn baas er nog van zien te overtuigen. Gaat al steeds beter, IE6 is nauwelijks meer aandacht voor, maar men wil toch wel vaak graag een 1:1 replica zien van de statische PSD's die gemaakt zijn. Ik snap niet dat er nog steeds bedrijven zijn die websites tot op de pixel nauwkeurig uitwerken in Photoshop - en daarna uren bezig zijn om het pixel voor pixel na te maken. Heeft geen zin, is meestal niet haalbaar en levert naar mijn idee ook geen enkele meerwaarde op. Maar ja...
Bleuh.
pi_90480587
quote:
1s.gif Op maandag 27 december 2010 00:09 schreef KomtTijd... het volgende:

[..]

Zo'n div uberhaupt absoluut positioneren is de smerige manier van doen. Maar in principe moet het zo gewoon goed gaan denk ik.
in IE7 viel de gehele navigatie balk bovenin de pagina weg, met wat aanpassen ziet hij er zo goed als hetzelfde uit in IE7/IE8/IE9, FF & Chrome
in IE6 ziet hij er wel hetzelfde uit, maar functioneert hij niet goed i.v.m. een CSS :hover die ik gebruik voor navigatie
dat ga ik alleen niet aanpassen.. geen zin in en het is redelijk nutteloos...
  maandag 27 december 2010 @ 11:24:11 #161
63192 ursel
"Het Is Hier Fantastisch!
pi_90487002
Hey hey.

Even een vraagje.
Ik heb nu de volgende site:

http://deridderbrandbeveiliging.nl/index_new.htm

Echter wil ik dat het logo vlak boven de paarse footer komt te staan in plaats van vlak onder het menu. :{

Alleen lukt het me niet. :')
pi_90487128
Dat logo moet je dan absoluut positioneren, maar dit wordt lastig omdat je de kolommen ook relatief positioneert (tenzij je met een negatieve bottom-positionering gaat werken als de hoogte van de linkerkolom vast staat). Anders zou ik de #logo-div verplaatsen en die absolute positioneren van de onderkant.

Waarom je uberhaupt een logo onderaan het scherm zou willen is uiteraard een heel ander punt :D
Bleuh.
  maandag 27 december 2010 @ 11:30:39 #163
63192 ursel
"Het Is Hier Fantastisch!
pi_90487225
quote:
1s.gif Op maandag 27 december 2010 11:27 schreef PimD het volgende:
Dat logo moet je dan absoluut positioneren, maar dit wordt lastig omdat je de kolommen ook relatief positioneert (tenzij je met een negatieve bottom-positionering gaat werken als de hoogte van de linkerkolom vast staat). Anders zou ik de #logo-div verplaatsen en die absolute positioneren van de onderkant.

Waarom je uberhaupt een logo onderaan het scherm zou willen is uiteraard een heel ander punt :D
Mja, het logo had ik nu al klaar staan. Maar aan de rechterkant komt ook een image die hetzelfde zou moeten doen. :7

Bottom hoogte staat vast. Ga daar denk even mee stoeien. Tnx
pi_90489910
quote:
1s.gif Op maandag 27 december 2010 00:09 schreef PimD het volgende:
Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.
Idd. Het ging om de margin van de tekst, dat is niet echt heel storend als het fout gaat.
  maandag 3 januari 2011 @ 16:21:14 #165
329156 Peem
Skiddelly
pi_90797987
Lieve schatten, kan iemand me even uit de brand helpen? Op één of andere manier maakt Chrome van mijn images/bg.jpg, word het css/images/bg.jpg. Dit doet het bij 2 images, de rest niet.. Anyone got a clue?

Thanks in advance,
---
pi_90798130
Code?
  maandag 3 januari 2011 @ 16:24:02 #167
134533 donroyco
dus niet Donroyco
pi_90798150
quote:
1s.gif Op maandag 3 januari 2011 16:23 schreef Tegan het volgende:
Code?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  maandag 3 januari 2011 @ 16:31:40 #168
329156 Peem
Skiddelly
pi_90798578
Ik neem aan dat het verder niet veel met de code te maken heeft, maar misschien iets dat chrome in de cache onthoud of iets?

body {
background: url(images/bg.jpg);
}

word ineens
body {
background: url(file:///C:/Users/Marciano/Desktop/EMPEFINAL2/css/images/header.jpg);
}

Waar slaat dit op? =P

En ja, het plaatje bg.jpg bestaat wel en staat in de images map, voorheen deed hij het wel :/
---
pi_90799352
En als je de hele url van bg.jpg invult?
  maandag 3 januari 2011 @ 16:55:33 #170
329156 Peem
Skiddelly
pi_90799813
Dan gooit hij er weer de hele rits ervoor, en krijg ik 2x dezelfde zin.

waar die /css/ vandaan komt heb ik geen idee van, heb niet eens een css mapje aangemaakt in empefinal2 :s
---
pi_90799863
Daar zit je fout iig. Zoek maar even na hoe je goed een plaatje linkt als background.
  maandag 3 januari 2011 @ 16:58:23 #172
329156 Peem
Skiddelly
pi_90799934
Dat daar een fout zit snap ik ook. Zoals ik zei is het alleen bij 2 plaatjes het geval, en niet bij de anderen. Ik zie namelijk gewoon mijn images/mountains.png, mijn images/fish.png e.d alleen de header en bg wil hij niet laten zien.
---
pi_90799968
Hoe link je die plaatjes in de css?
  maandag 3 januari 2011 @ 17:37:57 #174
329156 Peem
Skiddelly
pi_90801472
Gewoon a la
#header {
background: url(images/header.jpg);
width:
height:
}
---
pi_90801839
Wat is je directorystructuur dan? Aan je CSS te zien zou het volgens mij:

quote:
/css
/css/images
moeten zijn, maar dat lijkt me vrij onlogisch:

quote:
/css
/images
is waarschijnlijker. Je moet dan de juiste paden gebruiken, door '../images/' te gebruiken. Als je 'images/' gebruikt zal dit volgens mij alleen werken op de homepage van je site, aangezien het pad dan nog wel klopt.

Of faal ik nu hopeloos? :D
Bleuh.
  maandag 3 januari 2011 @ 17:51:31 #176
329156 Peem
Skiddelly
pi_90802010
Omg :o Er was opeens een mapje die /css/ heet, heb er helemaal overheen gekeken.. Toch vraag ik me af waarom hij daarnaar linkte, en dan pas images?

(had in m'n main directory een index.html een css mapje, images mapjes en js mapje)

Hij doet het in ieder geval nu weer, maar als iemand me het bovenste uit kan leggen ben ik dankbaar, het ligt in iedergeval aan Dreamweaver, aangezien het in alle browsers gebeurt (nog nooit eerder gehad trouwens)

Thanks Tegan & PimD
---
pi_90802083
Daarom link ik altijd gewoon de hele url ipv alleen de filename.

Hij pakt zijn eigen pad. Dus als de css een level lager staat neemt hij die map gewoon mee en is het lastig om iets te linken wat een level hoger staat.

Tenminste, ik denk dat dat het probleem was.
  maandag 3 januari 2011 @ 18:09:09 #178
329156 Peem
Skiddelly
pi_90802615
Hoe bedoel je, pakt zijn eigen pad? Hij zou toch gewoon moeten doen wat ik hem vertel te doen :')?
---
pi_90802658
De hele URL linken... En wat doe je dan als je de site live zet? Ga je dan alles weer aanpassen naar de nieuwe URL? Als je gewoon een standaard directorystructuur voor al je projecten hebt zou er geen probleem moeten zijn hoor - waarom zou je je map met CSS-files willen verplaatsen...?
Bleuh.
pi_90802705
quote:
1s.gif Op maandag 3 januari 2011 18:09 schreef Peem het volgende:
Hoe bedoel je, pakt zijn eigen pad? Hij zou toch gewoon moeten doen wat ik hem vertel te doen :')?
Als je css in home/css/ wordt uitgevoerd en jij zegt dat een plaatje in /images/ zit pakt hij zijn eigen pad home/css/ + /images/ wordt home/css/images ipv wat jij wil home/images/. Als je het snapt.
pi_90802780
quote:
1s.gif Op maandag 3 januari 2011 18:10 schreef PimD het volgende:
De hele URL linken... En wat doe je dan als je de site live zet? Ga je dan alles weer aanpassen naar de nieuwe URL? Als je gewoon een standaard directorystructuur voor al je projecten hebt zou er geen probleem moeten zijn hoor - waarom zou je je map met CSS-files willen verplaatsen...?
Ja, maar vooral gooi ik css nooit in een eigen map.
  maandag 3 januari 2011 @ 18:24:48 #182
329156 Peem
Skiddelly
pi_90803176
En mijn vraag is dus 'waarom' voert hij het uit via home/css, ik heb daar toch helemaal geen opdracht toe gegeven?
---
pi_90803259
Omdat je css in die map staat.
  maandag 3 januari 2011 @ 18:29:38 #184
329156 Peem
Skiddelly
pi_90803355
Oh, ok :) Maargoed, dan snap ik waarom ik dat nog nooit eerder gehad heb, dankje :)
---
pi_90803597
Hij pakt altijd zijn eigen pad + wat je opgeeft, anders kan hij ook niet ruiken waar hij het moet zoeken. Dit kun je dus tegengaan door gewoon de hele url op te geven :+ , maar dat vind niemand tof ofzo, of je moet je je pad beter opgeven, maar dat moet je zelf even uitzoeken :P .
pi_90803681
quote:
1s.gif Op maandag 3 januari 2011 18:35 schreef Tegan het volgende:
Hij pakt altijd zijn eigen pad + wat je opgeeft, anders kan hij ook niet ruiken waar hij het moet zoeken. Dit kun je dus tegengaan door gewoon de hele url op te geven :+ , maar dat vind niemand tof ofzo, of je moet je je pad beter opgeven, maar dat moet je zelf even uitzoeken :P .
Of gewoon absolute paden gebruiken, dus beginnen met een /. Dan begint hij altijd in de hoogst mogelijke map (in het geval van een webserver dus de map die gekoppeld staat aan je domein).

-edit-
En even firebug installeren. Dan had je gewoon rechtermuis -> element inspecteren kunnen doen, en gelijk gezien dat het pad verkeerd was.
zcflevo.nl
  maandag 3 januari 2011 @ 18:49:13 #187
329156 Peem
Skiddelly
pi_90804158
@KomtTijd dat het pad verkeerd was wist ik, dat is ook wat ik aangaf in het begin. Ik vroeg me af waarom het gebeurde. Verder heb ik Firefox aan de kant geschoven, Chrome heeft deze optie er automatisch in :)
---
pi_90876785
Ik wil op een site text verticaal centreren.
Nou had ik iemand gevonden, die deed het op een manier door de line-height even hoog te maken als de div. Opzich kan dit prima, als je maar 1 zin text hebt, of maar 1 afbeelding. Maar hoe is dit op te lossen als je een aantal aparte regels hebt?
pi_90877542
Dat kan niet in div's (althans niet met css). Alleen in een table cell, met vertical-align: middle.
Gelukkig kun je een div wel met CSS ombouwen tot table cell met display:table-cell.

Beetje ranzig maar minder ranzig dan javascript-oplossingen...
zcflevo.nl
pi_90878134
Dus dan grofweg

1
2
3
4		#div{
display:table-cell;
vertical-align:middle;
}

?
  woensdag 5 januari 2011 @ 13:28:54 #191
184465 Migue
Sensuele man
pi_90878407
Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website :+

Dank.
MotorRacingblog.nl
  woensdag 5 januari 2011 @ 13:38:12 #192
134533 donroyco
dus niet Donroyco
pi_90878755
quote:
1s.gif Op woensdag 5 januari 2011 13:28 schreef Migue het volgende:
Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website :+

Dank.
[PHP/(My)SQL] voor dummies - Deel 85
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_90878757
quote:
1s.gif Op woensdag 5 januari 2011 13:20 schreef RenRen- het volgende:
Dus dan grofweg
[ code verwijderd ]

?
Ja zoiets gok ik... Wel even goed testen in verschillende browsers!
quote:
1s.gif Op woensdag 5 januari 2011 13:28 schreef Migue het volgende:
Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website :+

Dank.
Zet er <font color="black"> voor en </font> achter?
Niet aan PHP code gaan zitten kloten als je er geen verstand van hebt. gebruik de templates.
zcflevo.nl
pi_90879112
quote:
1s.gif Op woensdag 5 januari 2011 13:38 schreef KomtTijd... het volgende:

[..]

Ja zoiets gok ik... Wel even goed testen in verschillende browsers!

[..]

Zet er <font color="black"> voor en </font> achter?
Niet aan PHP code gaan zitten kloten als je er geen verstand van hebt. gebruik de templates.
Ja, moet eerst even ergens registreren, zit achter een mac. Maar komt goed O+ Dankje :*
pi_90879832
In FF voor de appel doet hij in ieder geval niets...
  woensdag 5 januari 2011 @ 14:14:50 #196
184465 Migue
Sensuele man
pi_90880261
quote:
12s.gif Op woensdag 5 januari 2011 13:38 schreef donroyco het volgende:

[..]

[PHP/(My)SQL] voor dummies - Deel 85
Zie, daar ga ik al, denkend dat CSS en PHP hetzelfde is ;) Dankje!

KomtTijd... dat had ik al geprobeerd, met alle gevolgen van dien ;)
MotorRacingblog.nl
pi_90880545
Je geeft te weinig info. Post even je hele code.
  woensdag 5 januari 2011 @ 14:29:04 #198
184465 Migue
Sensuele man
pi_90880962
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		<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

// Do not delete these lines
    if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
        die (__('Please do not load this page directly. Thanks!','OnTheGo'));

    if ( post_password_required() ) { ?>

<p class="nocomments"><?php _e('Dit bericht is beveiligd.','OnTheGo'); ?></p>
<?php
        return;
    }
?>
<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
    <div id="comment-section">
        <p id="comments"><?php comments_number(__('Er zijn geen reacties','OnTheGo'),  __('Er is één reactie','OnTheGo'), 'Er zijn % '.__('reacties','OnTheGo'));?></p>
        
    <?php if ( ! empty($comments_by_type['comment']) ) : ?>
        <ol class="commentlist">
            <?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50,  'reply_text'=>__('Reageer','OnTheGo'))) ; ?>
        </ol>
    <?php endif; ?>
    
        <div class="navigation">
            <div class="alignleft">
                <?php previous_comments_link() ?>
            </div>
            <div class="alignright">
                <?php next_comments_link() ?>
            </div>
        </div>
        
    <?php if ( ! empty($comments_by_type['pings']) ) : ?>
    <div id="trackbacks">
        <h3 id="pings"><?php _e('Trackbacks/Pingbacks','OnTheGo'); ?></h3>
        <ol class="pinglist">
            <?php wp_list_comments('type=pings&callback=list_pings'); ?>
        </ol>
    </div>
    <?php endif; ?>    
<?php else : // this is displayed if there are no comments so far ?>
    <div id="comment-section" class="nocomments">
        <?php if ('open' == $post->comment_status) : ?>
            <!-- If comments are open, but there are no comments. -->
        <?php else : // comments are closed ?>
            <!-- If comments are closed. -->
                <div id="respond">
                    <p class="nocomments"><?php _e('Reageren op dit bericht is gesloten.','OnTheGo'); ?></p>
                </div> <!-- end respond div -->
        <?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>

    <div id="respond">
        <h3>
            <?php _e('Laat een reactie achter','OnTheGo'); ?>
        </h3>
        <div class="cancel-comment-reply"> <small>
            <?php cancel_comment_reply_link(); ?>
            </small> </div> <!-- end cancel-comment-reply div -->
        <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
            <p><?php _e('Je moet zijn','OnTheGo'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('ingelogd','OnTheGo'); ?></a> <?php _e('om te reageren.','OnTheGo'); ?></p>
        <?php else : ?>
            <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
            <?php if ( $user_ID ) : ?>
                <p><?php _e('Je bent ingelogd als','OnTheGo'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>"><?php _e('Log uit »','OnTheGo'); ?></a></p>
            <?php else : ?>
                <p>
                    <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
                    <label for="author"><small><?php _e('Naam:','OnTheGo'); ?><?php if ($req) _e(' verplicht','OnTheGo'); ?></small></label>
                </p>
                <p>
                    <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
                    <label for="email"><small><?php _e('E-mail (wordt niet weergegeven):','OnTheGo'); ?> <?php if ($req) _e(' verplicht','OnTheGo'); ?></small></label>
                </p>
                <p>
                    <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
                    <label for="url"><small><?php _e('Website','OnTheGo'); ?></small></label>
                </p>
            <?php endif; ?>
            <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
            <p>
                <textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea>
            </p>
            <p>
                <input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Reageer','OnTheGo'); ?>" />
                <?php comment_id_fields(); ?>
            </p>
            <?php do_action('comment_form', $post->ID); ?>
            </form>
        <?php endif; // If registration required and not logged in ?>
    </div> <!-- end respond div -->
<?php else: ?>

<?php endif; // if you delete this the sky will fall on your head ?>
</div> <!-- end comment-section -->
MotorRacingblog.nl
pi_90881010
En de css?
pi_90881126
quote:
1s.gif Op woensdag 5 januari 2011 14:29 schreef Migue het volgende:

[ code verwijderd ]

Juist, een template dus. Pas het daar in aan. Van die PHP-code moet je gewoon afblijven.
zcflevo.nl
pi_90881278
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
pi_90881435
quote:
1s.gif Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
pi_90881550
quote:
1s.gif Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
Mierenneuken :6 .
pi_90881591
quote:
1s.gif Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
Heb ik je dat even goed uitgelegd! 8-)
zcflevo.nl
pi_90881593
quote:
10s.gif Op woensdag 5 januari 2011 14:42 schreef Tegan het volgende:

[..]

Mierenneuken :6 .
Is een heel verschil hoor :@ ;( Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.
pi_90881618
quote:
11s.gif Op woensdag 5 januari 2011 14:43 schreef KomtTijd... het volgende:

[..]

Heb ik je dat even goed uitgelegd! 8-)
:+
Maar hij doet niets hoor, die dinges. Er een tablecell van maak.
pi_90881657
quote:
1s.gif Op woensdag 5 januari 2011 14:44 schreef RenRen- het volgende:

[..]

:+
Maar hij doet niets hoor, die dinges. Er een tablecell van maak.
Ja testcases ga ik maken als ik weer thuis ben :P
zcflevo.nl
pi_90881685
quote:
1s.gif Op woensdag 5 januari 2011 14:43 schreef RenRen- het volgende:

[..]

Is een heel verschil hoor :@ ;( Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.
Ik weet echt wel wat php is, beter dan dat ik css ken :+ . Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.
  woensdag 5 januari 2011 @ 14:46:01 #209
184465 Migue
Sensuele man
pi_90881689
quote:
1s.gif Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren ;)
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330		/*
Theme Name: OnTheGo
Theme URI: http://www.elegantthemes.com/gallery/onthego
Version: 1.1
Description: 2 Column theme from Elegant Themes
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
*/

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
html { background: #2d3940 url(images/bg.jpg); }
body { background: url(images/top-bg.png) repeat-x top left; text-align: center; line-height: 21px; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #5c5c5c; min-height: 25px; }

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; padding-bottom: 5px; color: #000000; letter-spacing: -1px; line-height: 1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000000; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 18px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
    blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

.container { text-align: left; width: 1007px; margin: 0 auto; position: relative; }

#header { background: url(images/menu-bg.png) no-repeat top left; height: 20px; padding: 3px 5px 0px 0px; }

#contentwrap { background: url(images/content-mainbg.jpg) repeat-y; position: relative; }
    #content { background: url(http://www.motorracingblog.nl/bandeau/bandeau.php) no-repeat top left; /*min-height: 1500px; */ }
        #logowrap { text-align: center; padding: 22px 0px 0px; }
        #manlayer { position: absolute; top: -5px; right: 254px; background: url(images/man.png) no-repeat; width: 169px; height: 0px; }
        
    #main-area { padding: 35px 75px 35px 61px; }
                        
        #main-content { min-height: 316px; width: 527px; float: left; padding-left: 5px; }
        body.home #main-content { background: url(images/main-content-bg.png) no-repeat; padding: 35px 0px 0px 40px; width: 506px; }
        body.home #main-content.blogstyle { padding: 0px; width: 527px; background: none; }
            #main-content h2.title, h1#post-title { font-size: 20px; margin-bottom: 6px; }
            #main-content h2.title.page { background: url(images/h2-border-bg.png) repeat-x bottom left; }
            #main-content h2.title a:hover { color:#363636; text-decoration:none; }
            a.readmore { background: url(images/readmore-bg.png) no-repeat scroll 0 0; color: #000000 !important; display: block;
font-size: 11px; font-weight: bold; height: 34px; line-height: 34px; padding-left: 27px; float: right; }
                a.readmore span { background: url(images/readmore-bg.png) no-repeat scroll right top; display:block; padding-right:11px; }
            div.entry.category { margin-bottom: 20px; }
                #main-content a { color: #000000; }
                #main-content ul { list-style-type: disc; margin: 10px 0px 10px 20px; }
                #main-content ol { list-style-type: decimal; list-style-position: inside; margin: 10px 0px 10px 2px; }
                    #main-content ul li ul, #main-content ul li ol { margin: 2px 0px 2px 20px; }
                    #main-content ol li ul, #main-content ol li ol  { margin: 2px 0px 2px 35px; }
            h1#index { background: none; padding: 0px 0px 30px; font-size: 24px; letter-spacing: 0px; font-family: Georgia, serif; font-weight: normal; }            
            
            .cat-meta-top { background:transparent url(images/cat-meta-topbg.png) no-repeat scroll 0 0; height:6px; width:527px; margin-top: 15px; }
            .cat-meta-bottom { background:transparent url(images/cat-meta-bottombg.png) no-repeat scroll 0 0; height:14px; margin-bottom:20px; width:527px; }
            p.post-meta { background:transparent url(images/cat-meta-bg.png) repeat-y scroll 0 0; line-height: 16px; padding:0 27px 2px 13px; color: #000000; }
                p.post-meta a { color: #000000; font-weight: bold; }
                p.post-meta span { background:transparent url(images/sidebar-bullet.png) no-repeat scroll left 9px; display: block; padding: 7px 0px 7px 20px; }
            img.thumbnail-post { border: 1px solid #bdbdbd; padding: 6px; background: #ededed; display:inline; float:left; margin-bottom:10px; margin-right:25px; margin-top:6px; }
                        
        
/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/        

ul#top-menu li { margin: 0px 4px; }
    ul#top-menu > li.current_page_item, ul#top-menu > li:hover, ul#top-menu > li.current-cat { background: url(images/menu-active-sprite.png) no-repeat bottom right; }
        ul#top-menu li a { color: #FFFFFF; font-size: 15px; font-style: bold; font-weight: bold; }
        ul#top-menu > li { padding-right: 10px; }
        ul#top-menu > li > a { line-height: 33px; height: 36px; padding: 0px 0px 0px 12px; }
            ul#top-menu li a:hover { text-decoration: none; }
        ul#top-menu > li.current_page_item > a, ul#top-menu > li:hover > a, ul#top-menu > li.current-cat > a { color: #000000; background: url(images/menu-active-sprite.png) no-repeat top left; }
        
        ul#top-menu li ul { background: url(images/dropdown-top-bg.png) no-repeat; padding: 12px 0px 0px; top: 40px; display: none; }
            ul#top-menu li li ul { top: -11px; }
            ul#top-menu li ul  li { background: #ffffff url(images/dropdown-li-sep.png) no-repeat 7px 0px; margin: 0px; width: 188px; padding: 3px 7px 0px; }
                ul#top-menu li ul  li a { background: url(images/dropdown-link.png) no-repeat 12px 15px; color: #5c5c5c; font-size: 12px; display: block; width: 143px; padding: 10px 5px 10px 40px;}
                    ul#top-menu li ul  li a:hover { color: #000000; background: #efefef url(images/dropdown-link-hover.png) no-repeat 12px 15px; }
        ul#top-menu li ul li.dropdown-bottom { background: url(images/dropdown-bottom-bg.png) no-repeat; background-color: none; display: block; position: relative; left: 0px; width: 202px; height: 13px !important; }

/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/        
        
#featured-slider { margin: 0px 0px 33px; position: relative; }
    #buildings { background: url(images/featured-buildings.png) no-repeat; width: 300px; height: 300px; position: absolute; top: -250px; right: -40px; z-index: 2; }
    #featured-area { background: url(images/slider-bg.jpg) no-repeat; width: 769px; height: 230px; margin-left: 11px; margin-top: 0px; padding: 31px 50px 0px 40px; position: relative;  }
        .featitem { height: 267px; }
        
        #featured-area a#prevlink, #featured-area a#nextlink { position: absolute; top: 97px; text-indent: -9999px; display: block; width: 20px; height: 46px; }
        #featured-area a#prevlink { left: 1px; }
        #featured-area a#nextlink { right: 1px; }
        
    ul#slider-control { height: 15px; padding-left: 13px; z-index: 3; position:relative; }
        ul#slider-control li { background: url(images/tab-bg.png) no-repeat top right; padding-right: 5px; float: left; margin-right: 2px; }
            ul#slider-control li a { background: url(images/tab-bg.png) no-repeat top left; display: block; text-transform: uppercase; font-size: 16px; color: #b3b3b3; }
            ul#slider-control li a:hover { text-decoration: none; }
                ul#slider-control li a span { background: url(images/arrow.png) no-repeat 13px center; display: block; padding: 10px 9px 10px 44px; }
            
        ul#slider-control li.active { background: url(images/tab-bg-active.png) no-repeat bottom right; }
            ul#slider-control li.active a { background: url(images/tab-bg-active.png) no-repeat bottom left; color: #1c1c1c; height: 42px; }
                ul#slider-control li.active a span { background: url(images/arrow-active.png) no-repeat 13px center; }
        
        .featitem { width: 769px; }
            .featured-image { background: url(images/featured-image-bg.png) no-repeat; width: 333px; height: 220px; float: left; }
                .featured-image img { margin: 10px 0px 0px 9px; }
            .featitem .description { float: right; width: 385px; margin: 20px 6px 0px 0px; }
                .featitem h2 { font-size: 18px; background: url(images/h2-border.png) repeat-x bottom left; margin-bottom: 9px; }
                    
                    .featitem h2 a:hover { color: #363636; text-decoration: none; }
            .featitem a.readmore { position: right: 4px; bottom: 9px; color: #ffffff; font-size: 11px; font-weight: bold; background: url(images/more-featured-bg.png) no-repeat; display: block; height: 31px; padding-left: 27px; line-height: 31px; }
                .featitem a.readmore span { display: block; background: url(images/more-featured-bg.png) no-repeat top right; padding-right: 11px; }        
        
/*------------------------------------------------*/
/*-------------------[COMMENTS]-------------------*/
/*------------------------------------------------*/

p#comments { font-size: 30px; font-weight: bold; color: #000000; letter-spacing: -1px; line-height: 1em; background: url(images/comments_number.png) no-repeat left 6px; padding: 0px 0px 6px 32px; }
ol.commentlist { background: url(images/main-content-bg.png) no-repeat top left; margin: 0px 0px 20px -15px !important; padding: 25px 0px 0px 40px; }
ol.commentlist, ol.commentlist ul.children { list-style-position:outside !important; list-style-type:none !important; }
    ol.commentlist li ul { margin: 0px !important; }
    ol.commentlist li ul.children { margin-bottom: -13px !important; }
    
    ol.commentlist li { padding: 19px 0px 13px 100px; background: url(images/comments-border.png) no-repeat bottom left; }
        div.comment-body { position: relative; }
            img.avatar { background: url(images/avatar_border.png) no-repeat; padding: 9px; position: absolute; top: 0px; left: -100px; }
            div.comment-wrap { padding: 0px 0px 10px; }
                .comment-author { margin-bottom: 12px; }
                    span.fn, .comment-wrap span.separator { font-size: 18px; font-weight: bold; color: #1f1e1e; letter-spacing: -1px; }
                    .comment-wrap span.separator, span.commentmetadata a { color: #9c9b9b !important; margin-left: 2px; font-weight: normal; }
                        span.commentmetadata a { font-size: 14px; }
                    
                    div.reply-container { background: url(images/readmore-bg.png) no-repeat scroll 0 0; display:block; float:right; font-size:11px; font-weight:bold; height:34px; line-height:34px; padding-left:27px; }
                        div.reply-container a { background: url(images/readmore-bg.png) no-repeat scroll right top;
display:block; padding-right:11px; color:#FFFFFF !important; }
                            div.reply-container a:hover { text-decoration: none; }
                    
                    ol.commentlist ul.children li { background: none; }        
                            
    div#respond, div.navigation { margin-left: 25px; }
        div#respond a#cancel-comment-reply-link { font-size: 11px; }
    li.comment div#respond { margin: 0px 0px 0px 0px; }
        li.comment div#respond textarea { width: 97%; }
        li.comment div#respond input[type=text] { width: 70%; }
    
    div.navigation { overflow: hidden; margin-bottom: 25px; position: relative; }
    
    #page-comments { margin-top: 30px; }
        
/*------------------------------------------------*/
/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/

#footer-widgets-wrap  { background: url(images/footer-mainbg.png) repeat-y; }
    #footer-widgets { background: url(images/footer-top.jpg) no-repeat; padding: 60px 0px 0px 60px; position: relative; }
        
        #footer-widgets .widget { background: url(images/footer-widget-mainbg.png) repeat-y; width: 269px; float: left; margin: 0px 35px 20px 0px; }
            #footer-widgets .widget  .widgettop { background: url(images/footer-widget-top.png) no-repeat; }
                #footer-widgets .widget h4 { background: url(images/fwidget-separator.png) repeat-x bottom left; letter-spacing: 0px; color: #ffffff; font-size: 18px; padding: 18px 5px 0px 16px; margin: 0px 10px 0px 3px; }
                    #footer-widgets .widget h4 span { display: block; background: url(images/footer-arrow.png) no-repeat; padding: 2px 14px 10px 30px; }
                #footer-widgets .widget-content, #footer-widgets a { color: #b3bdc3; }
                    #footer-widgets a:hover { color: #ffffff; text-decoration: none; }
                
                #footer-widgets .widget-content { padding: 12px 16px 0px 20px; }
                    #footer-widgets ul li a { display: block; }
                    #footer-widgets .widget-content ul { margin: 0px -6px 0px -17px; }
                        #footer-widgets .widget-content ul li { background: url(images/fwidget-li-separator.jpg) no-repeat bottom left; }
                        #footer-widgets .widget-content > ul > li:first-child { margin-top: -8px; }
                        #footer-widgets .widget-content > ul > li:last-child { background: none; }
                            #footer-widgets .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                            #footer-widgets .widget-content ul li a { background: url(images/footer-bullet.png) no-repeat 18px center; padding: 10px 4px 10px 40px; }
                            
                        #footer-widgets .widget-content ul ul { margin: 0px 0px 0px 15px; }
                            #footer-widgets .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }
                    
                .widgetbottom { background: url(images/fwidget-bottom.png) no-repeat; height: 23px; }
                .widgetrow { padding-bottom: 20px; }
                #sidebar .widget-content ul li.recentcomments a, #footer-widgets .widget-content ul li.recentcomments a { background: none; }
    
#footer { min-height: 20px; background: url(images/footer-bottom.png) no-repeat; font-size: 11px; color: #757a7d; }
    #footer a { color: #757a7d; }
    #footer p#copyright { text-align: right; padding: 1px 39px 0 0;}

/*------------------------------------------------*/
/*--------------------[SIDEBAR]-------------------*/
/*------------------------------------------------*/

#sidebar { float: right; width: 290px; }
#sidebar a { color: #4e606c; }
    #from-blog { background: url(images/sidebar-top-bg.png) no-repeat 3px top; padding: 0px 0px 0px; width: 286px; }
        #from-blog ul.control { float: left; width: 285px; display: inline; margin-left: 2px; }
            #from-blog ul.control li { float: left; }
                ul.control li a { display: block; color: #ffffff !important; text-transform: uppercase; font-size: 14px; font-weight: bold; text-align: center; width: 95px; height: 35px; line-height: 35px; text-shadow: 1px 1px 1px #000000; }
                    ul.control li.ui-state-active a { text-decoration: none; height: 30px; margin-top: 5px; }
                    ul.control li a:hover { text-decoration: none; }
                ul.control li.recent a { background: url(images/recent-bg.png) no-repeat; }
                ul.control li.popular a { background: url(images/popular-bg.png) no-repeat; }
                ul.control li.random a { background: url(images/random-bg.png) no-repeat; }
            #from-blog div.entries { float: left; width: 286px; background: url(images/widget-main-bg.png) repeat-y; padding: 0px 4px 0px 5px; }
                div.entries h3 { background: url(images/fromblog-top-bg.png) no-repeat; font-size: 18px; }
                    div.entries h3 span { display: block; padding: 14px 30px 7px 43px; background: url(images/widget-heading.png) no-repeat 14px 14px; }
                div.entries-bottom { background: url(images/widget-bottom.png) no-repeat; height: 5px; margin-left: -7px; }
                    div.entries-bottom.usual { margin-left: -1px; }
                div.tabcontent { padding: 0px 15px 4px 5px; }
                    .tabcontent .post { padding: 9px 0px 6px 6px; background: url(images/separator.png) no-repeat; }
                        .post .post-thumb { background: url(images/img-border.png) no-repeat; float: left; margin: 0px 12px 0px 0px; }
                        .post .description { float: left; }
                            .post .post-thumb a { display: block; }
                                .post .post-thumb img { margin: 7px; }
                        .post h4 { font-size: 14px; letter-spacing: 0px; padding: 5px 0px 0px; }
                            
                        .post p.meta { background: url(images/sidebar-bullet.png) no-repeat 0px 6px; padding: 0px 0px 0px 18px; color: #4a4949; font-size: 11px; font-style: italic; }
                            .post p.meta a { color: #4a4949 !important; font-weight: bold; }
    .widget_wrap { background: url(images/widget-main-bg.png) repeat-y scroll 0 0; margin-bottom: 28px; }
        .widget_entries { background: url(images/sidebar-widget-top.png) no-repeat; padding: 30px 0px 0px; }
            .widget_entries h3 { font-size: 18px; background:transparent url(images/widget-heading.png) no-repeat scroll 14px 17px; display:block; padding:18px 30px 10px 43px; }
            #sidebar .widget-content { background: url(images/separator.png) no-repeat; margin: 0px 0px 0px 8px; width: 262px; padding: 15px 10px; }
                #sidebar .widget-content ul { margin: 0px 0px 0px -10px; }
                    #sidebar .widget-content ul li { background: url(images/separator.png) no-repeat bottom left; }
                        #sidebar .widget-content ul li a { display: block; background: url(images/sidebar-bullet.png) no-repeat scroll 13px center; padding: 8px 4px 8px 35px; }
                        #sidebar .widget-content > ul > li:first-child { margin-top: -8px; }
                        #sidebar .widget-content > ul > li:last-child { background: none; }
                            #sidebar .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                                #sidebar .widget-content ul ul { margin: 0px 0px 0px 20px; }
                                    #sidebar .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }
            
/*------------------------------------------------*/
/*------------[CAPTIONS AND ALIGNMENTS]-----------*/
/*------------------------------------------------*/
div.post .new-post .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-bottom: 10px; }
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.alignright { float: right; }
.alignleft { float: left }
img.alignleft { display:inline; float:left; margin-right:15px; }
img.alignright { display:inline; float:right; margin-left:15px; }

    
/*------------------------------------------------*/
/*---------------[DEFAULT DROPDOWN SETTINGS]---*/
/*------------------------------------------------*/

.nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; z-index: 10; }
.nav li { float:left; position:relative; }
.nav a { display:block; float: left; }
    .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:35px; }
    .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
        .nav li li:hover ul, ul.nav li li.sfHover ul { left:203px; top:0px; }
    .nav li:hover ul, .nav li li:hover ul { top: -999em; }
    .nav li li {    display: block;    padding: 0px; float: left; height: auto !important; }
    .nav li ul { width: 202px; }
        .nav li li a:link, .nav li li a:visited {    display: block; height: auto; float: left; }
        .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

/*------------------------------------------------*/
/*-----------------[WP CALENDAR]-----------------*/
/*------------------------------------------------*/
#wp-calendar { empty-cells: show; margin: 10px auto 0; width: 240px;    }
    #wp-calendar a { display: block; text-decoration: none; font-weight: bold; }
        #wp-calendar a:hover { text-decoration: underline; }
    #wp-calendar caption {    text-decoration: none; font: bold 13px Arial, Sans-Serif; }
    #wp-calendar td {    padding: 3px 5px; color: #9f9f9f; }
        #wp-calendar td#today { color: #ffffff; }
    #wp-calendar th {    font-style: normal;    text-transform: capitalize;    padding: 3px 5px; }
        #wp-calendar #prev a, #wp-calendar #next a { font-size: 9pt; }
        #wp-calendar #next a { padding-right: 10px; text-align: right; }
        #wp-calendar #prev a { padding-left: 10px; text-align: left; }
        
/*------------------------------------------------*/
/*-------------------[PAGE NAVI]------------------*/
/*------------------------------------------------*/
.pagination { overflow: hidden; padding: 15px 12px 0px; }

.wp-pagenavi { position: relative; }
.wp-pagenavi a, .wp-pagenavi a:link { padding: 5px 7px !important; margin: 2px; text-decoration: none; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; font-weight: normal !important; }
.wp-pagenavi a:visited { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #e9e9e9; color: #413f36; background-color: #fff; }
 
.wp-pagenavi span.pages { padding: 5px 7px 5px !important; margin: 2px !important ; color: #000000; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; }
.wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active, .wp-pagenavi a:hover { padding: 5px 7px !important; margin: 2px; font-weight: bold; background-color:#7798A6 !important; border:1px solid #618391 !important; color:#FFFFFF !important; }

a.readmore:hover, #sidebar div.custom-sidebar-block ul.control li a:hover, ul#cats-menu li a:hover, ul#page-menu li a:hover, div#slider-control div.featitem h2 a  { text-decoration: none; }

.js #feat-content, .js div#from-blog div.entries {display: none;} 

.foursixeight { margin: 0px 0px 15px 84px;}
.fullwidth { width: 100% !important; } 

#buildings {display:none;}
MotorRacingblog.nl
pi_90881720
quote:
1s.gif Op woensdag 5 januari 2011 14:45 schreef KomtTijd... het volgende:

[..]

Ja testcases ga ik maken als ik weer thuis ben :P
Ja pffff :{w
:D

Ik ga wel even met de rest kloten, want dat werkt ook nog niet naar behoren. Dankje als je wil gaan kijken.
pi_90881787
quote:
1s.gif Op woensdag 5 januari 2011 14:45 schreef Tegan het volgende:

[..]

Ik weet echt wel wat php is, beter dan dat ik css ken :+ . Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.
Neee, dat bedoel ik niet, maar voor iemand zegt dat hij gezellig de content aan moet gaan passen en hij denkt dat dat de PHP is en hij dat weer gaat verneuken...
quote:
1s.gif Op woensdag 5 januari 2011 14:46 schreef Migue het volgende:

[..]

Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren ;)
[ code verwijderd ]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.
  woensdag 5 januari 2011 @ 14:54:59 #212
184465 Migue
Sensuele man
pi_90882055
quote:
1s.gif Op woensdag 5 januari 2011 14:48 schreef RenRen- het volgende:

[..]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.
Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden ;) Dank allen voor de hulp, het is voor elkaar!
MotorRacingblog.nl
pi_90882114
Mooi.

Heb je meteen geleerd wat er zo tof is aan css :9~ .
pi_90882354
quote:
1s.gif Op woensdag 5 januari 2011 14:54 schreef Migue het volgende:

[..]

Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden ;) Dank allen voor de hulp, het is voor elkaar!
Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer. :')
pi_90882430
quote:
1s.gif Op woensdag 5 januari 2011 15:02 schreef RenRen- het volgende:

[..]

Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer. :')
Klopt, ik typ in de haast nog weleens color, als ik background-color bedoel.
Maargoed text-color of color, scheelt toch weer 5 bytes :P
zcflevo.nl
pi_90891039
quote:
1s.gif Op woensdag 5 januari 2011 13:38 schreef KomtTijd... het volgende:
Zet er <font color="black"> voor en </font> achter?
Echt waar, in een CSS-topic? :D :')
Bleuh.
pi_90900346
quote:
1s.gif Op woensdag 5 januari 2011 17:52 schreef PimD het volgende:

[..]

Echt waar, in een CSS-topic? :D :')
Bekijk de vraag even, dan snap je het :')
zcflevo.nl
pi_90920260
Oke. Ik heb het nu getest met het alignen, en de helft werkt.
Bij de test heb ik deze code gebruikt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		#test{
    background-color:#fff;
    font-size:12px;
    height:100px;
    width:100px;
    display:table;
    position:absolute;
    left:0;
    top:0;

}

p.testtest{
        display:table-cell;
        vertical-align:middle;
}

Dit werkt.
In mijn werkelijke project heb ik het geprobeerd erin te gooien, dit is daarvan de code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		#contentleft{
    width:392px;
    height:307px;
    text-align:center;
    float:left;
    font-family:myriad pro;
    font-size:18px;
    display:table;
    position:absolute;
    left:0;
    top:0;
    
}
p.alignmiddle{
    display:table-cell;
    vertical-align:middle;
}
    
    

En wat er hier gebeurt, is dat al mijn text verdwenen is. Wtf? Halp?

Goed, de div met text is terecht. Hij is helemaal naar linksboven geschoven. Dit is nogal kut. Ik wil namelijk wel met margins werken, maar dat heeft geen nut als je een andere resolutie hebt lijkt me. :') Maar de text is gecentreerd

[ Bericht 2% gewijzigd door RenRen- op 06-01-2011 09:31:58 ]
pi_90920799
Waarom doe je position:absolute?
zcflevo.nl
pi_90921570
Omdat dat online stond. :')
pi_90921794
Weet je wat? Ik ben het zat met die vertical align, ik ga met tabellen werken :')
pi_90922128
Als dat werkt, moet een div met display:table-cell net zo goed werken.
zcflevo.nl
pi_90922367
quote:
2s.gif Op donderdag 6 januari 2011 10:41 schreef KomtTijd... het volgende:
Als dat werkt, moet een div met display:table-cell net zo goed werken.
Het werkt, maar ik had toen ik dat tikte ook een probleem met een paragraph die niet helemaal goed wou centreren. Dus toen was ik het zat.
pi_90922625
Weet jij toevallig waarom mijn td de hoogte lijkt te negeren? :')

1
2
3
4
5
6
7		td.logo{
    border:none;
    width:390px;
    height:200px;
    text-align:center;
    padding-top:60px;
}

Hierdoor verspringt alles continu namelijk.
pi_90924171
Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.
zcflevo.nl
pi_90924390
quote:
1s.gif Op donderdag 6 januari 2011 11:44 schreef KomtTijd... het volgende:
Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.
Hij verspringt altijd, alsof hij de hoogte gewoon negeert. Althans, hij staat in het midden, en de hoogte aan de bovenkant snapt hij, maar aan de onderkant niet.
Geen enkel plaatje is hoger dan 200px, dus dat zou niet mogen. Ook geen padding oid.
pi_91270364
Ik maak een gradient in de achtergrond van een site op het moment, dmv CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		body{
    height:auto;

        background: #008800;
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    background: -webkit-gradient(linear,
                left top, right top, from(#5E5E5E), to(#000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#5E5E5E', EndColorStr='#000000', GradientType=1);
  }

#container{
    width:900px;
    height:200px;
    margin: 0 auto;
    margin-top:200px;
    
}

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?

Ik zie wel dat het op te lossen is door de body een vaste hoogte te geven. Maar dit lijkt me niet slim om te doen, omdat mensen dan onnodig zullen scrollen. Of, bij mensen met een hoger beeldscherm dan 900px, zien weer de gradient opnieuw beginnen.
pi_91270874
quote:
1s.gif Op donderdag 13 januari 2011 16:47 schreef RenRen- het volgende:

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?
De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal
1html, body { ... }
Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.
fokstok.nl
pi_91270949
quote:
1s.gif Op donderdag 13 januari 2011 16:58 schreef Light het volgende:

[..]

De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal

[ code verwijderd ]

Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.
Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
pi_91274947
quote:
1s.gif Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
Geef je body min-height: 100%
zcflevo.nl
pi_91293920
quote:
1s.gif Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast :{
fokstok.nl
pi_91303329
quote:
1s.gif Op donderdag 13 januari 2011 23:34 schreef Light het volgende:

[..]

Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast :{
Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.
quote:
1s.gif Op donderdag 13 januari 2011 18:23 schreef KomtTijd... het volgende:

[..]

Geef je body min-height: 100%
Nop, nogsteeds doetie het verkeerd.
pi_91304692
quote:
1s.gif Op vrijdag 14 januari 2011 09:16 schreef RenRen- het volgende:

[..]

Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.

[..]

Nop, nogsteeds doetie het verkeerd.
Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven :)
fokstok.nl
pi_91304779
quote:
1s.gif Op vrijdag 14 januari 2011 10:01 schreef Light het volgende:

[..]

Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven :)
Hoe zet ik code van CSS naar HTML dan? :') Of gewoon boven de body zetten?
pi_91304936
1
2
3
4
5
6
7
8		html, body {
    margin: 0;
    padding: 0;
}
html {
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    min-height: 100%;
}
fokstok.nl
pi_91305607


;(

Ik heb nu ook die margin:0; en padding:0; erin gezet, geen effect.
Het rechter is FF.
pi_91305745
De min-height op regel 12 hoort niet bij body maar bij html.
fokstok.nl
pi_91306154
quote:
1s.gif Op vrijdag 14 januari 2011 10:35 schreef Light het volgende:
De min-height op regel 12 hoort niet bij body maar bij html.
_O_ Opgelost, dankje!
pi_91313368
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:
1
2
3		background: -moz-linear-gradient(top, #e5e7e6, #eaeceb);
background: -webkit-gradient(linear,top,bottom,from(#e5e7e6),to(#eaeceb));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#e5e7e6', EndColorStr='#eaeceb');
dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel :D)
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
pi_91313586
quote:
1s.gif Op vrijdag 14 januari 2011 13:38 schreef mschol het volgende:
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:

[ code verwijderd ]

dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel :D)
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.
zcflevo.nl
pi_91315049
quote:
1s.gif Op vrijdag 14 januari 2011 13:42 schreef KomtTijd... het volgende:

[..]

DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.
denk ik dat ik een mooi alternatief voor een plaatje heb gevonden... blijkt dat buggy te zijn ;(
maar ach, dan maar terug naar het plaatje :P

[ Bericht 9% gewijzigd door mschol op 14-01-2011 14:21:25 ]
pi_91427993
Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?
  zondag 16 januari 2011 @ 20:34:49 #243
134533 donroyco
dus niet Donroyco
pi_91428322
quote:
1s.gif Op zondag 16 januari 2011 20:30 schreef Donnis het volgende:
Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?
Hoe bedoel je? :)
Wat heeft dit met CSS te maken?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91428849
Oh faal :')
pi_91429353
Ik las CS5, en hoe je posts moet editten weet ik ook al niet meer te vinden met die nieuwe lay-out, lekker bezig.
pi_91432566
Kan gebeuren :P .
pi_91504674
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
  dinsdag 18 januari 2011 @ 10:46:31 #248
91039 mstx
2x1/2 = 1/2 x 1/2
pi_91505243
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_91505475
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Gewoon je eigen stereo op 10 zetten :) Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren ;)
fokstok.nl
pi_91505633
quote:
14s.gif Op dinsdag 18 januari 2011 10:52 schreef Light het volgende:

[..]

Gewoon je eigen stereo op 10 zetten :) Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren ;)
Sherlock, het is niet zo dat ik het wil, het moet :') Dus ik moet een manier vinden.
pi_91505647
quote:
1s.gif Op dinsdag 18 januari 2011 10:46 schreef mstx het volgende:

[..]

Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...
Frame is misschien een optie... Even op googlen, dankje
  dinsdag 18 januari 2011 @ 12:54:21 #252
134533 donroyco
dus niet Donroyco
pi_91510151
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Content inladen dmv jQuery?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91510447
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
  dinsdag 18 januari 2011 @ 13:01:52 #254
134533 donroyco
dus niet Donroyco
pi_91510474
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Soms moet je van tevoren bedenken hoe het moet.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91510496
quote:
3s.gif Op dinsdag 18 januari 2011 13:01 schreef donroyco het volgende:

[..]

Soms moet je van tevoren bedenken hoe het moet.
Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
  dinsdag 18 januari 2011 @ 13:16:25 #256
134533 donroyco
dus niet Donroyco
pi_91510966
quote:
1s.gif Op dinsdag 18 januari 2011 13:02 schreef RenRen- het volgende:

[..]

Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91511018
quote:
7s.gif Op dinsdag 18 januari 2011 13:16 schreef donroyco het volgende:

[..]

Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
  dinsdag 18 januari 2011 @ 13:23:19 #258
134533 donroyco
dus niet Donroyco
pi_91511224
quote:
1s.gif Op dinsdag 18 januari 2011 13:17 schreef RenRen- het volgende:

[..]

Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91511286
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Ik kan op voorhand niet zulke dingen in gedachten houden, als die dingen niet in de planning stonden, dat schrijf ik net. Anders had ik echt wel wat anders bedacht voor de content en dergelijken, ik ben toch zeker niet achterlijk. Daarom zoek ik een oplossing die niet inhoudt dat ik de site helemaal opnieuw moet bouwen. Ik ga toch niet elke site zo bouwen dat er eventueel nog een keer ooit een muziekje onder kan, dat snap jij ook wel :')

En als jij dus niet goed wilt lezen, moet je mij daar niet mee lastig vallen.
pi_91513299
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
zcflevo.nl
pi_91513427
quote:
1s.gif Op dinsdag 18 januari 2011 14:09 schreef KomtTijd... het volgende:

[..]

Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
Nee, het is een heel simpele site eigenlijk.
pi_91513628
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Je kunt niet alles in gedachten houden. Als je bij de buurman een vierkant terras van 4 x 4 meter gaat leggen en de buurman besluit, als je nog 3 tegels moet leggen, dat hij toch liever een rond terras met dezelfde oppervlakte heeft, kun je ook weer opnieuw beginnen. :)
fokstok.nl
pi_91736768
eens :).
Ik zou een klein (misschien zelfs leeg, maar ik zou wel ergens een uit-optie inbouwen) framepje gebruiken. Dat kan denk ik nog wel makkelijk zonder heel veel aan alle pagina's aan te moeten passen.
Finally, someone let me out of my cage
pi_91736900
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
zcflevo.nl
  maandag 24 januari 2011 @ 23:12:07 #265
71610 Black-Hole
Deep in my soul
pi_91827530
Zit al de hele avond te klooien om een 3 column layout voor elkaar te krijgen met floats en het lukt maar niet om de recht kolom goed te krijgen zodat hij echt naast de middelste kolom komt in plaats van rechts ter hoogte van waar de middelste kolom is geëindigd.

Dit is de (versimpelde) HTML code die ik gebruik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<div id="wrapper">

<div id="left">

<p>Lorem .....  ultrices, orci.</p>

</div> <!-- end left -->

<div id="middle">

<p>Lorem ...... placerat ultrices, orci.
</p>

</div> <!-- end middle -->

<div id="right">

<p>Lorem ....... ultrices, orci.</p>

<p>Pellentesque ...... felis.</p>

</div> <!-- end right -->

</div> <!-- end wrapper -->

en de CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		#wrapper{
width: 960px;
margin: auto;
}

#left {
float: left;
width: 260px;
background: red;
}

#middle {
margin: 0px 260px;
width: 440px;
background: green;
}

#right {
float: right;
width: 260px;
background: yellow;
}

Volgens mij is de oplossing zo simpel maar ik kom er nu echt niet uit :{
pi_91828882
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#left {
  float: left;
  width: 260px;
  background: red;
}
#middle {
  float: left;
  width: 440px;
  background: green;
}
#right {
  float: left;
  width: 260px;
  background: yellow;
}
fokstok.nl
pi_91829178
quote:
13s.gif Op zondag 23 januari 2011 02:46 schreef KomtTijd... het volgende:
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
ok misschien is ajax ook wel een optie, maar waarom werken frames vreselijk?
Finally, someone let me out of my cage
  dinsdag 25 januari 2011 @ 06:40:30 #268
71610 Black-Hole
Deep in my soul
pi_91835556
quote:
1s.gif Op maandag 24 januari 2011 23:39 schreef Light het volgende:

[ code verwijderd ]

Zo makkelijk dus :% Thanks!
pi_91861297
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

1
2
3
4
5
6		    <div class="menu">
        <div class="active"><a href="index.html">Home</a></div>
        <div class="noactive"><a href="#">Over mij</a></div>
        <div class="noactive"><a href="portfolio.html">Portfolio</a></div>
        <div class="noactive"><a href="#">Contact</a></div>
    </div>

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		.menu {
float: left;
width: 100%;
height: 80px;
font: 12px Arial;
}

.active { 
font: 12px Arial; 
width: 90px; 
height: 80px;
float: left; 
color: #FFFFFF; 
background: #410400; 
text-decoration: none; 
}

.active a:link, a:active, a:visited, a:hover { color: #FFFFFF; text-decoration: none; }

.noactive { 
font: 12px Arial; 
width: 90px; 
height: 80px; 
float: left; 
color: #410400; 
background: #fff; 
text-decoration: none; 
}

.noactive a:link, a:active, a:visited, a:hover { color: #410400; background: #fff; text-decoration: none }

Kan iemand me aub helpen? ;(
pi_91861759
quote:
1s.gif Op dinsdag 25 januari 2011 19:31 schreef Nashje het volgende:
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

[ code verwijderd ]

[ code verwijderd ]

Kan iemand me aub helpen? ;(
En wat gaat er dan precies mis? Zonder te testen kan ik al zeggen dat het probleem waarschijnlijk is dat je alleen onderscheid maakt in .active a:link en .noactive a:link. a:hover, a:visited en a:active worden gewoon volgens de regels van specificity gestijld.

En nog wat algemene opmerkingen:
- voor een menu gebruikt men doorgaans een unordered list (<ul>)
- een hele rij elementen dezelfde classname geven lijkt me een beetje overbodig.
zcflevo.nl
pi_91863737
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?
1
2
3
4
5
6		    <ul id="menu"> 
            <li class="active"><a href="index.html">Home</a></li> 
            <li><a href="#">Over mij</a></li> 
            <li><a href="#">Portfolio</a></li> 
            <li><a href="#">Contact</a></li> 
    </ul> 

Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    display: inline;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}
pi_91870454
quote:
1s.gif Op dinsdag 25 januari 2011 20:11 schreef Nashje het volgende:
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?

[ code verwijderd ]
ja dat is prima zo
quote:
Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

[ code verwijderd ]

inline-elementen vormen zich naar hun inhoud. Maak er inline-block elementen van. Of laat ze lekker block, en gebruik float:left om ze naast elkaar te krijgen.

verder snap ik nog steeds niet wat je hier mee wilt:
1
2
3
4
5		#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}
Maar het lijkt me gewoon een fout. Ik denk dat dat hele gedeelte eruit kan en dat je bovendien eens wat moet lezen over CSS selectors. Goeie startplaats zoals altijd: http://www.w3schools.com/css/default.asp
zcflevo.nl
pi_91895304
Even mbv van een plaatje.

De actieve pagina moet dus zichtbaar zijn en wanneer je met de cursor over de overige knoppen gaat moet deze gemarkeerd worden. Dat is wat ik met die hover wil krijgen. Met die display:inline komen ze langs elkaar, maar ik wil elke item dezelfde grootte en breedte meegeven (90x80px).

pi_91896284
Tis me voor een gedeelte gelukt!

Heb nu:
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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    float: left;
    display: block;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a { float: left; display: block; width: 90px; height: 80px; }

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}

Alleen die class="active" op Home pakt ie niet. Hmmz.
pi_91896476
OMG, tis me gewoon gelukt.

Had:
1
2
3
4		#menu li .active {
    color: #fff;
    background: #410400;
}

Veranderd in:
1
2
3
4		#menu .active a {
    color: #fff;
    background: #410400;
}

Voila. Bedankt :).
  woensdag 26 januari 2011 @ 15:23:09 #276
134533 donroyco
dus niet Donroyco
pi_91896499
Gebruik je Web Dev Toolbar?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91918019
Firebug is ook handig, naast die webdev toolbar. :)
fokstok.nl
pi_91920771
Ik zou niet meer willen/kunnen leven zonder Firebug :D
Bleuh.
pi_92266642
vraagje ik zit nu met
1
2
3
4
5
6
7
8
9
10		<body>
<div id='container'>
<div id='menu'>
</div>
<div id='content'>
</div>
<div id='footer'>
</div>
</div>
</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		#container{
    width:1000px;    
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#menu{ 
    float: left;
    width: 160px;
    height: 100%;
    font-size: 11px;
    min-height: 800px;
    padding: 5px 5px 5px 5px;
}
#content {
    float: left;
    width: 800px;
    height: 100%;
    font-size: 12px;
    padding-bottom:10px;
    padding-left:20px;
}

#footer{
    float: left;
    height: 120px;
    width: 990px;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
}

Probleem is dat hij de container niet wil weergeven :o.
het idee is een paar Divs met een witte achtergrond en dat lukt niet echt.

[ Bericht 0% gewijzigd door cablegunmaster op 03-02-2011 11:52:51 ]
Redacted
pi_92266676
Je hebt je containerdiv niet afgesloten.
pi_92266883
quote:
1s.gif Op donderdag 3 februari 2011 11:47 schreef RenRen- het volgende:
Je hebt je containerdiv niet afgesloten.
css die klopt wat ik heb gekopieerd de html is pseudo dus ja was een klein foutje :P
alsnog geen witte achtergrond.
Redacted
pi_92266932
Het is ook background-color :Y
  donderdag 3 februari 2011 @ 11:57:39 #283
134533 donroyco
dus niet Donroyco
pi_92267014
quote:
1s.gif Op donderdag 3 februari 2011 11:55 schreef RenRen- het volgende:
Het is ook background-color :Y
background pakt ie ook :)
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_92267075
quote:
1s.gif Op donderdag 3 februari 2011 11:57 schreef donroyco het volgende:

[..]

background pakt ie ook :)
In plaats dat je die gast helpt, let je liever op mij. Top!
  donderdag 3 februari 2011 @ 12:01:17 #285
134533 donroyco
dus niet Donroyco
pi_92267157
quote:
14s.gif Op donderdag 3 februari 2011 11:59 schreef RenRen- het volgende:

[..]

In plaats dat je die gast helpt, let je liever op mij. Top!
Huilen doe je maar lekker ergens anders.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_92267484
quote:
7s.gif Op donderdag 3 februari 2011 12:01 schreef donroyco het volgende:

[..]

Huilen doe je maar lekker ergens anders.
Ja, boohoo, de grote Donroyco haat me. Boohoo.
Ga die gast helpen ipv altijd op mij te letten, je weet altijd alles toch zo goed?
pi_92267621
footer clear:both meegeven ipv float:left.
zcflevo.nl
pi_92268062
het werkt niet en de rest van de css werkt wel :o.
Redacted
pi_92268291
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
zcflevo.nl
pi_92269024
quote:
2s.gif Op donderdag 3 februari 2011 12:33 schreef KomtTijd... het volgende:
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
W3 validator fixte het dankje :). het kwam door extra scriptjes die nog niet helemaal gevalideerd waren :). Dankje voor de aandacht. en kappen met bekvechten ;) .
Redacted
  vrijdag 18 februari 2011 @ 10:43:29 #291
63192 ursel
"Het Is Hier Fantastisch!
pi_92956279
Ik heb een probleem met mijn textgrootte versus mijn achtergrond image. :P

Mijn image is op zijn smalste stuk 75px breed. Het is de bedoeling dat een aantal keywords verdeeld worden bovenop deze image. So fa so good. Alleen zijn sommige keywords een beetje lang, of meerdere worden. Meerdere worden gaat meestal nog wel goed gelukkig.

Ik heb mijn keywords div nu een breedte gegeven van 75 px. Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven. Probleem is alleen dat mijn tekst als die groter is dan 75px, aan de rechterkant uit mijn div loopt.

Wat kan ik het beste doen? Links uit de div laten lopen (en hoe doe ik dat:P), Of zijn er mogelijkheden om worden af te kappen en de regel eronder verder te gaan?
  vrijdag 18 februari 2011 @ 11:33:37 #293
63192 ursel
"Het Is Hier Fantastisch!
pi_92957952
quote:
1s.gif Op vrijdag 18 februari 2011 10:51 schreef KomtTijd... het volgende:
http://www.css3.info/preview/word-wrap/
Hmm, natuurlijk. Mja, niet zo heel erg tevree mee eigenlijk. :{
Krijg je van die rare woorden weer van.

Heb je ook nog een optie voor het aan de linkerkant uitlopen van een div? :7
pi_92958959
text-allign:right wellicht?
zcflevo.nl
  vrijdag 18 februari 2011 @ 12:11:31 #295
63192 ursel
"Het Is Hier Fantastisch!
pi_92959166
quote:
2s.gif Op vrijdag 18 februari 2011 12:04 schreef KomtTijd... het volgende:
text-allign:right wellicht?
Staat al zo
quote:
1s.gif Op vrijdag 18 februari 2011 10:43 schreef ursel het volgende:

Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven.

pi_92959304
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
fokstok.nl
pi_92959356
quote:
1s.gif Op vrijdag 18 februari 2011 12:16 schreef Light het volgende:
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
naalspo nerovetsrethca nedroow ej la nad ne heheW
zcflevo.nl
pi_92960523
Ik loop zelf ook tegen een probleem aan.

In een site heb ik een div, bovenin, die heeft een achtergrondkleur. Die hebben we een position:absolute mee moeten geven, omdat anders de achtergrondkleur maar een klein stukje opvult.

Hierdoor heb ik problemen met andere divs, die gaan erachter zitten. Geen idee hoe ik het op kan lossen.
Help?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#imageheader {
    width:878px;
    height:auto;
    max-height:291px;
    background-color:#e8ded2;
    margin: 10px 0px 20px -5px;
    padding: 11px 11px 11px 11px;
    position:absolute;
}

#left {
    min-width:210px;
    max-width:210px;
    height:auto;
    float:left;
    background-color:#CCC;
    margin-left:6px;
}

pi_92962601
quote:
14s.gif Op vrijdag 18 februari 2011 13:42 schreef KomtTijd... het volgende:
[Geen search nodig!] De oplossing voor alle problemen!
Wat ik wil is dat die left onder de imageheader komt :')
pi_92962714
Nee het probleem is dat #imageheader iets niet goed doet met de achtergrond, en je workaround daarvoor zorgt voor een nieuw probleem. Kortom, bij de bron aanpakken. Wat gaat er mis met die achtergrond?
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies #15
Index

» digital corner

» development

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