[CSS] voor dummies - deel 6

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_47523191
Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 21 maart 2007 @ 22:31:41 #102
12880 CraZaay
prettig gestoord
pi_47529820
quote:
Op woensdag 21 maart 2007 19:57 schreef SuperRembo het volgende:
Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.
Die milliseconden zullen ze toch wel overleven?
pi_47533160
@CraZaay;

Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan maar goed, je moet er wat voor over hebben. Tevens is het nu volgens mij aardig CSS/XHTML gemaakt en zal morgen de puntjes op de I zetten.

Voorbeeld:
Oude: http://startpagina.bruggema.nl/index2.php
Nieuwe: http://startpagina.bruggema.nl/index.php

Zie't verschil
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  woensdag 21 maart 2007 @ 23:49:34 #104
12880 CraZaay
prettig gestoord
pi_47533356
quote:
Op woensdag 21 maart 2007 23:44 schreef Chandler het volgende:
Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan
Qua PHP bedoel je? Dat zou normaliter toch echt niet merkbaar moeten zijn volgens mij.

Anders gebruik je een MVC-framework als CodeIgniter ofzo? Zit standaard caching in en dan heb je nog fatsoenlijke "templating" ook (views dus). Maar da's redelijk off topic hier

En de nieuwe is echt stukken beter dan de oude!
pi_47533448
Ja de scripting tijd is door het gebruik maken van templates behoorlijk naar beneden gegaan *5 maar toch ben ik blij dat ik het met mijn eigen template engine kon realiseren!. Tevens ziet de code er eindelijk uit zoals het er uit moet zien (HTML/CSS code) of heb je nog opmerkingen?

Je mag als je tijd hebt, beide sources wel inzien hoor

-edit-
tnx voor je toevoeging, vond het er zelf ook al stukken duidelijker en overzichtelijker uitzien, en sterker nog; het scheelt ook in de kb's
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  woensdag 21 maart 2007 @ 23:55:10 #106
12880 CraZaay
prettig gestoord
pi_47533535
quote:
Op woensdag 21 maart 2007 23:51 schreef Chandler het volgende:
Je mag als je tijd hebt, beide sources wel inzien hoor
Mijn laatste opmerking was op basis van de sources

Weer off topic, maar waarom wil je per se je eigen template engine gebruiken? Heb je ooit van MVC gehoord of eens gekeken op www.codeigniter.com (vergelijkbaar met CakePHP maar dan met documentatie, beide qua structuur gebaseerd op Rails)? Ik heb dit al vaker geroepen op Fok, maar de PHP'ers hebben hier nooit oren naar (waarschijnlijk omdat ze altijd zelf dingen brouwen en niet bekend zijn met dergelijke concepten).
pi_47534439
Op basis van de HTML sources ja

Maar dat terzijde en nog even offtopic

Inderdaad heb ik er weinig intresse in om andere zaken te gaan gebruiken dan dat ik reeds heb, want natuurlijk is het leuk om een ander produkt te gaan benutten maar wat brengt het allemaal met zich mee? ik heb het nog niet ingezien hoor, dus praat misschien wel onwaarheden. Maar vaak zitten er ook ogen, haken en naalden aan en dat soort zaken zijn nou eenmaal niet gemakkelijk op te lossen als een produkt door iemand anders geschreven wordt (heb vaak van andere script fouten moeten fixen, en eigen werk is 1000x gemakkelijker

Tevens roept men ook zo vaak (bv) gebruik toch Smarty, nou ik heb niets met smarty, heb het al vaker geprobeerd te gebruiken maar helaas kreeg ik niet (snel) het resultaat dat ik in mijn hoofd had en wilde behalen en dat lukte me wel met mijn simpele template parser. Maar goed... Ik zal morgen eens wat meer interesse steken in de applicaties waar je zelf nogal van onder de indruk bent, misschien als ik er even wat tijd in steek dat ik ook geintresseerd raak
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 22 maart 2007 @ 08:52:34 #108
12880 CraZaay
prettig gestoord
pi_47537655
Smarty is gewoon een template engine, ik heb het over MVC-frameworks. Maar ik begrijp dat je hier niet bekend mee bent Voor andere talen is het heel gangbaar om dergelijke "door anderen gemaakt werk" te gebruiken, zoals in Ruby on Rails, Java, etc. PHP is immers ook gewoon door anderen gemaakt zonder dat je door invloed op hebt.

Ik ben overigens niet heel erg onder de indruk van de diverse PHP-frameworks, maar het is as good as it gets met PHP ben ik bang. Ik ontwikkel verder alleen nog maar op basis van Ruby on Rails (en wat PHP voor die ene klant die dat per se nodig heeft ).

Maar laten we dit voortzetten in het PHP topic (daar lurk ik ook nog wel mee)
pi_47547291
Is het mogelijk om met css in een formulier radiobuttons en checkboxes een style te geven? Vooral de background color?
Google had wel wat oplossingen maar dan werden het hidden inputs icm javascript en dat wil ik niet.
-
pi_47547484
Van checkboxes en radiobuttons kun je alleen de 'achtergrond kleur' en 'border' stijlen (natuurlijk ook padding etc) maar daar houdt het ook mee op...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_47547617
Ik heb het even met internet explorer geprobeerd en daar werkt het wel, firefox1.5 helaas niet.
Nouja pech dan.
Mijn file upload is ook niet gestyled.
-
  donderdag 22 maart 2007 @ 14:49:24 #112
12880 CraZaay
prettig gestoord
pi_47548128
Van radiobuttons en checkbox kun je helaas alleen de achtergrondkleur (+ al het andere) achter het rondje/vierkantje stylen, dus niet die krengen zelf.

Anders wordt het inderdaad Javascript. Ook een optie natuurlijk
  woensdag 28 maart 2007 @ 20:43:26 #113
74523 BaggerUser
ModderFokker!
pi_47763992
html:
1
2
3
4
5
6
7
8
9
10
11
12
13		         <div id="navigatie">
            <table>
               <tr>
                  <td>LOGIN</td>
                  <td class="split"><img src="bestanden/split.gif" /></td>
                  <td class="text">JANJAAP</td>
                  <td class="split"><img src="bestanden/split.gif" /></td>
                  <td class="text">PETERSEN</td>
                  <td class="split"><img src="bestanden/split.gif" /></td>
                  <td class="text">KLAASEN</td>
               </tr>
            </table>
         </div>


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		#menu {
text-align: right;
margin: 38px 10px 0 0;
line-height: 1.3;
color: #007204;
}

#navigatie {
height: 38px;
width:500px;
float:left;

}

#navigatie td{
float:left;
width:70px;
display:block;

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #B3B3B3;

}

#navigatie .split {
width:3px;
}

#navigatie .tekst {

}


geeft links in firefox en rechts in ie


De streepjes staan in FF goed.. (dus tegen de bodem aan) maar de tekst staat in ie goed (verticaal gecentreerd) iemand enige idee hoe ik dit goed krijg?

had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben

8)7 krijg dr hoofdpijn van
De enige echte BaggerUser!
Riemen
fiets kopen
pi_47768578
quote:
Op woensdag 28 maart 2007 20:43 schreef BaggerUser het volgende:
had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben
Dan kan je dat plaatje als background op de list items zetten.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  woensdag 28 maart 2007 @ 23:05:06 #115
74523 BaggerUser
ModderFokker!
pi_47771793
quote:
Op woensdag 28 maart 2007 22:08 schreef SuperRembo het volgende:

[..]

Dan kan je dat plaatje als background op de list items zetten.
dat is nog eens een idee
gelukt (alsnog na wat moeite met uitlijning)

* BaggerUser helemaal blij is
De enige echte BaggerUser!
Riemen
fiets kopen
  woensdag 28 maart 2007 @ 23:37:06 #116
12880 CraZaay
prettig gestoord
pi_47773486
quote:
Op woensdag 28 maart 2007 23:05 schreef BaggerUser het volgende:

* BaggerUser helemaal blij is
Mooi. En de volgende keer als iets ff niet lukt niet naar tabellen grijpen; als anderen het zonder kunnen, kun jij het ook
pi_48086695
Vraagje

Ik heb een stukje html/php en CSS getypt, maar ik weet geen oplossing voor het volgende:
Ik heb een flinke header, waarvan eigenlijk alleen het bovenste gedeelte de header is, en het stuk eronder een gradient is die rustig overgaat in een andere kleur. Op die gradient moet de content van de pagina al beginnen, en die moet overgaan op een stuk met een andere background. Volgt u het nog? Hoe los je zoiets op? stapel divjes en layeren maar? En kan dat, met een achtergrond van 1px hoog die uitgerekt/herhaald wordt?
pi_48087444
Een achtergrond van 1 pixel hoog maken is goed mogelijk en best handig zelfs. Je kan dan het volgende in je CSS zetten:

1
2
3		#ding {
background-image:url(images/plaatje.gif);
background-repeat:repeat-y; }


Je kan bij de repeat kiezen uit:
  • no-repeat
  • repeat
  • repeat-x
  • repeat-y

    Alles spreekt voor zich en de 'repeat' betekend dat in zowel de x als de y richting wordt herhaald.
    • pi_48087481
    En die overlopende header kan je inderdaad oplossen door 2 divjes over elkaar heen te positioneren en ze een verschillende z-index mee te geven.
    pi_48088560
    Dan heb ik dus op de onderste laag een divje met de headerbackground en een divje met de andere background van 1px hoog, en daar 'overheen' leg ik een divje met de grootte van alleen de header en eentje waar de content komt?
    Resized dat onderste divje van de onderste laag (volgen we het nog ) dan ook mee, zodat die background dus blijft repeaten?
    pi_48089028
    Ik weet niet precies hoe je de pagina wilt hebben. In ieder geval kun je wel die twee header divjes samennemen, je hoeft niet een aparte div voor background en content te hebben.

    De herhalende achtergrond hoeft misschien ook niet in een eigen div, als je die aan de body toevoegd.

    De content komt wel in een eigen div, die deels over de header div heen ligt met een hogere z-index.
    pi_48089183
    Ik heb het even prachtig gevisualiseerd:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23    		------------------------------------------------
    |                    HEADER                    |
    |                                              |
    |                    HEADER                    |
    |---------------------------------------------||
    || CONTENT                            CONTENT ||
    ||                                            ||
    ||                                            ||
    ||                                            ||
    ||                                            ||
    || CONTENT                            CONTENT ||
    -|--------------------------------------------|-
     |                                            |
     |                                            |
     |                                            |
     |                                            |
     | CONTENT                            CONTENT |
     |                                            |
     |                                            |
     |                                            |
     |                                            |
     | CONTENT                            CONTENT |
     ----------------------------------------------


    De HEADER is dus 1 grote div waarin de achtergrond en de inhoud van de header zit.

    De CONTENT is een eigen div, die deels over de HEADER heen van, zodat de background van de HEADER zichtbaar is achter de content.

    De pagina-achtergrond kan je eventueel, afhankelijk van je design, nog achter de content zetten, of toevoegen aan de body.
    pi_48091211
    Ik ga er morgen eens mee aan de slag, dank voor de uitleg en de prachtige visualisatie!
    pi_48094720
    Tot zover werkend, dankjewel!
    Alleen zit ik nu nog met een footer, hoe doe je dat? .
    pi_48102927
    quote:
    Op vrijdag 6 april 2007 22:28 schreef veldmuis het volgende:
    Tot zover werkend, dankjewel!
    Alleen zit ik nu nog met een footer, hoe doe je dat? :P.
    Op mijn eigen site heb ik een container div gemaakt, waar de HEADER, CONTENT en FOOTER in zitten. De footer positioneer ik dan als volgt:

    1
    2
    3    		#footer {
    position: absolute;
    bottom:-50px; }


    -50px kwam voor mij mooi uit, maar je kan met de bottom waarde dus een element positioneren ten opzichte van de onderkant van z'n parent (de container).
    pi_48104134
    Danku, maar het werkt niet! ;(.
    Ik zal de code er eens bij pakken:

    1
    2
    3
    4
    5
    6
    7    		 <div id="wrapper">
      <div id="header"></div>
       <div id="midden">
    content kan hier enzo, dat werkt dus, zolang het maar voldoende content is
       </div>
       </div>   
     </body>


    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    		#wrapper {
    position:absolute;
    width: 454px;;
    top: 30px;
    left: 50%;
    margin-left: -227px;
    }

    #header {
    position:absolute;
    width: 454px;
    height:332px;
    margin: 0em auto;
    background-image:url(backheader.png);
    background-repeat:no-repeat;
    z-index:1;
    }

    #midden {
    position:absolute;
    width: 454px;
    margin: 0em auto;
    background-image:url(backmidden.png);
    background-repeat:repeat-y;
    z-index:2;
    top:100px;
    }


    Daar zou dan een footer onder moeten, maar dat gaat niet op die manier.
    De footer onder dat midden-ding hangen werkt niet:
    In het geval van te weinig content hangt dat ding ergens in de header,
    Als er wel voldoende content is gaat de background van het middenstuk onder de background van de footer staan, en aangezien die gedeeltelijk transparant is is dat niet netjes. Niet transparant maken is een fijne workaround voor nu, maar een nettere oplossing is welkom :).
    pi_48114521
    Iemand? .
    pi_48114824
    Er is een methode om je footer het volgende te laten doen: als er voldoende content is zit de footer onderaan de content, is er onvoldoende content dan zit de footer onderaan het scherm.

    Alleen die code kan ik nu even niet bij .
    pi_48114889
    quote:
    Op zaterdag 7 april 2007 18:23 schreef HuHu het volgende:
    Er is een methode om je footer het volgende te laten doen: als er voldoende content is zit de footer onderaan de content, is er onvoldoende content dan zit de footer onderaan het scherm.

    Alleen die code kan ik nu even niet bij .
    Het moet niet onderaan het scherm zijn he, maar direct onder de header, met dus nog witruimte eronder. Weet niet of dat ook kan met die code, maar als dat kan ben ik er erg benieuwd naar .
    pi_48115152
    Dat gaat daarmee niet. Hetzelfde probleem heb ik ook eens gehad. Je kan het prachtig oplossen door de min-height te gebruiken in je CSS. Die stel je dan zo in dat je content minimaal voorbij je header komt. Alleen IE ondersteunt dat niet .

    Een oplossing die ik heb gebruikt is om ervoor te zorgen dat je content nooit te klein wordt. Dus als hij toch te klein is, dan stop je het in een extra div die er voor zorgt dat de pagina wordt opgerekt naar de minimale hoogte.

    Dat werkt goed bij statische pagina's, waarbij je van te voren kunt zien hoe hoog hij moet worden. Als de content dynamisch erin wordt gezet gaat het lastig.
    pi_48115287
    Er is wel een min-height CSS hack voor IE:

    http://www.dustindiaz.com/min-height-fast-hack

    Dan kan je dus een min-height aan je content div gooien, zodat deze nooit te klein wordt. En dan hang je de footer gewoon onder de content.
    pi_48117597
    mmmmm
    CSS is dus hier niet Counter-Strike Source
    Lucidity4All
    pi_48117964


    Het zijn Cascading Style Sheets. Voor jou CSS moet je in Games & Consoles wezen.
    pi_48119248
    thanks, ik peer em al
    Lucidity4All
    pi_48230108
    Ik heb mijn hyperlinks donkergrijs, echter wil ik de hyperlinks die in een table-header (<th>) staan wit hebben.

    Zowel "a" als "th" heb ik een eigen onderdeeltje in mijn stylesheet gegeven, moet ik nu iets als "th #a" doen?
    pi_48231028
    1
    2    		a { color: wit; }
    th a { color: donker-grijs; }
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_48231678
    Achteraf gezien enorm simpel dus

    Bedankt!
      woensdag 11 april 2007 @ 21:58:45 #138
    12880 CraZaay
    prettig gestoord
    pi_48234291
    quote:
    Op woensdag 11 april 2007 20:34 schreef Geqxon het volgende:
    Ik heb mijn hyperlinks donkergrijs, echter wil ik de hyperlinks die in een table-header (<th>) staan wit hebben.

    Zowel "a" als "th" heb ik een eigen onderdeeltje in mijn stylesheet gegeven, moet ik nu iets als "th #a" doen?
    # is voor id's:

    "a" -> HTML element
    "#a" -> element met id 'a'
    ".a" -> element met class 'a'
    pi_48234729
    Zo ver gaat mijn kennis nog wel, ik gokte puur wat. Maar alsnog bedankt
      woensdag 11 april 2007 @ 22:22:05 #140
    12880 CraZaay
    prettig gestoord
    pi_48235609
    quote:
    Op woensdag 11 april 2007 22:06 schreef Geqxon het volgende:
    Zo ver gaat mijn kennis nog wel, ik gokte puur wat. Maar alsnog bedankt
    Graag gedaan. Beetje aparte gok als je weet dat een element iets anders dan een id op een element, maar dat terzijde
    pi_48235919
    Pest me maar hoor

    Ik had gewoon even een stil moment tussen mijn oren, vandaag iets teveel gewerkt
    pi_48240620
    WTF IE (6) probleem.

    Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.

    Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:


    Hoe komt dit? :S
      donderdag 12 april 2007 @ 09:12:35 #143
    12880 CraZaay
    prettig gestoord
    pi_48245028
    Je kan je afvragen of dit geen tabullaire data is natuurlijk, al lost dit je probleem niet op
    pi_48245246
    quote:
    Op donderdag 12 april 2007 09:12 schreef CraZaay het volgende:
    Je kan je afvragen of dit geen tabullaire data is natuurlijk, al lost dit je probleem niet op
    Ja, het is ook tabulaire data dus in feite 'mag' ik er een tabel voor gebruiken. Maar zoals ik al zei, is de rest van de pagina ook mooi tableless en conform de XHTML/CSS normpjes en 't ziet er leuker uit als je de pagina zonder stylesheet bekijkt. Tabellen met meer dan 2 kolommen zijn gewoon slordig zonder stylesheet.
      donderdag 12 april 2007 @ 15:10:28 #145
    12880 CraZaay
    prettig gestoord
    pi_48256945
    Wat mij betreft is die gedachtengang net zo erg als tabellen gebruiken voor lay-out. Je wilt nu koste wat kost geen tabellen gebruiken voor lay-out (lay-out zonder styling), terwijl het om de structuur gaat in de HTML. En binnen die structuur zou dit wat mij betreft gewoon in een tabel thuis horen. En dat is dan nog meer conform de HTML/CSS normpjes ook
    pi_48257823
    Hmm, gaat me voornamelijk om hoe 't er zonder stylesheet uitziet, en als ik deze gegevens (waaronder een hoop imagelinks) in een tabel zet ziet het er gewoon rommelig uit. Qua structuur/semantiek maakt dit niks uit. Ik MAG er volgens de normen immers voor kiezen om dit in een tabel te proppen want het is in feite een beetje tabulaire data, maar kijk voor de lol eens in Mozilla met uitgeschakelde paginastijl. Deze structuur die je hier voor de Nieuwe boeken gebruikt ziet worden gaat later nog op héél véél pagina's op de site terug komen (boekenlijsten, striplijsten, reeksen, series, zoekresultaten, enz.) dus ik wil gewoon dat het mooi uitziet en werkt, niet dat de pagina zonder stylesheet gigantisch onoverzichtelijk is.
    pi_48258003
    Wat ik mij af vroeg is of een zoekformulier dan ook tabulaire data is?
    pi_48260002
    Zoekresultaten mogelijk wel, afhankelijk van de data die geretourneerd word. Maar een daadwerkelijk zoekformulier meestal niet hoor.
      donderdag 12 april 2007 @ 17:51:12 #149
    12880 CraZaay
    prettig gestoord
    pi_48261795
    Ik snap het niet Tuvai.net. Kun je me eerst eens uitleggen waarom het er zonder CSS goed uit moet zien (voor zover dat kan)?
    pi_48262499
    quote:
    Op donderdag 12 april 2007 17:51 schreef CraZaay het volgende:
    Ik snap het niet Tuvai.net. Kun je me eerst eens uitleggen waarom het er zonder CSS goed uit moet zien (voor zover dat kan)?
    Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.

    Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
    pi_48263853
    quote:
    Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
    WTF IE (6) probleem.

    Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.

    Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
    [afbeelding]

    Hoe komt dit? :S
    Misschien zijn er tags niet goed afgesloten?
    pi_48264054
    quote:
    Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:

    [..]

    Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.

    Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
    Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.
      donderdag 12 april 2007 @ 20:19:27 #153
    50298 QM84
    Het Orakel
    pi_48266913
    quote:
    Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
    WTF IE (6) probleem.

    Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.

    Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
    [afbeelding]

    Hoe komt dit? :S
    Al eens getest met een tijdelijk bordertje rond die DIV?
    IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
    FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
    dat dus.
      donderdag 12 april 2007 @ 23:02:31 #154
    12880 CraZaay
    prettig gestoord
    pi_48274315
    quote:
    Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:

    [..]

    Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.

    Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
    Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.

    Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.

    De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
      donderdag 12 april 2007 @ 23:06:34 #155
    12880 CraZaay
    prettig gestoord
    pi_48274444
    quote:
    Op donderdag 12 april 2007 20:19 schreef QM84 het volgende:

    [..]

    Al eens getest met een tijdelijk bordertje rond die DIV?
    IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
    FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
    Heb je een test case hiervoor? Bij mij sluiten div's in IE namelijk ook altijd naadloos op elkaar aan. Daarnaast staan ze in FF en Opera ook onder elkaar wanneer je ze beide 50% breed maakt en er een border omheen zet (en een juist doctype gebruikt); de borders worden namelijk bij de breedte opgeteld waardoor 2 x 50% + border meer is dan 100%
    pi_48280930
    quote:
    Op donderdag 12 april 2007 19:07 schreef Geqxon het volgende:

    [..]

    Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.
    Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.
    quote:
    Op donderdag 12 april 2007 23:02 schreef CraZaay het volgende:

    [..]

    Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.

    Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.

    De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
    Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.
      vrijdag 13 april 2007 @ 08:50:46 #157
    12880 CraZaay
    prettig gestoord
    pi_48281215
    quote:
    Op vrijdag 13 april 2007 08:30 schreef Tuvai.net het volgende:

    [..]

    Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.
    [..]

    Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.
    Je kan nog aardig wat doen ook om dat te customizen (bijvoorbeeld wanneer de th "auter van het boek" is, een screen reader vertellen dat 'ie alleen "auteur" op moet lezen). Ik zal straks eens kijken of ik m'n bron terug kan vinden, volgens mij uit een boek wat op kantoor in de kast staat.
      maandag 23 april 2007 @ 20:03:56 #158
    18008 hornage
    FOK! Movie Trivia-Prijsmeester
    pi_48644761
    en jawel hoor. Ik heb het design van een website gemaakt. Lekker opgebouwd. Ziet er goed uit in IE7, Opera 9.20 en FF 2.0.0.3.
    Ik check in IE6, gaan er gewoon twee flinke dingen mis. Mijn middenstuk wordt eronder gebeukt en mijn menu is niet meer netjes gecentreerd. Dik balen dus.
    Iemand een idee hoe ik dit op kan lossen want na flink klooien krijg ik het niet goed en mijn CSS lijkt me wel ok.

    De website staat hier:
    http://www.sieval.com/new/

    Iemand dus een idee?
    Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
    pi_48663032
    edit

    [ Bericht 96% gewijzigd door Qunix op 24-04-2007 13:15:59 ]
    pi_48696703
    Probleempje: ik heb nu hele leuke rollover buttontjes maar ik krijg ze enkel onder elkaar en niet nast elkaar! Iemand een idee hoe ik dat wel zo krijg?

    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    		a#buttonweblog {
       display: block; 
       width: 186px; 
       height: 20px; 
       background-image: url(../_gfx/menu/weblog.gif); 
       background-position: 0 0; 
       margin-bottom: 10; margin-right: 10;
    }
    a#buttonweblog:hover {
       background-position: -186px 0;
    }

    a#buttonphotos {
       display: block; 
       width: 186px; 
       height: 20px; 
       background-image: url(../_gfx/menu/photos.gif); 
       background-position: 0 0; 
       margin: 0;
    }
    a#buttonphotos:hover {
       background-position: -186px 0;
    }

    a .alt {
       display: none;
    }


    HTML:
    1
    2    		<a id="buttonweblog" href="#"><span class="alt">Weblog</span></a>
    <a id="buttonphotos" href="#"><span class="alt">Photogallery</span></a>


    uitkomst:


    Iemand die me kan helpen ???
      woensdag 25 april 2007 @ 10:27:04 #161
    18008 hornage
    FOK! Movie Trivia-Prijsmeester
    pi_48696896
    elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
    Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
    Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
    pi_48697150
    quote:
    Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
    elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
    Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
    mijn dank is groot! terwijl ik al zo vaak met flaot: left heb gewerkt
      woensdag 25 april 2007 @ 12:32:03 #163
    73232 De_Hertog
    Aut bibat, aut abeat
    pi_48700995
    Na een tijdje geen sites meer te hebben gebouwd heb ik me eens verdiept in css en nu zit ik wat te knutselen en loop ik tegen (uiteraard :P) IE6 frustraties aan.

    Ik wilde een simpele rollover button maken van een standaard linkje, dus zo dat je met

    1<a class="rollover" href="link.htm">


    automatisch een mooi plaatje krijgt met rollover-effect. De tekst moet onder dat plaatje staan, en dat is het probleem.
    Mijn css voor dit stukje is:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14    		a.rollover {
        position: static;
        text-align: center;
        display: block;
        line-height: 190px;
        width: 90px;
        height: 120px;
        background: url("images/button_normal.jpg") 0 0 no-repeat;
        text-decoration: none;
    }

    a.rollover:hover { 
        background: url("images/button_roll.jpg") 0 0 no-repeat;
    }

    Dat truckje met line height gebruikte ik omdat IE 6 de tekst anders niet netjes onderaan kreeg. Maar nu neemt datzelfde IE6 juist weer te veel ruimte; hij pakt de totale line height als hoogte van het blok, in plaat van de height. Hoe kan ik dit aanpassen, of is er een andere manier om dit in IE6 werkend te krijgen? Alvast bedankt :)
    Mary had a little lamb
    Then Mary had dessert
      woensdag 25 april 2007 @ 13:12:24 #164
    12880 CraZaay
    prettig gestoord
    pi_48702479
    Geen line-height gebruiken maar gewoon padding-top zou moeten werken.
      woensdag 25 april 2007 @ 14:08:55 #165
    73232 De_Hertog
    Aut bibat, aut abeat
    pi_48704568
    Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
    Mary had a little lamb
    Then Mary had dessert
    pi_48722715
    quote:
    Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
    elk item is een a, die komen standaard onder elkaar.
    Nee, a's komen standaard naast elkaar. Ze komen hier onder elkaar vanwege de uitdrukkelijk opgegeven 'display: block'. Dat is dan ook wel weer nodig als je ze een breedte, hoogte, marge enz. wilt geven.
      woensdag 25 april 2007 @ 23:23:37 #167
    12880 CraZaay
    prettig gestoord
    pi_48724155
    quote:
    Op woensdag 25 april 2007 14:08 schreef De_Hertog het volgende:
    Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
    Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.

    Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
    pi_48795089
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12    		#container{
       position: absolute;
       height: 100%;
       
       margin: 0px;
       margin-left: 15px;
       padding: 5px;

       border-left: 1px #000000 solid;
       border-right: 1px #000000 solid;
       background-color: #E9E9E9;
    }


    Lijkt mij enigszins duidelijk wat het doet. Wat mij niet lukt:

    -Height 100% zorgt voor een kleine scrollbar vanwege de 5px padding
    -Bij het verkleinen van mijn venster wordt de div "container" even groot als het venster, als ik dan naar beneden scroll is alle data die er daardoor niet meer oppast vanaf gevallen.

    Hoe kan ik zoiets slim aanpaken? :)
    pi_48806215
    Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
      zaterdag 28 april 2007 @ 15:18:07 #170
    73232 De_Hertog
    Aut bibat, aut abeat
    pi_48806792
    quote:
    Op woensdag 25 april 2007 23:23 schreef CraZaay het volgende:

    [..]

    Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.
    Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.
    quote:
    Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
    CSS: zelfde als boven, maar dan met padding-top, dus:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14    		a.rollover {
        position: static;
        text-align: center;
        display: block;
        padding-top: 80px;
        width: 90px;
        height: 120px;
        background: url("images/button_normal.jpg") 0 0 no-repeat;
        text-decoration: none;
    }

    a.rollover:hover { 
        background: url("images/button_roll.jpg") 0 0 no-repeat;
    }


    Doctype:
    1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Mary had a little lamb
    Then Mary had dessert
    pi_48806928
    quote:
    Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
    Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
    My god, dat was nog simpeler dan ik dacht. Super, dit werkt echt geweldig!
      zondag 29 april 2007 @ 10:34:50 #172
    12880 CraZaay
    prettig gestoord
    pi_48826567
    quote:
    Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
    Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
    In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie is
      zondag 29 april 2007 @ 10:36:16 #173
    12880 CraZaay
    prettig gestoord
    pi_48826593
    quote:
    Op zaterdag 28 april 2007 15:18 schreef De_Hertog het volgende:

    [..]

    Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.
    [..]

    CSS: zelfde als boven, maar dan met padding-top, dus:
    [ code verwijderd ]
    Je knop moet dus 200px hoog worden (height + padding)?
    pi_48830246
    quote:
    Op zondag 29 april 2007 10:34 schreef CraZaay het volgende:

    [..]

    In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie is
    Even getest:

    Opera 4 t/m 9: check
    Mozilla: check (vanaf Milestone 3)
    IE7: check
    IE 6-: fout
    Netscape 4: fout (verrassing)

    Aandachtspuntjes: standaardmodus (anders werkt IE niet); html, body {height: 100%; margin: 0; padding: 0} geeft misschien net iets meer kans op succes.
      zondag 29 april 2007 @ 13:17:44 #175
    73232 De_Hertog
    Aut bibat, aut abeat
    pi_48830536
    quote:
    Op zondag 29 april 2007 10:36 schreef CraZaay het volgende:

    [..]

    Je knop moet dus 200px hoog worden (height + padding)?
    Dat was inderdaad het probleem, dank je Ik dacht dat hoogte de hoogte van het totale blok was en padding hoe ver het van de bovenkant binnen dat blok af stond, had niet door dat beide waardes bij elkaar werden opgeteld. Bedankt voor de tip, het werkt nu (al moet ik IE nog steeds testen, enig voorbehoud dus.. )
    Mary had a little lamb
    Then Mary had dessert
      zondag 29 april 2007 @ 16:27:53 #176
    12880 CraZaay
    prettig gestoord
    pi_48840745
    quote:
    Op zondag 29 april 2007 13:07 schreef AnGabhar het volgende:

    [..]

    Even getest:

    Opera 4 t/m 9: check
    Mozilla: check (vanaf Milestone 3)
    IE7: check
    IE 6-: fout
    Netscape 4: fout (verrassing)

    Aandachtspuntjes: standaardmodus (anders werkt IE niet); html, body {height: 100%; margin: 0; padding: 0} geeft misschien net iets meer kans op succes.
    IE6- niet dus, maar IE6 zelf wel? Firefox en Safari ook getest toevallig (of een testcase online waar ik dan kan doen )?
      zondag 29 april 2007 @ 16:28:46 #177
    12880 CraZaay
    prettig gestoord
    pi_48840821
    quote:
    Op zondag 29 april 2007 13:17 schreef De_Hertog het volgende:

    [..]

    Dat was inderdaad het probleem, dank je Ik dacht dat hoogte de hoogte van het totale blok was en padding hoe ver het van de bovenkant binnen dat blok af stond, had niet door dat beide waardes bij elkaar werden opgeteld. Bedankt voor de tip, het werkt nu (al moet ik IE nog steeds testen, enig voorbehoud dus.. )
    Met dat doctype gaat het in IE ook werken

    Alleen als je geen doctype zou gebruiken zou de padding er in IE niet bijgeteld worden (idem voor border).
    pi_48844503
    quote:
    Op zondag 29 april 2007 16:27 schreef CraZaay het volgende:

    [..]

    IE6- niet dus, maar IE6 zelf wel?
    IE6 niet, voor zover ik kan zien. Ik heb alle IE-versies sinds 3 apart geïnstalleerd, maar die losse installaties schijnen nog wel eens iets anders te doen dan een 'echte'.
    quote:
    Firefox en Safari ook getest toevallig (of een testcase online waar ik dan kan doen )?
    Firefox komt uit de Mozilla-stal, en alle Mozilla-versies sinds 1999 lijken het goed te doen. Safari kan ik niet testen. Het über-brakke 'Swift' (Webkit for Windows) wil geen lokale testpagina's laden (voor zover het nog niet binnen twee microseconden was vastgelopen na het opstarten). Maar over het algemeen is Safari's CSS-ondersteuning best redelijk gelovik.

    Edit: Hier zou je Safari moeten kunnen testen.

    [ Bericht 6% gewijzigd door AnGabhar op 29-04-2007 18:22:06 ]
      maandag 30 april 2007 @ 11:45:10 #179
    12880 CraZaay
    prettig gestoord
    pi_48860731
    Ik heb Safari hier wel op m'n Macbook, dus als het ergens online staat...
      donderdag 3 mei 2007 @ 19:01:13 #180
    107951 JortK
    Immer kwaliteitsposts
    pi_48974894
    Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS :)

    Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:



    Mijn CSS is als volgt:

    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    		body
    {
    background: #404040;
    }

    a:link 
    {
    color: #33357F;
    text-decoration: none;
    }

    a:visited 
    {
    color: #33357F;
    text-decoration: none;
    }

    a:hover 
    {
    color: #7E97B8;
    text-decoration: none;
    }

    a:active 
    {
    color: #7E97B8;
    text-decoration: none;
    }

    div.headermain
    {
    border: solid 1px;
    background-color: #FF00FF;
    background-image: url('header.jpg');
    width: 970px;
    height: 130px;
    margin-right: auto;
    }

    div.leftsidebartable
    {
    position: relative;
    border: solid 1px;
    background-color: #FF00FF;
    width: 235px;
    margin-right: auto;
    text-align: left;
    }

    div.rightsidebartable
    {
    position: relative;
    border: solid 1px;
    background-color: #FF00FF;
    width: 235px;
    margin-left: auto;
    text-align: left;
    }

    div.wrap
    {
    position: relative;
    width: 970px;
    margin: 0px auto;
    text-align: center;
    }


    Kan iemand zien wat ik verkeerd doe?
    Overzicht van alle maandcijfers van het fokforum, voor de stats freaks!
    Een goede Fok!search met de kracht van Google!
    pi_48976085
    quote:
    Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
    Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS

    Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:

    [[url=http://img167.imagevenue.com/loc426/th_11272_css_122_426lo.jpg]afbeelding][/URL]

    Mijn CSS is als volgt:
    [ code verwijderd ]

    Kan iemand zien wat ik verkeerd doe?
    Laat eerst maar eens zien hoe je je pagina hebt opgebouwd.
    pi_48979740
    quote:
    Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
    Ik heb ook een (vermoedt ik) makkelijk probleem voor iemand die veel ervaring heeft met CSS

    Mijn rechter tables moet bovenin komen te staan, echter zet hij hem na de laatste linkse table:

    [[url=http://img167.imagevenue.com/loc426/th_11272_css_122_426lo.jpg]afbeelding][/URL]

    Mijn CSS is als volgt:
    [ code verwijderd ]

    Kan iemand zien wat ik verkeerd doe?
    float, google d'r maar 's op.
      vrijdag 4 mei 2007 @ 09:36:12 #183
    12880 CraZaay
    prettig gestoord
    pi_48993773
    quote:
    Op donderdag 3 mei 2007 19:01 schreef JortK het volgende:
    Kan iemand zien wat ik verkeerd doe?
    Je class names zijn iig niet zo goed, los van je probleem

    Beschrijf de inhoud van een element en niet de positie. Rechts en links kan zomaar veranderen in een design en als je dat met CSS op wilt lossen (waar CSS immers voor is), dan is het zo raar als een element met de class "leftthing" opeens rechts staat
    pi_49051292
    Vraagje:
    Hoe krijg je je site in het midden maar text-alignment gewoon left?
    pi_49053923
    quote:
    Op zondag 6 mei 2007 00:11 schreef Flaccid het volgende:
    Vraagje:
    Hoe krijg je je site in het midden maar text-alignment gewoon left?
    Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .
    pi_49054228
    Alles in een div, met een width van bijvoorbeeld 700px, een margin-left van -350px (50% negatief) en een left-attribuut van 50%?
    pi_49056317
    quote:
    Op zondag 6 mei 2007 02:21 schreef DorentuZ het volgende:

    [..]

    Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .
    de body dan he (die margin: 0 auto)?
      maandag 7 mei 2007 @ 23:33:50 #188
    12880 CraZaay
    prettig gestoord
    pi_49125286
    quote:
    Op zondag 6 mei 2007 02:21 schreef DorentuZ het volgende:

    [..]

    Door gewoon margin: 0 auto; te gebruiken. Maar dan werkt het niet in IE. Het antwoord is eigenlijk makkelijker, door simpelweg de alignment weer op left te zetten .
    Dat werkt prima in IE, mits je een pagina hebt die een standaard volgt en dus een correct doctype gebruikt.
      maandag 7 mei 2007 @ 23:35:08 #189
    12880 CraZaay
    prettig gestoord
    pi_49125356
    quote:
    Op zondag 6 mei 2007 02:48 schreef Geqxon het volgende:
    Alles in een div, met een width van bijvoorbeeld 700px, een margin-left van -350px (50% negatief) en een left-attribuut van 50%?
    Ranzig Op een lagere resolutie verdwijnt een deel uit beeld en het kan veel simpeler met het genoemde "margin: 0 auto" (als het ook in IE op de Mac moet werken "margin: 0 auto 0 auto").
      maandag 7 mei 2007 @ 23:35:55 #190
    12880 CraZaay
    prettig gestoord
    pi_49125394
    quote:
    Op zondag 6 mei 2007 10:31 schreef Flaccid het volgende:

    [..]

    de body dan he (die margin: 0 auto)?
    Op een wrapper div met een gedefinieerde breedte (anders is 'ie 100% breed en staat 'ie in feite dus al in het midden).
    pi_49126333
    Het is inderdaad beter om gewoon een container div aan te maken, die een vaste breedte te geven en vervolgens margin:0 auto; er op toe te passen. Het komt niet meer héél vaak voor, maar er zijn nog stééds mensen met een resolutie van 800 x 600, of zelfs lager. Daar moet je ook rekening mee houden.
    pi_49238848
    Hoe krijg ik mijn footer altijd met mijn layout naar beneden (minimaal dan)?

    [ Bericht 87% gewijzigd door Flaccid op 12-05-2007 19:16:12 ]
    pi_49312167
    Ik heb denk ik een fix voor Safari zoek. Mijn pagina heeft een "hidden" tabel, en zodra ik de visibility daarvan via javascript op "Visible" zet, krijg ik mooi de tabel te zien

    Werkt in IE6, werkt in IE7, werkt in Firefox, werkt in Safari. Alleen onder Safari heeft de tabel enkel boven en links een rand, rechts en onder niet. Wanneer ik mjn venster resize, wordt de pagina weer goedgezet, en ziet de tabel er weer netjes uit.

    Iemand tips hoe ik zoiets oplos?
      zaterdag 12 mei 2007 @ 23:50:36 #194
    12880 CraZaay
    prettig gestoord
    pi_49317968
    quote:
    Op donderdag 10 mei 2007 20:05 schreef Flaccid het volgende:
    Hoe krijg ik mijn footer altijd met mijn layout naar beneden (minimaal dan)?
    Altijd onderaan de viewport of altijd onderaan je content?
      zaterdag 12 mei 2007 @ 23:51:56 #195
    12880 CraZaay
    prettig gestoord
    pi_49318008
    quote:
    Op zaterdag 12 mei 2007 21:35 schreef Geqxon het volgende:

    Iemand tips hoe ik zoiets oplos?
    Gaat het om de 'visibility' of 'display' property?
    pi_49318805
    quote:
    Op zaterdag 12 mei 2007 23:51 schreef CraZaay het volgende:

    [..]

    Gaat het om de 'visibility' of 'display' property?
    Visibility. Zodat hij hem wel van te voren tekent, en als de tabel erg lang wordt hij alvast wat ruimte "reserveert" door de pagina wat langer te maken
    pi_49344211
    quote:
    Op zaterdag 12 mei 2007 23:50 schreef CraZaay het volgende:

    [..]

    Altijd onderaan de viewport of altijd onderaan je content?
    viewport
      maandag 14 mei 2007 @ 20:36:39 #198
    136730 PiRANiA
    All thinking men are atheists.
    pi_49377637
    Help!
    [----------130px--------------][-------------------------------------------rest van de pagina-------------------------]

    ik heb 2 divs. De linker wil ik 130 pixels breed hebben, de rechter moet schermvullend zijn. Hoe moet dit?
    Dag Google!
    pi_49383848
    De linker een float links geven met breedte van 130px en de andere ernaast met een margin links van 130px

    1
    2
    3
    4
    5
    6
    7
    8    		#links{
    float:left;
    width: 130px;
    }

    #content{
    margin-left: 130px;
    }
      maandag 14 mei 2007 @ 23:21:14 #200
    104583 cyberstalker
    Een krachtig neen!
    pi_49385464
    quote:
    Op zondag 13 mei 2007 00:13 schreef Geqxon het volgende:

    [..]

    Visibility. Zodat hij hem wel van te voren tekent, en als de tabel erg lang wordt hij alvast wat ruimte "reserveert" door de pagina wat langer te maken :)
    Ik weet niet of dit onder safari ook werkt (ik verwacht van wel) maar ik kan mij herinneren ooit tegen een Firefox javascript/css bug op te lopen waarbij adjacent-sibling selectors niet correct werden geupdate na het invoegen van een node.

    De workaround was daar om de display: waarde van de body op none te zetten en daarna weer terug op block. De pagina wordt dan opnieuw gerendert en het probleem is opgelost.

    In js ziet dat er ongeveer zo uit (untested)
    1
    2
    3
    4
    5
    6
    7    		function fix_page()
    {
        var body = document.getElementsByTagName('body').item(0);

        body.setAttribute('style', 'display: none;');
        body.setAttribute('style'. 'display: block;');
    }
    Hope for the best, prepare for the worst.
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies - deel 6
    Index

    » digital corner

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