[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  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!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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 .
pi_67860979
Hmm oke. Maar snap even niet hoe je de a's dan niet-conflicterend kan maken.
pi_67861932
Laat de relevante CSS eens zien
pi_67864680
Haha, ik heb het gefixed. Vraag me niet hoe, maar het werkt. En geeft geen fouten.
pi_68266008
edit; is inmiddels al gelukt..

[ Bericht 83% gewijzigd door Nashje op 22-04-2009 12:24:01 ]
  vrijdag 24 april 2009 @ 16:59:47 #80
198417 Lastpost
Rotterdammert!
pi_68342130
Hier ook even een vraagje op css-noob gebied.

Ik was heerlijk aan het kloten met wat divs om de layout te krijgen die ik graag wilde en ik ben een eind gekomen qua indeling, enkel wil het rechtse 'tekst' divje (geen breedte opgegeven) binnen m'n hoofd-div niet náast m'n linker div-je blijven staan die wel een vaste breedte heeft.

Dus qua indeling is het zo:

div pagina (100% breedte)
div zijmenu (links gefloat, vaste breedte)
div blok (tekstmenu, geen vaste breedte, moet gewoon de overgebleven ruimte invullen aan de rechterzijde)

Iemand enig idee hoe je dit voor elkaar krijgt, nu pakt ie dus gewoon automatisch (rechtermenu blok) de 100% breedte omdat er niets is opgegeven en zodoende gooit ie 'm onder het zijmenu op de volledige breedte van de div pagina.
Procenten aangeven zorgt er wel voor dat ie daar past, enkel veranderd dan de afstand bij verschillende resoluties en dat wil ik dus niet.
https://topbabe.nl
pi_68342667
De makkelijkste manier is om het menu te floaten en het content blok een linker-margin mee te geven die een waarde heeft die gelijk is aan (of iets breder is dan) de breedte van het menu.
  vrijdag 24 april 2009 @ 20:49:37 #82
39952 Hukkie
Wanna bang heads with me
pi_68348910
Ik ben een absolute noob op css gebied en daarom loop ik tegen een probleempje aan. Ik ben bezig om een nieuwe site te bouwen en daarvoor wil ik css gebruiken, ben me dus aan het inlezen en aan het oefenen met css. Maar mijn probleem is dat ik een interne stylesheet wil omzetten naar een externe. Dit omdat ik achteraf nog wat pagina's wil toevoegen aan mn site en dat niet per pagina wil doen.

Het gaat om Deze.

Kan het uiteindelijk ook wel zelf uitvissen, maar dat duurt momenteel te lang want ik wil graag nu verder met mn site, en op WW3Schools ea wordt ik niet veel wijzer.

Is er iemand die een snelle link heeft om dit te doen?
Mijn dank is groot.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
  vrijdag 24 april 2009 @ 21:03:24 #83
198417 Lastpost
Rotterdammert!
pi_68349464
Je hebt geen header bestand of iets in die trend?
Gewoon je gehele style opslaan in een bestandje (willekeurigenaam.css) en deze includen in je header en/of het head-gedeelte van de pagina's zelf indien je geen header hebt.

<link rel="stylesheet" type="text/css" href="linknaarstylesheet/stylesheet.css" />
Bovenstaand toevoegen in het head-gedeelte en dan kun je de gekozen elementen uit je stylesheet ook gewoon aanroepen zonder probleem.
Als dat niet is wat je bedoelde hoor ik het natuurlijk graag.
Hiermee kun je de boel natuurlijk ook extern benaderen/gebruiken, gewoon met het complete http://www.linkje.nl/stylesheet.css erin.
https://topbabe.nl
  vrijdag 24 april 2009 @ 21:15:02 #84
39952 Hukkie
Wanna bang heads with me
pi_68349915
Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.
There are no Saviours, there are no Kings, the Power lies in your head
DeviantArt
pi_68356489
quote:
Op vrijdag 24 april 2009 21:15 schreef Hukkie het volgende:
Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.
Dus? Je kunt je stylesheet later gewoon aanpassen, waarna de aanpassingen op iedere pagina zichtbaar zijn (waar je de stylesheet include).
pi_68374077
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
  zaterdag 25 april 2009 @ 20:07:59 #87
198417 Lastpost
Rotterdammert!
pi_68374225
quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
http://www.w3.org/Style/Examples/007/fonts
Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.
https://topbabe.nl
pi_68375234
quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.
http://en.wikipedia.org/wiki/Web-safe_fonts
pi_68375261
quote:
Op zaterdag 25 april 2009 20:07 schreef Lastpost het volgende:

Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.
Tip van de dag: doe het client side met typeface.js of cufón.
pi_68456798
Vraag:

Ik heb een list-item menu. Werkt in Mozilla perfec.t Ziet er strak uit, maar in IE duwt ie het eerste lijstje naar het 2e menu kopje. Hoe kan ik dit fixen?

1
2
3
4
5
6
7
8
9
10		<ul id="nav">
<li>Menu

<ul>
<li>Item1</li>
<li>Item2</li>
</ul>

</li>
</ul>


CSS:
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		#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: auto;
}

#nav ul {
position: absolute;
width: 175px;
left: -1000px;
background: #fff;
margin-top: 27px;
opacity: 0.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80; 

font: 12px Verdana, Geneva, sans-serif;
color: #006699;
line-height: 17px;
padding: 10px;
}

#nav ul a, a:active, a:visited {
color: #006699;
text-decoration: none;
}

#nav ul a:hover {
text-decoration: underline;
}

#nav li:hover ul {
left: auto;
} 
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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