[CSS] voor dummies #16

maandag 6 juni 2011 @ 15:18:55 #176

Mirel

Mirel wil een bongophone.

en een list reversen? Ik las iets over <ol reversed> maar dat werkt niet

[ Bericht 92% gewijzigd door Mirel op 06-06-2011 15:31:57 ]

When all else fails, you always have delusion.

maandag 6 juni 2011 @ 16:13:20 #177

RenRen-

Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?

Bedankt

Oh nvm, ik ga het proberen met een pixel met een lage opacity.

[ Bericht 10% gewijzigd door RenRen- op 06-06-2011 16:18:44 ]

maandag 6 juni 2011 @ 16:15:18 #178

Scorpie

Abject en infaam!

Daar staat de C in CSS ook voor he, Cascading.

Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.

maandag 6 juni 2011 @ 16:16:20 #179

Happel

Je Suis Roi

quote:
Op maandag 6 juni 2011 16:13 schreef RenRen- het volgende:
Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?

Bedankt

Los ik altijd op door de div en de inhoud los te trekken om het vervolgens over elkaar te positioneren.

Elite
Feyenoordsupporters gaan naar de hemel, als er in de hel geen plaats meer is
Tegen TTIP

maandag 6 juni 2011 @ 16:16:32 #180

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 16:13 schreef RenRen- het volgende:
Ik ben aan het werken met opacity in een div. De div is prima doorzichtig, maar de tekst ook. Lijkt me logisch, maar als ik een nieuwe div maak erin, neemt die ook nog de doorzichtigheid mee, dit neemt me niet de bedoeling. Is dit op te lossen? Of alleen door de opacity weg te halen?

Bedankt

background: rgba(0,0,0,0.5);

1e 3 nullen zijn rgbwaarde (0 - 255), laatste is opacity (0 - 1)

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 16:17:08 #181

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 15:18 schreef Mirel het volgende:
en een list reversen? Ik las iets over <ol reversed> maar dat werkt niet

snap het nu, extra element om de <article> in mijn voorbeeld heen en die float: right; geven, hoogte, line-height en vertical-align van <section> overnemen

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 16:19:48 #182

RenRen-

quote:
Op maandag 6 juni 2011 16:16 schreef n8n het volgende:

[..]

background: rgba(0,0,0,0.5);

1e 3 nullen zijn rgbwaarde (0 - 255), laatste is opacity (0 - 1)

Ik weet hoe dat zit, maar dat is niet helemaal de vraag. Ik wil de opacity opheffen in een div in de doorzichtige div zodat mijn tekst niet doorzichtig en vaag is.

quote:
Op maandag 6 juni 2011 16:16 schreef Happel het volgende:

[..]

Los ik altijd op door de div en de inhoud los te trekken om het vervolgens over elkaar te positioneren.

Oh serieus? Dat lijkt me niet helemaal handig

Of werkt dat juist altijd heel goed? Lijkt me dat je dan enorme verschillen krijgt in browsers.

maandag 6 juni 2011 @ 16:22:23 #183

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 16:19 schreef RenRen- het volgende:

[..]

Ik weet hoe dat zit, maar dat is niet helemaal de vraag. Ik wil de opacity opheffen in een div in de doorzichtige div zodat mijn tekst niet doorzichtig en vaag is.

Is exact de oplossing voor jouw probleem omdat het niet het hele element transparant maakt

quote:
[..]

Oh serieus? Dat lijkt me niet helemaal handig Of werkt dat juist altijd heel goed? Lijkt me dat je dan enorme verschillen krijgt in browsers.

Dan het element met content relatief positioneren, een transparante span oid er in en dan absoluut positioneren met width en height 100%. Het kan dus ook zonder dat extra element

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 16:23:43 #184

RenRen-

quote:
Op maandag 6 juni 2011 16:22 schreef n8n het volgende:

[..]

Is exact de oplossing voor jouw probleem omdat het niet het hele element transparant maakt

[..]

Dan het element met content relatief positioneren, een transparante span oid er in en dan absoluut positioneren met width en height 100%. Het kan dus ook zonder dat extra element

Ik begreep je verkeerd inderdaad

Wou ik net komen zeggen. Even zien of dit ook in alle browsers werkt, thanks.

Dat laatste doe ik maar niet, ik snap er niets van

maandag 6 juni 2011 @ 16:25:10 #185

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 16:23 schreef RenRen- het volgende:

[..]

Ik begreep je verkeerd inderdaad Wou ik net komen zeggen. Even zien of dit ook in alle browsers werkt, thanks.

Dat laatste doe ik maar niet, ik snap er niets van

laatste

<div>
<span></span>
</div>

div {
position: relative;
}

div span {
position: absolute;
width: 100%;
height: 100%;
}

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 16:34:19 #186

n8n

Pragmatisch

iemand wel eens position: static; gebruikt? Even uitzoeken wat dat is nog nooit mee in aanraking geweest

edit: http://css-tricks.com/what-if-there-was-no-position-static/
ah, default waarde

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 16:49:36 #187

Mirel

Mirel wil een bongophone.

quote:
Op maandag 6 juni 2011 16:17 schreef n8n het volgende:

[..]

snap het nu, extra element om de <article> in mijn voorbeeld heen en die float: right; geven, hoogte, line-height en vertical-align van <section> overnemen

Bijna gelukt. Ik heb ipv jouw articles en sections gewoon divs enzo. Wat zijn articles en sections eigenlijk?

When all else fails, you always have delusion.

maandag 6 juni 2011 @ 16:56:53 #188

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 16:49 schreef Mirel het volgende:

[..]

Bijna gelukt. Ik heb ipv jouw articles en sections gewoon divs enzo. Wat zijn articles en sections eigenlijk?

semantiek, html5
http://www.w3schools.com/html5/html5_reference.asp

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 21:51:49 #189

Mirel

Mirel wil een bongophone.

Ik ben nu thuis en heb het net even weer geprobeerd. Alles in html5. Wat ik kreeg is dat de elementen bovenaan stonden, met de lange stukken naar beneden uitstekend, en ik zag er maar 4 terwijl ik er meer had.

Ik heb het nu gewoon zo, en het werkt bijna: http://1577359.huweb.nl/ (als je nog tijd hebt, kan je het even niet in html5 uitleggen? Ik wil daar nog mee wachten

Wel tof wat je tot nu toe hebt laten zien. Inventieve wijze van floats gebruiken

, en dat white-space ken ik nog niet eens)

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
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

<ul class="postwrapper">

    <div class="ding">
        <li class="post">
        <h1>post 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh, convallis vitae sodales vitae, auctor et justo. Quisque eget est odio.
        Donec ac arcu et elit tempus rhoncus vitae eu metus. Cras metus arcu,
        pulvinar quis volutpat sed, interdum at tortor.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh, convallis vitae sodales vitae, auctor et justo.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 4</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 5</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh, convallis vitae sodales vitae, auctor et justo. Quisque eget est odio.
        Donec ac arcu et elit tempus rhoncus vitae eu metus. Cras metus arcu,
        pulvinar quis volutpat sed, interdum at tortor.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 6</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh, convallis vitae sodales vitae, auctor et justo.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 7</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus.</p>
        </li>
    </div>
    <div class="ding">
        <li class="post">
        <h1>post 8</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aliquam lacus purus, facilisis eget lacinia id, dapibus a enim.
        Sed mi nibh.</p>
        </li>
    </div>
<ul>

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

.ding {
float: right;
vertical-align: bottom;
width: 300px;
height: 400px;
}

.postwrapper {
position: absolute;
width: 100%;
height: 400px;
vertical-align: bottom;
bottom: 0px;
right: 0px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

.post {
padding: 30px;
background: white;
width: 300px;
height: 400px;
display: inline-block;
white-space: normal;
vertical-align: bottom;
}

When all else fails, you always have delusion.

maandag 6 juni 2011 @ 22:05:09 #190

KomtTijd...

Je postwrapper is te smal. Maak die zo breed als alle post-divs (plus padding, margin en border) bij elkaar.

Eigenlijk snap ik niet waarom je niet gewoon een jquery plugin ofzo gebruikt hiervoor. Horizontaal scrollende layouts zijn een ramp met CSS.

zcflevo.nl

maandag 6 juni 2011 @ 22:15:20 #191

Mirel

Mirel wil een bongophone.

Werkt allemaal niet. Ik zal eens kijken wat JQuery kan dan. edit: dit gevonden: http://css-tricks.com/how(...)ally-scrolling-site/

Maar daar alignt hij niet bottom en right, en de eerste post staat links ipv rechts, dus ik vrees dat het niet gaat werken.

Ik denk dat ik dit idee op zal moeten geven

[ Bericht 28% gewijzigd door Mirel op 06-06-2011 23:01:43 ]

When all else fails, you always have delusion.

maandag 6 juni 2011 @ 23:02:01 #192

n8n

Pragmatisch

quote:
Op maandag 6 juni 2011 22:05 schreef KomtTijd... het volgende:
Je postwrapper is te smal. Maak die zo breed als alle post-divs (plus padding, margin en border) bij elkaar.

Eigenlijk snap ik niet waarom je niet gewoon een jquery plugin ofzo gebruikt hiervoor. Horizontaal scrollende layouts zijn een ramp met CSS.

kan prima

“Specialization is for insects”.—Robert Heinlein

maandag 6 juni 2011 @ 23:16:21 #193

Mirel

Mirel wil een bongophone.

Ik heb het al opgegeven.

When all else fails, you always have delusion.

dinsdag 7 juni 2011 @ 21:17:21 #194

Nashje

Simpel vraagje:

Wil m'n container laten meeschalen, maar dat lukt me niet echt. Door hem te laten meeschalen zal ik hem, denk ik, de position: absolute moeten meegeven. Maar dan verdwijnt ie naar links.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body, html {
background: url(../images/bg.png);
margin: 0px;
padding: 0px;
text-align: center;
}

.container {
background: #ffffff;
margin: 0 auto;
width: 900px;
height: auto;
position: absolute;
}

Dit moet snel en eenvoudig op te lossen zijn lijkt me?

dinsdag 7 juni 2011 @ 21:21:26 #195

n8n

Pragmatisch