[CSS] voor dummies - Deel 2

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 20 juli 2005 @ 15:52:46 #201
46794 Berkery
Fat bastard
pi_28978515
Dat komt door je display: inline vermoed ik. inline elementen kan je geen vaste breedte geven, normaal gesproken.
No Dukes of Hazzard in the classroom
pi_28978564
hmm maar als ik geen inline gebruik komen ze onder elkaar, natuurlijk zou ik dat kunnen oplossen met een float: left; hmm.... tnx voor de thoughts b!.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  woensdag 20 juli 2005 @ 15:54:33 #203
46794 Berkery
Fat bastard
pi_28978574
Misschien kan je hier wat mee: http://www.alistapart.com/articles/taminglists/
No Dukes of Hazzard in the classroom
  woensdag 20 juli 2005 @ 15:56:46 #204
46794 Berkery
Fat bastard
pi_28978642
Of dit: http://home.wanadoo.nl/b.(...)orizontaal-menu.html
No Dukes of Hazzard in the classroom
  woensdag 20 juli 2005 @ 17:50:18 #205
44679 Leshy
Held met sokken.
pi_28981925
quote:
Op woensdag 20 juli 2005 15:52 schreef Berkery het volgende:
Dat komt door je display: inline vermoed ik. inline elementen kan je geen vaste breedte geven, normaal gesproken.
Nope, daar kun je display: inline-block; voor gebruiken, maar dat werkt in MSIE en Mozilla/Firefox alleen op items die normaal gesproken al inline items zijn
pi_29001847
ik heb het dus opgelost met een float: left;

maar nu moet ik nog eens kijken hoe ik het klaar krijg met hover etc.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_29002041
<div onmouseover="this.className='divhover';" onmouseout="this.className='';">

-r-
pi_29099773
Ik ben net begonnen met het opmaken in CSS

en heb dit:

<div id="header">
bladiebla.nl
</div>
<div id="tussen">
link 1 <> link 2 <> link 3
</div>

Nu wil ik dat tussen header en tussen een wit ruimt komt (een <br> is al te groot) hoe krijg ik dit voor elkaar (zal vast een domme vraag zijn maar goed )
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
  zondag 24 juli 2005 @ 23:57:43 #209
72143 WalfredGeesink
De vrachtwagenchauffeur.
pi_29100216
div#tussen { margin-top: 5px; }
walfredgeesink.nl/fm
pi_29106865
Mensen, ik heb google nu meerdere malen geraadpleegd voor het volgende maar kon wederom helaas geen oplossing vinden.

Stel ik heb een variabel kader die varieert van (10px/10px tot 800px/800px) en wil deze gecentreerd hebben doormiddel van css (dus zowel horizontaal als verticaal).

Hoe moet ik dit oplossen met behulp van css? iemand een suggestie?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_29121881
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		 <div id="header">
   blabla.nl
  </div>
  <div id="tussen">
   <a href="./index.php">Home</a> <> <a href="./webhosting/index.php">Webhosting</a> <> link 3
   </div>

/* CSS Document */

body {
 background-color:#FFFFFF;
}

#header {
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
border-width:1;
border-color:#000000;
border-style:dotted;
}

#tussen {
width:100%;
margin-top:5px;
padding:0px 0px 0px 10px;
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border-width:1;
border-color:#000000;
border-style:solid;
}


Ik heb nu dit, ik wil dat de links van links iets meer weg staan maar nu wordt #tussen groter dan header terwijl ze beide op 75% staan. Wat doe ik fout

Is er trouwens een goede liefst Nederlandse website met tutorial hoe je een website opbouwt in css
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29122556
Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29122663
quote:
Op maandag 25 juli 2005 21:03 schreef SuperRembo het volgende:
Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.
Ik bedoel breder en width

voorbeeld:
http://www.dutchfootballmanagersite.nl/jmsystems/

css file:
http://www.dutchfootballm(...)ms/css/standaard.css

Ik wil nu toch eens CSS beter gaan leren ipv steeds met tabellen werken
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29123583
Gooi je html eens door een HTML Validator en je css door een CSS Validator.

Html en css die niet volgens de regels zijn opgesteld kunnen voor onvoorspelbare resultaten leiden. Dat maakt het zoeken naar fouten in je layout erg lastig.

Validators zijn niet heilig, maar wel een goede hulp.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29124190
Hmmz heb ze er door heen gehaald en was bij de html idd de charset vergeten en bij de css een maat vergeten op te geven bij border-width:1; maar het probleem blijft...
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29124668
Het verschil zit in de padding-left van #tussen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29124776
quote:
Op maandag 25 juli 2005 22:05 schreef SuperRembo het volgende:
Het verschil zit in de padding-left van #tussen.
Hmmz ik wil dus dat de tekst vanaf links iets naar binnen gaat (die 5px) maar dat houd in dat er rechts 5px bijkomt dus??

Sorry ben nog maar net bezig met CSS
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29125786
Ja.

Je kan het oplossen door om beide divs een div te zetten met width:75%. #header en #tussen geef je geen width.

Je kan het ook oplossen door er voor te zorgen dat er tussen de div#tussen en de links een extra container zit. Dat kan een div of een p zijn, maar ook een list (ul). Op die container kan je dan die extra paddin zetten.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29125988
Jij ruled thnx
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29207840
Nu heb ik het volgende probleem:

Ik wil een header maken, daaronder een tussenbalkje en daaronder de content en daaronder weer een footer met copyright meuk.

Nu lukt de header en het tussenbalkje maar bij de content gaat het fout, er moeten daar twee gedeeltes naast elkaar komen een met een soort van menu en de andere met de tekst enzo, nu heb ik ze via een tutorial naast elkaar gekregen (float:left;) maar vallen ze uit de box die ik eromheen gemaakt hebt terwijl dit bij de header en de tussen wel goed gaat de box daarom heen wordt gewoon wel vergroot.

Zie het voorbeeld hier
CSS file hier: hier

Edit:
De gedeelte waarin de tekst moet komen is nu ook onder de menu box komen te staan (wel er naast maar niet dezelfde hoogte )
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29209154
Je moet de floats "clearen" om ze binnen de box te houden. Daarvoor heb je een (leeg) element nodig na de floats;

1
2
3
4
5		   <div id="content">
      Lorem ipsum dolor sit amet...
   </div>
    <div class="clear"></div>
</div>


css:

1
2
3		.clear {
    clear: both;
}


Verder kan je beter de float en width weglaten voor #content.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29212998
Thnx staat nu goed, heb je toevallig een website of een boek dat je kan aanraden over het opmaken van een website met CSS (dus zonder tabellen enzo)
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29215145
De referenties
http://www.w3.org/TR/CSS21/ W3C CSS
http://www.w3.org/TR/html401/ W3C HTML
http://www.mozilla.org/docs/dom/domref/ Gecko DOM Reference
http://msdn.microsoft.com(...)ce/css_ref_entry.asp MSDN CSS Reference

http://home.parse.nl/~michiel/semantiek.html Semantiek - Waarom zou je?
http://www.w3schools.com/ heeft wel handige basic tutorials
http://www.alistapart.com/ allerlei artikelen over css
http://www.quirksmode.org/ een site met veel info over bugs en eigenaardigheden van verschillende browsers.
http://www.glish.com/css/ een aantal css layouts
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29338870
Thnx .

Ben nu bezig om m'n eigen website van tabellen over te knallen naar CSS en lukt goed. Werkt trouwens echt veel beter dan tabellen dat CSS
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29364835
Hmmz ik heb nu het volgende probleem, een groot gedeelte van de lay-out van m'n site is overgezet naar CSS. Maar nu gaat in Firefox de Footer direct tegen de content aan staan (terwijl er een margin-top van 10px; is ingesteld). Zet ik een border (niet hidden of none) om de content heen doe gaat ie er wel 10px vanaf, in IE werkt het wel goed overigens:

De CSS:
http://www.dutchfootballmanagersite.nl/temp/css.txt

En de HTML
http://www.dutchfootballmanagersite.nl/temp/html.txt
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_29374198
Je kan bijvoorbeeld de clear div een hoogte van 1px geven.

Lees trowens ook het stuk Semantiek - Waarom zou je?, een goede css layout is veel meer dan een verzameling divjes.
De <center> hoort er eigenlijk ook niet in te staan.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29412843
Ook ik zit met een probleem.
Heb een simpel voorbeeld gemaakt, de site die het probleem heeft is makkelijk aan te passen als ik de fout gevonden heb. Het gaat me nu alleen puur om de lay-out.

Hier de htm file: http://www.freriks6.demon.nl/layout/main.htm

Hier de css file: http://www.freriks6.demon.nl/layout/layout.css

Open de htm file nu eens in Internet Explorer en in FireFox.. In IE word hij weergegeven zoals het moet en FF "vergeet" de onderste balk.

Ik heb al verschillende dingen geprobeerd maar ik kan de fout echt niet vinden. Ik weet wel dat FireFox net ff iets anders omgaat met htm files dan IE

Wie ziet de fout?
pi_29416717
Je moet je floats "clearen". Zie bijv Clearing floats. Een paar post naar boven staat er ook wat over.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29422042
Prolbleem is al opgelost door ergens nog een float: left; te plaatsen... maar bedankt voor het meedenken
pi_29429253
Gmbrl, nu zit ik met een ander probleem

Heb de site even aangepast daarvoor:

Htm file

CSS file

Ik heb even als test 1 vlak helemaal vol gepropt met tekst en nu komt het. In Internet Explorer kan ik scrollen en "springt" de tekst aan de bovenkant, zijkanten en onderkant netjes in door een margin van 15px. Maar in FireFox "vergeet" hij de onderkant en kan ik ook niet scrollen. Wat ik trouwens ook raar vind is dat het voorbeeld bij een ander wel scrolt in FireFox en bij mij nie
En ook bij hem laat FireFox te tekst niet netjes "inspringen" door die margin van 15px.

Ik las op diverse sites trouwens dat FF geen kleur toepast op een scrollbar wat IE dan weer wel doet. (ik weet dat dit officieel niet als CSS word goedgekeurd)
Is dit ook te verhelpen of moet ik het in FireFox doen met die grijze saaie kleur?
pi_29430461
Dat het scroolen met 't scrollwieltje niet werkt is een (irritante) bug in Firefox.

De layout vind ik maar niks eerlijk gezegd. Het werkt klote op lagere resoluties en ziet er niet uit op hoge resoluties. Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).

Onder XP met de XP layout werken de css-kleuren op de scollbar ook niet als ik 't goed heb.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_29434770
quote:
Op donderdag 4 augustus 2005 21:31 schreef SuperRembo het volgende:
Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).
Wat is dan wel de juiste manier? Ik kan op die site niet echt een duideljik voorbeeld vinden dat de manier die ik gebruik fout zou zijn?

Of ik met verkeerd gekeken hebben...
pi_29587268
Net ff mijn css-file door de validator gesleurt.. err
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.substruction.com%2Fcss.css&warning=no&profile=css2&usermedium=all
Iemand enige hulp/tips? CSS heb ik nog niet onder de knie.
pi_29587597
Je gebruikt properties die niet bestaan. Als je een lengte of hoogte op geeft, dan hoort er een eenheid bij, dus bijv. 601px in plaats van 601. Alleen als de lengte 0 is dan mag je de eenheid weglaten.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 14 augustus 2005 @ 15:31:07 #235
120391 Brilaap
Snel verveeld
pi_29629871
*Snel tvp neerzet*
pi_29721076
http://www2.flashywebtools.nl/

Waarschijnlijk hoef ik al niet meer te vertellen Ik wil de drie divjes naast elkaar hebben (150px-450px-150px). Ik heb al wat geprobeerd met floats en clears, maar ik krijg het niet voor elkaar. Iemand een idee?
"We hebben nooit domme dingen gedaan van onze uitkering, en waren nooit te beroerd om er wat bij te verdienen" (F. Jacobse)
pi_29721514
float: left voor sidebar1 en float: right voor sidebar2 zou het toch moeten doen hoor. Mits je natuurlijk die grote margin's weghaalt. En nergens clearen.
  woensdag 17 augustus 2005 @ 21:30:00 #238
120391 Brilaap
Snel verveeld
pi_29731851
Weet iemand een goede, gratis (x)html/css editor?
  woensdag 17 augustus 2005 @ 22:41:58 #239
32768 DionysuZ
Respect my authority!
pi_29735159
notepad?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_29736149
quote:
Op woensdag 17 augustus 2005 21:30 schreef Brilaap het volgende:
Weet iemand een goede, gratis (x)html/css editor?
TopStyle, de lite versie is gratis.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 17 augustus 2005 @ 23:06:46 #241
120391 Brilaap
Snel verveeld
pi_29736203
quote:
Op woensdag 17 augustus 2005 22:41 schreef DionysuZ het volgende:
notepad?
Voorspelbare kutnewbie .
  woensdag 17 augustus 2005 @ 23:07:35 #242
120391 Brilaap
Snel verveeld
pi_29736225
quote:
Op woensdag 17 augustus 2005 23:05 schreef SuperRembo het volgende:

[..]

TopStyle, de lite versie is gratis.
Ik zal hem gaan proberen. Dank .
  donderdag 18 augustus 2005 @ 00:46:15 #243
32768 DionysuZ
Respect my authority!
pi_29739916
quote:
Op woensdag 17 augustus 2005 23:06 schreef Brilaap het volgende:

[..]

Voorspelbare kutnewbie .
que? newbie?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  donderdag 18 augustus 2005 @ 10:44:12 #244
120391 Brilaap
Snel verveeld
pi_29746794
Topstyle werkt handig. Thnx voor de top .
  maandag 22 augustus 2005 @ 14:12:27 #245
120391 Brilaap
Snel verveeld
pi_29864782
Even het volgende, ik wil een background-image hebben. Het is een klein .gifje, etc we kennen het vast allemaal maar. Nu ben ik bezig met die stylesheet en ik was even benieuwd hoe die url er uit moet zien? Ik heb in mijn puplic_html een map genaamd image. Bestaandsnaam van .gifje is page-bg.gif. Hier mijn stylesheet:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: image/page-bg.gif;
}
h1 {
font-size: 1.2em;
}
h2{
font-size: 1.1em;
}
p{
font-size: .8em
}


Check in body de bacground-image tag. Dit werkt dus niet. Iemand een idee? Alvast bedankt! Als ik het antwoord weer kan ik weer verder met mijn tutorial .
  maandag 22 augustus 2005 @ 14:17:28 #246
44679 Leshy
Held met sokken.
pi_29864872
1background-image: url('image/page-bg.gif');

  maandag 22 augustus 2005 @ 14:34:30 #247
120391 Brilaap
Snel verveeld
pi_29865126
quote:
Op maandag 22 augustus 2005 14:17 schreef Leshy het volgende:

[ code verwijderd ]

Ik heb nu:

1background-image: url(http://fatguyslim.nl/image/page-bg.gif);


Dat was hem! Even wat google en zo en ik kan weer verder . Dank je wel Leshy voor je post .
  dinsdag 23 augustus 2005 @ 12:52:16 #248
120391 Brilaap
Snel verveeld
pi_29884203
Ik loop weer ergens tegenaan. Maar ja alles wat je moet leren komt niet zo maar vanzelf. Hier de 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55		/*This stylesheet is only for CSS the tutorial*/

body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: url(http://fatguyslim.nl/image/page-bg.gif);
   margin: 0;
}
h1 {
   font-size: 1.2em;
   text-align: right;
   font-style: italic;
   letter-spacing: 5px;
}
h2 {
   font-size: 1.1em;
   text-decoration: underline;
}
p {
   font-size: .8em;
   text-align: justify;
   line-height: 1.7em;
}
p.footer {
   font-size: .5em;
   text-align: center;
}
a:link {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:visited {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:hover {
   background-color: #aaddee;
}
a:active {
   background-color: #3cc7f0;
}
#header {
   background-color: #ffffff;
   border-bottom: 1px #000000 solid;
}
#content {
}
#navbar {
}
#main-text {
}


Het gaat om regel 46 tm 48. Als ik regel 48 er niet neerschrijf is er niks aan de hand. Ik heb dan een header, background wit. Zodra regel 48 er komt te staan is er geen witte background meer en ik zie nergens een zwarte border-botttom. Hoe kan dit? Wat doe ik pcies fout? Als jullie meer info nodig hebben hoor ik het graag . Alvast bedankt voor de hulp ennn goed topic dit .

[ Bericht 0% gewijzigd door Brilaap op 23-08-2005 12:59:01 (Regel 47 gefixt.) ]
pi_29884249
Er mist een puntkomma aan het eind van regel 47.
fokstok.nl
  dinsdag 23 augustus 2005 @ 12:54:47 #250
120391 Brilaap
Snel verveeld
pi_29884273
Neee dat was het dus wel he?! Fuck ik ben er voor mezelf nog wel scherp op!!! Ff proberen...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 2
Index

» digital corner

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