[CSS] voor dummies #16

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  maandag 6 juni 2011 @ 16:17:08 #181
230788 n8n
Pragmatisch
pi_97790002
quote:
0s.gif 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
pi_97790164
quote:
7s.gif 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:
14s.gif 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 :o 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
230788 n8n
Pragmatisch
pi_97790312
quote:
0s.gif 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 :o 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
pi_97790391
quote:
7s.gif 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 :D
  maandag 6 juni 2011 @ 16:25:10 #185
230788 n8n
Pragmatisch
pi_97790474
quote:
0s.gif 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 :D
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
230788 n8n
Pragmatisch
pi_97790924
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
87680 Mirel
Mirel wil een bongophone.
pi_97791688
quote:
7s.gif 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? :P
When all else fails, you always have delusion.
  maandag 6 juni 2011 @ 16:56:53 #188
230788 n8n
Pragmatisch
pi_97792080
quote:
0s.gif 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? :P
semantiek, html5
http://www.w3schools.com/html5/html5_reference.asp
“Specialization is for insects”.—Robert Heinlein
  maandag 6 juni 2011 @ 21:51:49 #189
87680 Mirel
Mirel wil een bongophone.
pi_97810640
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 O-) Wel tof wat je tot nu toe hebt laten zien. Inventieve wijze van floats gebruiken ^O^ , 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.
pi_97811857
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
87680 Mirel
Mirel wil een bongophone.
pi_97812814
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
230788 n8n
Pragmatisch
pi_97816682
quote:
3s.gif 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
87680 Mirel
Mirel wil een bongophone.
pi_97817776
Ik heb het al opgegeven.
When all else fails, you always have delusion.
pi_97858969
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
230788 n8n
Pragmatisch
pi_97859193
meeschalen met wat?
“Specialization is for insects”.—Robert Heinlein
pi_97861180
Met divs die in de container zitten.
  dinsdag 7 juni 2011 @ 21:55:45 #197
87680 Mirel
Mirel wil een bongophone.
pi_97861432
Geen width en position geven?
When all else fails, you always have delusion.
pi_97861497
Meeschalen hoe?

In de breedte kan niet als je hem een width geeft, in de hoogte gebeurt al standaard als je geen height geeft?
pi_97862597
In de lengte ja, en wel zo dat ie gecentreerd blijft staan.
pi_97862748
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
pi_97868684
M'n nieuwe site toont wat gebreken in IE8 en IE9 (oudere versies doen het prima), maar ik heb echt geen flauw idee waar het vandaan kan komen. Het gekke is namelijk dat het ene blok wel goed is neergezet, maar het andere niet. Dit terwijl ze zijn gegenereerd door PHP en dus precies dezelfde opmaak hebben.

Iemand enig idee?
site
stuk uit stylesheet:
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Php stuk:
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
pi_97875802
Ik zou eens beginnen met wat orde te scheppen in je chaos.
Je hebt <a> tags zonder href, <a> tags die uberhaupt helemaal leeg zijn, <a> tags genest in <a> tags, divs zonder inhoud, div's genest in <a>tags, kortom 't is gewoon een janboel. En die CSS van 90 regels moet je ook makkelijk in 20 regels kunnen samenvatten.

Zul je zien, gaat het gelijk al een stuk beter.
zcflevo.nl
pi_97876370
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.

Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.

Met overflow:auto en height:1%:


Zonder een van beiden:


Code van de div:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#content{
  width:692px;
  height:533px;
  margin-left:12px;
  float:left;
  box-shadow: 0px 0px 10px #c7c7c7;
  -moz-box-shadow: 0px 0px 10px #c7c7c7;
  -webkit-box-shadow: 0px 0px 10px #c7c7c7;
  background:rgba(255,255,255,0.85);
  margin-top:12px;
  margin-bottom:12px;
  padding-left:10px;
  padding-right:10px;
  padding-top:15px;
  overflow:auto;
  height:1%;
}

Iemand enig idee hoe dit komt?
  woensdag 8 juni 2011 @ 09:24:58 #204
230788 n8n
Pragmatisch
pi_97876412
probeer :hidden;, of haal de float weg van de content in de transparente box
“Specialization is for insects”.—Robert Heinlein
pi_97876454
quote:
0s.gif Op woensdag 8 juni 2011 09:22 schreef RenRen- het volgende:
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.

Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.

Met overflow:auto en height:1%:
[ afbeelding ]

Zonder een van beiden:
[ afbeelding ]

Code van de div:
[ code verwijderd ]

Iemand enig idee hoe dit komt?
Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem

Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
zcflevo.nl
pi_97876469
quote:
14s.gif Op woensdag 8 juni 2011 09:24 schreef n8n het volgende:
probeer :hidden;, of haal de float weg van de content in de transparente box
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan. ;( Het moet echt perse naast elkaar.
pi_97876487
quote:
0s.gif Op woensdag 8 juni 2011 09:27 schreef KomtTijd... het volgende:

[..]

Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem

Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Even zien welke ik dan clear:both moet geven... Ik denk de footer, thanks

Edit, footer heeft al clear:both... Hm. Ik ben confused :') Overflow:visible werkt ook niet, schaalt-ie ook niet van mee.
  woensdag 8 juni 2011 @ 09:29:14 #208
230788 n8n
Pragmatisch
pi_97876494
quote:
0s.gif Op woensdag 8 juni 2011 09:28 schreef RenRen- het volgende:

[..]

Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan. ;( Het moet echt perse naast elkaar.
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
“Specialization is for insects”.—Robert Heinlein
pi_97876535
quote:
7s.gif Op woensdag 8 juni 2011 09:29 schreef n8n het volgende:

[..]

is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
height auto werkte niet, 1% werkte wel, maar dus met die lelijkheid :r
Ik denk helaas dat de meeste mensen die die site gaan gebruiken IE gebruiken, vast ook oudere versies. Even zoeken wat die fix is dan :) Bedankt voor het meedenken ook!
  woensdag 8 juni 2011 @ 09:34:32 #210
230788 n8n
Pragmatisch
pi_97876630
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
“Specialization is for insects”.—Robert Heinlein
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #16
Index

» digital corner

» development

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