[CSS] voor dummies #16

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
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
pi_97876676
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		#left{
width:215px;
height:533px;
-moz-box-shadow: 0px 0px 10px #c7c7c7;
-webkit-box-shadow: 0px 0px 10px #c7c7c7;
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;
display:inline-block;

}

#content{
width:692px;
height:533px;
margin-left:12px;
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;
display:inline-block;
height:auto;

}

Dit zou dan toch de nieuwe code moeten zijn? Zo ja, dit werkt niet :o
pi_97876692
quote:
7s.gif Op woensdag 8 juni 2011 09:34 schreef n8n het volgende:
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
Welke div staat dan niet in het midden? Wacht, ik geef jullie een url.
pi_97876718
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.

-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
zcflevo.nl
pi_97876903
quote:
0s.gif Op woensdag 8 juni 2011 09:38 schreef KomtTijd... het volgende:
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.

-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Ik heb dus 2 blokken in het grote blok, en die moeten gefloat zijn, net als het grote blok, dat moet ook naast elkaar komen te staan. Hoe maakt me niet uit, als het maar naast elkaar blijft :D Tabellen zijn geen optie vrees ik.
  woensdag 8 juni 2011 @ 09:50:29 #215
230788 n8n
Pragmatisch
pi_97876990
display: inline-block;

enkel ie6 werkt heeft dan een inline nodig meen ik

snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
“Specialization is for insects”.—Robert Heinlein
  woensdag 8 juni 2011 @ 09:55:29 #216
230788 n8n
Pragmatisch
pi_97877091
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
“Specialization is for insects”.—Robert Heinlein
pi_97877152
quote:
7s.gif Op woensdag 8 juni 2011 09:55 schreef n8n het volgende:
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast. :')
  woensdag 8 juni 2011 @ 10:00:37 #218
230788 n8n
Pragmatisch
pi_97877204
quote:
0s.gif Op woensdag 8 juni 2011 09:58 schreef RenRen- het volgende:

[..]

Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast. :')
dan helpt dit ook niet, gooi ff die inline-block er tegenaan ipv de float, dan heb je een block element naast elkaar. Voor IE moet dan maar een hack komen :')

http://blog.mozilla.com/w(...)rowser-inline-block/
“Specialization is for insects”.—Robert Heinlein
pi_97877852
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.

Mooie website wel trouwens!
zcflevo.nl
pi_97878026
quote:
0s.gif Op woensdag 8 juni 2011 10:27 schreef KomtTijd... het volgende:
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.

Mooie website wel trouwens!
Ohja, dan is het opgelost! Dankjeweeel O+ Maar. Wtf, er is maar 1 css, en #1 en #2 verwijzen naar hetzelfde bestand. Arghhhh, straks even een topic over openen elders :')

thanks :D Ik ben er wel blij mee.
pi_97882607
quote:
0s.gif Op dinsdag 7 juni 2011 22:14 schreef Tegan het volgende:
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
Nee :'). Altijd gecentreerd, en de height moet meeschalen met de contentdiv die erin staat, en op elke pagina een andere grootte height heeft.
  woensdag 8 juni 2011 @ 12:45:18 #222
230788 n8n
Pragmatisch
pi_97882755
width: 900px;
margin: 0 auto;
“Specialization is for insects”.—Robert Heinlein
pi_97888429
Ja dat dacht ik dus ook. Zo heb ik het ook ingesteld (met een height met vaste grootte), maar als ik die height eruit gooi dan verdwijnt heel m'n container.

Ik centreer mijn container altijd op deze manier:
1
2
3
4
5
6
7
8
9
10
11		body, html {
margin: 0px;
padding: 0px;
text-align: center;
}

.container {
margin: 0 auto;
width: xxpx;
height: xxpx;
}

Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
pi_97889136
Als je container alleen floats bevat is het logisch dat ie verdwijnt. Absoluut positioneren is nergens voor nodig, je moet gebruik maken van een clearfix, bijvoorbeeld:

1
2
3
4
5
6
7
8		.group:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}

Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
Bleuh.
pi_97889786
Oke, dat klinkt logisch. Ik gebruik inderdaad alleen floats.

Waar zou ik die clearfix precies moeten toevoegen?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies #16
Index

» digital corner

» development

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