[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_65025975
ehm, float laat een DIV niet in het midden staan.... het zet een BLOCK-element enkel in de 'text-flow' links of rechts uitgelijnd (dat de rest van de test er 'rondloopt')


wat je wil bereiken is eventueel wel te doen door een element absoluut te positioneren (in het midden) waardoor hij verder geen invloed heeft op andere elementen in de pagina, en het andere relative positioning te geven en een 'left: n px;' waarbij n de afstand is die hij naar rechts moet bewegen

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		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>test</title>
   
   <style type="text/css">
BODY {
   text-align: center;
}
#logo {
   position: absolute;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid green;
}

#ster {
   position: relative;
   left: 225px;
   width: 150px;
   height: 150px;
   border: 1px solid red;
}
   </style>
</head>

<body>

<div id="logo"></div>
<div id="ster"></div>


</body>
</html>
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_65035556
Hallo,

Wanneer ik een menu in een absoluut geplaatste div zet verschijnt de menu beschrijving door de afbeelding heen.

Is er een manier om de tekst te verbergen zodat deze niet door de afbeeldingen heen komt?

1
2
3
4
5
6		<ul id="navigation">
                                     <li><a href="/" id="home" class="active">home</a></li>
                                                              etc.


</ul>


navigation komt terug in style.css met

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		#navigation{
   background: url(images/bg-navigation.gif) no-repeat right top;
   list-style: none;
   overflow: hidden;
   height: 70px;
   font-family: 'Lucida Grande', Arial, sans-serif;
   font-size: 12px;


}
#navigation li{
   float: left;
}
#navigation a{
   display: block;
   text-decoration: none;
   border-top: none;
   line-height: 400px;
   overflow: hidden;
}
#navigation a#home{
   background: url(../images/nav-home-off.png) no-repeat;
   width: 117px;
}
#navigation a#home:hover,#navigation a#home.active{
   background: url(../images/nav-home-on.png) no-repeat;
   



Je kan natuurlijk denken: plaats het buiten de absolute div maar dan krijg ik hem niet op de goede plek...

Iemand een tip die ik kan proberen??

Bedankt!
pi_65036017
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
pi_65036320
quote:
Op woensdag 14 januari 2009 16:50 schreef mcDavid het volgende:
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
pi_65036384
bedankt!
  zondag 18 januari 2009 @ 23:40:05 #231
87680 Mirel
Mirel wil een bongophone.
pi_65192960
Hey boys. Ik had een best irritant probleem met links. Ik had ze in de .css opgemaakt dat ze wit waren. Later kreeg ik daar problemen mee want een andere set met links wilde ik niet wit hebben. Ik heb ze geprobeerd apart te definieren maar het is me niet gelukt. Uiteindelijk heb ik bij de links die ik níet wit wilde hebben maar uit eindelijk de achtergrond kleur veranderd zodat je ze alsnog kon zien.
Maar nu zit met joomla bezig, en daar komt ook weer zo'n link terug, en m'n achtergrond is wit dus die link die gemaakt is met joomla is nu ook wit en nou moet ik toch weer terug naar dat css bestand.

index.php (1 set links, de agenda, is nu nog over omdat de andere, het menu, over is genomen door joomla, maar die verandert wel telkens mee als ik de agenda links wil veranderen)
1
2
3
4
5
6
7
8		                  <ul id=agendalijst>
                      <li class="agendalinks"><a href="#">optreden1</a></li>
                      <li class="agendalinks"><a href="#">optreden2</a></li>
                      <li class="agendalinks"><a href="#">optreden3</a></li>
                      <li class="agendalinks"><a href="#">optreden4</a></li>
                      <li class="agendalinks"><a href="#">optreden5</a></li>
                      <li class="agendalinks"><a href="#">optreden6</a></li>
                     <li class="agendalinks"><a href="#">optreden7</a></li>


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
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
154
155
156
157
158
159		html {

}

body {
background: #dcc57f url(images/header.jpg) repeat-x;
font-size: 11px;
font-family: verdana, calibri, tahoma;
text-align: center;
color: #444444;
}

h2 {
font-size: 11px;
font-family: verdana, calibri, tahoma;
color: #444444;
margin: 0;
padding-left: 2px;
padding-top: 25px;
text-align: left;
font-weight: bold;
}

h3 {
font-size: 24px;
font-family: verdana, calibri, tahoma;
color: #413387;
margin: 0;
padding: 2px;
text-align: left;
font-weight: normal;
}

h4 {
background: url(images/agendabalk.png) no-repeat;
font-size: 11px;
font-family: verdana, calibri, tahoma;
line-height: 18px;
padding-left: 18px;
color: white;
margin: 0;
text-align: left;
font-weight: bold;
}

#menu {
background: url(images/menubalk.jpg);
text-align: left;
width: 1000px;
height: 22px;
line-height: 20px;
font-family: century gothic;
font-size: 18px;
color: white;
}

#container {
text-align: left;
width: 1000px;
margin: 0 auto;
}

#inhoud {
padding-left: 10px;
padding-right: 10px;
background: white repeat-y;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
}

#inhoud div {
overflow: hidden;
}

#linker {
float:left;
width: 74%;
margin-right: 10px;
margin-top: 10px;
margin-left: 0px;
}

#rechter {
float: right;
width: 24%;
margin-right: 0px;
margin-top: 10px;
}

#kop1 {
margin-bottom: 10px;
background: white;
}

#kop2 {
margin-bottom: 10px;
background: white;
}

#agenda {
width: 184px;
height: 400px;
border: 1px solid #4263ba;
color: black;
background: #66c7d9;
margin-bottom: 10px;
}

li{
display:inline;
padding-left:15px;
padding-right:15px;
}

#nav {
margin-bottom: 1px;
}

#agendalijst {
font-family: calibri;
font-size: 13px;
padding-left: 2px;
}

a{
text-decoration: none;
color: white;
}

a:hover{
text-decoration: underline;
}

#footer {
background: url(images/footerbalk.jpg) repeat-x;
color: #eaeaea;
font-size: 11px;
font-family: verdana, tahoma;
text-align: right;
height: 16px;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
border-bottom: 1px solid #444444;
}

#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
position: absolute;
margin-left: 950px;
}


Nu wil ik de links van de agenda wit laten, maar van de div "linker" wil ik de links gewoon blauw of donkerblauw hebben. Hoe kan ik ze los van elkaar definieren in de css want iets overridet blijkbaar alles. Ik heb geprobeerd 1 a href linkje een id te geven van 'agenda' en dan in de css 'a agenda{ color bla} te doen maar dat werkte niet.
Ik merkte ook dat de kleur van links alleen te definiëren valt in de css als ze in zo'n a { }ding staan en niet in een #naam div { }
Maar ik kom er niet uit.

Waar het eigenlijk op neer komt is dit: Ik wil dat het menu en de agenda gewoon wit blijven, máár dat de link die door joomla gemaakt wordt, wél een aparte definitie heeft zodat ik die los van de andere 2 kan verandern.
Maar ik weet dus niet of ik zo'n <jdoc:include type="module" name="latestnews" /> wel apart kan bewerken.
Als dat niet op díe manier kan, dan is het wel mogelijk dat ik de globale links dan bijv. op rood laat zodat dat joomlageval ook rood wordt en dus te zien is, en die andere 2 (menu en agenda) los definieër.

En anders, weten jullie een betere laatste nieuws module want dit standaard ding van Joomla laat alleen linkje van de titel van het artikel zien en dat is eigenlijk vrij weinig, wil liever dat het gehele bericht te zien is.
When all else fails, you always have delusion.
  zondag 18 januari 2009 @ 23:51:16 #232
230788 n8n
Pragmatisch
pi_65193329
a {
color: blue;
}

#menu a, #agendalijst a {
color: white;
}

Dit zou moeten werken, anders moet je even met voorbeelden komen. De <li>'s in ul#agendalijst hoef je ook geen class te geven, die bereik je al met '#agendalijst li { }'.
“Specialization is for insects”.—Robert Heinlein
  zondag 18 januari 2009 @ 23:58:12 #233
87680 Mirel
Mirel wil een bongophone.
pi_65193578
Ha yes dat werkte, dank je wel. Ik wist dus niet dat je #menu en #agenda kon doen omdat het links waren, en tot nu toe zag ik dat die iedere keer geen # hadden. Dank je
When all else fails, you always have delusion.
pi_65218174
quote:
Op woensdag 14 januari 2009 16:57 schreef Roy_T het volgende:

[..]

Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
  maandag 19 januari 2009 @ 19:13:17 #235
230788 n8n
Pragmatisch
pi_65218658
text-indent vereist geen span
“Specialization is for insects”.—Robert Heinlein
pi_65219184
Ow excuse me, een achtergrondafbeelding. Ik heb niks gezegd.
pi_65219215
quote:
Op maandag 19 januari 2009 18:59 schreef veldmuis het volgende:

Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
Google weet ik niet zeker, maar er zijn wel alternatieve user agents die een element met "display: none" volledig negeren. En een extra element gebruiken is gewoon ranzig
pi_65219264
Van Google weet ik behoorlijk zeker dat er niet naar CSS gekeken wordt. Een extra element, zover had ik niet gekeken, en dat is idd ranzig en nutteloos. Ben het dus volkomen met je eens wat dat betreft. Ik las slecht.
  dinsdag 20 januari 2009 @ 22:22:27 #239
87680 Mirel
Mirel wil een bongophone.
pi_65264265
Ik zie dat er geen standaard Joomla topic is, en misschien heeft mijn probleem met css te maken.
Ik heb een nieuwspagina op een site gemaakt, gewoon artikelen die onder elkaar staan. Wanneer ik een foto of youtube filmpje in een artikel zet, dan gaat bij het plaatsen van het 2e artikel dáárna, opeens de tekst verschuiven. Bij het plaatsen van een nieuwe artikel na eentje met een foto of youtube, dan gaat het nog goed. Pas bij het artikel dáárna gaat het opeens fucken.


M'n CSS bestand staat op deze pagina een paar reacties terug nog, div #linker.

En ik heb geen URL, zit op localhost te testen.
When all else fails, you always have delusion.
pi_65264321
url?
  dinsdag 20 januari 2009 @ 22:25:45 #241
87680 Mirel
Mirel wil een bongophone.
pi_65264419
editje, heb ik niet.
When all else fails, you always have delusion.
pi_65265432
Ja, dan is het lastig. Installeer de IE devtoolbar of firebug en ga proberen.
  dinsdag 20 januari 2009 @ 22:47:02 #243
87680 Mirel
Mirel wil een bongophone.
pi_65265599
Wat wil je dan precies zien op de site wat ik je niet kan beschrijven?
When all else fails, you always have delusion.
  dinsdag 20 januari 2009 @ 23:01:36 #244
87680 Mirel
Mirel wil een bongophone.
pi_65266345
Oh het ligt geeneens aan de youtube player of aan foto's. Een willekeurig berichtje gaat gewoon heel leuk naar rechts.
When all else fails, you always have delusion.
pi_65268547
Wat is dan de bedoeling als je drie nieuwsberichten hebt?
fokstok.nl
pi_65268881
Beetje lastig analyseren zonder enige code he Educated guess: floats.
pi_65271319
Ik heb een vraagje en ik weet niet zeker of dit oplosbaar is met CSS..

Ik heb in photoshop een layout gemaakt, die gesliced en in dreamweaver van de hele layout een div gemaakt en de gebieden waar content in komt ook een div gemaakt.. (dus div in div) Nu heb ik een probleempje met div in de div. Zodra ik er content (tekst) aan toevoeg, wordt de div iets groter in FireFox, in IE is dat niet.. Nu had ik dus de div grootte aangepast (kleiner maken) en padding toegevoegd en dat werkt in Firefox, want de padding duwt de div terug naar zijn originele grootte..

Maar.. In IE wordt de div dan kleiner (zoals ingesteld) maar daar duwt de padding de div niet terug naar originele grootte..

Hoe o Hoe kan ik zorgen dat de div dezelfde grootte houdt als ik tekst in de div zet?

1
2
3
4
5
6
7		main_index_layout #Table_01 tr td #main_content {
   height: 290px;
   width: 471px;
   background-color: #99cc66;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   padding: 5px;
}


Dat is de css van de div waar die tekst in moet... Ik ben trouwens echt een noob dus simpele uitleg gelieve..
pi_65272362
wc-eend, welk doctype gebruik je? Als je er geen gebruikt, voeg die dan eerst eens toe. Klinkt als verschillende box models namelijk
pi_65273320
uhhhhhh even google opstarten
pi_65273459
quote:
Op woensdag 21 januari 2009 09:51 schreef wc-eend het volgende:
uhhhhhh even google opstarten
Gewoon in de bron van je paginacode kijken (dus in de browser kiezen voor iets als bron weergeven). Als er een doctype is, staat het op de eerste regel. En als je wilt weten hoe zoiets eruit hoort te zien kun je ook de broncode van deze pagina bekijken.
fokstok.nl
pi_65273564
Een gedeelte uit de code van index.html

1
2
3
4
5
6
7
8
9		<html><!-- InstanceBegin template="/Templates/index_layout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>index_layout</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("menu/Menu.css");


Eem code gedeelte van template waar index.html van gemaakt is

1
2
3
4
5
6
7
8
9		<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>index_layout</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("../menu/Menu.css");


Ik kan niet echt vinden zoals http://www.w3schools.com/tags/tag_DOCTYPE.asp daar staat :)
pi_65274010
Het ziet er uit als HTML 4.01 strict, dus ik denk dat je dat doctype moet pakken. (of anders de transitional).

Gewoon kopiëren en helemeaal bovenaan invoegen (op de eerste regel, nog voor <html>.)
pi_65274824
Dat werkt thanks an bunch
pi_65280237
Wat is het toch lekker simpel soms
  zondag 25 januari 2009 @ 23:55:03 #255
87680 Mirel
Mirel wil een bongophone.
pi_65405087
Hey ik heb in Joomla een 2e menu aangemaakt en heb in de index en de css het uitgewerkt, maar de menu items zijn niet te zien. Als ik even wat tekst type binnen de div dan zie je die wel verschijnen maar de menu items niet. Ik weet zeker dat ik alle instellingen in de backend van joomla goed heb gedaan, maar toch.

In Joomla heb ik het nu usermenu genoemd, en heb in de index.php dit dus staan:
1
2
3		<div id="extramenu">
<jdoc:include type="module" name="usermenu" />
</div>


En in de css dit, maar ik weet niet of dat écht wat uitmaakt.
1
2
3
4
5
6
7
8
9
10
11		#extramenu {
background: white;
width: 120px;
height: 300px;
font-family: verdana, calibri;
font-size: 11px;
color: black;
margin-left: 1000px;
margin-top: 100px;
position: absolute;
}


Het is dan meer een joomla probleem maar hier op fok krijg ik altijd betere en snellere reacties dan op joomla sites.

(www.mirelmasic.nl/joomla)
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 00:04:58 #256
87680 Mirel
Mirel wil een bongophone.
pi_65405437
Goh, je moet het in de code wél dezelfde naam geven, ofzo. Jezus wat is joomla soms raar.
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 00:05:02 #257
134533 donroyco
dus niet Donroyco
pi_65405439
quote:
Op zondag 25 januari 2009 23:55 schreef Mirel het volgende:
Hey ik heb in Joomla een 2e menu aangemaakt en heb in de index en de css het uitgewerkt, maar de menu items zijn niet te zien. Als ik even wat tekst type binnen de div dan zie je die wel verschijnen maar de menu items niet. Ik weet zeker dat ik alle instellingen in de backend van joomla goed heb gedaan, maar toch.

In Joomla heb ik het nu usermenu genoemd, en heb in de index.php dit dus staan:
[ code verwijderd ]

En in de css dit, maar ik weet niet of dat écht wat uitmaakt.
[ code verwijderd ]

Het is dan meer een joomla probleem maar hier op fok krijg ik altijd betere en snellere reacties dan op joomla sites.

(www.mirelmasic.nl/joomla)
Het menu komt bij mij rechts buiten de pagina te staan.. FF 3.0.5
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  maandag 26 januari 2009 @ 07:27:16 #258
87680 Mirel
Mirel wil een bongophone.
pi_65409562
Ja dat is dat gewone menu, dat kan ik wel maken. Het gaat me erom dat hij niet dat gewone menu daar neerzet maar een andere. Zo heb ik heb op dutchjoomla beschreven: http://forum.dutchjoomla.org/showthread.php?p=274610#post274610



2 menu's, plaats er 1 ergens en die komt daar, het andere menu plaats ik ergens en die doet niks. -__-
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 07:30:28 #259
87680 Mirel
Mirel wil een bongophone.
pi_65409573
Misschien is die manier fout maar goed. Ik heb 2 menus, je kan ze zelf definieren maar als je na het aanmaken in de opties kijkt hebben ze dezelfde gedefinieerde naam
When all else fails, you always have delusion.
pi_65411358
Ik zit met een CSS vraag.



Ik wil de plaatjes graag ook centeren verticaal, maar hoe krijg ik dat voor elkaar?

Huidige code
1
2
3
4
5
6
7
8		<div class="img"><a href="/8548.html"><img src="/view.php?t=1&id=8548" alt=" afbeelding 8548 in categorie Dieren"  height="100" /></a></div>
<div class="img"><a href="/8549.html"><img src="/view.php?t=1&id=8549" alt=" afbeelding 8549 in categorie Dieren"  height="98" /></a></div>
<div class="img"><a href="/8550.html"><img src="/view.php?t=1&id=8550" alt=" afbeelding 8550 in categorie Dieren"  height="98" /></a></div>
<div class="img"><a href="/8551.html"><img src="/view.php?t=1&id=8551" alt=" afbeelding 8551 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8552.html"><img src="/view.php?t=1&id=8552" alt=" afbeelding 8552 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8553.html"><img src="/view.php?t=1&id=8553" alt=" afbeelding 8553 in categorie Dieren"  height="100" /></a></div>
<div class="img"><a href="/8554.html"><img src="/view.php?t=1&id=8554" alt=" afbeelding 8554 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8555.html"><img src="/view.php?t=1&id=8555" alt=" afbeelding 8555 in categorie Dieren"  height="96" /></a></div>


class IMG is

1
2
3
4
5
6
7
8
9		.img {
    width: 180px; 
    margin: 5px; 
    height: 175px; 
    float: left; 
    display: block; 
    text-align: center;
    border: 3px solid #676767;
}


Weet iemand hoe ik dit kan oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65411412
1
2		padding-top: 50 px;
height: 125px;


Volgens mij kun je niet "echt" verticaal centreren, dat werkt nooit lekker. Het is mij in ieder geval nog nooit automatisch gelukt, doe het altijd middels de padding.
pi_65412096
Zou idd op die manier kunnen werken als alle plaatjes even groot zouden zijn maar dat is helaas het geval niet
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65412176
Of ik moet gaan werken met tabellen maar dat vind ik weer vies
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 10:38:46 #264
26400 wijsneus
Radicaal Democraat
pi_65412397
Als die plaatjes altijd dezelfde maat hebben is dat natuurlijk ook helemaal niet nodig.
Siamo Tutti Antifascisti!
pi_65412496
Dat is dus niet het geval, 90% van alle plaatjes hebben afwijkende maten!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 10:49:51 #266
26400 wijsneus
Radicaal Democraat
pi_65412723
Zoals het nu met 10.000 divjes doet is ook niet _echt_ lekker. Het is een lijstje van afbeeldingen toch? Lijstjes hebben we <ul> voor. Niet dat dat je probleem op lost, maar die "tabellen zijn evil dus overal een divje voor" mentaliteit moeten we ook vanaf.

Valt me trouwens zowieso vaak op, dat mensen best wel goed zijn in css, maar eigenlijk nog veel over HTML moeten leren.

nofi... trouwens...
Siamo Tutti Antifascisti!
  maandag 26 januari 2009 @ 10:53:12 #267
26400 wijsneus
Radicaal Democraat
pi_65412827
Als ik mijn designer-petje ook nog even mag opzetten...

Ik denk dat je een rustiger beeld krijgt als je alle plaatjes dezelfde hoogte geeft. Dus - geef ze maar een height en laat de browser de width maar oplossen. Dat lost meteen ook je verticaal centreren probleem op.
Siamo Tutti Antifascisti!
  maandag 26 januari 2009 @ 11:20:39 #268
230788 n8n
Pragmatisch
pi_65413586
Heb je invloed op de manier waarop de gallery opgebouwd wordt? Anders zou je het zo kunnen proberen. Niet helemaal zoals gewenst maar het geeft wat je wilt. En voor screenreaders staat er gewoon de link.

[ Bericht 90% gewijzigd door n8n op 26-01-2009 12:02:34 ]
“Specialization is for insects”.—Robert Heinlein
pi_65417854
quote:
Op maandag 26 januari 2009 @ 10:30 schreef Chandler het volgende:
Of ik moet gaan werken met tabellen maar dat vind ik weer vies
Er is niets vies aan tabellen.

Je hele site positioneren dmv tabellen en genestte tabellen in tabellen is inderdaad smerig, maar als je een tabel met foto's wilt weergeven mag je daar best de <table> tag voor gebruiken.
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 14:01:06 #270
1972 Swetsenegger
Egocentrische Narcist
pi_65418542
quote:
Op maandag 26 januari 2009 09:54 schreef Chandler het volgende:
Ik zit met een CSS vraag.

[ afbeelding ]

Ik wil de plaatjes graag ook centeren verticaal, maar hoe krijg ik dat voor elkaar?

Huidige code
[ code verwijderd ]

class IMG is
[ code verwijderd ]

Weet iemand hoe ik dit kan oplossen?
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
 | FOK! Schrikkelbaasch
  maandag 26 januari 2009 @ 15:41:15 #271
26400 wijsneus
Radicaal Democraat
pi_65422002
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
You, sir, rock.
Siamo Tutti Antifascisti!
pi_65425357
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
Helaas heb het geprobeerd maar wil niet werken

Maar voor dit geval is het gebruik van tabellen volgens jullie de enige simpele en juiste oplossing?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65432306
quote:
Op maandag 26 januari 2009 17:02 schreef Chandler het volgende:

Maar voor dit geval is het gebruik van tabellen volgens jullie de enige simpele en juiste oplossing?
Nee, want het is geen tabulaire data maar een opsomming.
pi_65433002
Wat moet ik dan gebruiken volgens jullie? toch gewoon mijn divjes?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 20:44:13 #275
230788 n8n
Pragmatisch
pi_65433043
<ul>
<li>
</ul>
“Specialization is for insects”.—Robert Heinlein
pi_65433878
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
IE7: Werkt.
IE8: Werkt niet.
FX: Werkt niet.
pi_65433924
quote:
Op maandag 26 januari 2009 20:25 schreef Roy_T het volgende:

[..]

Nee, want het is geen tabulaire data maar een opsomming.
Ik zie eigenlijk ook geen andere manier om verticaal te centreren?

Enige optie die er fatsoenlijk uit ziet is wat er al geroepen werd, uitlijnen op de bodem. Da's nog simpel ook, gewoon de img's absoluut positioneren en dan ben je klaar
pi_65435823
veldmuis, ik zie inderdaad ook geen andere oplossing, heel netjes niet en de validator valt er wel over maar een tabel zou de meest simpele oplossing zijn.

Maar kun je jou oplossing eens laten zien? en werkt deze wel in alle browsers?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65435988
Ik zou het sowieso anders doen.

die div weglaten, die ul zelfs weglaten en gewoon de a een display block geven, breedte, hoogte, etc.

de a dan een position relative, de img een position absolute, bottom op 0px en eh..nou zit ik ff te denken hoe ik die zou centreren. margin 0px auto denk ik.
pi_65436289
Nou eens zien of het werkt, zal het morgen even proberen en de resultaten posten!.

/meld af
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65436612
quote:
Op maandag 26 januari 2009 21:05 schreef veldmuis het volgende:

Ik zie eigenlijk ook geen andere manier om verticaal te centreren?
Scheiding van structuur en presentatie enzo Het is een lijst, dus het zou gewoon (zoals hierboven staat) een <ul> moeten zijn. Dat je dat niet in de look krijgt die je wil, maakt nog niet dat tabellen hier "dus" correct zijn.
pi_65436730
quote:
Op maandag 26 januari 2009 22:03 schreef Roy_T het volgende:

[..]

Scheiding van structuur en presentatie enzo Het is een lijst, dus het zou gewoon (zoals hierboven staat) een <ul> moeten zijn. Dat je dat niet in de look krijgt die je wil, maakt nog niet dat tabellen hier "dus" correct zijn.
Semantisch is het wellicht netter om <ul><li><table><tr><td><a><img></a></td></tr></table></li><li><table><tr><td><a><img></a></td></tr></table></li></ul> te doen. Ik zou echter voor een gewone ouderwetse table gaan hoor. Kan hier prima imo. Het is niet helemaal table-data wat je daar hebt, maar zolang het één tabel is in een keurige html, boeiend toch?
pi_65437077
Nee, semantisch is het netter om gewoon helemaal geen tabel te gebruiken I.p.v. die <div>'s gewoon <li>'s en klaar. Hier tabellen voor gebruiken is nooit keurige HTML, want het is niet "niet helemaal" tabulaire data, maar "helemaal niet" (tenzij je een kolom "afbeelding", "bestandsnaam", etc maakt en per afbeelding een rij).
pi_65437172
Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:17:24 #285
1972 Swetsenegger
Egocentrische Narcist
pi_65437272
quote:
Op maandag 26 januari 2009 21:04 schreef veldmuis het volgende:

[..]

IE7: Werkt.
IE8: Werkt niet.
FX: Werkt niet.


http://test.xploise.nl/align.html
 | FOK! Schrikkelbaasch
pi_65437405
quote:
Op maandag 26 januari 2009 22:15 schreef veldmuis het volgende:
Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?
Het één is wat mij betreft niet ondergeschikt aan het andere. De HTML moet goed zijn, de CSS moet net zo goed zijn en de JavaScript ook. Er zit natuurlijk altijd wat rekbaarheid in, maar tabellen gebruiken enkel en alleen voor positionering is plain evil imo.
pi_65437487
quote:
Op maandag 26 januari 2009 22:17 schreef Swetsenegger het volgende:

http://test.xploise.nl/align.html
Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:23:04 #288
1972 Swetsenegger
Egocentrische Narcist
pi_65437550
quote:
Op maandag 26 januari 2009 22:21 schreef Roy_T het volgende:

[..]

Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).
Die had ik al gevonden ja
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:24:07 #289
1972 Swetsenegger
Egocentrische Narcist
pi_65437591
Er moet wel een tekst achter de image staan zie ik nu, maar dat kan je wel met een spatie oplossen. -edit- zoals nu in mijn huidige voorbeeld.
 | FOK! Schrikkelbaasch
pi_65438041
IE8 weigert nog wel.
Wat betreft FX heb je gelijk .
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:35:47 #291
1972 Swetsenegger
Egocentrische Narcist
pi_65438091
quote:
Op maandag 26 januari 2009 22:34 schreef veldmuis het volgende:
IE8 weigert nog wel.
Wat betreft FX heb je gelijk .
Ik zit hier op Mac, dus kan IE8 niet testen nu. Maar IE8 is beta en weigert wel meer
Ik zal morgen ff met IE8 kijken.
 | FOK! Schrikkelbaasch
pi_65438122
IE8 is RC
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:38:14 #293
1972 Swetsenegger
Egocentrische Narcist
pi_65438199
quote:
Op maandag 26 januari 2009 22:36 schreef veldmuis het volgende:
IE8 is RC
Ik heb volgens mij beta 1 nog geinstalleerd staan, maar zal morgen ff kijken. Zou wel vreemd zijn als IE8 het niet doet, want dit is standaard CSS. En wat ik tot op heden van IE8 heb gezien stemt positief.
 | FOK! Schrikkelbaasch
pi_65438248
Ik vind IE8 ook zeker een vooruitgang. Alleen jammer dat bijvoorbeeld opacity nog niet ondersteund wordt, maar dat ze daar nu een filter voor pakken wat weer op een andere manier werkt als IE7. Dat soort dingen stellen me wel teleur.
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:42:01 #295
1972 Swetsenegger
Egocentrische Narcist
pi_65438344
Hmz, ff via citrix getest. Op chrome doettie het ook, maar op IE7 ook niet. ff kijken wat hij met een doctype doet
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:44:56 #296
1972 Swetsenegger
Egocentrische Narcist
pi_65438455
quote:
Op maandag 26 januari 2009 22:39 schreef veldmuis het volgende:
Ik vind IE8 ook zeker een vooruitgang. Alleen jammer dat bijvoorbeeld opacity nog niet ondersteund wordt, maar dat ze daar nu een filter voor pakken wat weer op een andere manier werkt als IE7. Dat soort dingen stellen me wel teleur.
Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.

Met de doctype lijkt hij het nu op alle browsers goed te doen. Getest in

Safari 3.2.x Mac
Firefox 3.0.xx Mac
Opera 9.6x Mac
IE 7.0.x Windows
Chrome 1.0.x Windows
 | FOK! Schrikkelbaasch
pi_65438611
Misschien is http://kimblim.dk/csstest/ ook handig om na te kijken welke browser welke css-features ondersteund. Niet dat alles wordt getest, maar het is wel een leuk overzicht. En je vraagt je meteen weer af waarom IE6 nog steeds niet in de ban is gedaan.
fokstok.nl
pi_65438667
quote:
Op maandag 26 januari 2009 22:44 schreef Swetsenegger het volgende:

[..]

Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.
Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.
fokstok.nl
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:50:27 #299
1972 Swetsenegger
Egocentrische Narcist
pi_65438714
quote:
Op maandag 26 januari 2009 22:49 schreef Light het volgende:

[..]

Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.
Ja precies.
 | FOK! Schrikkelbaasch
pi_65439181
quote:
Op maandag 26 januari 2009 22:36 schreef veldmuis het volgende:
IE8 is RC
en hier geinstalleerd, nu hopen dat de JS enigne wat stabieler is
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 10
Index

» digital corner

» development

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