[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
  dinsdag 24 maart 2009 @ 12:36:39 #2
136730 PiRANiA
All thinking men are atheists.
pi_67353595
.forumpost{
tvp:true;
}
Dag Google!
pi_67353608
quote:
Op dinsdag 24 maart 2009 12:23 schreef Nashje het volgende:

Ben weer aanbeland bij een nieuw raadsel. Zal vast mogelijk zijn, maar weet niet hoe... Een zoeksysteem binnen je site, die niet gaat zoeken in tables oid, nee, stuk tekst waarop je hebt gezocht wordt geselecteerd op de site. Dus zonder PHP ofzo.
Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
  dinsdag 24 maart 2009 @ 13:04:00 #4
181657 LordNemephis
computer says no
pi_67354416
quote:
Op dinsdag 24 maart 2009 12:37 schreef Roy_T het volgende:

[..]

Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
Inderdaad, zou toch een databeest gebruiken daarvoor.
Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
pi_67355452
quote:
Op dinsdag 24 maart 2009 12:34 schreef Roy_T het volgende:
Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).
Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.
pi_67357746
Ah, ik dacht dat je echt een site-wide zoekmachine zocht Maar dan nog zou ik het niet client-side doen
pi_67357848
Hoe zou je het dan doen? Er wordt verder nog niets in een database geschreven of uberhaupt gedaan.
pi_67358051
Beginnen met wél in een database schrijven Het probleem met client-side is dat je alleen door de content wilt zoeken, en niet door de hele code (neem ik aan). Je zult dan in je script aan moeten geven binnen welke elementen je wél wilt zoeken en dit vervolgens doen met een regex ofzo. Het kan wel, maar het is een pokkewerk, terwijl een database hiervoor gemaakt is (bijv. door een FULLTEXT index te gebruiken in MySQL). Maar hoe je het ook doet, het heeft nooit iets met [CSS] voor dummies - deel 12 te maken
  dinsdag 24 maart 2009 @ 14:50:29 #9
165924 msnk
AliceWonder <3
pi_67358113
quote:
Op dinsdag 24 maart 2009 12:36 schreef PiRANiA het volgende:
.forumpost{
tvp:true;
}
AFC AJAX
pi_67358197
quote:
Op dinsdag 24 maart 2009 13:31 schreef Nashje het volgende:

[..]

Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.
ik had er ooit een javascriptje voor... nog in de tijd van Netscape4/explorer4 deed dat het ook...
de vraag is echter eerder of je dat wil, browsers bieden zelf een veel betere eigen standaard functionaliteit voor : CTRL-F en dan heeft het eerder weinig zin om zelf met brakke scriptjes goed functionerende browser-functionaliteiten te 'simuleren'.

edit: was niet eens zo moeilijk te vinden:
http://javascript.internet.com/miscellaneous/search-the-page.html
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67359248
Hmm okay.

[quote]Op dinsdag 24 maart 2009 14:52 schreef RM-rf het volgende:

[..]%

[ Bericht 37% gewijzigd door Nashje op 24-03-2009 15:55:41 ]
pi_67359845
quote:
Op dinsdag 24 maart 2009 15:23 schreef Nashje het volgende:
Verbinding onderbroken

De verbinding met de server werd geherinitialiseerd tijdens het laden van de pagina.
pi_67359916
Hmm Fok doet raar, krijg m'n bericht niet geedit.
pi_67374881
Weet iemand of er al een fix / work around voor dit probleem:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=3821&productId=1

Zou erg fijn zijn
Just say hi!
pi_67374953
De workaround die ik eerder gaf: een div met die achtergrond ter grootte van de textarea, textarea erin renderen met background: transparent.
pi_67391570
Ja, maar dus nog geen andere workaround dus.. heb je ook nog een link naar artikel van die workaround?
Just say hi!
pi_67391906
Nee, want ik heb hem zelf verzonnen en er geen artikel over geschreven Maar zo moeilijk is het niet toch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div class="textarea_wrap"><textarea>bla</textarea></div>

div.textarea_wrap,
textarea {
   width: 200px;
   height: 200px;
}

div.textarea_wrap {
   background: url(bg.gif);
}

textarea {
   background: transparent;
}
pi_67392332
Ik zou er dan toch eens een artikeltje aan wijden want er is blijkbaar veel vraag naar krijg deze vraag vaker per MSN en zeg dan altijd dat het onmogelijk is
Just say hi!
pi_67392566
Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig
pi_67394409
Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?
pi_67395309
quote:
Op woensdag 25 maart 2009 15:18 schreef Nashje het volgende:
Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?
Iets met de margin/padding doen. Als je alles links wilt hebben zonder list-style (bolletjes) is het simpel ("margin: 0; padding: 0; list-style: none" op de <ul>), anders moet je even opzoeken hoe de verschillende browsers zich gedragen; de ene gebruikt namelijk padding en de andere margin voor hun default rendering.
pi_67418536
als het mogelijk is gebruik dan:

padding:0;
margin:0;

Niet perfect,maar werkt wel!
Vooral dat wat hier boven staat.
pi_67418776
quote:
Op woensdag 25 maart 2009 14:27 schreef Roy_T het volgende:
Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig
Nou zie het eerder als een fout van de browser op zich, je zou een achtergrond toch gewoon fixed moeten kunnen plaatsen
Just say hi!
pi_67555811
'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?
pi_67561134
quote:
Op maandag 30 maart 2009 19:47 schreef hello_moto1992 het volgende:
'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?
je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)


wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:

1
2
3
4
5		<ul>
   <li> <a href="#"> Naam Eén <img src="plaatje naam1.jpg"> </a> </li>
   <li> <a href="#"> Naam Twee <img src="plaatje naam2.jpg"> </a> </li>
   <li> <a href="#"> Naam Drie <img src="plaatje naam3.jpg"> </a> </li>
</ul>



en dan de CSS-code

1
2
3
4
5
6
7
8
9
10
11
12		UL {
  position: relative; /* positioning in normale flow, maar zodat de afbeelding erbinnen gepositioneerd kan worden */
  width: 100%;
}
UL LI A IMG {
  display: none; /* verberg afbeelding */
  position: absolute; / positioneer afbeelding */
  top: 10px; right: 10px;
}
UL LI A:hover IMG {
  display: block ; /* toon afbeelding bij hover */
}


[ Bericht 0% gewijzigd door RM-rf op 31-03-2009 01:44:19 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67561238
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
pi_67566276
quote:
Op maandag 30 maart 2009 22:14 schreef Roy_T het volgende:
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)

we hebben het hier over HTML en niet case-sensitive XML of dat nutteloze XHTML (dat sowieso een doodlopend pad geworden is op het WWW)

er stond wel een foutje in mn code... ik had .hover staan ipv :hover, dus een dubbele punt
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  dinsdag 31 maart 2009 @ 02:11:54 #28
230788 n8n
Pragmatisch
pi_67566416
Er wordt naar mijn weten bij namen van elementen, id's en classes altijd aangeraden alles met onderkast letters te schrijven. Dat staat naar mijn opinie ook een stuk netter.

tevens TerugVindCss
“Specialization is for insects”.—Robert Heinlein
pi_67567537
quote:
Op dinsdag 31 maart 2009 01:54 schreef RM-rf het volgende:

wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)
Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
pi_67570060
quote:
Op dinsdag 31 maart 2009 08:13 schreef Roy_T het volgende:

[..]

Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
tech is er geen enkele plicht ... ik heb die gewoonte al heel lang en in de CSS1 spec wordt het ook heel consequent toegepast : http://www.w3.org/TR/CSS1/#contextual-selectors ... in de CSS2 specificatie ook: http://www.w3.org/TR/CSS2/selector.html#type-selectors (in latere versies van de CSS-specificatie staat soms een mengeling, vreemd genoeg worden soms kapitalen voor elementen gebruikt en soms undercast... er staat wel in dat CSS zelf en selectoren case-insensitive zijn)

Het grootste voordeel voor mij is de duidelijke afscheiding tussen verschillende soort selectoren..
zelf prefereer ik ook zoveel mogelijk via element-selectoren te definieren en pas als dat niet lukt terug te vallen op classnames en/of id's als selectoren ...

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67571257
quote:
Op dinsdag 31 maart 2009 10:11 schreef RM-rf het volgende:

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
Klopt, voorkeur en conventie. Ik moedig mensen over het algemeen aan om de conventies zoveel mogelijk te volgen, maar da's ook persoonlijk.
pi_67579773
quote:
Op maandag 30 maart 2009 22:11 schreef RM-rf het volgende:

[..]

je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)


wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:
[ code verwijderd ]

en dan de CSS-code
[ code verwijderd ]


Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
pi_67581005
quote:
Op dinsdag 31 maart 2009 15:09 schreef hello_moto1992 het volgende:

[..]

Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
ja hoor... daarvoor kun je de positionering verder met behulp van CSS 'stylen'....

wil je dat 'fine-tunen' kun je bv de elementen (UL, LI of de IMG ) 'border: 1px solid green;' (of andere kleuren) toewijzen zodat je precies ziet hoe groot elemente precies zijn en waar ze precies staan..
de IMG's worden nu op basis van de breedte van de UL gepositioneerd (doordat dit het bovenliggende element met een 'position' is) relatief afhankelijk van de 'top' en rechterzijde...

dat is echter allemaal via CSS aan te passen/ te stylen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67586472
Halp please! Ik heb een lijst genest in een div van ~200px. In die lijst staat weleens een lange link en die wordt in Firefox gewoon netjes afgebroken zodat het in de div blijft. In IE7 echter niet Die laat de link gewoon uit de div lopen zonder het af te breken. Valt dit te fixen?
シ
pi_67602241
Ik heb een poll gemaakt middels html/css, echter krijg ik de footer niet precies op de juiste plek en heb werkelijk geen idee waarom deze naar rechts verspringt.

Ik heb al clear:both geprobeerd,margins, padding,left, etc maar niets werkt.

voorbeeld


Live voorbeeld:
http://htmlpoll.testertje.nl/pollview.php?code=6a6fa00b

HTML code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		        <div id="poll">
            <h1 id="poll-header">1234567890123</h1>
            <dl id="poll-content">
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-1.html">dit is een test vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-2.html">dit is een 123 vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            </dl>
            <br style="clear:both;" />
            <ul id="poll-footer">
                <li id="votes">Aantal stemmen: 0</li>
                <li id="views">Keer bekeken: 13</li>
                <li id="advertisement">Maak ook een gratis poll op <a href="http://www.htmlpoll.nl">htmlpoll.nl</a></li>
            </ul>
        </div>


Css code:
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		#poll { 
    width: 400px; 
    border: 2px solid black; 
} 

/* header */ 
#poll-header { 
    background: gray; 
    height: 40px; 
    color: #FFF; 
    margin: 0px 0px 10px 0px; 
    padding:10px 0px 0px 10px;     
    font-size: 24px; 
    float:none; 
} 

/* content */ 

#poll-content { 
    padding:0; 
    margin:0; 
} 

#poll-contenta, 
#poll-content a:link, 
#poll-content a:active {   
    color: gray; 
    text-decoration: none; 
} 

#poll-content a:hover { 
    text-decoration: underline; 
} 

#poll-content dt { 
    clear: both; 
} 
    
#poll-content dd.bar { 
    text-indent: -90000px; 
    background: #000; 
    float: left; 
    height: 18px; 
    line-height: 0;
    width: 300px; 
} 
#poll-content dd.votes { 
    float: right;   
    padding-right: 10px;     
} 

/* footer */ 
#poll-footer { 
    background: gray; 
    height: 55px; 
    margin: 0; 
    padding: 10px 5px 5px 10px; 
    clear:both;
    left:0;
} 

#poll-footer li {
    list-style-type: none;
}

#poll-footer a, 
#poll-footer a:link, 
#poll-footer a:active {   
    color: white; 
    text-decoration: none; 
} 


#poll-footer #votes 
{ 
    float: left; 
} 

#poll-footer #views { 
    float: right; 
    text-align: right; 
} 

#poll-footer #advertisement { 
    clear: both; 
    margin-top: 10px; 
} 


Hopelijk kan iemand mij vertellen wat ik fout doe!
Just say hi!
pi_67602356
Wat op die URL staat lijkt nog niet bijna op je screenshot?
pi_67605489
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
pi_67606818
@Roy_T: klopt idd, zat een ( te veel in de CSS import
Just say hi!
pi_67607687
quote:
Op woensdag 1 april 2009 11:04 schreef Nashje het volgende:
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
Een div bedoel je? Gewoon geen height geven
pi_67608156
quote:
Op woensdag 1 april 2009 12:08 schreef Roy_T het volgende:

[..]

Een div bedoel je? Gewoon geen height geven
Ja dat had ik al geprobeerd. Zal het even schetsen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		home pagina

<div class="container">
   <div class="content">
      <div class="welkom"></div>
   </div>
</div>

info pagina

<div class="container">
   <div class="submenu"></div>
   <div class="content">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
   </div>
</div>


Home pagina is een klein stukje tekst. Op de info pagina heb ik dus 3 divs, maar daardoor wordt het een stuk langer dan op de home pagina. Nu moet de container dus automatisch naar beneden gaan door die 3 divs.
pi_67608850
Dat doet 'ie ook standaard, tenzij je zaken uit de natuurlijke flow gehaald hebt met "float" bijvoorbeeld.
pi_67609479
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
pi_67609944
@Roy_T; ik heb het voorbeeld, nu moet de output wel duidelijk zijn met de padding/margin fout
Just say hi!
pi_67610171
quote:
Op woensdag 1 april 2009 13:05 schreef Nashje het volgende:
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
Je kunt het eens proberen door géén height te gebruiken, en "overflow: auto" op je container te zetten.
pi_67612307
Je bent een held . Ik was al bezig om alles opnieuw te gaan maken, fucking hell zeg. Was al bang dat dat niet kon als je floats gebruikt.

Enige fucked up probleem is nu dat Bill Gates met zijne IE zegt dat het toch niet helemaal de bedoeling is . JEZUS, ik word gek van die browserbattles .
pi_67613315
Hmm ik heb een discussie met m'n collega over positions of floats. Ik gebruik áltijd floats om alles neer te zetten, en hij gaat voor positions. Is er ergens een brede uitleg te vinden over wat nu het beste is?
pi_67614814
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.

Over float of position: kwestie van smaak denk ik. Ik gebruik ook altijd float, omdat er dan tenminste een flow in zit en elementen kunnen schalen. Als je position gebruikt is dat imo vaak een stuk lastiger.
pi_67615234
1
2
3
4
5
6
7
8
9
10		#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
} 


Dit heb ik nu dus. Zoals je ziet staat er bij top: 30px; en right: 50px;. Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
pi_67615901
quote:
Op woensdag 1 april 2009 15:42 schreef Roy_T het volgende:
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.
Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.

Om mijn container (waar alles in staat) te centeren gebruik ik::
body, html { margin: 0px, padding: 0px } en in de .container { margin: 0 auto; }

FF doet het goed, IE niet. En als ik een nieuw html bestandje aanmaak met alleen deze 2 dingen, en dus verder geen divs of elementen, staat ie wel gecentreerd !
pi_67616434
quote:
Op woensdag 1 april 2009 15:52 schreef hello_moto1992 het volgende:

Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.
pi_67617465
Hmm.... Ik heb een aantal includes:
1
2
3
4
5
6
7
8
9
10
11		<?php 
include ("top.php");
?>

<?php
include ("home.php");
?>

<?php
include ("bottom.php");
?>


Heb er een css aan gehangen, die dus de boel al automatisch centreert. In FF doet ie het prima, in IE niet. Zet ik boven de eerste include een <center> en sluit ik die onderaan af, centreert ie wel alles in IE :').

Sjonge jonge.
pi_67617737
Oplossing gevonden voor de geinteresseerden:

1
2
3
4
5
6
7
8		body {
text-align: center; /* for IE */
}

#container {
margin: 0 auto;   /* align for good browsers */
text-align: left; /* counter the body center */
}
pi_67617822
quote:
Op woensdag 1 april 2009 16:22 schreef Roy_T het volgende:

[..]

"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.
Sorry, maar ik snap het even niet .

Ik heb een div, genaamd contentmid. Daarin staat dus die lijst met namen.

HTML:
1
2
3
4
5		<ul>
   <li><a href="#">Naam Eén<img align="right" src="plaatje naam1.jpg"></a></li>
   <li><a href="#">Naam Twee<img align="right" src="plaatje naam2.jpg"></a></li>
   <li><a href="#">Naam Drie<img align="right" src="img/defqon.jpg"></a></li>
</ul>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
}

#contentmid {
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
padding-top:5px;
margin-left:5px;
}


EDIT:

Nog een vraagje:
Is het ook mogelijk dat de foto 'vast' blijft staan na een klik?

[ Bericht 4% gewijzigd door hello_moto1992 op 01-04-2009 17:36:39 ]
pi_67618865
quote:
Op woensdag 1 april 2009 16:09 schreef Nashje het volgende:

[..]

Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.
Bug gevonden!!! Ligt waarschijnlijk aan paddings. Morgen even uitdokteren. Voel me wel al een stuk relaxer, hehe.
pi_67638048
Gaat goed. Nog een vraagje:

Hoe kan ik deze 2 vakken centreren in de container? Ik kan de margin-pixels wel uitrekenen, maar dat is zo'n gepiel...

pi_67639923
Hoe centreren? Dat plaatje maakt niet echt iets duidelijk
pi_67654148
De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?
  donderdag 2 april 2009 @ 19:28:51 #58
164509 Banzaiaap
Tony Rocky Horror
pi_67654533
quote:
Op donderdag 2 april 2009 19:18 schreef Nashje het volgende:
De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?
Mja, als je de exacte formaten weet, zou ik gewoon floaten en margins gebruiken.
pi_67656794
Ja, zo zou ik het ook doen.
pi_67671700
Oke dus toch wel. Dank u.
pi_67671953
Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.
1
2
3
4
5
6
7
8		.htmlPollContainer ul { 
    background: gray; 
    height: 40px; 
    margin: 10px 0px 0px 0px; 
    padding: 10px 5px 5px 10px; 
    clear:both;
    left:0;
} 


nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?
Just say hi!
  vrijdag 3 april 2009 @ 12:04:43 #62
33189 RM-rf
1/998001
pi_67672260
quote:
Op vrijdag 3 april 2009 11:56 schreef Chandler het volgende:
Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.
[ code verwijderd ]

nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?
vermoedelijk omdat de 'cascading' waarde een hogere waarde toewijst aan een propertie die toegekend wordt adhv een ID-selector:

(de term 'cascading' in CSS staat voor 'overlappen'... mbhv CSS kun je elementen 'overlappende' waardes toewijzen die dan aan kinderen doorgegeven 'kunnen 'worden)


er zijn verschillende methodes dit te voorkomen... bv de selector zelf wat uitgebreider maken:
1#content .htmlPollContainer ul { margin-left: 0; }


of, meestal een beetje meer 'quick-and-dirty', het toewijzen van de waarde '!important':
1.htmlPollContainer ul { margin-left: 0 !important; }


ik zou je wel aanraden te kijken of het probleem niet deels kan onstaatn door een té gefragmentariseerd gebruik van selectoren in je CSS ... of het 'opschonen' hiervan dit al niet kan voorkomen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67673177
!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!
Just say hi!
  vrijdag 3 april 2009 @ 12:50:48 #64
33189 RM-rf
1/998001
pi_67673729
quote:
Op vrijdag 3 april 2009 12:34 schreef Chandler het volgende:
!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!
!important is een beetje een lelijke overrule declaratietje dat je per propertie waarde zelf kunt aangeven (stamt oorspronkleijk vanuit het idee dat stylesheets zowel vanuit de aanbiederskant geleverd kunnen worden alswel gebruikers zelf ook lokaal hun eigen stylesheets kunnen verwenden: 'important' was een poging om bepaalde waarde's te definieren als 'niet te overrrullen')

je moet het iddee per proertie-waarde paar moeten aangeven. maar als je bv de selector juist kiest hoeft dat weinig te doen...
echter, bedenk wel dat ik je aanraad hier niet te makkelijk op terug te vallen en eerder te overwegen je CSS op te ruimen, en een betere structuur aan te brengen in hoe overlappend je welke waarde toewijst:

zeker als je iets maakt dat zeer generiek en breed inzetbaar zal moeten zijn, heeft dat veel meer nut dan enkel een lokaal 'plakbandje' als oplossing ergens op te plakken.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  vrijdag 3 april 2009 @ 12:56:16 #65
230788 n8n
Pragmatisch
pi_67673905
ipv !important schrijf ik in zo'n geval meestal de selector volledig uit, elementen en namen van id's en classes hebben een 'waarde', hoe hoger de waarde, des te hoger de prioriteit voor de inhoud. html body div ul#menu li a:hover weegt zodoende bijvoorbeeld veel zwaarder dan #menu a:hover.
“Specialization is for insects”.—Robert Heinlein
pi_67674585
@RM-fr; het probleem is dus dat mijn polls in welke site dan maar ook geplaatst kunnen worden bv

via iframes, javascript, php get etc.

Vooral met de laatste heb ik dan een probleem aangezien deze dan juist die style gaat gebruiken die de website gebruikt... hier moet ik dus een workaround op vinden. en is die !important best handig
Just say hi!
pi_67675275
Hmmz, is er een alternatief voor padding?

Ik wil tekst flink wat van de kant laten pushen, omdat er een plaatje voor staat. Nu geef ik dus een flinke padding op, en staat alles scheef, dat corrigeer ik weer door de width te verkleinen. Maar in IE zorgt padding niet voor een verschuiving, en in FF wel. Dus als ik de width verander, is het in FF wel goed, maar in IE gaat ie ook daadwerkelijk op die width reageren.
pi_67676078
Overigens ziet FF een h1 wel, en IE niet. Ook handig als je iets goed wil zetten in een kolom mbv padding. Dat zal namelijk nooit kloppen, omdat h1 sowieso al voor ruimte zorgt.
pi_67677368
Maak eens een testcase Nashje en zet die online Padding werkt prima in IE namelijk, dus het ligt aan jou
pi_67677802
Menu zoals het is:




Na een padding-top: 10px krijg ik dit in FF:



En na die padding krijg ik dit in IE:



Ik probeer dat te corrigeren door de toegevoegde padding pixels, van de height af te halen. Resultaat in FF:



En in IE:




Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		.menu {
width: 1004px;
height: 39px;
float: left;
background: #ffffff;
}

.menuhome {
margin-right: 1px;
width: 200px;
height: 29px;
float: left;
background: #b8b8b8;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
padding-top: 10px;
}


Naast de menuhome zijn er dus ook nog menuzakelijk etc. Maar ik ben nu alleen menuhome aan het uittesten.
pi_67678078
Welk doctype gebruik je in je HTML? Mijn gok: geen. En dan krijg je dit

Goed doctype gebruiken, en ze doen allemaal hezelfde (padding wordt dan zoals in FF bij de height geteld, dus daar moet je mee rekenen).
pi_67679766
Roy_T

Echt, je bent een held. Niet eens dit menu, maar voor mijn submenu gebruikte ik een javascriptje, en die werkte ook niet. In de HTML-versie wel (!!), en toen ik alles ging omzetten naar php dmv includes werkte het niet meer. Doctype dus.... Ik ben blij . Nu even dat menu testen.
pi_67679842
pi_67858759
Wazijg. Ik heb al m'n a menuitems een styling gegeven, en dan neemt ie de styling over van de a die ik voor de content heb ingesteld .
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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