[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 14:48:03 #151
1972 Swetsenegger
Egocentrische Narcist
pi_64533423
quote:
Op woensdag 31 december 2008 14:44 schreef Roy_T het volgende:

[..]

Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.

Of inline images wel of niet handig zijn hangt heel erg van je doel af. Voor de gemiddelde website maakt het niets uit of is het nadeliger (wanneer je geen goede caching gebruikt). Je hebt het echt over high traffic sites wil het interessant worden.

Leesvoer: http://developer.yahoo.com/performance/
Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
 | FOK! Schrikkelbaasch
pi_64533672
quote:
Op woensdag 31 december 2008 14:48 schreef Swetsenegger het volgende:

Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.

Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt

Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
pi_64533903
quote:
Op woensdag 31 december 2008 @ 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
ik denk dat het nu júíst een issue is. Vroeger maakte je zoveel mogelijk hele kleine bestandjes zodat er zoveel mogelijk in de cache terecht kwam (websites in frames anyone?) maar tegenwoordig boeit de download tijd maar weinig meer dus kun je beter gewoon één groot bestand maken en het voor lief nemen dat niet alles door de browser gecached kan worden.
Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
pi_64534023
quote:
Op woensdag 31 december 2008 15:04 schreef RenRen- het volgende:

Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
En als iemand erop wil Googlen: dat ging over "CSS sprites"

En over caching: tenzij je goede expiry headers gebruikt heb je nog steeds voor ieder bestand een request: de browser vraagt aan de server "is dit bestand gewijzigd", krijgt "nee" terug en gebruikt dan de versie in de cache. Laat daarom de eerste keer je server al duidelijk vertellen "dit bestand is geldig tot 1 januari 2013, dus voor die tijd mag je het altijd meteen uit de cache gebruiken" (pas je iets aan, dan moet je wel de bestandsnaam veranderen dus, of bestand.ext?timestamp gebruiken, anders komt de oude versie uit de cache).
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 17:27:29 #155
1972 Swetsenegger
Egocentrische Narcist
pi_64539074
quote:
Op woensdag 31 december 2008 14:55 schreef Roy_T het volgende:

[..]

Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.

Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt

Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.

Ik vind het allemaal nogal overtrokken.
 | FOK! Schrikkelbaasch
pi_64577484
quote:
Op woensdag 31 december 2008 17:27 schreef Swetsenegger het volgende:

Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.
Alleen zijn mijn cijfers wél gebaseerd op onderzoeksresultaten.
quote:
Ik vind het allemaal nogal overtrokken.
Dat mag Voor de rest (lees: alle grote en/of bekende websites) is het inmiddels gewoon een industriestandaard.
  maandag 5 januari 2009 @ 20:30:15 #157
87680 Mirel
Mirel wil een bongophone.
pi_64702199
quote:
Op woensdag 24 december 2008 13:10 schreef mcDavid het volgende:
niet echt een CSS probleem, maar ik zou wordpress eens bekijken!
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
When all else fails, you always have delusion.
pi_64704156
quote:
Op maandag 5 januari 2009 @ 20:30 schreef Mirel het volgende:

[..]

Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
Het is de bedoeling dat je je eigen layout omzet in templates. Het kan wel helpen als je eerst een (soortgelijke) template eens goed bekijkt, zodat je een beetje een idee krijgt hoe dat werkt. Verder zijn er met google vast honderden tutorials te vinden over hoe je een wordpresstemplate maakt.
pi_64721842
Ik heb een echte leek vraag waarschijnlijk.

Ik heb een header, menu en content met normale indeling, header boven, menu en content naast elkaar met float left & right.

Nu wil ik alleen dat mijn content automatisch verlengt als er meer tekst in staat. Ik ben enkel de code er voor vergeten zo 123. Google word geblokkeerd hier vanaf het bedrijf (vraag me niet waarom) dus ik hoop dat iemand hier het antwoord weet
pi_64722141
Content geen "height" geven (dus impliciet "height: auto").
pi_64809027
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class

class:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		.but, 
.butlong { 
    display: block; 
    float: left; 
    height: 16px; 
    margin: 0px 10px 0px 0px; 
    color:#337f92; 
    background: #d2eaf0; 
    padding: 2px; 
    text-align:center; 
    text-decoration: none; 
    border: 1px solid #337f92;
}

.but { width: 100px; }
.butlong { width: 175px; }


html:
1
2		<input type="submit" name="action_send" class="butlong" value="Verstuur bericht" />
<a href="/user/mailbox/delete/<?php echo $list->id; ?>.html" class="butlong">Verwijder bericht</a>


maar ik krijg als resulaat dit


Wat doe ik fout? :D
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64809262
quote:
Op donderdag 8 januari 2009 @ 13:52 schreef Chandler het volgende:
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class

class:
[ code verwijderd ]

html:
[ code verwijderd ]

maar ik krijg als resulaat dit
[afbeelding]

Wat doe ik fout?
Line-height ook op 16px zetten.

Omdat die <a> een innerhtml heeft om het maar zo te zeggen krijgt die de minimale hoogte van de tekst die erin staat.

Maar als ik het plaatje zo bekijk wil je eerder dat de button net zo hoog wordt als de anchor. Dus de height op 22px zetten.
pi_64810462
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijk Ik wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64811291
quote:
Op donderdag 8 januari 2009 @ 14:24 schreef Chandler het volgende:
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijk Ik wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
tuurlijk is dat mogelijk, als je maar specifiek genoeg bent.

In dit geval ben je niet specifiek genoeg omdat <a> nog een line-height heeft waardoor die knop hoger wordt.
-edit-
misschien ligt het wel aan die padding. Bij die button valt er uiteraard weinig te padden.

[ Bericht 7% gewijzigd door mcDavid op 08-01-2009 14:54:27 ]
pi_64811776
idd, maar waarom valt er weinig te padden aan de button zelf? dat moet je toch ook kunnen instellen? zelfs met padding/margin 0 op de inputs kreeg ik geen lekker resultaat
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64812868
Omdat er niets in de button staat. Hij heeft wel een value, maar daar heeft het hele HTML Box Model niets mee van doen. Dus er valt niets te padden.

Bij de anchor is dat anders omdat er daadwerkelijk content tussen de open- en sluittag staat.\

anyway ik ga ff prutsen dit moet gewoon kunnen.
pi_64813053
Je kunt bij een button toch gewoon de height opgeven?

En als het er mee te maken heeft dat je content tussen de open en sluit tag moet hebben (wat bij een input niet gaat), dan kun je gewoon de <button> tag gebruiken. Heeft hetzelfde resultaat.
pi_64813364
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.

http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren

button.but {height:22px;}
a.but{height:20px;}
zoiets.
pi_64813892
Nieuwe sig.
  donderdag 8 januari 2009 @ 17:37:32 #170
134533 donroyco
dus niet Donroyco
pi_64818376
Heeft iemand een fix voor
http://plaatsmaken.donroycodesign.nl

de button/image rechtsboven blijft niet goed staan, hij moet evenwijdig aan de knop daarboven komen te staan..
Hier (1280x800) staat ie wel goed..

Wie heeft een oplossing? 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_64820668
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
  donderdag 8 januari 2009 @ 18:46:35 #172
134533 donroyco
dus niet Donroyco
pi_64820713
quote:
Op donderdag 8 januari 2009 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Thsnks, dat laatste gaf mcDavid mij mee
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_64820824
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
  donderdag 8 januari 2009 @ 19:23:04 #174
134533 donroyco
dus niet Donroyco
pi_64822109
quote:
Op donderdag 8 januari 2009 18:49 schreef veldmuis het volgende:
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
Hmm, dat kan Thanks voor het meedenken en je suggestie hielp
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_64824595
quote:
Op donderdag 8 januari 2009 @ 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
vertical-align kan volgens mij ook gebruikt worden om de positie van plaatjes op de tekstregel te bepalen. Het werkte wel iig .
pi_64834547
Vertical-align werkt ook op andere elementen (zoals afbeeldingen), maar je moet dan wel snappen dat je niet zegt "alles binnen het element met vertical-align: middle" staat in het midden, maar dat je zegt "dat element staat verticaal in het midden van het parent element.
pi_64841497
quote:
Op donderdag 8 januari 2009 15:31 schreef mcDavid het volgende:
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.

http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren

button.but {height:22px;}
a.but{height:20px;}
zoiets.
Ik heb het even bekeken maar zie nog steeds een verschil



The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 9 januari 2009 @ 10:04:41 #178
134533 donroyco
dus niet Donroyco
pi_64841625
quote:
Op vrijdag 9 januari 2009 10:00 schreef Chandler het volgende:

[..]

Ik heb het even bekeken maar zie nog steeds een verschil

[ afbeelding ]

In IE klopt het niet, in FF wel..
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_64845072
quote:
Op vrijdag 9 januari 2009 @ 10:00 schreef Chandler het volgende:

[..]

Ik heb het even bekeken maar zie nog steeds een verschil

[afbeelding]

Moet je maar niet zo'n idiote browser gebruiken
pi_64845692
Tja terwijl meer dan de helft van de wereld deze ook gebruikt
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64850766
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.

-edit-
op fok minder trouwens.
  vrijdag 9 januari 2009 @ 14:30:30 #182
141104 Patje1987
Madre me quiero un frikandel.
pi_64851396
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.

http://www.patrickvd.com/
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_64851474
quote:
Op vrijdag 9 januari 2009 14:14 schreef mcDavid het volgende:
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.

-edit-
op fok minder trouwens.
Je bedoeld in de topics waar jij in post ?
pi_64852183
quote:
Op vrijdag 9 januari 2009 @ 14:32 schreef HuHu het volgende:

[..]

Je bedoeld in de topics waar jij in post ?
Ja en aangezien ik nogal eens op F5 ram is de fx-score vast wat overrated, maar dan nog.
pi_64852701
Maar goed, een oplossing voor alle browsers is er niet?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64852925
quote:
Op vrijdag 9 januari 2009 @ 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Ik ben bang van niet.

Als je toch dezelfde class wilt gebruiken kun je gewoon in je css het onderscheid maken d.m.v.

input.but {}
a.but{}
pi_64854042
ok tnx, ik ga even verder stoeien met dit geheel!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64857626
quote:
Op vrijdag 9 januari 2009 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />

Daar kun je dan natuurlijk nog weer classes aanhangen
fokstok.nl
pi_64861232
quote:
Op vrijdag 9 januari 2009 14:30 schreef Patje1987 het volgende:
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.

http://www.patrickvd.com/
Frames?!

Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen .

Edit: Ohw, je zit in een frame ivm je domein.
  vrijdag 9 januari 2009 @ 18:49:44 #190
141104 Patje1987
Madre me quiero un frikandel.
pi_64861441
quote:
Op vrijdag 9 januari 2009 18:44 schreef veldmuis het volgende:

[..]

Frames?!

Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen .

Edit: Ohw, je zit in een frame ivm je domein.
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_64862981
quote:
Op vrijdag 9 januari 2009 @ 18:49 schreef Patje1987 het volgende:

[..]

Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest ;)
1
2
3		RewriteEngine on
RewriteCond %{HTTP_HOST} ^.*(patrickvd.com)$ [NC]
RewriteRule ^(.*)$ http://patrickvd.derium-online.com/$1 [L]

Niet een idee? Of kun je echt helemaal niets met dat andere domein?
pi_64864454
quote:
Op vrijdag 9 januari 2009 16:54 schreef Light het volgende:

[..]

Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />

Daar kun je dan natuurlijk nog weer classes aanhangen
Omdat je dan JS nodig hebt, en anders niet?
  vrijdag 9 januari 2009 @ 20:34:41 #193
87680 Mirel
Mirel wil een bongophone.
pi_64865267
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
When all else fails, you always have delusion.
pi_64879211
quote:
Op vrijdag 9 januari 2009 20:10 schreef Roy_T het volgende:

[..]

Omdat je dan JS nodig hebt, en anders niet?
Idd
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64921162
quote:
Op vrijdag 9 januari 2009 20:34 schreef Mirel het volgende:
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
Ik heb even in de CSS specs gekeken, maar zag het er niet in staan
pi_64929068
Ik heb wat hulp nodig met het inelkaar zetten van mijn site, ik heb nog niet zoveel verstand van het positioneren van Div bestanden,, dus het is weer een grote rommelzooi.

Nou had ik de vraag hoe plaats ik dit goed en onthoud ik dit voor de volgende keer

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

dat is de link waarop de site weergeven wordt
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
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		body {
background-image:url(bg.jpg);
margin-top:0;
} 

ul, li {
padding: 0px;
margin: 0px;
}

img {
border: none;
}

#container {
width:757px;
height:868px;
margin-left:auto;
margin-right:auto;
}

#header {
background-image:url(images/ani_01.jpg);
width:757px;
height:248px;
float:left;
}

ul{
list-style:none;

}

li{
display:inline;
}

#sidebalkleft{
background-image:url(images/ani_02.jpg);
width:28px;
height:575px;
float:left;
}

#menu{
width:479px;
height:41px;
float:left;
}

#menu a{
border:0;
text-decoration:none;
list-style:none;
display:inline;
}

#onderstuk{
background-image:url(images/ani_07.jpg);
width:223px;
height:41px;
float:left;
}

#content{
background-image:url(images/ani_10.jpg);
width:556px;
height:495px;
float:left;
}

#menubalk{
background-image:url(images/ani_09.jpg);
height:39px;
width:702px;'
float:right;
}

#onderbalk{
background-image:url(images/ani_12.jpg);
width:757px;
height:45px;
float:inherit;
}

#rechterbalk{
background-image:url(images/ani_08.jpg);
height:575px;
width:28px;
float:right;
}



Html
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		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animatie</title>
<link href="div.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="container">
   <div id="header">
   </div>
      <div id="sidebalkleft">
  </div>
         <div id="menu">
      <ul>
         <li><a href="index.html"> <img src="images/ani_03.jpg" width="118" height="41" /></a></li>
         <li><a href="historie.html"><img src="images/ani_04.jpg" width="120" height="41" /></a></li>
         <li><a href="studiolfc.html"><img src="images/ani_05.jpg" width="121" height="41" /></a></li>
         <li><a href="contact.html"> <img src="images/ani_06.jpg" width="120" height="41" /> </a> </li>
        </ul>

  </div>
  <div id="onderstuk"></div>      <div id="rechterbalk"></div>
      
         <div id="menubalk"></div>
         <div id="content">
         </div>
         
   
            <div id="onderbalk">
            </div>
</div>
</body>
</html>


[ Bericht 1% gewijzigd door Mailbox op 11-01-2009 21:51:26 ]
pi_64929237
Begin eens met

ul, li {
padding: 0px;
margin: 0px;
}
  zondag 11 januari 2009 @ 21:39:00 #198
134533 donroyco
dus niet Donroyco
pi_64929310
en geef je images een border="0" mee..
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_64929363
Oeh gelijk even proberen
pi_64929389
quote:
Op zondag 11 januari 2009 21:37 schreef veldmuis het volgende:
Begin eens met

ul, li {
padding: 0px;
margin: 0px;
}
het is een begin
pi_64929526
quote:
Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
Dat moet je dus in css doen, niet in html.
fokstok.nl
pi_64929535
quote:
Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
dan wel

img {
border: none;
}
pi_64929825
quote:
Op zondag 11 januari 2009 21:44 schreef veldmuis het volgende:

[..]

dan wel

img {
border: none;
}
dat geeft al enig effect
pi_64930008
Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.
pi_64930425
quote:
Op zondag 11 januari 2009 21:55 schreef veldmuis het volgende:
Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.
hmm oke, ja ik vind dit echt lastig maarja ik studeer het dus eigenlijk moet ik het begrijpen
  zondag 11 januari 2009 @ 22:08:54 #206
87680 Mirel
Mirel wil een bongophone.
pi_64930618
quote:
Op zondag 11 januari 2009 18:00 schreef Roy_T het volgende:

[..]

Ik heb even in de CSS specs gekeken, maar zag het er niet in staan
Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
When all else fails, you always have delusion.
pi_64930668
Om een voorbeeld te geven, je hebt die ul staan waar je menu in staat. Die kun je gewoon een id (of class, want waarom werk je met id's?) meegeven en positioneren.

Als het de enige ul is die in je container staat dan geef je geen class mee maar dan doe je .container ul: weer een class minder nodig.
  zondag 11 januari 2009 @ 22:12:04 #208
87680 Mirel
Mirel wil een bongophone.
pi_64930765
quote:
Op zondag 11 januari 2009 22:09 schreef veldmuis het volgende:
Om een voorbeeld te geven, je hebt die ul staan waar je menu in staat. Die kun je gewoon een id (of class, want waarom werk je met id's?) meegeven en positioneren.

Als het de enige ul is die in je container staat dan geef je geen class mee maar dan doe je .container ul: weer een class minder nodig.
Ik had begrepen dat je eerst iets een id moest geven voordat je de rest een class wilt geven? Maar dat hoeft dus niet?
When all else fails, you always have delusion.
pi_64931002
Nope.

De dingen die je een ID meegeeft in de CSS overrulen de dingen die in de class staan, daar kun je het voor gebruiken. Een !important in een class overruled echter weer het spul in een id. Inline dingen, in een style dus, overrulen alles behalve een !important, om het verhaal compleet te maken.

Ik gebruik een ID alleen als ik ergens met javascript aan de gang ga, en dat element aan wil roepen.
pi_64931755
Meer leesvoer: "CSS specificity": http://htmldog.com/guides/cssadvanced/specificity/

Er valt nog meer over te weten, en dan met name dat hoe specifieker de rule, hoe hoger de prioriteit. Als je deze code hebt:

1
2
3
4
5
6
7		div p {
   color: red;
}

p {
   color: blue;
}


Dan worden de paragrafen binnen een div rood, en niet blauw (ondanks dat deze onderaan in je CSS-bestand staat).

Als je zowel classes, elements en id's in je rule gebruikt, dan vergt dat wat rekenwerk. Uitleg hierover: zie bovenstaande link.
pi_64998239
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

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
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		/* CSS Document */
ul, li {
padding: 0;
margin: 0;
}


ul{
list-style:none;
}

li{
float:left;
}


.klier{clear:both;}


body {
background-image:url(bg.jpg);
margin-top:0;
} 


img {
border: none;
}

#container {
width:758px;
margin-left:auto;
margin-right:auto;
}

#header {
background-image:url(images/ani_01.jpg);
height:248px;
}

#midden{
width:702px;
float:left;

}

#menu li a{
background-image:url(images/ani_06.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

/* Menu li */

#menu li a.buik{
background-image:url(images/ani_07.jpg);
width:224px;
}

#menu li a.home{
background-image:url(images/ani_03.jpg);
width:118px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.historie{
background-image:url(images/ani_04.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:121px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}


#content{
background-image:url(images/ani_10.jpg);
width:556px;
height:495px;
float:left;
}

#menubalk{
background-image:url(images/ani_09.jpg);
float:left;
}

#menurechts{
background-image:url(images/ani_11.jpg);
width:146px;
height:495px;
float:left;
}


/* Extra Balken */

#sidebalkleft{
background-image:url(images/ani_02.jpg);
width:27px;
height:575px;
float:left;
}

#onderbalk{
background-image:url(images/ani_12.jpg);
height:45px;
clear:both;
}

#rechterbalk{
background-image:url(images/ani_08.jpg);
height:575px;
width:29px;
float:left;
}


HTML

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		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animatie</title>
<link href="div.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="container">

   <div id="header">
   </div>
   

      <div id="sidebalkleft">
  </div>
     <div id="midden">
      <div id="menu">
      <ul>
         <li><a href="index.html" class="home"></a></li>
         <li><a href="historie.html" class="historie"></a></li>
         <li><a href="studiolfc.html" class="studio"></a></li>
         <li><a href="contact.html" class="contact"></a></li>
         <li><a href="#" class="buik"></a></li>
      </ul>
      
     </div>
     
      <div id="menubalk"></div>
      <div id="content">
         </div>
         <div id="menurechts">
         </div>
   </div>
     <div id="rechterbalk"></div>
 

            <div id="onderbalk">
            </div>
</div>
</body>
</html>
pi_65000762
quote:
Op dinsdag 13 januari 2009 @ 17:53 schreef Mailbox het volgende:
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Gaat hier gewoon goed
Welke browser?
pi_65001936
Een hover in een apart plaatje is trouwens lelijk, je ziet een rode flits (de achtergrond) terwijl het hover plaatje aan het laden is.
Beter zet je de link en de hover beide in hetzelfde plaatje en speel je met je backgroundposition. Nog netter ook; die vier a:hover dingen vervang je door één die iets met de backgroundposition doet. Scheelt weer css.
pi_65002191
Hallo,

Momenteel ben ik begonnen met het slicen in divs/css, eerder deed ik dit altijd in tabellen. Momenteel ben ik al een klein stukje gekomen, maar ben opgelopen naar 2 problemen.

1) In Internet explorer staat de balk boven aan heel erg naar rechts en begint niet links. In firefox is dit wel het geval. Waar dit aan licht weet ik niet?

2) Ik wil dat de content background (waar het woord 'text' staat) achter het boven plaatje komt. Wel op de zelfde hoogte als nu maar gewoon erachter, nu staat het er voor. Ik heb het geprobeerd met z-index, maar het deed niet zoals ik wou. Het kan zijn dat ik het verkeerd deed

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
body {
background : url(http://www.bittybotanic.com/images/bg.gif);
margin: 0px;
font-family : Verdana,Helvetica,sans-serif;
font-size : 10px;
}
#template {
padding: 50px; 0px; 0px; 0px;
margin: 0 auto;
width: 835px;
}
#loginBalk {
margin-left: 0px;
background-image: url(top.png);
width : 100%;
border-bottom : 1px solid #000;
position : fixed;
height : 30px;
}
#bovenkant {
background: url('bovenkant.gif');
width : 835px;
height : 323px;
}
#achter {
margin-top : -6px;
background-image: url('bgs.PNG');

}
#achter #midden {
background: url('midden.gif');
width:815px;
padding: 10px;
}
#onderkant {
background: url('onderkant.gif');
width: 835px;
height: 24px;
}

</style>
</head>
<body>

<div id="loginBalk">
test
</div>

<div id="template">
<div id="bovenkant">

</div>
<div id="achter">
<div id="midden">
text
</div>
</div>
<div id="onderkant">

</div>
</div>
</body>
</html>[/html]

Voorbeeld: http://www.bittybotanic.com/red/index.html

Ik hoop dat jullie me kunnen helpen
pi_65002840
1) wellicht left:0; toevoegen?
2) hoe zie je dat voor je? moeten de divs over elkaar vallen met een opacity ofzo? Waarom nest je ze niet?
  dinsdag 13 januari 2009 @ 20:01:09 #216
230788 n8n
Pragmatisch
pi_65002899
Mailbox, ik zou de afbeeldingen van je menu samenvoegen en dan positioneren in de achtergrond met de css, dan hoef je maar 1 plaatje in te laden, en dat scheelt snelheid. Verder krijg je nu een rode 'flits' als je over het menu gaat, omdat de :hover-achtergrond geladen moet worden.

edit, is al door Veldmuis gezegd, dat krijg je als je meerdere 'nog-te-volgen-tabs' open laat en dan boodschappen gaat doen.

@ Veeltje, je vragen zijn niet heel erg duidelijk, verder heb je voor het logo in de rode header een jpeg met een kleurprofiel gebruikt. Hierdoor verschilt de achtergrond van de div met de achtergrond van de afbeelding (,of is da t de bedoeling?).

[ Bericht 14% gewijzigd door n8n op 13-01-2009 20:07:26 ]
“Specialization is for insects”.—Robert Heinlein
pi_65003528
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
pi_65003730
Waarom zit die redirect in je link?
pi_65003804
Hoe bedoel je?
pi_65004432
quote:
Op zondag 11 januari 2009 22:08 schreef Mirel het volgende:

[..]

Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
Dus is het geen css, en hoort het niet in dit topic.
fokstok.nl
  dinsdag 13 januari 2009 @ 20:40:06 #221
230788 n8n
Pragmatisch
pi_65004575
quote:
Op dinsdag 13 januari 2009 20:21 schreef Veeltje het volgende:
Hoe bedoel je?
http://www.habbers.nl/redirect.php?url=http://www.bittybotanic.com/red/index.html

Vandaar dat ik begon over je rode header Ben niet helemaal bij de les vandaag.
“Specialization is for insects”.—Robert Heinlein
pi_65004897
Oh woop, had het op een forum geplaatst eerder maar daar reageerde niemand. Dus had ik 't maar hier geplaatst en die link word daar automatisch zo neergezet. Dit is de normale link: http://www.bittybotanic.com/red/index.html
pi_65005066
quote:
Op dinsdag 13 januari 2009 @ 20:16 schreef Veeltje het volgende:
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
ah nu zie ik wat je bedoelt.

Ik denk dat je beide elementen position:relative; moet geven, en dan de onderste met top:-10 ofzo naar boven moet schuiven.
Als je ze beide position:relative gegeven hebt werkt z-index wel.
pi_65005308
Heel erg bedankt, ik heb nu alleen bovenkant die position relavtive gegeven en het werkt nu perfect
  woensdag 14 januari 2009 @ 12:42:08 #225
87680 Mirel
Mirel wil een bongophone.
pi_65025664
Hoi, ik heb 2 divs die elk een afbeelding zijn, en wil graag de ene div in het midden centeren, en de andere div ernaast die rechts uitgelijnd is. Ik heb ze geprobeerd te floaten, want dan komen ze naast elkaar maar ik kan de ene div niet in het midden centeren met de float code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14		#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
float: left;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
float: right;
}

zo is het nu dus maar het werkt niet.
When all else fails, you always have delusion.
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')