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

zaterdag 11 juni 2005 @ 22:16:00 #151

SuperRembo

Sinds 1998

quote:
Op zaterdag 11 juni 2005 13:17 schreef Leshy het volgende:
[...] * html werken, wat incorrecte CSS is omdat je hiermee zegt: "alles binnen het element html, wat een kind is van welk ander element dan ook", wat per definitie fout is omdat html het root element is, daar zit niets meer boven.[...]

* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Hier vond ik een mooi overzicht van alle css hacks.

zaterdag 11 juni 2005 @ 22:19:45 #152

Leshy

Held met sokken.

quote:
Op zaterdag 11 juni 2005 22:16 schreef SuperRembo het volgende:
* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Syntactisch is de CSS mogelijk correct, maar aangezien de html-tag per definitie nooit een parent element kan hebben, is het gebruik ervan wel degelijk fout

zaterdag 11 juni 2005 @ 22:40:44 #153

SuperRembo

Sinds 1998

Het is echt correcte css. Het enige wat fout is, is dat IE wel elementen denkt te vinden die er aan voldoen.

quote:
In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.

bron (de ontdekker van deze bug)

dinsdag 14 juni 2005 @ 13:43:05 #154

DutchBlood

quote:
Op vrijdag 10 juni 2005 20:50 schreef DutchBlood het volgende:
Ik ben ook weer aan het cssen.
Het gaat om deze site: http://matthijs.info/rmrt/

Ik heb 2 div's naast elkaar. #vakjes en #content, ik krijg alleen de grijze lijn in IE niet weg.

Padding: 0xp;
Opgeven heeft geen nut.

Iemand enig idee hoe ik dit oplos, behalve nog een andere div er achter te maken met dezelfde achtergrond?

Anyone?

dinsdag 14 juni 2005 @ 17:01:44 #155

Leshy

Held met sokken.

quote:
Op zaterdag 11 juni 2005 22:40 schreef SuperRembo het volgende:
Het is echt correcte css.

Zoals ik al zei, syntactisch is het inderdaad correct

donderdag 16 juni 2005 @ 19:54:01 #156

markiemark

FR 1908

hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 16 juni 2005 @ 20:03:49 #157

SuperRembo

Sinds 1998

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Ik denk dat je IE-filters bedoeld. Ik heb nooit zoiets gezien dat cross-browser werkt.

vrijdag 17 juni 2005 @ 01:07:22 #158

curry684

Windowshippie

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Antialiasing zit niet in CSS. Shadows zitten in CSS3 geloof ik, en werkt dus nergens. Je kunt met CSS2 of 2.1 selectors overigens shadows goed faken, maar die kent IE weer niet. Shadows zijn sowieso lilluk overigens

Omines.

vrijdag 17 juni 2005 @ 01:08:40 #159

curry684

Windowshippie

Zie overigens A List Apart voor alle bekende methodes om drop shadows te maken.

Omines.

vrijdag 17 juni 2005 @ 12:17:03 #160

wonko

Fap

Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.

vrijdag 17 juni 2005 @ 18:46:48 #161

SqueaK

"Pis nooit tegen de wind

quote:
Op vrijdag 17 juni 2005 12:17 schreef wonko het volgende:
Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

ik zelf vind dit wel een fijne site: http://www.bitstorm.org/edwin/cursus/css.html

vrijdag 17 juni 2005 @ 18:48:39 #162

SqueaK

"Pis nooit tegen de wind

ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:

1	background: #0A7CB4 url(images/image.jpg) repeat-x fixed right;

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

vrijdag 17 juni 2005 @ 19:43:52 #163

SuperRembo

Sinds 1998

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:
[ code verwijderd ]

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

In IE werkt het niet perfect, want IE kent geen background-position: fixed

Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

zaterdag 18 juni 2005 @ 06:24:31 #164

SqueaK

"Pis nooit tegen de wind

quote:
Op vrijdag 17 juni 2005 19:43 schreef SuperRembo het volgende:

[..]

In IE werkt het niet perfect, want IE kent geen background-position: fixed
Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

klopt idd...

nu het volgende ... :

ik heb zo 8 pagina's waar ik dit wel hebben, maar dan 8 keer met een verschillende image...

kan ik nu het beste 8 verschillende stylesheets maken waarin ik alleen steeds de naam van de image heb veranderd, of kan ik beter in 1 stylesheet 8 id's aanmaken ?

zaterdag 18 juni 2005 @ 10:13:08 #165

SuperRembo

Sinds 1998

8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.

1
2
3
4
5
6
7
8
9
10
11

#title {
    background-color: #ccf;
    background-repeat: repeat-x;
    background-position: right;
}
#introPage #title {
    background-image: url(img/intro.jpg);
}
#someOtherPage #title {
    background-image: url(img/otherimage.jpg);
}

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

zaterdag 18 juni 2005 @ 12:02:12 #166

SqueaK

"Pis nooit tegen de wind

quote:
Op zaterdag 18 juni 2005 10:13 schreef SuperRembo het volgende:
8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.
[ code verwijderd ]

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

zondag 19 juni 2005 @ 22:19:58 #167

curry684

Windowshippie

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

Jij hebt het dus niet gesnapt.

HTML met CSS is een manier om semantisch correct gebouwde sites mee te stylen waardoor semantiek en content enerzijds en presentatie en layout anderzijds strak gescheiden blijven. Enkel <div> gebruiken is dus gewoon pointless, en dan heb je het niet gesnapt.

KLIK VOOR VERPLICHT LEESVOER.

Omines.

zondag 19 juni 2005 @ 23:04:37 #168

SuperRembo

Sinds 1998

quote:
Op zaterdag 18 juni 2005 12:02 schreef SqueaK het volgende:

[..]

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

maandag 20 juni 2005 @ 13:26:32 #169

SqueaK

"Pis nooit tegen de wind

quote:
Op zondag 19 juni 2005 23:04 schreef SuperRembo het volgende:

[..]

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

ik heb dit als 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
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

/********************************************* Basis */
body {
   margin-top: 10px;
   background-image: url(images/achtergrond_algemeen.jpg);
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   line-height: 16px;
   text-align: center;
}

h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   font-weight: bold;
}

a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:none;
   color: #EE9700;
}

a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:underline;
   color: #EE9700;
}

/********************************************* Content */
#container {
   width: 700px;
   text-align: left;
   margin: auto auto 30px auto;
   border: 0px;
   padding: 0px;
}

#kop {
   margin-left: auto;
   position: absolute;
   width: 700px;
   height: 80px;
   background-color: red;
}

#left_blank
{
   margin-left: 0px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#left_border
{
   margin-left: 10px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_left.jpg);
}

#middle
{
   margin-left: 38px;
   margin-top: 80px;
   position: absolute;
   width: 624px;
   background: #0A7CB4 no-repeat right;
}

.overpartybike #middle {
    background-image: url(images/image_overpartybike.jpg);
    height: 100%;
}

.prijzen #middle {
    background-image: url(images/image_prijzen.jpg);
    height: 100%;
}

#right_border
{
   margin-left: 662px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_right.jpg);
}

#right_blank
{
   margin-left: 690px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#onder {
   background: url(images/onder.jpg);
   margin-left: 10px;
   margin-top: 480px;
   width:680px;
   height: 22px;
   position: absolute;
}

en dan is dit het resultaat

maandag 20 juni 2005 @ 15:37:40 #170

curry684

Windowshippie

quote:
Op maandag 20 juni 2005 13:26 schreef SqueaK het volgende:
en dan is dit het resultaat

Dude, die <map> moet gewoon een <ul> van <li> elements zijn die je styled in de CSS zodat ze er als een horizontaal grafisch menu uitzien. Je bent nu namelijk alsnog grafische meuk in je HTML aan het zetten, en dan kun je net zo goed geen CSS gebruiken.

Ik zie ook aan je divs nu al dat je table-based gaat layouten maar dan met andere tags....

Omines.

maandag 20 juni 2005 @ 23:57:35 #171

markiemark

FR 1908

ok ik heb twee problemen met mn tabel...

1. centreren.. ik kan mn tabel centreren (met <table align="center">), maar op het moment dat de pagina langer wordt dan in beeld past, komt er een scrollbalk waardoor de pagina een stukje naar links wordt geschoven... hoe voorkom ik dit???

2. max hoogte bepalen... heb mijn site gemaakt op basis van tabellen. nu is de frontpage niet zo heel groot, dus is niet zo groot verticaal gezien. als ik een subpagina oproep, wordt de pagina langer, en wordt dus langer dan het scherm aan kan zonder scrollbalken.. hoe kan ik de site verticaal maximaliseren, maar wel zo dat de site zich aanpast als de site langer is dan de verticale lengte??

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

dinsdag 21 juni 2005 @ 23:07:27 #172

WalfredGeesink

De vrachtwagenchauffeur.

dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:

1
2
3
4
5

<body>
<div>
<p>blabla</p>
</div>
</body>

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

walfredgeesink.nl/fm

dinsdag 21 juni 2005 @ 23:29:15 #173

bartjeuh

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...

1
2
3
4
5
6
7
8
9
10
11

#3 {
   margin-left: 4px;
   margin-top: 0px;
   margin-right: 4px;
   width: 250px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
}

<div id="3">content</div>

Ik dacht dus aan dat maar werkt niet

[ Bericht 31% gewijzigd door bartjeuh op 21-06-2005 23:44:58 ]

woensdag 22 juni 2005 @ 09:07:05 #174

DutchBlood

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Niet dmv (alleen) css.

De enige manier is wellicht de tekst in een achtergrondplaatje stoppen en dat dan via css setten.

woensdag 22 juni 2005 @ 09:08:26 #175

DutchBlood

quote:
Op dinsdag 21 juni 2005 23:07 schreef WalfredGeesink het volgende:
dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:
[ code verwijderd ]

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

Geef de div vertical-align: middle; mee.
http://www.w3schools.com/css/pr_pos_vertical-align.asp

woensdag 22 juni 2005 @ 17:42:08 #177

curry684

Windowshippie

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

Omines.

woensdag 22 juni 2005 @ 17:55:00 #178

theDax

Breek los en leef

ik wil graag een EMBED tag van tevoren aangeven in CSS. Maar embed heeft geen ID's.. hoe kan ik dat doen ?
Ik wil namelijk een paar transparant DIV blokken hebben, met in elk een filmpje.

Daxydelict

woensdag 22 juni 2005 @ 18:02:23 #179

theDax

Breek los en leef

ik heb het al :|

Daxydelict

donderdag 23 juni 2005 @ 10:55:33 #180

bartjeuh

quote:
Op woensdag 22 juni 2005 17:42 schreef curry684 het volgende:

[..]

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

Het probleem is dat ik daar helemaal niks van ken, en een tutorial die net uitlegt wat ik nodig heb vind ik niet

maandag 27 juni 2005 @ 12:50:29 #181

KlappernootatWork

Tot mijn strot in het genot..

mag ik hier even voor de leken een scriptlose oplossing voor transparante png's deponeren?

Maak je .png in fotosjop en importeer die in flash (als je die hebt)
ga in flash naar de publish settings en verander die in windowless transparant.
sla je bestand op als flash image.
ga naar dreamweaver (als je deze ook hebt)
importeer dit flash bestand in dreamweaver.
ga in het properties menu naar de geavanceerde opties en voeg dit toe:
wmode
en in het veld er naast:
transparency

nu kun je in de preview mode zien dat je plaatje goed weergegeven word..

succes!

[ Bericht 2% gewijzigd door KlappernootatWork op 27-06-2005 13:01:35 ]

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 13:33:49 #182

sop

ahum

Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

maandag 27 juni 2005 @ 13:36:06 #183

DionysuZ

Respect my authority!

De enige die problemen heeft met alpha blend bij png is toch IE?

□ 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

maandag 27 juni 2005 @ 14:04:06 #184

Leshy

Held met sokken.

quote:
Op maandag 27 juni 2005 13:36 schreef DionysuZ het volgende:
De enige die problemen heeft met alpha blend bij png is toch IE?

Yup.

maandag 27 juni 2005 @ 14:29:39 #185

KlappernootatWork

Tot mijn strot in het genot..

quote:
Op maandag 27 juni 2005 13:33 schreef sop het volgende:
Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

je bedoeld een kleurenschaduw of een doorlatend stuk glas? ook hier lukt het bij

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:30:51 #186

KlappernootatWork

Tot mijn strot in het genot..

quote:
Op maandag 27 juni 2005 14:04 schreef Leshy het volgende:

[..]

Yup.

IE is altijd al zijn tijd vooruit geweest...

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:50:46 #187

DionysuZ

Respect my authority!

ik heb het opgelost als volgt (CSS). Dit is de code waar het om draait:

1 2	<div id="chapter_background"> </div>

met in mijn css file:

1
2
3
4
5
6
7
8

#chapter_background {
  background: transparent url(../px/alpha.png) 0% 0% repeat;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 494px;
  height: 447px;
}

vervolgens heb ik in de head van mijn pagina nog het volgende neergepleurd:

1
2
3
4
5
6
7
8

□ 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

maandag 27 juni 2005 @ 17:36:02 #188

DionysuZ

Respect my authority!

is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :S

□ 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

maandag 27 juni 2005 @ 17:42:54 #189

sop

ahum

quote:
Op maandag 27 juni 2005 17:36 schreef DionysuZ het volgende:
is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :S

Dat was toch een FF bug?

maandag 27 juni 2005 @ 17:50:22 #190

DionysuZ

Respect my authority!

jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

□ 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

maandag 27 juni 2005 @ 20:11:31 #191

AnGabhar

quote:
Op maandag 27 juni 2005 17:50 schreef DionysuZ het volgende:
jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

maandag 27 juni 2005 @ 21:27:42 #192

sop

ahum

quote:
Op maandag 27 juni 2005 20:11 schreef AnGabhar het volgende:

[..]

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

maandag 27 juni 2005 @ 23:02:23 #193

AnGabhar

quote:
Op maandag 27 juni 2005 21:27 schreef sop het volgende:
Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

De css-specificatie meldt "no scrolling user interface should be provided to view the content outside the clipping region". Strict genomen hangt het van je definitie van 'user interface' af of er naast schuifbalken nog andere oplossingen mogelijk zijn, maar naar mijn mening behoort iedere mogelijkheid tot interactie met het programma - muis- en toetsenbordbediening, menu's en contextmenu's, weergave van opties op het scherm - tot de gebruikersinterface. Ik zie hier dus geen oplossing voor.

Iets anders dan schuifbalken om inhoud te verschuiven moet je trouwens niet eens willen. Het is uitermate on-standaard en leidt tot verwarring.

donderdag 30 juni 2005 @ 14:46:13 #194

DionysuZ

Respect my authority!

ik heb het gedeeltelijk opgelost. Met de onmousewheel event geplakt aan wat javascript. Het is Internet Explorer specifiek, dus de scrollwheel gebruiken in andere browsers lukt nog niet, daar moeten ze maar de andere scrollmogelijkheid gebruiken

. Een beetje oplossing is beter dan geen oplossing.

□ 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 7 juli 2005 @ 13:26:29 #195

Leonoor

Unter 32-16-8...

Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

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

body
{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   margin: 16px 0px 16px 0px;
   text-align: center;
   background-image: url(images/achtergrond2.jpg);
}
div#main
{
   width: 700px;
   background-color=#FFFFFF;
   align : center;
   height : 100%;
}

div#body
{
        width: 100%;
   background-image: url(images/body.jpg);
        background-repeat: repeat-y;
        text-align: center;
   padding-top: 10px;
   min-height : 100%;
}

Iemand enig idee?

Nulla verba sed acta

donderdag 7 juli 2005 @ 21:39:57 #196

SHeqel

quote:
Op donderdag 7 juli 2005 13:26 schreef Leonoor het volgende:
Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

CSS:
[ code verwijderd ]

Iemand enig idee?

probeer iig

html, body {
height: 100%;
}

Minitokyo

vrijdag 15 juli 2005 @ 21:55:02 #197

Lkw

²³³³²³²³²³²³²³²³²²³²²

Ik heb een div #container gemaakt, die ongeacht de resolutie van een bezoeker in het midden van de pagina staat. Daarnaast een stuk of 6 andere div's die binnen deze 'container' vallen. Die verhuizen dus ook braaf mee en blijven in positie als de bezoeker z'n resolutie aanpast.

Tot zover alles mooi en aardig. Maar nu het probleem:

Ik krijg dit alleen voor elkaar als die andere div's een relative position hebben. Maar.... dan willen ze niet overlappen. En dat wil ik wel!

Weet iemand in CSS een oplossing voor de gebruikte constructie waarbij dus alles goed positioneerd blijft ongeacht de resolutie, maar waarbij toch overlap mogelijk tussen de verschillende div's???

Dank alvast!

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 22:08:07 #198

Lkw

²³³³²³²³²³²³²³²³²²³²²

Ik had me gek gegoogled naar de oplossing, en net nu ik bovenstaand bericht had ingetypt, dook op een ander forum het antwoord op

-> de 'container' krijgt als position de waarde 'relative' en de andere div's 'absolute'. Dit 'absolute' geldt dan niet tov het browser-window, maar ten opzichte van de 'container'.

En ja, ik had verzuimd om de container sowieso een position-waarde mee te geven

Opgelost dus

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 23:45:48 #199

Lkw

²³³³²³²³²³²³²³²³²²³²²

Voor degenen die met hetzelfde worstelen als ik, dit werkt prima in zowel Opera, FF als IE (centreert alleen horizontaal):

#container
{
top: 0;
position: absolute;
width: 773px;
margin-left: -386px;
left: 50%;
}

Andere 'inpandige' elementen krijgen dan overigens ook position 'absolute'.

PS Sorry voor deze 3 posts achter elkaar, maar ik had er even genoeg van en was erg toe aan hulp

[ Bericht 67% gewijzigd door Lkw op 16-07-2005 02:20:39 ]

Stop the world, I want to get out.

woensdag 20 juli 2005 @ 15:50:29 #200

Chandler

Omdat ik het topic niet kon vinden via google en fok.

weet iemand wat hier fout gaat!

Ik maak buttons voor bovenin (zie plaatje) alleen deze hebben een vaste breedte ennuh dat komt niet door in de layout? why?

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
141
142
143
144
145
146
147
148
149
150
151
152
153

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body
{
  margin: 0;
  background-position: 0% 0%;
  scrollbar-face-color: white;
  background-attachment: fixed;
  scrollbar-highlight-color: white;
  scrollbar-shadow-color: #cccccc;
  scrollbar-arrow-color: #99cc99;
  scrollbar-track-color: white;
  scrollbar-darkshadow-color: white;
  scrollbar-base-color: #cccccc;
  scrollbar-3d-light-color: white;
  font-family: verdana;
  font-size: 8pt;

}

#center
{
  position: absolute;
  top: 5px; /* for IE-mac */
  left: 0;
}

/* Hide from IE-mac */
#center
{
  top: 50%;
  width: 100%;
  margin-top: -200px;
  text-align: center;
  min-width: 800px;
}
/* End hide from IE-mac */

#main
{
  width: 800px;
  height: 400px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid black;
}

#top
{
  width: 100%;
  height: 50px;
}

#middle
{
  height: 350px;
  text-align: left;
  margin: 5px;
}

#middlecontainer
{
  height: 340px;
  width: 100%;
}

#left
{
  float: left;
  height: 100%;
  width: 383px;
  padding-left: 10px;
  overflow: auto;
  border: 1px solid #cccccc;
}

#right
{
  float: right;
  margin-left: 5px;
  height: 340px;
  width: 390px;
}

#righttop
{
  height: 95%;
}

#rightbottom
{
  height: 5%;
  text-align: left;
}

.button
{
  z-index: 9;
  width: 100px;
  margin: 5px;
  height: 25px;
  padding: 5px;
  color: green;
  background-color: A0C6F0;
  text-align: center;
  border: 1px solid red;
  underline: none;
  display: inline;
}
</style>
</head>

<body>
  <div id="center">
    <div id="main">
      <div id="top">
        <div class="button">1test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test1</div>
      </div>
      <div id="middle">
        <div id="middlecontainer">
          <div id="left"
><br /><br /><br /><strong>Left</strong><br /><br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br /></div>
            <div id="right">
               <div id="righttop">Top</div>
               <div id="rightbottom">Bottom</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Meer foutjes gezien?! vertel ze graag!

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

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner