[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_64201958
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
pi_64202468
quote:
Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
hij wil waarschijnlijk sneeuwvlokjes of lampjes rond de site hebben oid?

http://www.schillmania.com/projects/snowstorm/
pi_64204967
quote:
Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
Nou misschien meer met 'opmaak' dan
  zondag 21 december 2008 @ 17:46:20 #104
134533 donroyco
dus niet Donroyco
pi_64214526
Hoe kan ik het menu fixen in Internet Explorer? Het menu van 'Tentoonstellingen' loopt daar maar tot net aan de content, dan valt ie erachter..

De site

Bij voorbaat dank!
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_64263683
Ik doe al behoorlijk lang puur ontwerp in photoshop, waarna ik die doorgeef aan een slicer/coder, maar begin dat toch wel zonde te vinden, dus vandaar dat ik nu deze tutorial volgl:
http://css-tricks.com/vid(...)age-1/#comment-43161

Tot min. 15 gaat het prima, maar op een gegeven moment laat hij even als voorbeeldje zien of z'n background image het doet. Bij mij geeft hij echter geen enkele blijk van het ook openen van de CSS.
Mijn site is wel anders opgebouwd dan die van hem en dat was ik van plan daarom een beetje op mijn eigen manier te gaan doen, maar dan zou hij op zijn minst toch gewoon mijn plaatje moeten laten zien, waar ik naar verwijs?

Heb hier een zipje voor wat meer opheldering, heb de PSD er voor de leukigheid even bijgedaan. Heb hem expres simpel gehouden, zodat het niet te ingewikkeld was voor het codeerwerk.
Link:
http://www.megaupload.com/?d=DH9MR7U4
Bij voorbaat dank
pi_64264517
quote:
Op zondag 21 december 2008 @ 17:46 schreef donroyco het volgende:
Hoe kan ik het menu fixen in Internet Explorer? Het menu van 'Tentoonstellingen' loopt daar maar tot net aan de content, dan valt ie erachter..

De site

Bij voorbaat dank!
IE is een ramp met z-index enzo.
Google eens op haslayout... en geef sowieso #header en # content beide position:relative (zonder daadwerkelijke positie) en een Z-index. #header dan de hoogste natuurlijk.
-edit-
misschien juist position:relative van content weghalen... dat zou wel eens juist kunnen zijn waar IE over struikelt in dit geval...
pi_64264785
quote:
Op maandag 22 december 2008 @ 22:47 schreef Mindstate het volgende:
Ik doe al behoorlijk lang puur ontwerp in photoshop, waarna ik die doorgeef aan een slicer/coder, maar begin dat toch wel zonde te vinden, dus vandaar dat ik nu deze tutorial volgl:
http://css-tricks.com/vid(...)age-1/#comment-43161

Tot min. 15 gaat het prima, maar op een gegeven moment laat hij even als voorbeeldje zien of z'n background image het doet. Bij mij geeft hij echter geen enkele blijk van het ook openen van de CSS.
Mijn site is wel anders opgebouwd dan die van hem en dat was ik van plan daarom een beetje op mijn eigen manier te gaan doen, maar dan zou hij op zijn minst toch gewoon mijn plaatje moeten laten zien, waar ik naar verwijs?

Heb hier een zipje voor wat meer opheldering, heb de PSD er voor de leukigheid even bijgedaan. Heb hem expres simpel gehouden, zodat het niet te ingewikkeld was voor het codeerwerk.
Link:
http://www.megaupload.com/?d=DH9MR7U4
Bij voorbaat dank
stylesheet hoort ín de head, niet net eronder.
Verder is het praktischer als je je voorbeelden ergens online zet (everyoneweb ofzo voor gratis) en als je je HTML duidelijk indent...
  maandag 22 december 2008 @ 23:09:58 #108
134533 donroyco
dus niet Donroyco
pi_64265008
quote:
Op maandag 22 december 2008 23:01 schreef mcDavid het volgende:

[..]

IE is een ramp met z-index enzo.
Google eens op haslayout... en geef sowieso #header en # content beide position:relative (zonder daadwerkelijke positie) en een Z-index. #header dan de hoogste natuurlijk.
-edit-
misschien juist position:relative van content weghalen... dat zou wel eens juist kunnen zijn waar IE over struikelt in dit geval...
Dank voor je antwoord Ik ga het eens proberen
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_64265870
quote:
Op maandag 22 december 2008 23:06 schreef mcDavid het volgende:

[..]

stylesheet hoort ín de head, niet net eronder.
Verder is het praktischer als je je voorbeelden ergens online zet (everyoneweb ofzo voor gratis) en als je je HTML duidelijk indent...
ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedankt

en met indenten bedoel je het soms gebruiken van tabjes en witregels zodat het duidelijker is om iets op te zoeken?

Ik heb het nu in de head zo staan:
1
2
3
4
5		<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>ForumPost.nl - Een kickstart voor je forum!</title>
</head>


en de style.css als:
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		@charset "utf-8";
/* CSS Document */

/*RESETS AND BASIC PAGE SETUP*/
*{margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {
   font: 62,5% Verdana, sans-serif; 
   background: url;(images/bodybg.jpg); top left repeat;
}

ul {list-style: none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a {outline: none; }
a img {border: none; }
/* END RESET */

/* TOOLBOX */
.floatleft {float: left; }
.floatright {float: right; }
.clear  {clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */
#page-wrap {
   width: 775px;
   margin: 0 auto;
}
/* END STRUCTURE */


maar wil hem nog steeds niet weergeven
pi_64272814
quote:
Op maandag 22 december 2008 23:24 schreef Mindstate het volgende:

[..]

ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedankt :D

en met indenten bedoel je het soms gebruiken van tabjes en witregels zodat het duidelijker is om iets op te zoeken?

Ik heb het nu in de head zo staan:
[ code verwijderd ]

en de style.css als:
[ code verwijderd ]

maar wil hem nog steeds niet weergeven :{
Bij background hoort na url geen ; te staan. De url die je opgeeft is normaal gesproken relatief ten opzichte van het css-bestand. Dat gaat wel goed hier, omdat ze beide in dezelfde directory staan. Het stukje "top left repeat;" is overbodig, omdat het de standaardwaarde is. Als je het wilt specificeren moet er geen puntkomma voor staan, alleen achter.

En ik zou html en body altijd samen pakken. Ook zou ik de initiele fontgrootte met een absolute waarde specificeren (dus in px, niet in % of em ofzo). Voor andere elementen kan een relatieve grootte wel.

1
2
3
4		html, body {
   font: 10px Verdana, sans-serif;
   background: url(images/bodybg.jpg);
}


Tip: Om fouten in een css-bestand op te sporen, kun je gebruik maken van een css-validator. Die hoort geen fouten te vinden (tenzij je bewust gebruik maakt van css hacks voor sommige browsers).
fokstok.nl
pi_64279926
Oh, het lag dus aan die ;, bedankt.

Ook bedankt voor die CSS Validator, kan nog goed van pas komen
pi_64284004
quote:
Op dinsdag 23 december 2008 @ 12:44 schreef Mindstate het volgende:
Oh, het lag dus aan die ;, bedankt.

Ook bedankt voor die CSS Validator, kan nog goed van pas komen
installeer sowieso even de Web Developer firefox addon, maakt het leven een stuk makkelijker!

-edit-
mcDavid hier dus
pi_64285324
quote:
Op dinsdag 23 december 2008 04:01 schreef Light het volgende:

En ik zou html en body altijd samen pakken.
Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.
quote:
Ook zou ik de initiele fontgrootte met een absolute waarde specificeren (dus in px, niet in % of em ofzo). Voor andere elementen kan een relatieve grootte wel.
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
pi_64287097
quote:
Op dinsdag 23 december 2008 @ 15:00 schreef Roy_T het volgende:

[..]

Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
Een jaar geleden was dat wel een goed punt, maar tegenwoordig heb ik zoiets van als je slecht ziend bent installeer je maar IE7
pi_64292400
Kan iemand mij uitleggen waarom
1
2
3
4		 iframe {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} 
niet werkt?

Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
pi_64292486
Hoe kun je via css ingeven dat een bepaald plaatje altijd recht onder een ander plaatje staat? Ik doe het nu via het opgeven van het aantal pixels dat alle plaatjes van de randen moeten staan, maar dat is op een gegeven moment geen doen meer. Stel ik wil plaatje B onder plaatje A hebben, hoe stel ik dit in?
pi_64292643
quote:
Op dinsdag 23 december 2008 @ 18:16 schreef Mindstate het volgende:
Hoe kun je via css ingeven dat een bepaald plaatje altijd recht onder een ander plaatje staat? Ik doe het nu via het opgeven van het aantal pixels dat alle plaatjes van de randen moeten staan, maar dat is op een gegeven moment geen doen meer. Stel ik wil plaatje B onder plaatje A hebben, hoe stel ik dit in?
Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
quote:
Op dinsdag 23 december 2008 @ 18:13 schreef hello_moto1992 het volgende:
Kan iemand mij uitleggen waarom
[ code verwijderd ]

niet werkt?

Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
pi_64292866
quote:
Op dinsdag 23 december 2008 15:00 schreef Roy_T het volgende:

[..]

Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.
Dan nog. Het gaat er om hoe groot de letters uiteindelijk worden. En of je een effect nou bereikt door 75% of door 87% op te geven, doet dan niet echt ter zake. Daarbij, als je een relatieve fontgrootte opgeeft, wat is dan je uitgangspunt? Relatief is immers altijd ten opzichte van iets anders.
quote:
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
Dan gebruik je daar maar een andere browser voor. Ik ga geen rekening houden met alle problemen van alle prehistorische browsers.
fokstok.nl
pi_64292972
quote:
Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:

[..]

Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]

Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
Ja dat weet ik Toch jammer dat het dan niet kan

[ Bericht 8% gewijzigd door hello_moto1992 op 23-12-2008 18:34:01 ]
  dinsdag 23 december 2008 @ 18:30:09 #120
134533 donroyco
dus niet Donroyco
pi_64293021
@mcDavid

"position: relative" weghalen heeft geholpen Dank!
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_64293509
quote:
Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:

[..]

Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]

Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.

[ Bericht 14% gewijzigd door Mindstate op 23-12-2008 18:57:04 ]
pi_64295092
quote:
Op dinsdag 23 december 2008 @ 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
In welke browser heb je dat getest Het ziet er in iedere browser namelijk anders uit en bij geeneen heb ik het idee dat het zo hoort...
  dinsdag 23 december 2008 @ 23:14:13 #123
159635 Spike1506
NullPointerException
pi_64306294
quote:
Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.
Sowieso moet je nooit
1
2
3
4		* { 
margin: 0; 
padding: 0; 
}

gebruiken. Beste kun je margin en padding op 0 zetten in je body { }.
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.

Mijn tip(s):
- doe alles wat je op een andere positie wilt hebben een een div en geef deze een herkanbaae naam.
- geef deze divjes een border zodat je beter kunt zien waar ze staan.
- doe alles 1 voor 1 en kijk daarna pas hoe je de elementen in deze divs gaat stylen.
Twitter | Sensiva.net Webhosting | Mijn blog.
pi_64306509
quote:
Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/
Let ook eens op > als je een <div opent. Zou zomaar kunnen helpen.
fokstok.nl
pi_64306621
quote:
Op dinsdag 23 december 2008 @ 23:14 schreef Spike1506 het volgende:

[..]

Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.
Sowieso moet je nooit * { margin: 0; padding: 0; } gebruiken. Beste kun je margin en padding op 0 zetten in je body { }.
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.

Mijn tip(s):
- doe alles wat je op een andere positie wilt hebben een een div en geef deze een herkanbaae naam.
- geef deze divjes een border zodat je beter kunt zien waar ze staan.
- doe alles 1 voor 1 en kijk daarna pas hoe je de elementen in deze divs gaat stylen.
Ben het er mee eens dat je dat 'resetten' beter achterwege kunt laten.
Je eerste tip ben ik het absolúút niet mee eens, klakkeloos alles in losse divjes gooien is onzin. Een list wordt al omvat door ul dus nergens voor nodig ook. Sterker nog ik zou die divjes om de img's ook weghalen. Of nog beter de img's weghalen en achtergrondafbeeldingen van maken.

Andere twee tips zijn wel weer hele goeie.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 10
Index

» digital corner

» development

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