[CSS] voor dummies - deel 13

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_73025676
quote:
Op dinsdag 22 september 2009 23:40 schreef Light het volgende:

Je kunt in een stylesheet niet iets opnemen als een breedte afhankelijk van of een ander element wel of niet aanwezig is. Dan zou je met een andere naam moeten werken voor de smallere div. En dan kan ook weer andere complicaties hebben waardoor je de stylesheet dan veel groter moet maken. Maar dat ligt ook aan de stylesheet en de verdere opbouw van de site.
Wat dacht je van simpelweg een class aan de body hangen, en "body.className #whatever" onderaan je stylesheet zetten, waarmee je "#whatever" overruled?

Net zoveel werk als een extra CSS includen, zelfde effect, een request minder.
pi_73026797
quote:
Op dinsdag 22 september 2009 23:50 schreef Roy_T het volgende:

[..]

Wat dacht je van simpelweg een class aan de body hangen, en "body.className #whatever" onderaan je stylesheet zetten, waarmee je "#whatever" overruled?

Net zoveel werk als een extra CSS includen, zelfde effect, een request minder.
Kan ook.
Er zijn, zoals altijd, meerdere wegen die naar Rome leiden. De beste oplossing voor situatie A hoeft niet de beste te zijn voor situatie B.
fokstok.nl
pi_73029023
mee lees post
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_73029414
quote:
Op dinsdag 22 september 2009 21:59 schreef daReaper het volgende:

[..]

nja die div wordt ook niet geladen bij andere pags dan de frontpage, was ik er even vergeten bij te zetten
Volgens mij gaat het dan haast automatisch goed. Als je die div #frontpage float:left geeft, gaat de inline inhoud uit de parent div automatisch de overgebleven ruimte vullen. Als #frontpage er niet is, staat'ie ook niet in de weg.

Als je voor een oplossing als hierboven gaat, mag ik er dan aan herinneren dat er ook nog altijd inline-styles bestaan? Voor dit soort pagina-specifieke opmaak nog altijd uiterst geschikt.
—o—
pi_73030179
quote:
Op woensdag 23 september 2009 00:30 schreef Light het volgende:

[..]

Kan ook.
Er zijn, zoals altijd, meerdere wegen die naar Rome leiden. De beste oplossing voor situatie A hoeft niet de beste te zijn voor situatie B.
True. Al is een request minder per definitie een betere weg, als het verder geen extra code kost
pi_73034877
tvp
  FOK!-Schrikkelbaas woensdag 23 september 2009 @ 14:57:29 #8
1972 Swetsenegger
Egocentrische Narcist
pi_73038730
Ik heb een box van 200px breed met een overflow:hidden. Als ik een image nest die breder is dan 200px valt de overflow in FF en safari keurig weg. IE 7 en 8 tonen de image gewoon volledig en loopt dus buiten de box.

Hoe ga ik dit oplossen?

-edit- al opgelost, had de image in een extra div genest die er gewoon uit kon.

[ Bericht 15% gewijzigd door Swetsenegger op 23-09-2009 15:20:15 ]
 | FOK! Schrikkelbaasch
pi_73040549
quote:
Op woensdag 23 september 2009 14:57 schreef Swetsenegger het volgende:
Ik heb een box van 200px breed met een overflow:hidden. Als ik een image nest die breder is dan 200px valt de overflow in FF en safari keurig weg. IE 7 en 8 tonen de image gewoon volledig en loopt dus buiten de box.
Jahoor, volledig CSS-complient. Maar wel op zijn IE's.
—o—
  zondag 27 september 2009 @ 15:34:40 #10
87680 Mirel
Mirel wil een bongophone.
pi_73149791
www.mirelmasic.nl
Ik wil het menubalkje precies laten grenzen aan bovenste balkje. Dat doet ie allemaal heel goed, maar wanneer ik mijn unordered list aanzet, dan verspringt ie naar beneden.

1
2
3
4
5
6
7
8
9
10
11		<div id="bgtop">   
</div>
<div id="container">
   <div id="menu">
      <ul id="menulist">
         <li>een</li>
         <li>twee</li>
         <li>drie</li>
      </ul>
   </div>
</div>

bgtop is het achtergrond balkje.

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		body {
   margin: 0px;
   padding: 0px;
   font-family: calibri;
   font-size: 12px;
   background: #333333;
}

#bgtop {
   background-image: url(images/bg-top.gif);
   height: 186px;

}

#container {
   width: 1000px;
   margin: 0 auto;
}

#menu {
   background: #f2ebeb;
   width: 1000px;
   height: 20px;
   color: red;
   font-family: verdana;
}

#menulist li {
   display: inline;
   list-style-type: none;
}

Een leraar zei tegen me dat die afstand komt vanwege de punten in de unordered list. Hij zegt dat ze wel weggehaald zijn met de css code (list-style-type: none;), maar dat de afstand nog niet eruit is.

Wat ik wel opmerk is dat als hij op horizontaal staat, de punten sowieso niet verschijnen.

Die afstanden kan ik allemaal mee lopen kutten via #menu, #menulist li en ook nog gewoon #menulist. Padding op 0 zetten doet niks. Hij komt niet boven die leegte terecht.

[ Bericht 2% gewijzigd door Mirel op 27-09-2009 15:53:05 ]
When all else fails, you always have delusion.
pi_73150916
Je <ul> met id #menulist moet "margin: 0" hebben.
  zondag 27 september 2009 @ 17:15:32 #12
87680 Mirel
Mirel wil een bongophone.
pi_73152589
Yep dat is het.

Wat ik heb er trouwens ene pesthekel aan als je zoveel probeert dat iets wat voor de hand ligt je denkt "dat was het eerste wat ik geprobeerd had"

Code he
When all else fails, you always have delusion.
pi_73167524
Even Firebug voor Firefox installeren, en je had het in 1 minuut gezien
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 12:59:34 #14
1972 Swetsenegger
Egocentrische Narcist
pi_73239358
Iets vreemds.

relevante 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		.topmenu{
   position:relative;
   width:728px;
   height:25px;
   background-image:url(../image/topmenubg.png);
   background-repeat:repeat-x;
   color:white;
   line-height:25px;
   font-family: verdana, Sans, sans-serif;
   font-size:10pt;
   overflow:hidden;
   text-align:left;
}

.cart{
   float:right;
   width:200px;
   height:25px;
   background-image:url(../image/cartbg.png); 
   background-repeat:no-repeat;
   color:white;
   line-height:25px;
   font-family: verdana, Sans, sans-serif;
   font-size:10pt;
   text-align:left;
   z-index:99;
}


html

1
2
3
4
5
6
7
8
9		<div class="topmenu">
    <a href="index.php">Home</a>
   <a href="actie/2">Nieuwe Collectie</a>
   <a href="actie/3">Sale!</a>
   <a href="styling">Styling</a>
   <a href="klantenservice">Klantenservice</a>
   <a href="gastenboek">Ervaringen</a>
  <div class="cart">  test</div>
</div>


Onder IE7 en FF 3.0.11 is de div 'cart' niet zichtbaar
 | FOK! Schrikkelbaasch
pi_73240249
Heb je geen URL waar we even kunnen spieken? Gooi anders je CSS van de a;tjes er ook even bij.
pi_73240552
Off topic, maar waarom gebruik je geen list voor die opsomming van links?
pi_73240727
er zijn wel meer dingen een beetje off, color:white, font size in PT's. een z-index op 1 element? ik moet de rest even zien.
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 13:44:37 #18
1972 Swetsenegger
Egocentrische Narcist
pi_73240771
Omdat ik in dit geval geen zin hebt in een hoop css voor een simpel menuutje wat niet uitbreidt. Links hiervan staat een menu wat uit mijn css komt rollen en omdat die dynamisch is is dat inderdaad een list.

Nou het probleem was dat hij onder IE7 en FF ging wrappen. Omdat de overflow op hidden stond zag je de layer dus niet. Waarom er gewrap werd is me niet duidelijk, dus ik heb er nu maar 2 floats van gemaakt en het werkt nu crossbrowser in Safari 4 (OSX/XP), FF 3 (OSX/XP), Opera (OSX/XP), Chrome, IE7 en IE8
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 13:45:49 #19
1972 Swetsenegger
Egocentrische Narcist
pi_73240812
quote:
Op woensdag 30 september 2009 13:42 schreef snkr-xxx het volgende:
er zijn wel meer dingen een beetje off, color:white, font size in PT's. een z-index op 1 element? ik moet de rest even zien.
Wat is er mis met een color: white en font size in pt ? Z-index was ene overblijfseltje van wat tests waarom die layer niet zichtbaar was en er stond dus gewoon op 2 elementen een z-index.
 | FOK! Schrikkelbaasch
pi_73240835
heeft toch niet zoveel met uitbreiding te maken, is gewoon semantiek..
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 13:47:47 #21
1972 Swetsenegger
Egocentrische Narcist
pi_73240867
quote:
Op woensdag 30 september 2009 13:46 schreef snkr-xxx het volgende:
heeft toch niet zoveel met uitbreiding te maken, is gewoon semantiek..
Het is hier geen lijst het is een rijtje Dus over semantiek kan je twisten.
 | FOK! Schrikkelbaasch
pi_73240888
quote:
Op woensdag 30 september 2009 13:45 schreef Swetsenegger het volgende:

[..]

Wat is er mis met een color: white en font size in pt ? Z-index was ene overblijfseltje van wat tests waarom die layer niet zichtbaar was en er stond dus gewoon op 2 elementen een z-index.
Bij white maakt het geen snars uit, maar als je dat vaker doet, bij bijv orange, of pink en dergelijke, zit je er mooi mee dat verschillende browsers de kleur anders interpreteren, dus gewoon lekker hex codes gebruiken, is net zo easy.

Punten zijn voor print, niet voor web. Gewoon px of nog liever em's gebruiken
pi_73240942
quote:
Op woensdag 30 september 2009 13:47 schreef Swetsenegger het volgende:

[..]

Het is hier geen lijst het is een rijtje Dus over semantiek kan je twisten.
Alles wat een opsomming is hoort in een lijst, of dit nu een rijtje of kolom of van mijn part diagonaal gaat. Maar goed, ieder z'n ding idd
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 13:50:27 #24
1972 Swetsenegger
Egocentrische Narcist
pi_73240965
quote:
Op woensdag 30 september 2009 13:48 schreef snkr-xxx het volgende:

[..]

Bij white maakt het geen snars uit,
Dus je probleem is?
quote:
maar als je dat vaker doet, bij bijv orange, of pink en dergelijke, zit je er mooi mee dat verschillende browsers de kleur anders interpreteren, dus gewoon lekker hex codes gebruiken, is net zo easy.
En waar haal je vandaan dat ik dat niet zou doen? Als ik al preset colors gebruik naast white en black is het voor test doeleinden.
quote:
Punten zijn voor print, niet voor web. Gewoon px of nog liever em's gebruiken
Ja dat is ook echt belangrijk.
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas woensdag 30 september 2009 @ 13:51:20 #25
1972 Swetsenegger
Egocentrische Narcist
pi_73240996
quote:
Op woensdag 30 september 2009 13:49 schreef snkr-xxx het volgende:

[..]

Alles wat een opsomming is hoort in een lijst, of dit nu een rijtje of kolom of van mijn part diagonaal gaat. Maar goed, ieder z'n ding idd
Dat vind ik niet. Als het semantisch zo bedoeld was is het wel erg lullig dat een <ul> onder elkaar geplaatst wordt en je voor 5 linkjes een stuk CSS moet gaan schrijven.
 | FOK! Schrikkelbaasch
pi_73240998
Ik heb geen probleem hoor Succes verder!
pi_73247848
quote:
Op woensdag 30 september 2009 13:51 schreef Swetsenegger het volgende:

Als het semantisch zo bedoeld was is het wel erg lullig dat een <ul> onder elkaar geplaatst wordt
Je verwart nu semantiek met de standaard rendering van browsers, terwijl ze niets met elkaar te maken hebben.
  vrijdag 2 oktober 2009 @ 17:17:39 #29
87680 Mirel
Mirel wil een bongophone.
pi_73311195
Hoi, op http://mirelmasic.nl/portfolio.html wil ik dat het fototje links wordt uitgelijnd en de tekst rechts.
Als ik de breedte en hoogte van de foto instel, gaat ie naar het midden. Ik heb dan geprobeerd margins en paddings te gebruiken, maar ze doen niks.
Foto is #thumb.

1
2
3
4
5		#thumb {
   border: 5px solid #000000;
   width: 175px;
   height: 175px;
}   

Zonder de width en height gaat ie wel naar links, maar dan over het kopje heen, en de border trekt door naar rechts naar de rand van het grijze vlak.
When all else fails, you always have delusion.
pi_73311607
De foto is niet #thumb, de foto staat in een div die ID #thumb heeft. Daardoor maak je het jezelf alleen maar lastiger. Zonder die div gaat het zonder enige css al goed (naja alleen de border).

-edit-
Ik zie dat je echt OVERAL waar mogelijk divs omheen hebt lopen zetten. Doe dat niet. Is alleen maar lastig.

[ Bericht 25% gewijzigd door twirky op 02-10-2009 17:36:55 ]
  vrijdag 2 oktober 2009 @ 17:34:16 #31
87680 Mirel
Mirel wil een bongophone.
pi_73311704
Hoe zou ik het anders doen zonder div? Het is niet de bedoeling dat ik die plaatjes ga verwijzen in het css bestand.
When all else fails, you always have delusion.
pi_73311856
quote:
Op vrijdag 2 oktober 2009 @ 17:34 schreef Mirel het volgende:
Hoe zou ik het anders doen zonder div? Het is niet de bedoeling dat ik die plaatjes ga verwijzen in het css bestand.
In je css hoeft niets anders. Je moet alleen die div weghalen en het ID (waarom eigenlijk een ID ipv een class?) in de <img>-tag zetten.
  vrijdag 2 oktober 2009 @ 17:43:29 #33
87680 Mirel
Mirel wil een bongophone.
pi_73311990
Ja ok, de div is weg en hij doet het goed. En vertel me maar eens goed wat het verschil is tussen een id en een class want van m'n leraar word ik ook niet wijzer.
Ik dacht altijd dat je met classes meerdere divs van dezelfde naam neer kon zetten, maar ik heb datzelfde nu op m'n pagina met id's en het werkt. Dus ik heb gewoon het foute idee

[ Bericht 46% gewijzigd door Mirel op 02-10-2009 17:49:48 ]
When all else fails, you always have delusion.
pi_73312274
Het belangrijkste verschil waar je tegenaan loopt, is dat een ID altijd uniek moet zijn. Dat betekent dus dat je een ID per pagina maar één keer mag gebruiken. Een class mag je zo vaak herhalen als je zelf wilt.

Verder zijn er niet echt strikte regels wanneer je wat gebruikt. Maar om bovenstaande reden zijn ID's vaak nuttig voor gebruik met javascript en formulieren, en classes voor CSS.

Maar nogmaals, zolang je een element maar één keer gebruikt maakt het geen biet uit wat je kiest. Loop je de kans dat een element vaker terugkomt, gebruik dan een class.

-edit-
Ja je CSS kijkt er wel overheen, maar als je je pagina door de W3-validator haalt, geeft die foutmeldingen. Op zich voor jou niet zo'n ernstige, maargoed als het toch niet uitmaakt, waarom dan toch stug een ID gebruiken heh
pi_73312532
quote:
Op vrijdag 2 oktober 2009 17:43 schreef Mirel het volgende:

Ik dacht altijd dat je met classes meerdere divs van dezelfde naam neer kon zetten, maar ik heb datzelfde nu op m'n pagina met id's en het werkt. Dus ik heb gewoon het foute idee
Ja, het werkt. Helaas voldoet het op geen enkele manier aan de specificaties, en heb je dus geen HTML geschreven maar een eigen taal gebaseerd op HTML
  vrijdag 2 oktober 2009 @ 18:06:18 #36
87680 Mirel
Mirel wil een bongophone.
pi_73312731
Als ik even voor de grap alles vervang met classes dan gaat m'n layout stuk. Was het nou zo dat je de eerste instantie van een naam eerst als id moet doen en de rest als class?
When all else fails, you always have delusion.
pi_73313197
quote:
Op vrijdag 2 oktober 2009 @ 18:06 schreef Mirel het volgende:
Als ik even voor de grap alles vervang met classes dan gaat m'n layout stuk. Was het nou zo dat je de eerste instantie van een naam eerst als id moet doen en de rest als class?
Heb je ook in je css alle hekjes (#) door punten (.) vervanen dan?
  vrijdag 2 oktober 2009 @ 18:21:45 #38
87680 Mirel
Mirel wil een bongophone.
pi_73313302
*kwartje valt
When all else fails, you always have delusion.
  vrijdag 2 oktober 2009 @ 18:29:13 #39
87680 Mirel
Mirel wil een bongophone.
pi_73313576
Zo, alles is vervangen. denk dat ik er nu wel uitkom. Nog een vraagke echter Kan ik hyperlinks los van elkaar definieren? Ik probeerde wat en het ging niet goetttt. Gaf een link een id en ging die toen proberen te opmaken in m'n css bestand, maar ik het gevoel dat ik de syntax weer fout had.
When all else fails, you always have delusion.
pi_73313751
Je kunt een link net als ieder ander element stijlen door er een id of class aan te geven.

Of als je alle links wilt stijlen gewoon naar de tag verwijzen.

Lees ook dit even door, misschien verduidelijkt dat het hele verhaal wat: http://www.w3schools.com/Css/css_syntax.asp
pi_73314086
Of naar alle links binnen een onderdeel verwijzen, scheelt vaak een hoop code (voor alle links in de header dus "#header a" bijv.).
  vrijdag 2 oktober 2009 @ 18:58:12 #42
87680 Mirel
Mirel wil een bongophone.
pi_73314402
quote:
Op vrijdag 2 oktober 2009 18:48 schreef Roy_T het volgende:
Of naar alle links binnen een onderdeel verwijzen, scheelt vaak een hoop code (voor alle links in de header dus "#header a" bijv.).
nog handiger, scheelt mij weer achteraf alle a's een class te geven.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 14:33:19 #43
87680 Mirel
Mirel wil een bongophone.
pi_73357428
En daar ben ik weer.

Ik heb heel sterk het vermoeden dat ik iets compleet fout doe met mijn menu (eigenlijk geen vermoeden ). Ik heb geprobeerd de woorden in het midden te krijgen, maar uiteindelijk heb ik het los gepositioneerd ipv in het midden uit te lijnen. Als ik nu een dropdown maak, dan gaat dat helemaal fout. De dropdown komt standaard niet onder de juiste knop terecht vanwege alle margins en paddins die ik zorgeloos overal neer heb gesmeten.
Momenteel heb ik de dropdown alleen onder http://www.mirelmasic.nl/portfolio.html staan, als je over de portfolio knop heen gaat.

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		.menu {
   background: #010200;
   width: 1000px;
   height: 20px;
   color: white;
   font-size: 15px;
   font-family: century gothic, verdana, tahoma;
}

.menulist {
   margin: 0px;
   padding-left: 280px;
}

.menulist li {
   padding-right: 142px;
   display: inline;
   list-style-type: none;
}

li:hover ul { 
   display: block;
}

.dropdown {
padding: 0px;
background: black;
}

li ul {
   position: absolute;
   padding-left: 189px;
   display: none;
}

(laatste 3 dingetjes heb ik vluchtig gedaan)

1
2
3
4
5
6
7
8
9
10
11
12		   <div class="menu">
      <ul class="menulist">
         <li><a href="index.html">Home</a></li>
         <li><a href="portfolio.html">Portfolio</a>
            <ul >
               <li class="dropdown"><a href="test.html">dropdown1</a></li><br>
               <li class="dropdown"><a href="test.html">dropdown2</a></li>
            </ul>
         </li>
         <li><a href="about.html">About</a></li>
      </ul>
   </div>


Komt er op neer, hoe maak ik het menu initieel goed zodat de dropdown straks het ook goed doet?

Maar wat ik niet snap, hoe kan ik de dropdown ooit goed krijgen als ik sowieso padding-left moet gebruiken om de menuitems elk wat uitelkaar te plaatsen? Dan zal ik die alsnog weer los moeten doen.
When all else fails, you always have delusion.
pi_73358438
Ik heb nu even geen tijd, maar wat me wel meteen opvalt (en nee, dat heeft hier niets mee te maken ) is de <br> achter een <li>, die daar écht niet hoort (<li>'s staan altijd al onder elkaar; het zijn block-level elementen). En dan nog: <br> is niet echt XHTML, terwijl je in je doctype zegt dat je dat gebruikt

Goed, dat was mijn reactie waar je verder niets aan hebt
pi_73358678
Je kunt de hoofdmenu-items en submenu-items apart stylen. Een div om het menu is eigenlijk ook niet nodig, je kunt ook de ul opmaken.

Voor het maken van een dropdownmenu gebruik ik meestal de techniek die wordt beschreven op http://htmldog.com/articles/suckerfish/dropdowns/ .
fokstok.nl
  zondag 4 oktober 2009 @ 15:21:09 #46
87680 Mirel
Mirel wil een bongophone.
pi_73358895
quote:
Op zondag 4 oktober 2009 15:04 schreef Roy_T het volgende:
Ik heb nu even geen tijd, maar wat me wel meteen opvalt (en nee, dat heeft hier niets mee te maken ) is de <br> achter een <li>, die daar écht niet hoort (<li>'s staan altijd al onder elkaar; het zijn block-level elementen). En dan nog: <br> is niet echt XHTML, terwijl je in je doctype zegt dat je dat gebruikt

Goed, dat was mijn reactie waar je verder niets aan hebt
Ja de <br> was daar omdat anders de dropdown naast etlkaar ging, weet niet waarom
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 19:53:59 #47
87680 Mirel
Mirel wil een bongophone.
pi_73366403
Alleen de ul overlaten en die stylen lukt me niet. Hij neemt geen kleuren of width en height over.

Hoe krijg ik de menulinks gecentered? Ik heb OVERAL geprobeerd margin: 0 auto in te doen, werkt niet.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 20:09:09 #48
87680 Mirel
Mirel wil een bongophone.
pi_73367030
Even met foto's, ben overnieuw begonnen.

Dit is met de code:
1
2
3
4
5
6
7		   <div class="menu">
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="portfolio.html">Portfolio</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </div>

en
1
2
3
4
5
6
7
8
9
10
11
12		.menu {
   font-family: century gothic;
   background: #010200;
   height: 20px;
}

ul, li {
   padding: 0px;
   background: red;
   display: inline;
   list-style: none;
}

Achtergrond is tijdelijk rood voor de duidelijkheid.


Wat moet ik nú doen om de menulinks gecentered te krijgen, met een afstand tussen elke menu item? Ik heb tot nu toe geprobeerd margin: 0 auto eigenlijk overal al in te doen

Kijk, als ik dat zelf een padding-left of margin-left doe om ze in het midden te krijgen, en padding-right om ruimte te maken tussen elk menu item, dan gaat dat straks backfiren met een dropdown, want die zal dan die afstanden meenemen. Bij de uitklap krijg je dan het woord met een heleboel lege ruimte zoals:

De uitklap moest ik trouwens ook precies daar onder positioneren, hij kwam er niet standaard onder.
When all else fails, you always have delusion.
  zondag 4 oktober 2009 @ 20:53:51 #49
87680 Mirel
Mirel wil een bongophone.
pi_73369381
IK HEB HET WAAAA

(text align center, en dan ipv het gehele linkgeval uit elkaar zetten alleen het a gedeelte

edit: nou heb ik de kanker op die dropdown, display staat op block maar de 2 links staan nog steeds onder elkaar. Ik ga het gewoon brak fixen met een <br>.



[ Bericht 47% gewijzigd door Mirel op 04-10-2009 21:21:40 ]
When all else fails, you always have delusion.
pi_73370314
als ik nou deze html heb:

1
2		<input type='radio' name='antwoord' value='".$antwoord->antwoordnr."' />
<p>".nl2br($antwoord->antwoord)."</p>


Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.

ongeveer zo dus:

o Dit is de tekst die over
   meerdere regels doorloopt
   maar op alle regels is
   geïndent.
Trotse poster van het 37000000ste bericht ^O^
  FOK!-Schrikkelbaas zondag 4 oktober 2009 @ 22:02:33 #51
1972 Swetsenegger
Egocentrische Narcist
pi_73374397
quote:
Op zondag 4 oktober 2009 21:06 schreef daReaper het volgende:
als ik nou deze html heb:
[ code verwijderd ]

Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.

ongeveer zo dus:

o Dit is de tekst die over
   meerdere regels doorloopt
   maar op alle regels is
   geïndent.
table?
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas zondag 4 oktober 2009 @ 22:08:24 #52
1972 Swetsenegger
Egocentrische Narcist
pi_73374790
quote:
Op woensdag 30 september 2009 17:05 schreef Roy_T het volgende:

[..]

Je verwart nu semantiek met de standaard rendering van browsers, terwijl ze niets met elkaar te maken hebben.
Nee ik zet mijn vraagtekens bij het indelen van een rij als lijst. Ik zou het dan nog eerder onder tabulaire data scharen (tab delimited).

Verder weet ik dat je uren slap kan lullen of het nu tussen <ul> tags moet met een berg CSS of gewoon een rijtje hrefs achter elkaar kan zetten waarbij het uiteindelijk voor de functionaliteit geen ruk uitmaakt.

Zolang ik een website heb die perfect rendert in IE7,8 firefox 3, safari 4, chrome en Opera 10 op 3 verschillende OS' EN goed geindexeerd wordt door google zal semantiek me voor dat rijtje links aan mijn reet roesten eigenlijk. Semantiek is mooi, maar laten we in godsnaam niet doorslaan en als we twee linkjes naast elkaar hebben dit gaan betitelen als 'lijst'. Kom op zeg.
 | FOK! Schrikkelbaasch
pi_73377455
quote:
Op zondag 4 oktober 2009 21:06 schreef daReaper het volgende:
als ik nou deze html heb:
[ code verwijderd ]

Hoe zorg ik er dan voor dat de tekst netjes naast de radiobutton komt te staan? In FF krijg ik het wel voor elkaar, maar IE wil absoluut niet wat ik wil.

ongeveer zo dus:

o Dit is de tekst die over
   meerdere regels doorloopt
   maar op alle regels is
   geïndent.
Die <p> een breedte meegeven en float:left geven misschien?
fokstok.nl
pi_73378243
quote:
Op zondag 4 oktober 2009 22:08 schreef Swetsenegger het volgende:

[..]

Nee ik zet mijn vraagtekens bij het indelen van een rij als lijst. Ik zou het dan nog eerder onder tabulaire data scharen (tab delimited).
Ik heb een zodanige afkeer van tabellen dat ik die dingen alleen gebruik als er geen andere oplossing is. Je kunt erover discussieren of het een lijst moet zijn, maar een tabel is wmb geen optie. Een tabel is niet fatsoenlijk te stylen. Of iig, ik heb er altijd ruzie mee. En ik durf te stellen dat ik wel enige CSS-kennis heb.
quote:
Verder weet ik dat je uren slap kan lullen of het nu tussen <ul> tags moet met een berg CSS of gewoon een rijtje hrefs achter elkaar kan zetten waarbij het uiteindelijk voor de functionaliteit geen ruk uitmaakt.
Het ligt natuurlijk ook aan het ontwerp of je wegkomt met een rijtje <a>'s achter elkaar.
quote:
Zolang ik een website heb die perfect rendert in IE7,8 firefox 3, safari 4, chrome en Opera 10 op 3 verschillende OS' EN goed geindexeerd wordt door google zal semantiek me voor dat rijtje links aan mijn reet roesten eigenlijk. Semantiek is mooi, maar laten we in godsnaam niet doorslaan en als we twee linkjes naast elkaar hebben dit gaan betitelen als 'lijst'. Kom op zeg.
Goed renderen en goed geindexeerd worden is idd ook belangrijk. Belangrijker dan de vraag of je twee linkjes wel of niet als lijst moet zien.
fokstok.nl
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 09:03:48 #55
1972 Swetsenegger
Egocentrische Narcist
pi_73383613
quote:
Op zondag 4 oktober 2009 23:09 schreef Light het volgende:

[..]

Ik heb een zodanige afkeer van tabellen dat ik die dingen alleen gebruik als er geen andere oplossing is. Je kunt erover discussieren of het een lijst moet zijn, maar een tabel is wmb geen optie. Een tabel is niet fatsoenlijk te stylen. Of iig, ik heb er altijd ruzie mee. En ik durf te stellen dat ik wel enige CSS-kennis heb.
In een semantische discussie is dat geen argument natuurlijk
quote:
Het ligt natuurlijk ook aan het ontwerp of je wegkomt met een rijtje <a>'s achter elkaar.
Uiteraard, als je echt 'knoppen' wil is het sowieso al handiger om een stijlbaar element te pakken.
quote:
Goed renderen en goed geindexeerd worden is idd ook belangrijk. Belangrijker dan de vraag of je twee linkjes wel of niet als lijst moet zien.
Dat is eigenlijk wat ik bedoel. Ik denk dat er de laatste jaren iets te strak gepredikt wordt met betrekking tot de 'tabellen zijn evil', 'STANDAARDEN VERDOMME!!!!' en 'Semantiek is King' discussies. Als jij met een simpel tabelletje crossbrowser precies dat kan doen wat je nodig hebt op jouw website moet je dat niet willen omzetten naar een ander, wellicht semantisch iets correcter, methode die bv weer meer styling nodig heeft.

Dus ja, probeer headers tussen de tags te zetten die ervoor bedoeld zijn, en vermijd tabellen voor opmaak en zet een doctype in je documenten. Maar verlies vooral niet uit het oog dat een website goed moet renderen voor een zo'n groot mogelijk publiek.
 | FOK! Schrikkelbaasch
  maandag 5 oktober 2009 @ 10:25:32 #56
87680 Mirel
Mirel wil een bongophone.
pi_73384973
achhhh

[ Bericht 95% gewijzigd door Mirel op 05-10-2009 10:40:24 ]
When all else fails, you always have delusion.
pi_73386515
quote:
Op maandag 5 oktober 2009 09:03 schreef Swetsenegger het volgende:

Als jij met een simpel tabelletje crossbrowser precies dat kan doen wat je nodig hebt op jouw website moet je dat niet willen omzetten naar een ander, wellicht semantisch iets correcter, methode die bv weer meer styling nodig heeft.
pi_73387250
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)

  maandag 5 oktober 2009 @ 12:00:12 #59
230788 n8n
Pragmatisch
pi_73387280
CSS
“Specialization is for insects”.—Robert Heinlein
pi_73387350
Ja dat was wel de bedoeling maar hoe?
  maandag 5 oktober 2009 @ 12:16:26 #61
230788 n8n
Pragmatisch
pi_73387676
quote:
Op maandag 5 oktober 2009 12:02 schreef woopehh het volgende:
Ja dat was wel de bedoeling maar hoe?
Wil het graag voor je uitvogelen, het lukt me nu alleen (niet meer) uit mn hoofd en ik zit op een openbare, alleen van een browser voorziene, computer.
“Specialization is for insects”.—Robert Heinlein
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 12:29:28 #62
1972 Swetsenegger
Egocentrische Narcist
pi_73387997
quote:
Op maandag 5 oktober 2009 11:29 schreef Roy_T het volgende:

[..]

Wat?
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 12:29:51 #63
1972 Swetsenegger
Egocentrische Narcist
pi_73388001
quote:
Op maandag 5 oktober 2009 11:58 schreef woopehh het volgende:
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)

[ afbeelding ]
met flow elementen.

Dus een relatief gepositioneerd header element met een vaste hoogte
dan 2 div's met left flow (of de linker flow:left; en de rechter flow:right;) en een overflow op de linker layer.
Dan een relatief gepositioneerde footer (vergeet de clear:both niet in de CSS)
 | FOK! Schrikkelbaasch
pi_73388085
quote:
Op maandag 5 oktober 2009 12:29 schreef Swetsenegger het volgende:

[..]

met flow elementen.

Dus een relatief gepositioneerd header element met een vaste hoogte
dan 2 div's met left flow (of de linker flow:left; en de rechter flow:right;) en een overflow op de linker layer.
Dan een relatief gepositioneerde footer (vergeet de clear:both niet in de CSS)
Flow elementen??

Oja nog vergeten.. het totaal moet dus 100% height zijn..
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 12:36:19 #65
1972 Swetsenegger
Egocentrische Narcist
pi_73388129
quote:
Op maandag 5 oktober 2009 12:33 schreef woopehh het volgende:

[..]

Flow elementen??
1
2
3
4
5
6
7
8
9
10
11		.left{
   flow:left;
   height:500px;
   width:25%;
}

.right{
   flow:left;
   height:500px;
   overflow:auto;
}
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 12:37:06 #66
1972 Swetsenegger
Egocentrische Narcist
pi_73388155
quote:
Op maandag 5 oktober 2009 12:33 schreef woopehh het volgende:
Oja nog vergeten.. het totaal moet dus 100% height zijn..
Ah, DAT vertelde je er niet bij. 100% height van het canvas ga je niet redden zonder nasty hacks of met.... tabellen.
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 12:43:47 #67
1972 Swetsenegger
Egocentrische Narcist
pi_73388409
quote:
Op maandag 5 oktober 2009 12:37 schreef Swetsenegger het volgende:

[..]

Ah, DAT vertelde je er niet bij. 100% height van het canvas ga je niet redden zonder nasty hacks of met.... tabellen.
Ja, vrij essentieel inderdaad en bedacht me iets te laat dat dat niet echt duidelijk werd in de tekening.

Bedoel je niet float ipv flow trouwens?
pi_73388532
Denk 't ook , flow bestaat niet
pi_73388568
Weet er iemand trouwens wel een manier om het zonder quirksmode aan te zetten voor elkaar te krijgen? Liever wat hackjes dan dat of tabellen/frames :p
pi_73395332
quote:
Op maandag 5 oktober 2009 12:29 schreef Swetsenegger het volgende:

Wat?
Dat iedereen vooral een eigen mening moet hebben, maar die instelling is tegenwoordig toch echt niet meer overeind te houden in de beroepspraktijk (ja, ik weet het, dit is een hobbyforum).
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 19:11:39 #72
1972 Swetsenegger
Egocentrische Narcist
pi_73400018
quote:
Op maandag 5 oktober 2009 12:47 schreef woopehh het volgende:

[..]

Ja, vrij essentieel inderdaad en bedacht me iets te laat dat dat niet echt duidelijk werd in de tekening.

Bedoel je niet float ipv flow trouwens?
Ja
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 19:12:29 #73
1972 Swetsenegger
Egocentrische Narcist
pi_73400044
quote:
Op maandag 5 oktober 2009 16:49 schreef Roy_T het volgende:

[..]

Dat iedereen vooral een eigen mening moet hebben, maar die instelling is tegenwoordig toch echt niet meer overeind te houden in de beroepspraktijk (ja, ik weet het, dit is een hobbyforum).
Dus je denkt dat de gemiddelde commerciele ontwikkelaar voor 5 linkjes liever een stuk css ontwikkeld dan gewoon 5 linkjes achter elkaar zet als er geen 'knop' idee noodzakelijk is? Ik denk van niet en ik geef 'm groot gelijk.
 | FOK! Schrikkelbaasch
  maandag 5 oktober 2009 @ 19:15:44 #74
230788 n8n
Pragmatisch
pi_73400205
Gelukkig zijn er specifieke navigatie-elementen in HTML5
“Specialization is for insects”.—Robert Heinlein
pi_73400956
Voordat HTML 5 overal ondersteund wordt zijn we wel weer een tijdje verder..
Al werk ik nu ook niet in HTML 4 maar in XHTML 1 dus waarschijnlijk ga ik eerder over op XHTML 2.

Ik persoonlijk ben gewoon iemand die er van houdt net werk af te leveren, dus ik werk graag semantisch en met Doctype Strict en alles ook valid. Maar goed, ik ben hiervoor opgeleid, heb hier plezier in en mijn werkgever hecht hier ook erg veel waarde aan.
Moet zeggen dat als bijv front enden je beroep is, dat dit toch echt wel aspecten zijn die een hedendaagse werkgever van je verwacht hoor. Je zal er raar van opkijken.
pi_73401251
quote:
Op maandag 5 oktober 2009 19:12 schreef Swetsenegger het volgende:

Dus je denkt dat de gemiddelde commerciele ontwikkelaar voor 5 linkjes liever een stuk css ontwikkeld dan gewoon 5 linkjes achter elkaar zet als er geen 'knop' idee noodzakelijk is? Ik denk van niet en ik geef 'm groot gelijk.
Sterker nog: dat weet ik wel zeker.
pi_73401447
quote:
Op maandag 5 oktober 2009 12:53 schreef woopehh het volgende:
Weet er iemand trouwens wel een manier om het zonder quirksmode aan te zetten voor elkaar te krijgen? Liever wat hackjes dan dat of tabellen/frames :p
Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).

Height zou ook min-height kunnen zijn, dat weet ik niet zeker meer. Als je menu en content een andere achtergrond wilt geven, moet je eens zoeken op faux columns.

--
Oh, ik lees nu dat de content-div een scrollbalk moet krijgen bij teveel tekst. Punt 1, dat wil je niet.
Als je het toch doet, zul je waarschijnlijk naar javascript moeten grijpen om de hoogte van de content-div in te stellen. Met alleen css ga je dat niet redden, voor zover ik weet althans.
fokstok.nl
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 20:11:14 #78
1972 Swetsenegger
Egocentrische Narcist
pi_73402799
quote:
Op maandag 5 oktober 2009 19:37 schreef Roy_T het volgende:

[..]

Sterker nog: dat weet ik wel zeker.
Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?
 | FOK! Schrikkelbaasch
  FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 20:18:26 #79
1972 Swetsenegger
Egocentrische Narcist
pi_73403092
quote:
Op maandag 5 oktober 2009 19:31 schreef snkr-xxx het volgende:
Voordat HTML 5 overal ondersteund wordt zijn we wel weer een tijdje verder..
Al werk ik nu ook niet in HTML 4 maar in XHTML 1 dus waarschijnlijk ga ik eerder over op XHTML 2.

Ik persoonlijk ben gewoon iemand die er van houdt net werk af te leveren, dus ik werk graag semantisch en met Doctype Strict en alles ook valid. Maar goed, ik ben hiervoor opgeleid, heb hier plezier in en mijn werkgever hecht hier ook erg veel waarde aan.
Moet zeggen dat als bijv front enden je beroep is, dat dit toch echt wel aspecten zijn die een hedendaagse werkgever van je verwacht hoor. Je zal er raar van opkijken.
Semantiek is simpelweg voor interpretatie vatbaar. En een website hooft echt niet semantisch correct te zijn om te valideren.
 | FOK! Schrikkelbaasch
pi_73406217
quote:
Op maandag 5 oktober 2009 19:40 schreef Light het volgende:

[..]

Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).

Height zou ook min-height kunnen zijn, dat weet ik niet zeker meer. Als je menu en content een andere achtergrond wilt geven, moet je eens zoeken op faux columns.

--
Oh, ik lees nu dat de content-div een scrollbalk moet krijgen bij teveel tekst. Punt 1, dat wil je niet.
Als je het toch doet, zul je waarschijnlijk naar javascript moeten grijpen om de hoogte van de content-div in te stellen. Met alleen css ga je dat niet redden, voor zover ik weet althans.
Nog een reden die ik aan kan dragen voor het niet willen van die scrollbalk? (Het is niet voor mezelf)
  maandag 5 oktober 2009 @ 21:39:40 #81
230788 n8n
Pragmatisch
pi_73406962
quote:
Op maandag 5 oktober 2009 11:58 schreef woopehh het volgende:
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)

[ afbeelding ]
Het kan wel:



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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179		HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">

<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Work in progress.</title> 
   <link rel="stylesheet" href="default.css" type="text/css" media="screen"/>
</head> 

<body>
   
   <div id="header">
   
   
   
   </div><!-- einde #header -->
   
   <div class="navigation container">

      <div id="navigation">
      
         <ul>
            <li>Optie 05</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
         </ul>
   
   
   
      </div><!-- einde #navigation -->
   </div><!-- einde .navigation container -->
   
   <div class="content container">

      <div id="content">
   
         <p>
         Horem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
   
      </div><!-- einde #content -->
   </div><!-- einde .content container -->
   
   <div id="footer">
   
   
   
   </div><!-- einde #footer -->

</body> 

</html> 


CSS


/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0 none;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   line-height: 1.6;
   font-family: inherit;
   text-align: left;
   vertical-align: baseline;
}

a img, :link img, :visited img {
   border: 0 none;
}

ol, ul {
   list-style: none;
}

a {
   text-decoration: none;
   border: 0 none;
}

body {
   font-family: Helvetica, Arial;
   font-size: 62.5%;
}

/* DIV BASICS */

body {
   height: auto;
   width: 100%;
   background: yellow;
}

#header {
   height: 200px;
   width: 100%;
   background: black;
   position: fixed;
   background: red;
   z-index: 5;
}

#navigation, #content {
   width: 100%;
   height: auto;
   position: absolute;
   margin: 200px 0 0 0;
   padding: 0 0 20px 0;
   z-index: 0;
}

.navigation, .content {
   height: auto;
   position: absolute;
}
   
.navigation {   
   width: 25%;   
   margin: 0 75% 0 0;
}

.content {
   width: 75%;
   margin: 0 0 0 25%;
}

#footer {
   background: green;
   height: 20px;
   width: 100%;
   position: fixed;
   top: 100%;
   margin: -20px 0 0 0;
}

/* DIV SPECIFICS */

#content {
   
}

/* ETC. */


Getest onder Safari 4, Opera 10 & Firefox 3.5
En ja ik gebruik een reset css maar dat is een andere discussie
“Specialization is for insects”.—Robert Heinlein
pi_73408592
quote:
Op maandag 5 oktober 2009 21:39 schreef n8n het volgende:

[..]

Het kan wel:

[ afbeelding ]
[ code verwijderd ]

Getest onder Safari 4, Opera 10 & Firefox 3.5
En ja ik gebruik een reset css maar dat is een andere discussie
Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.
  maandag 5 oktober 2009 @ 22:20:03 #83
230788 n8n
Pragmatisch
pi_73408766
quote:
Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:

[..]

Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.
Trekken 7 en 8 'm ook niet dan, want dat is wel zorgelijk
“Specialization is for insects”.—Robert Heinlein
  dinsdag 6 oktober 2009 @ 10:27:57 #84
230788 n8n
Pragmatisch
pi_73417646
Kan iemand trouwens ff een screenshot onder IE7/8 produceren? Heb er nu zelf geen mogelijkheid toe en ben wel benieuwd
“Specialization is for insects”.—Robert Heinlein
pi_73418063
quote:
Op dinsdag 6 oktober 2009 10:27 schreef n8n het volgende:
Kan iemand trouwens ff een screenshot onder IE7/8 produceren? Heb er nu zelf geen mogelijkheid toe en ben wel benieuwd
is browsershots.org down dan?
  dinsdag 6 oktober 2009 @ 10:51:39 #86
230788 n8n
Pragmatisch
pi_73418225
quote:
Op dinsdag 6 oktober 2009 10:44 schreef Dhr.Donder het volgende:

[..]

is browsershots.org down dan?
Kan op mijn eigen computer niet van internet gebruik maken en op deze geen website hosten, mede omdat de ftp-poort geblokkerd is
“Specialization is for insects”.—Robert Heinlein
pi_73418728
quote:
Op maandag 5 oktober 2009 20:11 schreef Swetsenegger het volgende:

Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?
Jij stelt een vraag, ik geef antwoord. Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.

Semantiek is zoveel meer belangrijker dan validatie, etc. Als je dat niet wilt snappen, prima. Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).
pi_73419514
quote:
Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:

Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).
...En dan toch doen heh..
pi_73422568
quote:
Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:

[..]

Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.
Haha ja het was dus wél de bedoeling dat het in ie6 zou werken
pi_73422759
quote:
Op dinsdag 6 oktober 2009 13:37 schreef woopehh het volgende:

[..]

Haha ja het was dus wél de bedoeling dat het in ie6 zou werken
Dan ook een tip voor jou: maak je site zo dattie perfect werkt in standard-compliant browsers en IE7 en IE8, en zorg dat'ie in IE6 opzich wel bruikbaar, maar heb schijt aan glitches en layout-imperfecties.
  woensdag 7 oktober 2009 @ 21:56:45 #91
164509 Banzaiaap
Tony Rocky Horror
pi_73471289
Verdorie, dacht dat ik wel wat wist van CSS maar het schiet hier nu een beetje te kort.

http://youtubehd.banzaidesign.nl

De box rechtsonderin, met de "Want to Share?" header erboven, zit naar beneden verschoven. Why?

Niet in IE getest, dus gewoon lekker in Firefox of Safari openen.
  FOK!-Schrikkelbaas woensdag 7 oktober 2009 @ 22:29:19 #92
1972 Swetsenegger
Egocentrische Narcist
pi_73472550
quote:
Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:

[..]

Jij stelt een vraag, ik geef antwoord.
Retorische vragen ontgaan je blijkbaar.
quote:
Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.
Dat was dan ook geen punt van mij
quote:
Semantiek is zoveel meer belangrijker dan validatie, etc. Als je dat niet wilt snappen, prima.
Wijs me even aan waar ik precies zeg dat semantiek uberhaupt NIET belangrijk is? Ik zeg dat semantiek
a. voor interpretatie vatbaar is
b. je door kan slaan in je semantische dwangneurose.
quote:
Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).
En als jij niet wil snappen dat het gewoon voor kan komen dat je 5 linkjes achter elkaar zet omdat je... 5 linkjes nodig hebt zonder dat je daar een lijst omheen gaat bouwen INCLUSIEF css omdat ik anders simpelweg 5 linkjes onder elkaar krijgt in plaats van naast elkaar zoals het bedoeld was hoef ik je niet uit te leggen dat er zoiets bestaat als rendement.
 | FOK! Schrikkelbaasch
pi_73476545
quote:
Op woensdag 7 oktober 2009 21:56 schreef Banzaiaap het volgende:
Verdorie, dacht dat ik wel wat wist van CSS maar het schiet hier nu een beetje te kort.

http://youtubehd.banzaidesign.nl

De box rechtsonderin, met de "Want to Share?" header erboven, zit naar beneden verschoven. Why?

Niet in IE getest, dus gewoon lekker in Firefox of Safari openen.
Omdat #sidebar ul in de weg staat.

Had je deze nog niet?
  donderdag 8 oktober 2009 @ 10:09:12 #94
164509 Banzaiaap
Tony Rocky Horror
pi_73479196
quote:
Op donderdag 8 oktober 2009 02:32 schreef Dhr.Donder het volgende:

[..]

Omdat #sidebar ul in de weg staat.

Had je deze nog niet?
Okee even kijken, die heb ik wel hoor, maar zelfs daarmee kon ik het niet vinden..
  maandag 12 oktober 2009 @ 17:38:33 #95
164509 Banzaiaap
Tony Rocky Horror
pi_73616705
Hmm, waarom krijgt de OL in de comments div geen hoogte door de content die er in zit?

http://youtubehd.banzaidesign.nl/gymkhana-awesome/

Hij collapsed nu gewoon die hele div..
pi_73616868
Zonder te kijken: je zal de li's vast floaten
pi_73617085
quote:
Op maandag 12 oktober 2009 17:38 schreef Banzaiaap het volgende:
Hmm, waarom krijgt de OL in de comments div geen hoogte door de content die er in zit?

http://youtubehd.banzaidesign.nl/gymkhana-awesome/

Hij collapsed nu gewoon die hele div..
Omdat je alle elementen uit de natuurlijke float haalt.

element met clear:both eronder knallen, of de parent overflow:hidden geven, heeft als side-effect het zelfde resultaat.
  maandag 12 oktober 2009 @ 21:26:32 #98
164509 Banzaiaap
Tony Rocky Horror
pi_73626382
Gelukt!! Nu nog die crossbrowser rommel opruimen. Ik durf em niet eens in Internet Explorer te openen.
  dinsdag 13 oktober 2009 @ 10:31:11 #99
164509 Banzaiaap
Tony Rocky Horror
pi_73640270
Ik klop hier nog maar een keer aan. Laatste keer, hopelijk. Als je op de pagina van een video kijkt, zijn alle div's niet opgevuld in de achtergrond. Dit gebeurt sowieso in IE 7.

http://www.youtubehd.nl/2009/10/8-bit-trip/
pi_73643055
Weet iemand waarom met onderstaande code, mijn <div id='top'> niet gewoon blijft zweven bovenin?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#top {
   display: block;
   position: fixed;
   top: 10px;
   left: 10px;
   height: 40px;
   z-index: 999;
   background-color: red;
   border:1px solid black;         

   }

#content {
    Position: relative;     
}


mijn "top" div scrolled nu gewoon mee, en dat is niet de bedoeling :P

Op mijn blackberry gaat dit wel goed, onder Chrome wisselend, en in IE8 doet hij het niet .. De website is voor mobiele layout, dus enkel IE die niet mee werkt is geen ramp.

Ah, en de zwevende balk "trilt" bij het scrollen op mn blackberry, is dat te verhelpen? :) Alvast dank!
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 13
Index

» digital corner

» development

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