[CSS] voor dummies - Deel 3 | Digital Corner (DIG)

zaterdag 15 oktober 2005 @ 15:01:00 #31

samchestido

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.

zaterdag 15 oktober 2005 @ 15:14:19 #32

Berkery

Fat bastard

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.

No Dukes of Hazzard in the classroom

zaterdag 15 oktober 2005 @ 15:16:11 #33

samchestido

html: http://80.60.42.54/maria/index.htm

Geen gezeik.

zaterdag 15 oktober 2005 @ 16:13:57 #34

samchestido

please, iemand?

:(

Geen gezeik.

zaterdag 15 oktober 2005 @ 16:39:51 #35

Berkery

Fat bastard

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?

No Dukes of Hazzard in the classroom

zaterdag 15 oktober 2005 @ 17:45:55 #36

samchestido

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.

zaterdag 15 oktober 2005 @ 17:57:29 #37

SuperRembo

Sinds 1998

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.

FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:01:03 #38

Swetsenegger

Egocentrische Narcist

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?

 | FOK! Schrikkelbaasch

maandag 17 oktober 2005 @ 23:04:51 #39

SuperRembo

Sinds 1998

Bedoel je zoiets?

FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:11:21 #40

Swetsenegger

Egocentrische Narcist

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 ]

 | FOK! Schrikkelbaasch

maandag 17 oktober 2005 @ 23:29:02 #41

SuperRembo

Sinds 1998

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.

FOK!-Schrikkelbaas dinsdag 18 oktober 2005 @ 08:22:16 #42

Swetsenegger

Egocentrische Narcist

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

 | FOK! Schrikkelbaasch

FOK!-Schrikkelbaas woensdag 19 oktober 2005 @ 19:09:03 #43

Swetsenegger

Egocentrische Narcist

Helaas is dit niet de oplossing voor mijn probleem. Iemand enig idee?

 | FOK! Schrikkelbaasch

donderdag 20 oktober 2005 @ 16:13:19 #44

ikke_ook

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

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

1
2
3
4
5
6
7

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

Swetsenegger

Egocentrische Narcist

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>

 | FOK! Schrikkelbaasch

donderdag 20 oktober 2005 @ 16:27:23 #46

ikke_ook

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

donderdag 20 oktober 2005 @ 16:29:22 #47

ikke_ook

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

donderdag 27 oktober 2005 @ 14:48:18 #48

Pokkehontas

Hippe nerd

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.

donderdag 27 oktober 2005 @ 14:49:13 #49

Pokkehontas

Hippe nerd

(die laatste accolade moet uiteraard andersom, maar dat doet de truc niet)

Kortom, the usual.

donderdag 27 oktober 2005 @ 15:50:49 #50

SuperRembo

Sinds 1998

Er ontbreekt een " in <style type="text/css">.

donderdag 27 oktober 2005 @ 16:34:58 #51

Chandler

haha, die fout was wel heel erg gemakkelijk

had ik zelfs kunnen vinden

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 27 oktober 2005 @ 16:40:21 #52

Pokkehontas

Hippe nerd

Thnx. Owkee, heb ik aangepast, maar hij doet het nog niet, helaas.

Kortom, the usual.

donderdag 27 oktober 2005 @ 16:46:39 #53

Pokkehontas

Hippe nerd

quote:
Op donderdag 27 oktober 2005 16:34 schreef Chandler het volgende:
haha, die fout was wel heel erg gemakkelijk had ik zelfs kunnen vinden

Knapperd

Maar goed, met de aangebrachte verbeteringen nog nix dus. Wat nu Chandler

Kortom, the usual.

donderdag 27 oktober 2005 @ 17:09:28 #54

SuperRembo

Sinds 1998

Wat hoort er voor html bij? Wat wil je dat er gebeurt? Wat gebeurt er met jouw code?

Ik zou trouwens aanraden om ook achter de laatste property een ; te zetten (achter green en red dus).

donderdag 27 oktober 2005 @ 17:22:12 #55

Pokkehontas

Hippe nerd

HTML4.01 als ik het goed begrepen heb.

Er moeten twee blokken naast elkaar in beeld komen, in de opgegeven kleuren. Eerst had ik de regel die aangaf welke HTML erbij hoort niet in het html document opgenomen (ik deed tot nu toe alles zonder die regel, werkte prima). Toen had ik alleen het tweede blok als blok in beeld, in de juiste kleur. Het andere blok was er niet, was alleen de platte tekst, ook niet in de goede kleuren.
Nu ik de doctype regel heb toegevoegd, met de html versie, krijg ik alleen nog maar twee regels onder elkaar, de laatse regel in de in CSS opgegeven kleuren.

(; toegevoegd achter red en green)

Kortom, the usual.

donderdag 27 oktober 2005 @ 17:41:17 #56

SuperRembo

Sinds 1998

quote:
Op donderdag 27 oktober 2005 17:22 schreef Pokkehontas het volgende:
HTML4.01 als ik het goed begrepen heb.

Ik bedoelde gewoon de html code. Het zijn dus alleen 2 divjes, verder niets?

donderdag 27 oktober 2005 @ 21:35:25 #57

Pokkehontas

Hippe nerd

quote:
Op donderdag 27 oktober 2005 17:41 schreef SuperRembo het volgende:

[..]

Ik bedoelde gewoon de html code. Het zijn dus alleen 2 divjes, verder niets?

Owww....

(ik ben hier wel op mijn plek hè, qua dummie)

Ja, twee divjes, that's it. Dit is de code. Letterlijk overgetypt uit het boek:

<html>
<head>
<title>Zwevende elementen</title>
<link rel="stylesheet" href="C:\Cursus webdesign\Hoofdstuk 12\H12_voorbeeld_7.css" type="text/css">
</head>

<body>
<div class="deel1">Zwevend blok nr.1</div>
<div class="deel2">Zwevend blok nr.2</div>
</body>
</html>

Kortom, the usual.

donderdag 27 oktober 2005 @ 22:08:54 #58

SuperRembo

Sinds 1998

Er horen geen spaties tussen het getal en de eenheid.
Om het tweede blok in ook FireFox naast de eerste te krijgen moet je margin-left:75px aan het 2e blok geven.

En een windows pad (C:\Cursus webdesign\Hoofdstuk 12\H12_voorbeeld_7.css) hoort niet in een html pagina. Je moet een url opgeven of een relatief pad.
Bij jou staan denk ik de css en html in dezelfde map, dan is href="H12_voorbeeld_7.css" voldoende.

(code kan je tussen [code] tags [/code ] plaatsen)

donderdag 27 oktober 2005 @ 22:30:21 #59

Pokkehontas

Hippe nerd

Owkee, dat ga ik morgenochtend eens proberen allemaal (dat van dat pad vond ik zelf ook merkwaardig, maar zo doen ze dat dus in die cursus).

Nog een laatste domme vraag voor het slapen gaan: wat is FireFox?

Bedankt zover

Kortom, the usual.

vrijdag 28 oktober 2005 @ 00:03:43 #60

rekenwonder

Dr. Ir.

quote:
Op donderdag 27 oktober 2005 22:30 schreef Pokkehontas het volgende:
Nog een laatste domme vraag voor het slapen gaan: wat is FireFox?

Een browser zoals Internet Explorer dat ook is.

www.getfirefox.com

Tegenwoordig moet je Dr. Ir. zijn om een beetje correct Nederlands te kunnen neerpleuren.
Abusing semicolons since 1987.

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner