19 berichten aan het bekijken - 1 tot 19 (van in totaal 19)
  • Q:
    Bijdrager
    meneer de koekepeer

    [Safari] Div kapt content af

    Hi,

    Ik heb tekst in een div staan.
    Een deel van de tekst valt buiten de pagina, d.w.z.: er moet gescrollt worden.
    Nu doet Safari gek en laat deze de content nooit zien. Er staat een groot wit vlak.
    Wanneer je de tekst selecteerd, is alles weer ok.

    Wat is hier aan de hand?

    Bijdrager
    tricksel

    voorbeeldje?

    Misschien heb je iets gedaan met de overflow?

    Bijdrager
    tennapel

    Safari 1.0 (Jaguar) en absoluut gepositioneerd? Dan is het een bekend probleem. Zo niet, graag voorbeeldje (probeer eerst probleem te isoleren door op aparte pagina steeds meer CSS te strippen totdat probleem overblijft).

    Bijdrager
    meneer de koekepeer

    De pagina (ingekort):
    [code:1:b6cbf97c31]<html>
    <head>
    <style type="text/css">
    #realcontent {
    float: left;
    margin: 0px;
    width: 561px;
    height: 445px;
    background-color: #fff;
    }

    h1 {
    margin: 0px;
    padding: 0px;
    font-size: 30px;
    color: #00A821;
    }

    .title {
    margin-left: 285px;
    }

    p {
    margin: 10px 0px 0px 285px;

    }

    p.open {
    padding: 0px;
    }

    .step {
    position: absolute;
    top: 0px;
    left: 0px;
    }
    </style>
    </head>
    <body>
    <div id="realcontent">
    <h1 class="title">Titel</h1>
    <p class="open">
    <script language="javascript">
    function flashDisp ( )
    {
    if ( flashActive == ‘true’ )
    {
    retval = ‘<object class="step" classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width=265 height=502><param name=movie value=image.swf><param name=play value=true><param name=loop value=true><param name="AllowScriptAccess" value="never" /><param name=quality value=high><embed class="step" src=image.swf width=265 height=502 play=true loop=true quality=high></embed></object>’;
    }
    else
    {
    retval = ‘<img src="image.jpg" border="0" alt="" class="step" />’;
    }

    return retval;
    }
    document.write ( flashDisp ( ) );
    </script>
    <noscript><img src="image.jpg" border="0" alt="" class="step" /></noscript>
    <br /><br /><b>De tekst div die wordt afgebroken</b></div>
    </body>
    </html>[/code:1:b6cbf97c31]

    Bijdrager
    mac748

    Ik heb het idee dat er iets fout gaat met je javascript.

    Bijdrager
    meneer de koekepeer

    Javascript maakt geen drol uit als het goed is.
    Een simpele document write plaatst gewoon een divje.
    Moet kunnen, toch?

    Bijdrager
    Vasilis

    Het heeft te maken met de absolute positie van .step en de float van #realcontent. Een eenvoudige oplossing is om onder #realcontent een div met clear:both; te zetten.

    Bijdrager
    tennapel

    Ik wil niet vervelend doen, maar je hebt de div op een hoogtevan 450 pixels gezet en de object een parameter meegegeven van 502 px, daar als eens mee gespeeld? Als dat het niet oplost, kan je dan een voorbeeld online zetten? Ik ben namelijk ontzettend lui en heb geen zin om stukken tekst te kopieren uit een browservenster en in BBEdit te plakken en daar dan een document van maken. En ik moet altijd even testen om te zien wat er gebeurt, kale tekst lezen levert in mijn hoofd meestal niet zoveel op.

    Bijdrager
    meneer de koekepeer
    ”tennapel”

    Ik wil niet vervelend doen, maar je hebt de div op een hoogtevan 450 pixels gezet…

    En daar had ik me dus helemaal op kapot zitten staren…
    Een tweede paar ogen doet altijd wonderen:)
    Thanks!

    Bijdrager
    Dianne

    Ehm, ik had laatst een reactie geplaatst dat DIV niet in elke browser goed wordt weergegeven en dat TABLE wel overal goed wordt weergegeven.

    Waarom is dit verwijderd?

    Bijdrager
    Vasilis

    Omdat het niet ter zake doet.

    Maar in welke browser wordt DIV niet goed weergegeven dan?

    Bijdrager
    Dianne

    Lijkt mij van wel. De browser Safari geeft DIV niet goed weer, dus ik geef hem een oplossing (misschien rigoreus, maar het werkt wel). Het is aan Meneer de Koekepeer of hij er iets mee wil doen.

    Bijdrager
    Vasilis

    Hahaha. Volgens mij weet jij eigenlijk niet zo goed waar je het over hebt. Maar dat geeft niet.
    Zodra je dit snapt mag je hier weer reageren.

    Bijdrager
    Dianne

    Worden tabellen niet overal goed weergegeven dan? Ik ben altijd bereid om kennis op te doen, dus misschien wil je me vertellen wat het voordeel is aan DIV boven TABLE.

    Laten we het wel beleefd houden, en ga me niet vertellen wanneer ik wel en niet mag reageren:)

    Bijdrager
    Vasilis

    Ok, ok, ik zal rustiger doen. Sorry.

    Er is een groot aantal voordelen te noemen om geen tabellen te nemen voor de opmaak van een website.
    De belangrijkste lijken mij toch wel de volgende:
    – een site die volgens de css-standaarden is opgebouwd is zeer eenvoudig aan te passen op grafisch gebied. Alle vormgeving zit namelijk maar in één file, niet in elke file.
    – de hoeveelheid code wordt ENORM veel kleiner.
    – op elke browser ziet het er goed uit.

    Op mijn site noem ik nog wat puntjes.

    Voordelen van het gebruik van tabellen voor opmaak ken ik niet.

    Bijdrager
    Dianne

    Bij gebruik van tables is de layout ook goed te scheiden van de content. Ik heb ook een website en ik gebruik CSS voor het ontwerp en tables voor de content. Worden tables beschouwd als een onderdeel van het ontwerp, en niet van de content?

    Het is nog niet helemaal af, maar voor zover is ie CSS en XHTML 1.0 gevalideerd. Er is alleen een klein puntje met niet afgesloten <p> tags in de logboek-sectie, maar dat doet Movable Type automatisch (gaat op den duur naar de prullenbak).[/url]

    Bijdrager
    Vasilis

    Als je bepaalde elementen op hun plek zet dmv een tabel dan gebruik je de tabel als opmaak. Daar is ie eigenlijk niet voor bedoeld.
    Als jij nu bijvoorbeeld besluit om je navigatie aan de rechterkant te gaan zetten, dan moet je in al je pagina’s de tabel gaan aanpassen.
    Met een juist gebruik van de verschillende elementen in een site is dat door een paar kleine aanpassingen in de stylesheet te doen.
    Neem maar als voorbeeld mijn site. Je kan daar een layout kiezen. De HTML is in alle gevallen exact hetzelfde, alleen de stylsheets verschillen. Zo eenvoudig is dat dus.

    Bijdrager
    Dianne

    Ah, ok, dank je voor deze wijze les. Ik zal me eens verdiepen in het gebruik van DIV:)

    Bijdrager
    Vasilis

    Het gaat niet alleen om div.

    Het gaat om een juist gebruik van de verschillende onderdelen van een pagina. Bijvoorbeeld H1, H2, div, ul, maar natuurlijk ook table, mocht je een overzicht in tabelvorm willen tonen.

    Je moet je de inhoud van je site eigenlijk voorstellen zonder plaatjes, zonder vormgeving. Wat heb je dan?

    – een header (diana broere, die mis ik op jouw site)
    – een lijstje met links
    – de tekst, waarin nog kopjes, paragrafen en linkjes te onderscheiden zijn.

    Zo ziet het er dan uit in html:

    [code:1:9d4bf3b032]
    <h1>Dianne Broere</h1>
    <ul>
    <li><a><a href="http://www.diannebroere.nl>Startpagina</a></li>
    <li><a href="http://log.diannebroere.nl">Logboek</a></li>
    <li><a href="http://www.diannebroere.nl/portfolio/index.htm">Portfolio</a></li>
    <li><a href="http://www.diannebroere.nl/pop/index.htm">POP</a></li>
    <li><a href="http://www.diannebroere.nl/cv/index.htm">CV</a></li>
    <li><a href="http://www.diannebroere.nl/contact/index.htm">Contact</a></li>
    </ul>
    <div id="divContent">
    <h2>Startpagina</h2>
    <p>Bla bla bla</p>
    </div>
    [/code:1:9d4bf3b032]

    Dit is hoe je maar wilt neer te zetten.
    Veel plezier er mee. Ik ga nu weer aan het werk.

19 berichten aan het bekijken - 1 tot 19 (van in totaal 19)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.