[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_59519307
Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

Zoals ik het nu heb:
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		<ul class="messages">
   <li>
   
      <!-- Bericht -->
      <fieldset>
         <legend><a href="new.php?prepare&user=Pepijn">Pepijn</a></legend>

         <!-- Gegevens -->
         <dl>
            <dt>Aan:</dt>
            <dd><a href="new.php?prepare&user=Bep">Bep</a></dd>

            <dt>Verzonden:</dt>
            <dd>19-06-08 14:17</dd>
         </dl>

         <!-- Content -->
         <p>Telefoon voor bep!</p>

         <!-- Taken -->
         <ul>
            <li><a href="inbox.php?setread&id=10">Markeer als afgehandeld</a></li>
         </ul>
         
      </fieldset>
   </li>
</ul>


Mijn problemen met deze manier van werken:
  • De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?
  • Is een fieldset niet enkel voor formulieren?
  • Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?
  • Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.
  • Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.


    Kan iemand hier wat licht op schijnen? :)
    •   vrijdag 20 juni 2008 @ 18:04:20 #102
    181657 LordNemephis
    computer says no
    pi_59555740
    een dikke vette TeeVeePee!
    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
    pi_59562421
    quote:
    Op donderdag 19 juni 2008 14:44 schreef Geqxon het volgende:
    Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

    Zoals ik het nu heb:
    [ code verwijderd ]

    Mijn problemen met deze manier van werken:
  • De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?
  • Is een fieldset niet enkel voor formulieren?
    • Twee keer ja
    quote:
  • Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?
    • Ik zou daar gewoon een div of een span voor gebruiken.
    quote:
  • Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.
    • In de buurt van de verzender, zou ik zeggen.
    quote:
  • Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.
    • Die fieldset hoort daar niet, dus die legend ook niet. Als dat de verzender is dan kun je dat gewoon als zodanig weergeven.
    quote:
    Kan iemand hier wat licht op schijnen?
    Is het toeval (als in voor demo) dat er maar 1 bericht wordt gegeven in <ul class="messages"> ? Of laat je wel meer berichten zien (als die er zijn uiteraard)?
    fokstok.nl
      zaterdag 21 juni 2008 @ 01:23:50 #104
    145090 HenkBenzinetank
    Toegevoegde waarde
    pi_59569860
    Misschien een beetje kort door de bocht, maar bij twijfel moet je je pagina eens zonder CSS bekijken. Als de structuur dan nog te volgen is, dan zit je qua semantiek vaak ook al goed in de richting.
      dinsdag 24 juni 2008 @ 15:02:54 #105
    37634 wobbel
    Da WoBBeL King
    pi_59652628
    In hoeverre is dit mogelijk?

    Ik wil 1 grote div, met daarin een kleiner divje met tekstomloop....

    Dit idee dus:

    Hosted VoIP SIP trunks Vast mobiel VoIP
    pi_59659446
    ik ben bezig met een website, maar kom er niet uit

    ik heb 2 divjes naast elkaar, de een is het linker menu en de ander is de content
    bij de ene pagina is het linker divje langer, maar als ik een andere pagina open is de content weer langer (afhankelijk van de inhoud)

    is het mogelijk om beide divjes even lang (height) te houden?
      dinsdag 24 juni 2008 @ 20:59:00 #107
    159841 Dzy
    It is I
    pi_59660312
    Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op
    "Reality is an illusion created by a lack of alcohol."
      dinsdag 24 juni 2008 @ 20:59:46 #108
    159841 Dzy
    It is I
    pi_59660340
    En wobbel, dit is natuurlijk heel makkelijk te krijgen door gewoon een DIV container te maken met daarin die twee divs waarvan er een float.
    "Reality is an illusion created by a lack of alcohol."
    pi_59660746
    quote:
    Op dinsdag 24 juni 2008 20:59 schreef Dzy het volgende:
    Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op
    nee, dat is helaas niet wat ik zoek
    ik wil background images meegeven aan de header, left, content en footer

    dus niet aan de container
      dinsdag 24 juni 2008 @ 21:51:33 #110
    159841 Dzy
    It is I
    pi_59661940
    Maak eens een paint? En vertel er even bij wat allemaal kan stretchen enzo. Dan kan ik je wel vertellen of dit mogelijk is
    "Reality is an illusion created by a lack of alcohol."
    pi_59662636
    ok, zo moet het worden:



    'left' en 'content' kunnen verschillen van grootte (height), maar moeten dus even lang worden/blijven
      dinsdag 24 juni 2008 @ 22:30:23 #112
    159841 Dzy
    It is I
    pi_59663150
    Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.
    "Reality is an illusion created by a lack of alcohol."
      woensdag 25 juni 2008 @ 00:03:45 #113
    181657 LordNemephis
    computer says no
    pi_59665665
    quote:
    Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
    Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.
    Dit is wel de meest makkelijke manier voor dit doel
    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
    pi_59667461
    quote:
    Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
    Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.
    Die laatste regel kan je beter weglaten
    pi_59670893
    quote:
    Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
    Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.
    jouw uitleg is een stuk duidelijker dan de site die ik gevonden had, het is gelukt

    ik heb nu 3 containers:

    container 1: header
    container 2: left (menu) en content
    container 3: footer

    thanks voor de hulp
      woensdag 25 juni 2008 @ 11:01:06 #116
    159841 Dzy
    It is I
    pi_59671054
    Ok Dorentuz, de beste en makkelijkste manier dan

    En mooi ruud dat het gelukt is.
    "Reality is an illusion created by a lack of alcohol."
      woensdag 25 juni 2008 @ 19:10:13 #117
    87680 Mirel
    Mirel wil een bongophone.
    pi_59683352
    Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

    Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.


    Denk dat de foto wel duidelijk is Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.
    When all else fails, you always have delusion.
    pi_59683528
    Dit moet volgens mij werken:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25    		<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    html {
        background-color:#000000
    }
    div#tekst {
       margin:0px auto 0px;
       width:400px;
    }
    div#tekst p{
        color:#FFFFFF;
    }
    </style>
    </head>
    <body>
    <div id="tekst">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ligula ligula, rhoncus sed, consectetuer ut, mattis sit amet, enim. Vivamus laoreet placerat felis. Aenean iaculis tristique lacus. Pellentesque diam metus, tempus et, dapibus vitae, faucibus in, eros. Sed eu arcu quis urna mattis dapibus. Cras vitae metus id libero blandit consequat. Cras viverra, dolor eget pulvinar ultricies, orci lacus malesuada neque, sit amet luctus arcu eros sed dui. Morbi eros nisi, consequat ac, condimentum nec, posuere eget, nulla. Quisque bibendum venenatis sapien. Nam sem est, vulputate in, suscipit ut, tincidunt non, massa. Vestibulum sagittis enim eget mauris. Morbi consectetuer, ipsum auctor consectetuer venenatis, arcu diam iaculis metus, eu lobortis est mauris bibendum felis. Nulla ultrices, dui vitae feugiat adipiscing, tortor libero ultricies ipsum, non convallis tortor est id pede. Quisque sollicitudin. Suspendisse accumsan nulla sit amet risus.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vehicula. Nam ullamcorper, erat a congue imperdiet, turpis diam tincidunt lectus, et tempor nulla risus a dui. Morbi non nunc. Praesent ultricies nibh sed arcu. Sed dictum, quam vel tempor viverra, nunc dolor viverra nisl, quis pharetra leo ipsum in neque. Donec eget velit. Ut vulputate faucibus enim. In hac habitasse platea dictumst. Donec posuere semper urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lorem. Mauris hendrerit adipiscing nisi.</p>
    </div>
    </body>
    </html>


    [ Bericht 0% gewijzigd door spaceninjapirate op 25-06-2008 19:19:28 (typfoutje) ]
    pi_59683533
    quote:
    Op woensdag 25 juni 2008 19:10 schreef Mirel het volgende:
    Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

    Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.

    [ afbeelding ]
    Denk dat de foto wel duidelijk is :) Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.
    Even aangenomen dat die div met teks als id centertext heeft:
    1
    2
    3
    4    		#centertext {
      width: 50%; /* Of iets anders, maar je moet een breedte instellen */
      margin: 0 auto; /* Links en rechts auto -> Links en rechts gelijk -> Div staat gecentreerd */
    }
    fokstok.nl
      FOK!-Schrikkelbaas dinsdag 1 juli 2008 @ 12:51:46 #120
    1972 Swetsenegger
    Egocentrische Narcist
    pi_59816693
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24    		<tr id="ipRow">
     <td class="lc">spatie</td>
     <td class="rc">
     
     <table border="0" cellspacing="0" cellpadding="2">
        <tr>
       <td>IP</td>
       <td nowrap="nowrap"><input type="text" class="num" name="ip1" value="@ip1#" size=3 maxlength=3>.<input type="text" class="num" name="ip2" value="@ip2#" size=3 maxlength=3>.<input type="text" class="num" name="ip3" value="@ip3#" size=3 maxlength=3>.<input type="text" class="num" name="ip4" value="@ip4#" size=3 maxlength=3>
       </td>
      </tr>
      <tr>
       <td>mask</td>
       <td><input type="text" name="mask1" class="num" value="@mask1#" size=3 maxlength=3>.<input type="text" name="mask2" class="num" value="@mask2#" size=3 maxlength=3>.<input type="text" class="num" name="mask3" value="@mask3#" size=3 maxlength=3>.<input type="text" class="num" name="mask4" value="@mask4#" size=3 maxlength=3>
       </td>
      </tr>
      <tr>
       <td>gateway</td>
       <td><input type="text" class="num" name="gw1" value="@gw1#" size=3 maxlength=3>.<input type="text" class="num" name="gw2" value="@gw2#" size=3 maxlength=3 onFocus="if(this.disabled)this.blur()">.<input type="text" class="num" name="gw3" value="@gw3#" size=3 maxlength=3>.<input type="text" class="num" name="gw4" value="@gw4#" size=3 maxlength=3>
       </td>
      </tr>
     </table>

     </td>
    </tr>


    De 'ipRow' toggle ik display:none; en display:block dmv een onclick.

    In IE krijg ik keurig dit te zien als de row visible is

    1
    2
    3
    4
    5
    6
    7    		---------------------------------------------------------------------
    | cel 1                     |                                       |
    ---------------------------------------------------------------------
    | spatie                    | IP      [].[].[].[]                   |
    |                           | Mask    [].[].[].[]                   |
    |                           | Gateway [].[].[].[]                   |
    ---------------------------------------------------------------------


    In elke andere browser dit

    1
    2
    3
    4
    5
    6
    7    		---------------------------------------------------------------------
    | cel 1                       |                                     |
    ---------------------------------------------------------------------
    | spatie | IP      [].[].[].[]|
    |        | Mask    [].[].[].[]|
    |        | Gateway [].[].[].[]|
    ---------------------------------------------------------------------


    Kortom, de geneste table wordt tov de parenttable in de linker cel gepropt. Terwijl die toch echt afgesloten is.
    Wat doe ik fout?

    -edit- ter verduidelijking: http://test.xploise.nl/test.html
    In IE is het gedrag zoals ik verwacht (en wat ik nodig heb) in elke andere browser niet.

    -edit- En het antwoord
    http://snook.ca/archives/html_and_css/dynamically_sho/

    [ Bericht 6% gewijzigd door Swetsenegger op 01-07-2008 14:11:40 ]
     | FOK! Schrikkelbaasch
    pi_59825423
    Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

    Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .
    pi_59826162
    quote:
    Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
    Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

    Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .
    Dat komt omdat ie altijd de scrollbalk laat zien, en firefox alleen als die nodig is.. Je zou dus overflow:scroll aan je html of body kunnen hangen (weet zo niet welke van de 2), zodat firefox zich gedraagt als IE..
    pi_59826182
    quote:
    Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
    Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

    Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .
    Firefox laat geen scrollbalk zien als je die niet gebruikt, IE wel.
    Oplossing: de volgende regel toevoegen bij of html of body:
    overflow-y: scroll;

    Kijk dan even in IE om te zien of je geen dubbele scrollbalk krijgt. Dat zou namelijk niet handig zijn.
    fokstok.nl
    pi_59826549

    Dank jullie.
      donderdag 3 juli 2008 @ 18:58:49 #125
    32768 DionysuZ
    Respect my authority!
    pi_59872036
    Ik heb een vraagje, niet gericht op CSS, maar kan wellicht toch hier terecht omdat ik geen apart topic ervoor wil openen.

    Weet iemand of ik de FIELDSET tag ook legaal kan gebruiken buiten een form, bijvoorbeeld om een menu heen (zoals fieldset met legend = main menu, sub menu, dat soort)?
    □ Reality is merely an illusion,albeit a very persistent one-A.Einstein
    ■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
    □ The war is not meant to be won.It is meant to be continuous-G.Orwell
    pi_59873164
    quote:
    Op donderdag 3 juli 2008 18:58 schreef DionysuZ het volgende:
    Ik heb een vraagje, niet gericht op CSS, maar kan wellicht toch hier terecht omdat ik geen apart topic ervoor wil openen.

    Weet iemand of ik de FIELDSET tag ook legaal kan gebruiken buiten een form, bijvoorbeeld om een menu heen (zoals fieldset met legend = main menu, sub menu, dat soort)?
    Het mag wel van de W3 validator. Maar ik zou het niet doen, naar mijn idee hoort een fieldset in een form.
    fokstok.nl
      FOK!Fotograaf / Beeldredactie zondag 6 juli 2008 @ 12:08:46 #127
    68600 crew  Ynske
    Bedankt voor de zon...
    pi_59922809
    Echt ik voel me zo dom als de achterkant van de klerenkast hier.

    Heb zitten klooien en heb 1 pagina klaar van mijn site waarin foto's getoond worden. (let niet op de baggerheid van de foto's das allemaal test)
    Nu is deze pagina zonder CSS opgebouwd.
    Het probleem wat ik nog ondervind in de pagina is dat in IE de bladerpijltjes van de foto's goed staan maar in FF voor geen mogelijkheid goed te krijgen is.

    Er word nu aangeraden om als nog met een CSS te beginnen, maar ik zie door de bomen het bos niet meer. Helpt een CSS er echt aan om die verdomde pijltjes in beide browsers goed te krijgen?

    wie o wie wil mij verlossen

    de test pagina staat hier
    http://www.throughmylens.nl/test5.php
    Today is life -
    the only life you are sure of. Make the most of today.
    Dale Carnegie
      zondag 6 juli 2008 @ 14:11:56 #128
    3677 SuperRembo
    Sinds 1998
    pi_59924952
    Eigenlijk is een pagina als dat niet zo ingewikkeld... alleen is de code in dit geval zo'n aaneenschakeling van fouten en onhandige constructies dat 't een wonder is dat het in IE en Fx nog een beetje op elkaar lijkt.

    De enige echte oplossing is opnieuw beginnen. En hou het dan simpel.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      Redactie Sport maandag 7 juli 2008 @ 20:40:07 #129
    102433 crew  dennistd
    FOK!sport *O*
    pi_59956344
    Ik heb een div bovenin staan als banner, en vervolgens wil ik links een div gebruiken als menu
    hoe zorg ik ervoor dat die div links de resterende lengte van de pagina opvult?
    met een height:100%; wordt het 100% plus de 100px van de div bovenin

    edit:
    heb het inmiddels opgelost door de linkerdiv geen height:100% te geven, maar bottom:0px

    [ Bericht 17% gewijzigd door dennistd op 07-07-2008 22:18:34 ]
    PM mij!
    Disclaimer: Mijn posts worden geschreven als user, en niet als crew, tenzij dit duidelijk wordt aangegeven
      dinsdag 8 juli 2008 @ 22:30:58 #130
    69950 MadGuy
    Fever Ray
    pi_59983766
    Even een stomme vraag tussendoor, omdat het mij niet helemaal duidelijk is.

    Kun je <img> nu ook afsluiten met /> net zoals <br /> of moet dat altijd > zijn? En hoe zit dat met metatags?
    last.fm
    marksluymers.nl
    pi_59984399
    quote:
    Op dinsdag 8 juli 2008 22:30 schreef MadGuy het volgende:
    Even een stomme vraag tussendoor, omdat het mij niet helemaal duidelijk is.

    Kun je <img> nu ook afsluiten met /> net zoals <br /> of moet dat altijd > zijn? En hoe zit dat met metatags?
    Bij XHTML sluit je een tag altijd af. Bij een dubbele tag krijg je dus <b> en </b>, bij een enkele tag krijg je resultaten als <img .... /> en <br />.

    Bij HTML mag je simpelweg <img ...> en <br> doen.
      woensdag 9 juli 2008 @ 10:42:52 #132
    69950 MadGuy
    Fever Ray
    pi_59990713
    Dank voor je antwoord. Dat is dan duidelijk! Ik raakte een beetje in de war omdat Firefox die /> tags achter img, meta en link een rood kleurtje geeft.

    [ Bericht 42% gewijzigd door MadGuy op 09-07-2008 11:33:54 ]
    last.fm
    marksluymers.nl
      woensdag 9 juli 2008 @ 22:12:13 #133
    71919 wonderer
    Hung like a My Little Pony
    pi_60006908
    Hoe zorg je ervoor dat de parent-div dezelfde hoogte krijgt als de inhoud? En waarom gaat dat niet automatisch?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23    		#container {
     position:absolute;
     background-repeat:no-repeat;
     width:792px;
     margin-left:-400px;
     margin-top:100px;
     left:50%;
     background-color:#FFCCFF;
    }

    .page_content {
     position:absolute;
     width:613px;
     left:100px;
     top:144px;
     overflow:auto;
     background-color:transparent;
    }
     <div id="container">
     <div class="page_content">
      veeeeel tekst
     </div>
    </div>
    De tekst loopt uit de container, waarvan ik de achtergrondkleur nodig heb. Waarom gebeurt dit en hoe fix it het?
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
      woensdag 9 juli 2008 @ 22:25:42 #134
    32768 DionysuZ
    Respect my authority!
    pi_60007231
    position:absolute; doet dit.
    □ Reality is merely an illusion,albeit a very persistent one-A.Einstein
    ■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
    □ The war is not meant to be won.It is meant to be continuous-G.Orwell
      woensdag 9 juli 2008 @ 22:46:56 #135
    71919 wonderer
    Hung like a My Little Pony
    pi_60007852
    Maar met relative werkt het ook niet. Wat moet ik dan?
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
    pi_60008034
    Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.
      woensdag 9 juli 2008 @ 23:03:54 #137
    71919 wonderer
    Hung like a My Little Pony
    pi_60008297
    quote:
    Op woensdag 9 juli 2008 22:54 schreef HuHu het volgende:
    Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.
    height:100% maakt de hoogte van container zo hoog als het scherm (plus die 100px positioning), height:auto; doet helemaal niks.
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
    pi_60008578
    quote:
    Op woensdag 9 juli 2008 22:54 schreef HuHu het volgende:
    Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.
    Een background-color: transparent; doet vrij weinig. Bij een snelle test had ik meteen resultaat toen ik "position: absolute;" weghaalde bij .page_content.
    fokstok.nl
    pi_60008746
    quote:
    Op woensdag 9 juli 2008 22:46 schreef wonderer het volgende:
    Maar met relative werkt het ook niet. Wat moet ik dan?
    Waarom gebruik je eigenlijk "position: absolute;" ? Er zijn meer opties om dingen te positioneren, en met absolute haal je dingen uit de normale flow en wordt het voor de browsers veel lastiger om er goed mee te werken. Normaal gesproken staan elementen met "position: absolute;" onder in de pagina (qua html source, niet noodzakelijk qua layout).
    fokstok.nl
      woensdag 9 juli 2008 @ 23:27:55 #140
    71919 wonderer
    Hung like a My Little Pony
    pi_60008963
    quote:
    Op woensdag 9 juli 2008 23:19 schreef Light het volgende:

    [..]

    Waarom gebruik je eigenlijk "position: absolute;" ? Er zijn meer opties om dingen te positioneren, en met absolute haal je dingen uit de normale flow en wordt het voor de browsers veel lastiger om er goed mee te werken. Normaal gesproken staan elementen met "position: absolute;" onder in de pagina (qua html source, niet noodzakelijk qua layout).
    Omdat ik niet beter weet? Ik sta open voor suggesties, hoor
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
      woensdag 9 juli 2008 @ 23:33:09 #141
    71919 wonderer
    Hung like a My Little Pony
    pi_60009075
    "top" en "left in .page_content heb ik veranderd in margin-top en margin-left en position weggehaald en nu werkt het... alleen in FF
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
    pi_60009373
    quote:
    Op woensdag 9 juli 2008 23:27 schreef wonderer het volgende:

    [..]

    Omdat ik niet beter weet? Ik sta open voor suggesties, hoor ;)
    Een suggestie dan, met wat css commentaar om wat dingen te verduidelijken.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19    		html, body {
     /* De meeste browsers hanteren hier niet standaard 0, waardoor je pagina nooit strak tegen de rand kan komen */
     margin: 0;
     padding: 0;
    }
    #container {
     width:792px;
     /* De volgende twee regels zorgen voor horizontaal centreren */
     margin-left:auto;
     margin-right:auto;
     margin-top:100px;
     background-color:#FFCCFF;
    }
    .page_content {
     width:613px;
     /* Ik neem aan dat deze div gecentreerd moet worden in de vorige */
     margin-left:90px;
     /* Eventueel kun je met margin-top een ruimte vanaf de bovenkant instellen */
    }


    Het horizontaal centreren gaat niet altijd goed in IE6. Dat kun je eenvoudig oplossen:
    1
    2
    3
    4
    5
    6    		html, body {
     text-align: center;
    }
    #container {
     text-align: left;
    }

    In IE6 ('k weet niet zeker of het ook opgaat voor IE7) wordt text-align niet alleen op tekst maar ook op andere elementen toegepast. Maar de eigenschap heet niet everything-align ;)

    Als de container tegen de bovenrand moet komen is het nog makkelijker (niet voor IE6):
    1
    2
    3    		#container {
     margin: 0 auto;
    }
    Die shorthandnotatie is ook mogelijk in het eerdere voorbeeld, maar daar voegt'ie weinig aan duidelijkheid toe dus specificeer ik liever gewoon de randen afzonderlijk, voor zover nodig.
    fokstok.nl
    pi_60009398
    quote:
    Op woensdag 9 juli 2008 23:33 schreef wonderer het volgende:
    "top" en "left in .page_content heb ik veranderd in margin-top en margin-left en position weggehaald en nu werkt het... alleen in FF
    Ik heb hier helaas geen IE bij de hand om mee te testen
    fokstok.nl
      woensdag 9 juli 2008 @ 23:54:55 #144
    71919 wonderer
    Hung like a My Little Pony
    pi_60009564
    quote:
    Op woensdag 9 juli 2008 23:46 schreef Light het volgende:

    [..]

    Ik heb hier helaas geen IE bij de hand om mee te testen
    Het lijkt erop dat IE6 margin-top negeert Ik heb nu een padding in de container met dezelfde afstand, maar nu doen mijn muisovers (css, daar heb ik al een hack voor gebruikt voor IE6. Ik haat IE6 ) het niet meer...
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
    pi_60009654
    quote:
    Op woensdag 9 juli 2008 23:54 schreef wonderer het volgende:

    [..]

    Het lijkt erop dat IE6 margin-top negeert Ik heb nu een padding in de container met dezelfde afstand, maar nu doen mijn muisovers (css, daar heb ik al een hack voor gebruikt voor IE6. Ik haat IE6 ) het niet meer...
    IE6 is een ramp. Gelukkig komt IE7 steeds meer op, en die gedraagt zich een stuk beter.
    fokstok.nl
      donderdag 10 juli 2008 @ 00:01:40 #146
    71919 wonderer
    Hung like a My Little Pony
    pi_60009693
    Ik weet het. Ik zal het echter toch crossbrowser moeten maken tot IE6 van de aardkloot is verdwenen

    Nou ja, ik puzzel nog even verder, anders verzin ik wel iets anders. In ieder geval bedankt voor de hulp
    "Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
    "My brain is too smart for me."
    "We don't need no education." "Yes you do, you just used a double negative."
      maandag 11 augustus 2008 @ 22:05:25 #147
    134533 donroyco
    dus niet Donroyco
    pi_60745637
    Op mijn site wil ik sIFR in de headers gaan gebruiken. Ik heb al deze stappen doorlopen, maar hij werkt nog steeds niet. Iemand misschien een idee waar het aan kan liggen?
    Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
    Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
    pi_60746783
    Ik heb recentelijk ook sIFR gebruikt op een site en ik kreeg sIFR 2.0 niet werkend. Maar ik zag wel een sIFR 3.0 beta, en die werkt wel (maar bij mij niet goed in IE6).
    fokstok.nl
      maandag 11 augustus 2008 @ 22:42:06 #149
    134533 donroyco
    dus niet Donroyco
    pi_60746976
    quote:
    Op maandag 11 augustus 2008 22:36 schreef Light het volgende:
    Ik heb recentelijk ook sIFR gebruikt op een site en ik kreeg sIFR 2.0 niet werkend. Maar ik zag wel een sIFR 3.0 beta, en die werkt wel (maar bij mij niet goed in IE6).
    Dat dan maar eens morgen proberen, thanks!
    Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
    Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
      dinsdag 12 augustus 2008 @ 13:36:11 #150
    145090 HenkBenzinetank
    Toegevoegde waarde
    pi_60760986
    Wat sIFR betreft, het kan ook aan je lettertype liggen. Met name sommige OTF letters trekt ie niet zo goed
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies - deel 9
    Index

    » digital corner

    » development

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