[CSS] voor dummies - Deel 3

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_31153161
quote:
Op maandag 3 oktober 2005 19:04 schreef The_Cyberspace het volgende:
Iemand die de oplossing weet?
Werkt een stuk beter als je het html-element een gedefinieerde hoogte van 100% geeft:

1
2
3		html {
      height: 100%; 
}


Verder ziet het er met de door jou gebruikte waarden beter uit als je Internet Explorer in compatibiliteitsmodus laat draaien en voor enkele overige browsers het volgende in je css opneemt:

1
2		* {box-sizing: border-box; -moz-box-sizing: border-box;
}


Ten slotte verdient het altijd aanbeveling om voor het body-element niet alleen een marge van 0 op te geven, maar ook een padding van 0.
pi_31314543
Ik heb een probleem met mijn website waar ik geen raad mee weet.
Het gaat om de site: www.sadar.nl

In IE doet alles het zonder problemen. Maar in FF werken de menu linkjes niet
Ik kan zelf niet vinden waar de fout zit, en ook een aantal van mijn klasgenoten weten er geen raad mee. Dus mijn hoop is nu op jullie gevestigd.
  zondag 9 oktober 2005 @ 20:27:28 #28
46794 Berkery
Fat bastard
pi_31315621
quote:
Op zondag 9 oktober 2005 19:46 schreef Sadar het volgende:
Ik heb een probleem met mijn website waar ik geen raad mee weet.
Het gaat om de site: www.sadar.nl

In IE doet alles het zonder problemen. Maar in FF werken de menu linkjes niet
Ik kan zelf niet vinden waar de fout zit, en ook een aantal van mijn klasgenoten weten er geen raad mee. Dus mijn hoop is nu op jullie gevestigd.
<div id="rechts"> staat over het menu heen, da's goed te zien als je het een witte achtergrondkleur geeft.
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
pi_31315815
Dat heb je knap gedaan

Dit soort dingen krijg je sneller als je met absolute positionering werkt, wat in dit geval nog compleet overbodig is ook.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31318606
quote:
Op maandag 3 oktober 2005 19:37 schreef AnGabhar het volgende:

[..]

Werkt een stuk beter als je het html-element een gedefinieerde hoogte van 100% geeft:
[
Verder ziet het er met de door jou gebruikte waarden beter uit als je Internet Explorer in compatibiliteitsmodus laat draaien en voor enkele overige browsers het volgende in je css opneemt:

Ten slotte verdient het altijd aanbeveling om voor het body-element niet alleen een marge van 0 op te geven, maar ook een padding van 0.
Het html-element is nu apart gedefinieerd.

Die code die je gegeven had heeft averechts effect bij mij, hij gooit alles door elkaar met die code.

En heb het body-element ook een padding van 0 mee gegeven.

In het voorbeeld heb ik wat dingen gewijzigd in de hoop dat mijn probleem iets duidelijker word. Op een resolutie van 1280x1024 zie je een rood vlak onderaan. Met een lagere resolutie verdwijnt dit rode vlak. Maar in FireFox lopen de lijnen (border) links en rechts niet netjes door tot onder aan de pagina. In Internet Explorer lijkt het goed te zijn met een lage resolutie.

Voorbeeld: Klik!

CSS: Klik!
pi_31462440
ok, ik zit met een probleem. ben bezig met een site, en ben al een endje op weg met de intropagina, kijk ik hoe hij eruit ziet in iexplore, is er een groot verschil :
in firefox ( ):


in iexplore ( ):


de 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		#main{
box-sizing: content-box;
width: 1000px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -500px;
margin-top: -300px;
font-family: Arial, sans-serif;
font-size: 13pt;
}
#intro-image{
position: absolute;
top: 50%;
left: 50%;
margin-left: -268px;
margin-top: -300px;
width: 536px;
height: 600px;
background-image: url("intro.jpg");
background-repeat: no-repeat;
background-position: center;
border: 1px solid grey;
}

#linksection a{
  display: block;
  width: 130px;
  height: 30px;
  padding-bottom: 40px;
  background-repeat: no-repeat;
}

a.b1:link{
  background-image: url(tintroductie.png);
}

a.b1:hover{
  background-image: url(tintroductieh.png);
}

a.b2:link{
  background-image: url(tportfolio.png);
}

a.b2:hover{
  background-image: url(tportfolioh.png);
}

a.b3:link{
  background-image: url(tcontact.png);
}

a.b3:hover{
  background-image: url(tcontacth.png);
}
Geen gezeik.
pi_31462707
quote:
Op zaterdag 15 oktober 2005 15:01 schreef samchestido het volgende:
ok, ik zit met een probleem. ben bezig met een site, en ben al een endje op weg met de intropagina, kijk ik hoe hij eruit ziet in iexplore, is er een groot verschil :
Heb je de pagina ergens online staan? Zonder de bijbehorende html blijft het gissen, we hebben de ingredienten wel, maar het recept niet.
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
pi_31463875
please, iemand? :(
Geen gezeik.
pi_31464471
quote:
Op zaterdag 15 oktober 2005 15:16 schreef samchestido het volgende:
html: http://80.60.42.54/maria/index.htm
Die pagina ziet er niet uit in IE en FF. Op wat voor resolutie ontwerp jij?
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
pi_31465944
1280 bij 1024, maar het is nog maar een voorbereiding... wil het ontwerp testen. maar hoe kan het dat die links linksboven komen te staan in iexplore
Geen gezeik.
pi_31466208
Probeer je pagina eerst eens valide te maken. Dat is altijd handig.

Waarom gebruik je overal position: absolute voor? Is nergens voor nodig, en maakt de css niet makkelijker.

Waarom gebruik je voor die grote afbeelding niet gewoon een <img>?

Door de manier waarop je nu verticaal centreerd, krijg je de bovenkant niet te zien als je browserwindow niet hoog genoeg is.

In FF en IE ziet het er nu trouwens ongeveer gelijk uit.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:01:03 #38
1972 Swetsenegger
Egocentrische Narcist
pi_31520380
Probleem.

http://pandora.edoorebeek.nl

Header en een footer. De footer lijnt altijd uit aan de onderkant van het canvas, mits de content hoger is, dan krijg ik uiteraard een scrollbar.
Tussen deze header en footer moet een div komen, welke relatief 100% is. Dus van onderaan de header tot op de footer doorloopt, onafhankelijk van de content.

Enig idee?
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_31520486
Bedoel je zoiets?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:11:21 #40
1972 Swetsenegger
Egocentrische Narcist
pi_31520665
quote:
Op maandag 17 oktober 2005 23:04 schreef SuperRembo het volgende:
Bedoel je zoiets?
Die werkt niet goed in IE , maar dat is relatief eenvoudig.
Maak gewoon een achtergrond image met aan de rechterkant een grijze balk, float twee divs, waarbij de linker div even breed is als de grijze balk.

Probleem is nu dat ik in de div een image aan de boven en onderzijde moet zetten. De div zelf moet dus stretchen tot op de footer. En dat doen divs (standaard) niet.

Jouw voorbeeld werkt, want ondanks dat de linker div niet streched tot de footer, merk ja dat niet omdat de container image (met de rechterbalk) wel doorloopt. Dat is bv wat ik op www.tweedehandsboek.net heb gedaan.

-edit- voorbeeldje aangepast. De div aan de linkerzijde loopt nu niet verder dan de content. Maar ik wil 'm dus zo dat de bottom tot op de footer komt (marge van 5 px).

[ Bericht 8% gewijzigd door Swetsenegger op 17-10-2005 23:16:49 ]
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_31521168
quote:
Op maandag 17 oktober 2005 23:11 schreef Swetsenegger het volgende:

[..]

Die werkt niet goed in IE , maar dat is relatief eenvoudig.
Maak gewoon een achtergrond image met aan de rechterkant een grijze balk, float twee divs, waarbij de linker div even breed is als de grijze balk.

Probleem is nu dat ik in de div een image aan de boven en onderzijde moet zetten. De div zelf moet dus stretchen tot op de footer. En dat doen divs (standaard) niet.

Jouw voorbeeld werkt, want ondanks dat de linker div niet streched tot de footer, merk ja dat niet omdat de container image (met de rechterbalk) wel doorloopt.
Het lijkt wel of je het over een hele andere pagina hebt
http://www.456bereastreet.com/lab/cssframes/ werkt prima in IE (bij mij iig, IE6). Er worden ook geen images gebruikt.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas dinsdag 18 oktober 2005 @ 08:22:16 #42
1972 Swetsenegger
Egocentrische Narcist
pi_31526274
quote:
Op maandag 17 oktober 2005 23:29 schreef SuperRembo het volgende:

[..]

Het lijkt wel of je het over een hele andere pagina hebt
http://www.456bereastreet.com/lab/cssframes/ werkt prima in IE (bij mij iig, IE6). Er worden ook geen images gebruikt.
Ik keek in IE 7 en daar werkt het niet. Dat is natuurlijk het linke met browser hacks
Je hoeft niet met een background image te werken, maar het heeft hetzelfde effect. Echter bij deze blijft de footer altijd onder aan de viewport, terwijl in mijn geval de footer onderaan de viewport staat, behalve wanneer de content hoger dan de view port wordt. Dan scrollt hij mee.

Ik zal het voorbeeld eens goed bekijken
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
  FOK!-Schrikkelbaas woensdag 19 oktober 2005 @ 19:09:03 #43
1972 Swetsenegger
Egocentrische Narcist
pi_31564109
Helaas is dit niet de oplossing voor mijn probleem. Iemand enig idee?
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_31582147
Ik heb een menu dat bestaat uit een list met daarin menuonderdelen die linken naar pagina's. Ik laat het menu uitklappen met javascript.
het probleem is dat sommige onderdelen in het menu niet linken naar een bepaalde pagina, maar er alleen zijn om het onderliggende menu te laten uitklappen. Ik wil alleen dat die er wel hetzelfde uitzien als je er met je muis overheen gaat. In de rest van het menu gebruik ik gewoon:
1
2
3
4
5
6
7		<style type="text/css">
a:hover {
   color:#FFFA00 !important;
   text-decoration:none
}
</style>
<a href="pagina3.htm">pagina3</a>

Dat werkt goed, dus ik dacht ik gebruik voor de pagina's die niet moeten linken :
1
2
3
4
5
6
7		<style type="text/css">
a:hover {
   color:#FFFA00 !important;
   text-decoration:none
}
</style>
<a>pagina3</a>

Maar dan werkt de css er dus niet meer op...
Hoe kan ik dit oplossen zodanig dat er dus ook niks gebeurd als je op dat betreffende menuonderdeel klikt (hij klapt uit als je er met je muis overheen gaat)
Vogelaars.nl
  FOK!-Schrikkelbaas donderdag 20 oktober 2005 @ 16:16:18 #45
1972 Swetsenegger
Egocentrische Narcist
pi_31582197
quote:
Op donderdag 20 oktober 2005 16:13 schreef ikke_ook het volgende:
Ik heb een menu dat bestaat uit een list met daarin menuonderdelen die linken naar pagina's. Ik laat het menu uitklappen met javascript.
het probleem is dat sommige onderdelen in het menu niet linken naar een bepaalde pagina, maar er alleen zijn om het onderliggende menu te laten uitklappen. Ik wil alleen dat die er wel hetzelfde uitzien als je er met je muis overheen gaat. In de rest van het menu gebruik ik gewoon:
[ code verwijderd ]

Dat werkt goed, dus ik dacht ik gebruik voor de pagina's die niet moeten linken :
[ code verwijderd ]

Maar dan werkt de css er dus niet meer op...
Hoe kan ik dit oplossen zodanig dat er dus ook niks gebeurd als je op dat betreffende menuonderdeel klikt (hij klapt uit als je er met je muis overheen gaat)
<a href="#">pagina3</a>
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_31582422
quote:
Op donderdag 20 oktober 2005 16:16 schreef Swetsenegger het volgende:

[..]

<a href="#">pagina3</a>
Dat werkt dus niet echt omdat als je dan op pagina.htm zit en je klikt erop, dan kom je op www.domein.nl/# terecht ipv dat je op www.domein.nl/pagina.htm blijft
Je zou dan iets van $_SERVER['REQUEST_URI']."#" kunnen gebruiken, maar dan hou je nog steeds dat de pagina ververst, en ik wil dat hij gewoon helemaal niks doen.
Vogelaars.nl
pi_31582463
quote:
Op donderdag 20 oktober 2005 16:27 schreef ikke_ook het volgende:

[..]

Dat werkt dus niet echt omdat als je dan op pagina.htm zit en je klikt erop, dan kom je op www.domein.nl/# terecht ipv dat je op www.domein.nl/pagina.htm blijft
Je zou dan iets van $_SERVER['REQUEST_URI']."#" kunnen gebruiken, maar dan hou je nog steeds dat de pagina ververst, en ik wil dat hij gewoon helemaal niks doen.
Hmm dat idee van mij met die # van jou erachter werkt toch wel, bedankt
Vogelaars.nl
pi_31725331
Ik ben met mijn cursus webdesign aangeland bij het hoofdstuk CSS. En alle opdrachten die ik doe, werken maar half. Uiteraard ging ik er eest van uit dat het aan mij lag, maar ik heb alles overnieuw gedaan, gedubbelgecheckt en ik zie écht de fout niet. Bijvoorbeeld dit stukje code, uitgetypt naar het voorbeeld in het boek:

<style type="text/css>

.deel1 {
float: left;
width: 75 px;
height: 100 px;
color: yellow;
background: green
}

.deel2 {
width: 150 px;
height: 150 px;
color: yellow;
background: red
{

</style>

Het eerste zwevende blok maakt ie niet, het tweede wel. En zo gaat het met alle opdrachten, de eerste opdrachten pakt ie niet, de latere wel.

Heeft iemand een idee waar de fout zit?
Kortom, the usual.
pi_31725348
(die laatste accolade moet uiteraard andersom, maar dat doet de truc niet)
Kortom, the usual.
pi_31727089
Er ontbreekt een " in <style type="text/css">.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deel 3
Index

» digital corner

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