[CSS] voor dummies - deel 6

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zondag 3 juni 2007 @ 20:02:35 #251
107951 JortK
Immer kwaliteitsposts
pi_50069337
quote:
Op zondag 3 juni 2007 19:56 schreef Tuvai.net het volgende:
Doe anders eens gewoon margin:0 auto;. Ik ondervind met oude IE versies ook wel eens problemen als ik left/right/top/bottom declareer bij bijvoorbeeld padding, margin, etc. :)

Voorbeeld:
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;

werkt niet.

padding:5px; of padding:5px 5px 5px 5px; weer wel. :)
Ik heb m nu zo:

1
2
3
4
5
6
7		table.login
   {
   width: 300px;
   margin: 0 auto;
   border: 1px solid #4D7BD6;
   border-collapse: collapse;
   }


Doet het ook niet :N
Overzicht van alle maandcijfers van het fokforum, voor de stats freaks!
Een goede Fok!search met de kracht van Google!
  zondag 3 juni 2007 @ 20:17:54 #252
46275 Castor
Obey the rules, miss the fun
pi_50069763
quote:
Op zondag 3 juni 2007 19:34 schreef JortK het volgende:
Ik heb een table element in mijn CSS:
[ code verwijderd ]

Hiermee zou die de tabel moeten centreren op het scherm (vanwege margins die op auto staan).

Nu doet hij dit in Firefox wel, maar in IE7 niet, heeft iemand enig idee wat er verkeerd gaat?
Vreemd, bij mij doet dit het wel. Zowel in IE7 als FireFox 2...
Castor's Photostream op Flickr
  zondag 3 juni 2007 @ 20:20:29 #253
46275 Castor
Obey the rules, miss the fun
pi_50069842
Laat anders je volledige css en html eens zien, wellicht zit de fout ergens anders?
Castor's Photostream op Flickr
pi_50074112
Ook dit is in IE afhankelijk van standaard- vs. compatibiliteitsmodus. Gebruik je de juiste doctype?
http://www.quirksmode.org/css/quirksmode.html
pi_50074788
over dat table verhaal

je moet het parent element
position:relative;
meegeven

en

margin:0 auto

is ongeldig, aantal een einheid noemen dus bv 0px

(heb niet alles gelezen, excuses als het er al stond)
Zon, zee en strandvakanties
pi_50075363
quote:
Op zondag 3 juni 2007 22:53 schreef ErikN het volgende:
margin:0 auto

is ongeldig, aantal een einheid noemen dus bv 0px

(heb niet alles gelezen, excuses als het er al stond)
0 is geldig. 0 is 0. Of het nou 0 px, em, %, pt, of wat dan ook is.
pi_50165406
2501ste view

Maar gelijk met een vraagje.



Je ziet dat de select door het overlappende gedeelte heen komt.. Hoe kan ik dit voorkomen?

Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  woensdag 6 juni 2007 @ 15:44:17 #258
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50166623
wellicht een z-index aan het element waar die select in zit?
laat eens wat code zien
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50166899
quote:
Op woensdag 6 juni 2007 15:14 schreef Chandler het volgende:
[...]
Ik heb zelf z-index van het overlappende stuk op 999 gezet en van de select op -1 maar daar zat het niet in
Gaat 't alleen fout in IE6 of ouder?

In dat geval kan je het (voor IE5.5 en IE6) "oplossen" door er een iframe achter te plakken (zie voorbeeldje)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_50167610
Er zit een z-index aan het select element. met -1

En inderdaad gaat het fout in IE6 kon FF niet testen omdat ik daar het overvallende element niet werkend ik kreeg, waarom weet ik nog niet

Maar een iframe is helaas niet voor mij de juiste oplossing
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50167972
quote:
Op woensdag 6 juni 2007 16:08 schreef Chandler het volgende:
Maar een iframe is helaas niet voor mij de juiste oplossing
Waarom is dat geen oplossing?

(De iframe wordt niet gebruikt om iets in te zetten, het wordt alleen gebruikt om die comboboxen af te dekken. Een vreemde constructie, maar het werkt echt)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_50170184
Omdat ik niet precies weet hoe ik het moet inbouwen

Tevens kan ik zelf wel leven met het idee dat het er gewoon even doorheen te zien is...

Als je wilt kan ik wel een voorbeeld online zetten (via PB dan)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50177223
Het wordt eens tijd de tabellen te vervangen, hoe gemakkelijk ze ook zijn.

1
2
3
4		   <div class="message">
      <span class="leftcolumn">Username:</span>
      <span class="rightcolumn">Bla</span>
   </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		   .leftcolumn{
      width: 50%;
      text-align: left;
   }
   .rightcolumn{
      width: 50%;
      text-align: right;
   }
   .message{
      width:             281px;
      
      margin-bottom:       2px;
      padding-left:      4px;
      
      font-family:       verdana;
      font-size:          11px;
      color:             #000000;
      line-height:       18px;
   
      border:          1px #000000 solid;
      background-color:    #F5F5F5;   
   }


Helaas blijven de twee spans angstig dicht bij elkaar.... iemand tips?

[ Bericht 12% gewijzigd door Geqxon op 06-06-2007 20:49:04 ]
  woensdag 6 juni 2007 @ 21:25:11 #264
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179093
je wilt die recht span echt helemaal rechts uitgelijnd in je div hebben?
Dan moet je niet text-align gebruiken, maar een float:right
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50179133
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
  woensdag 6 juni 2007 @ 21:32:05 #266
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179384
dan moet je met een padding of margin left gaan werken met de rechter vrees ik
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
  woensdag 6 juni 2007 @ 21:32:26 #267
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_50179402
of je div een vaste hoogte geven
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_50179478
Is het niet mogelijk om het zonder "gekke" truuks zo simpel als een tabel te maken?
  woensdag 6 juni 2007 @ 22:41:51 #269
12880 CraZaay
prettig gestoord
pi_50182785
Zo te zien is het gewoon tabulaire data. Waarom zou je dan geen tabel gebruiken?
pi_50182935
Het is geen tabulaire data, het is een inlog / registreer box. Dus:


1
2
3
4
5
6
7		+----------+----------+
| Username:| [______] |
+----------+----------+
| Password:| [xxxxxx] |
+----------+----------+
|    [ Inloggen ]     |
+----------+----------+


En in web 2.0 zijn tabellen voor niet tabulaire data verboden, dus zoek ik een manier hoe ik het anders kan doen :)
pi_50183336
Wat is er 'gek' aan een float div te gebruiken en die een hoogte mee te geven? Gebruik ik zelf ook vrij vaak.
pi_50183485
Omdat ik juist geen vaste hoogte wil hebben, maar ik het dynamisch wil hebben. Zodat ik het over mijn complete website kan toepassen, alles met dezelfde klasse
  woensdag 6 juni 2007 @ 23:41:27 #273
12880 CraZaay
prettig gestoord
pi_50185170
Het is een formulier, dus <label>'s gebruiken? Maakt het toegankelijker en is goed te stylen.

Heeft overigens niets met "Web 2.0" te maken, maar met semantiek.
pi_50187034
quote:
Op woensdag 6 juni 2007 21:26 schreef Geqxon het volgende:
Het nadeel van floaten, is dat als de hoofdtekst leeg is, de complete div 2 pixels hoog wordt, en de gefloate tekst maar wat rondzweeft. Geen float dus
Als je de div waar je float inzit overflow: auto; meegeeft zou dat opgelost moeten zijn. Tenminste als ik je goed begrijp (dat de parent div onder de float 'inklapt'). Als dat niet werkt kun je onder de div met float ook gewoon een div met clear: both; zetten (zonder float), maar dat kan extra ruimte opleveren.
pi_50209234
Even iets anders m.b.t. CSS. Je kunt ook je tabel headers locken.

Ik heb meerdere sites gevonden maar kan er niet achter komen hoe ik dit kan inbouwen in mijn eigen tabel. Dit omdat ik graag de hoogte van het scherm wil aanhouden.

Ik heb al geprobeerd met een vaste hoogte (tbody) met z-index en dergelijke zaken maar helaas het wil niet lukken,..

http://web.tampabay.rr.co(...)cked-column-csv.html hier heb ik wat mee gespeeld maar kom er echt niet meer uit..

Anyone die mij kan vertellen wat ik moet toevoegen aan

thead, tbody en eventueel table?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50209714
Je kunt je TBODY een hoogte en overflow: scroll; meegeven, maar hier werkt het alleen in Firefox, niet in Safari. Dus ik denk dat het in IE ook niet gaat werken.

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		   <table>
      <thead>
         <tr>
            <th>Kolom1</th>
            <th>Kolom2</th>
         </tr>
      </thead>
      <tbody style="max-height: 5em; height: 5em; overflow: scroll;">
         <tr>
            <td>Rij 1</td>
            <td>Rij 1</td>
         </tr>
         <tr>
            <td>Rij 2</td>
            <td>Rij 2</td>
         </tr>
         <tr>
            <td>Rij 3</td>
            <td>Rij 3</td>
         </tr>
         <tr>
            <td>Rij 4</td>
            <td>Rij 4</td>
         </tr>
         <tr>
            <td>Rij 5</td>
            <td>Rij 5</td>
         </tr>
      </tbody>
   </table>


Die max-height heb ik erin gezet omdat ik meen dat IE daar wel iets mee doet
pi_50211275
Nee, het werkt idd niet. Vind het zelf raar... Jammer dat er niet een stap voor stap tutorial over te vinden is

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		<div style="overflow:auto; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%">
 <thead>
  <tr style="position:relative; top:expression(this.offsetParent.scrollTop);background-color:#dddddd;">
   <th nowrap>Header A</th>
   <th nowrap>Header B</th>
   <th nowrap>Header C</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
  <tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
 </tbody>
</table>
</div>


Dit werkt weer wel maar weer niet in FF

[ Bericht 87% gewijzigd door Chandler op 07-06-2007 19:54:50 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 7 juni 2007 @ 20:24:23 #278
12880 CraZaay
prettig gestoord
pi_50213360
Wat wil je nou bereiken? Dat de tbody een scrollbar krijgt?
pi_50214004
Heb het al klaar..

Beiden de top veranderd met position; absolute...

[ Bericht 81% gewijzigd door Chandler op 08-06-2007 11:34:57 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50231834
Geqxon heeft weer eens een probleempje .


Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
pi_50232078
Ja tuurlijk is dat mogelijk maar schets je voorbeeld eens
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50232157
Ik snap je probleem niet.
Steam - SC2
  vrijdag 8 juni 2007 @ 11:53:33 #283
46794 Berkery
Fat bastard
pi_50232650
quote:
Op vrijdag 8 juni 2007 11:39 schreef super-muffin het volgende:
Ik snap je probleem niet.
Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.

tvp
No Dukes of Hazzard in the classroom
pi_50232716
quote:
Op vrijdag 8 juni 2007 11:29 schreef Geqxon het volgende:
Geqxon heeft weer eens een probleempje .


Vier buttons, en wat ik wil bereiken zijn inline DIVs met een vaste breedte. De buttons zijn vrij grafish met een tekst erop, dus ik heb een DIV, met een tekst erin, een achtergrond afbeelding, een breedte van 200px en een hoogte van 30px. Is dit mogelijk?
Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.
pi_50233128
quote:
Op vrijdag 8 juni 2007 11:53 schreef Berkery het volgende:

[..]

Je kan niet zonder meer breedte opgeven als je display: inline gebruikt. Dat geeft verschillende resultaten bij verschillende browsers/DTD's.

tvp
Ja dat wist ik, maar je kan ze toch gewoon floaten?
Steam - SC2
pi_50234124
quote:
Op vrijdag 8 juni 2007 11:55 schreef Bigs het volgende:

[..]

Kun je ze niet gewoon floaten? Dan kun je namelijk wel een grootte opgeven en ze toch mooi achter elkaar zeten.
Bedankt, dat was hem! Weer een stukje verder met de website
  vrijdag 8 juni 2007 @ 17:34:03 #287
73232 De_Hertog
Aut bibat, aut abeat
pi_50244999
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
Mary had a little lamb
Then Mary had dessert
pi_50245351
quote:
Op vrijdag 8 juni 2007 17:34 schreef De_Hertog het volgende:
Is het mogelijk om een link te maken die niet aan de standaard link instelling voldoet? Die dus geen css opmaak mee krijgt, zonder daar een aparte class voor te maken?
Gewoon een style attribuut meegeven? Bv.

1<a style="text-decoration: none; color: black; cursor: default;" href="#">bla</a>
  vrijdag 8 juni 2007 @ 17:54:54 #289
73232 De_Hertog
Aut bibat, aut abeat
pi_50245731
quote:
Op vrijdag 8 juni 2007 17:44 schreef Bigs het volgende:

[..]

Gewoon een style attribuut meegeven? Bv.
[ code verwijderd ]
Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.
Mary had a little lamb
Then Mary had dessert
pi_50246899
quote:
Op vrijdag 8 juni 2007 17:54 schreef De_Hertog het volgende:

[..]

Klinkt als een heel goed idee. Behalve dan dat het CMS systeem hier het hele attribuut lekker weg smijt. Grr. Maar toch bedankt voor het meedenken ;) Ik ga toch maar eens aan m'n baas vragen of ik iets met de CSS mag doen, schiet niet op zo.
Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :

1
2
3		#boekhouding a{
text-decoration: none
}


:)
  vrijdag 8 juni 2007 @ 19:21:47 #291
73232 De_Hertog
Aut bibat, aut abeat
pi_50248904
quote:
Op vrijdag 8 juni 2007 18:29 schreef Geqxon het volgende:

[..]

Als de link bijvoorbeeld in de div genaamd "Boekhouding zit" :
[ code verwijderd ]

Oh, als ik bij de css kom is het geen probleem, maar daar moet ik toestemming voor hebben. Maar maakt niet uit, dat ga ik morgen regelen, dan is het zo opgelost. Ik probeerde het eerst te omzeilen, maar ja, als het cms niet mee werkt..
Mary had a little lamb
Then Mary had dessert
pi_50408141
Ik zit met een klein vaag iets.



Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....

Stylesheet
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		.comment {
    padding: 0; 
    margin-bottom: 20px; 
    height: 75px; 
    background-color: #d0c3ac; 
    border: 1px solid #c8b99e; 
    width; 90%;
}

.comment .big {
    position: absolute;
    top: 0;
    color: #d8cfbd;
    font-family: "Times New Roman", Times, serif;
    font-size: 77px;
    z-index: 10;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    width: 100%;
    text-align: right;
}

.comment .body {
    padding: 5px;
    z-index: 10;
}

.comment .date   { 
    font-style: italic;
    font-size: 10px;
    display: inline;
    font-weight: bold;
}

.comment .author {
    font-size: 13px;
    padding: 0 0 2px 0;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

div {
    position: relative;
}


:Y)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50451839
Situatie: Ik heb een div met tekst erin. Links er rechts IN de div een lang en smal menu, die via absolute waarde ingesteld is.


Probleem: Als de tekst kleiner dan het menu, dan wordt de div uiteraard even groot als de tekst, de menu's boren zich dan dwars door de complete website heen.

Gewenst: De div wil ik het liefst zo maken dat hij altijd even lang als de menu's is, en als de tekst langer is dat hij de net zo lang als de tekst is.

Kan dit? Dus een clear:both voor een float zeg maar
pi_50453280
Waarom absoluut? De de ene div links en de andere rechts floaten kan toch ook?
En omdat jij het bent:
http://www.danielpunt.nl/geqxon.html

Als ik je tenminste goed begrepen heb.
Steam - SC2
pi_50454158
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
pi_50455154
quote:
Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floats
pi_50456060
quote:
Op donderdag 14 juni 2007 16:19 schreef Geqxon het volgende:
Je hebt mij perfect begrepen! En dit is een klassiek voorbeeld van uren lang gefixeerd op een bepaalde oplossing zitten, waarbij een frisse blik een goede oplossing kan bieden. Bedankt voor je frisse blik
Dat hebben we allemaal wel eens. En meestal zijn het dan ook van die lullige oplossingen, dan denk je gewoon te moeilijk.
Voor de rest wat Bigs zegt dus
Steam - SC2
pi_50456693
quote:
Op dinsdag 20 maart 2007 13:12 schreef Geqxon het volgende:
Mijn god, wat is de zoekpagina van Google een rotzooi. Van een bedrijf dat dergelijke kennis van AJAX heeft, een enorme omzet maakt, en imho een enorme status heeft, is de sourcecode pure bagger. Geen doctype, geen XHTML, amper quotes om HTML eigenschappen, geen indents, niet alles net op losse regels, *ril*
Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.
Steam - SC2
pi_50468598
quote:
Op donderdag 14 juni 2007 16:41 schreef Bigs het volgende:

[..]

Dit is al de tweede keer dat floaten de oplossing voor je probleem is. Als ik jou was zou ik me eens wat meer verdiepen in de mogelijkheden van floats
Nu is dit wel een heel ander voorbeeld .

Mijn probleem zat hem er meer in dat ik een statische pagina dynamisch wou maken, en door de bergen code dacht ik gewoon even niet fris
  vrijdag 15 juni 2007 @ 08:56:50 #300
12880 CraZaay
prettig gestoord
pi_50476532
quote:
Op donderdag 14 juni 2007 17:20 schreef super-muffin het volgende:

[..]

Dat is *volgens mij* om bandbreedte uit te sparen. Door de indents, quotes en doctype ed weg te laten scheelt dat heel wat. Zeker voor een pagina als de Google startpagina die zo'n beetje overal als startpagina staat.
Gedeeltelijk waar, maar semantisch gezien klopt er ook gewoon geen hol van en de html voldoet op tig punten niet aan de standaarden
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 6
Index

» digital corner

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