15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)
  • Q:
    Bijdrager
    iRoy

    Ik krijg niks in de content?

    Hallo,
    Ik heb deze website ontworpen in Photoshop(slicen) en ik wil nu in het grote witte vlak tekst zetten, ik heb al veel manieren geprobeerd maar het lukt echt niet. de url is : http://royrijkers.downfire.com
    de html code is :

    <html>
    <head>
    <title>pixeldesigns222</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
    <style type=”text/css”>
    <!–
    body {
    background-color: #e5e5e5;
    }
    –>
    </style></head>
    <body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
    <!– ImageReady Slices (pixeldesigns222.psd) –>
    <table width=”800″ height=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”Table_01″>
    <tr>
    <td colspan=”9″>
    <img src=”https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=images/index_01.&ext=gif&h=66a7f0d5926bf5e52bc315c91257ab68&t=1606196532&#8243; width=”800″ height=”17″ alt=””></td>
    </tr>
    <tr>
    <td rowspan=”5″>
    <img src=”images/index_02.gif” width=”50″ height=”583″ alt=””></td>
    <td colspan=”7″>
    <img src=”images/index_03.gif” width=”700″ height=”158″ alt=””></td>
    <td rowspan=”5″>
    <img src=”images/index_04.gif” width=”50″ height=”583″ alt=””></td>
    </tr>
    <tr>
    <td>
    <img src=”images/index_05.gif” width=”181″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_06.gif” width=”51″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_07.gif” width=”67″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_08.gif” width=”75″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_09.gif” width=”62″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_10.gif” width=”64″ height=”25″ alt=””></td>
    <td>
    <img src=”images/index_11.gif” width=”200″ height=”25″ alt=””></td>
    </tr>
    <tr>
    <td colspan=”7″>
    <img src=”images/index_12.gif” alt=”” width=”700″ height=”350″></td>
    </tr>
    <tr>
    <td colspan=”7″>
    <img src=”images/index_13.gif” width=”700″ height=”25″ alt=””></td>
    </tr>
    <tr>
    <td colspan=”7″>
    <img src=”images/index_14.gif” width=”700″ height=”25″ alt=””></td>
    </tr>
    </table>
    <!– End ImageReady Slices –>
    </body>
    </html>

    Alvast bedankt voor jullie hulp!, ook op en aanmerkingen zijn welkom over het ontwerp.
    Roy

    Bijdrager
    chatsmit

    Het slice plaatje van het grote witte vlak bevat aan de onderkant nog de bovenkant van de grasfoto. Probeer je slices anders te plaatsen, waardoor 1 slice precies het witte vlak is.

    Met de HTML code die imageready dan voor je maakt, kun je in de rij waar de compleet witte foto eigenlijk hoort te zitten, je pagina maken door gewoon de image weg te laten en je tekst en inhoud te plaatsen.

    Ziet er verder lekker fris uit! Alleen misschien iets TE veel gras.

    Bijdrager
    iRoy

    bedankt voorje reactie, ik zal er zeker wat aan hebben, maar is het echt niet mogelijk om het op een afbeelding te plaatsen (m.u.v. layers)?

    Bijdrager
    computer space

    Met CSS kun je gewoon 3 divs op elkaar leggen. Niks slicen. Een div met de achtergrondplaat, een met het menu en een met de tekst. CSS is veel meer van deze tijd dan zo’n brak opgeknipte tabellenbende. Ook minder kans op ‘gaten’.

    Zoiets:
    [code:1:7e2244497f]<html><head><style type="text/css">
    #background
    {position:absolute; background-image: url(http://www…../background.jpg); width:700px; height:500px; border:0px; top:0px; left:0px; z-index: -1;}
    #menu
    {position:absolute; width:500px; height:50px; border:0px; top:50px; left:100px; z-index: 0;}
    #tekstvak
    {position:absolute; width:600px; height:400px; border:0px; top100px; left:50px; z-index: 0; }
    </style></head>

    <body>
    <div class="background"></div>
    <div class="menu">hierjemenu</div>
    <div class="tekstvak">hierjetekst</div>
    </body></html>[/code:1:7e2244497f]

    Bijdrager
    iRoy
    ”Martiniman”

    Met CSS kun je gewoon 3 divs op elkaar leggen. Niks slicen. Een div met de achtergrondplaat, een met het menu en een met de tekst. CSS is veel meer van deze tijd dan zo’n brak opgeknipte tabellenbende. Ook minder kans op ‘gaten’.

    Is hier toevallig een korte en duidelijke duidelijke tutorial over geschreven? :lol:

    Dankje

    Bijdrager
    computer space

    Pronto!
    Zie hierboven.

    Bijdrager
    chatsmit
    ”iRoy”

    bedankt voorje reactie, ik zal er zeker wat aan hebben, maar is het echt niet mogelijk om het op een afbeelding te plaatsen (m.u.v. layers)?

    Als je nog HTML lerende bent, kun je het beste Martinimans tip gebruiken en het meteen goed leren, door CSS en div’s te gebruiken i.p.v. tabellen.

    [size=9:c9675a1dc1]Je kunt zolang het huidige plaatje als achtergrond voor van TD instellen door de code te veranderen in:
    [code:1:c9675a1dc1]<td colspan="7" background="images/index_12.gif">[/code:1:c9675a1dc1][/size:c9675a1dc1] :wink:

    Bijdrager
    computer space

    Verschil in lengte van code of niet 8) :P ?
    Met CSS kun je gewoon in lagen werken en de tekst dus op de achtergrond plaatsen. Hiervoor zorgt de z-index in mijn voorbeeld.

    Bijdrager
    iRoy
    ”chatsmit”
    ”iRoy”

    bedankt voorje reactie, ik zal er zeker wat aan hebben, maar is het echt niet mogelijk om het op een afbeelding te plaatsen (m.u.v. layers)?

    Als je nog HTML lerende bent, kun je het beste Martinimans tip gebruiken en het meteen goed leren, door CSS en div’s te gebruiken i.p.v. tabellen.

    [size=9:1d76d9c423]Je kunt zolang het huidige plaatje als achtergrond voor van TD instellen door de code te veranderen in:
    [code:1:1d76d9c423]<td colspan="7" background="images/index_12.gif">[/code:1:1d76d9c423][/size:1d76d9c423] :wink:

    ik heb dit gedaan en nu krijg ik dit:( http://royrijkers.downfire.com

    Bijdrager
    chatsmit

    ja, das ook mooi… De breedte en hoogte van het plaatje moest er nog bij dan wordt het dit:
    [code:1:c4eb49056e]<td colspan="7" width="700" height="350" background="images/index_12.gif">[/code:1:c4eb49056e]
    maar ja eigenlijk is dit niet ok, het werkt, maar als je het toch nog moet leren, leer het dan dan zoals hierboven aangegeven wordt.

    Bijdrager
    iRoy

    ok, ik zal me is wat meer gaan verdiepen in css:wink:

    Bijdrager
    chatsmit

    succes, ik moet er zelf ook eens aan geloven…

    Bijdrager
    iRoy
    ”Martiniman”

    Met CSS kun je gewoon 3 divs op elkaar leggen. Niks slicen. Een div met de achtergrondplaat, een met het menu en een met de tekst. CSS is veel meer van deze tijd dan zo’n brak opgeknipte tabellenbende. Ook minder kans op ‘gaten’.

    Zoiets:
    [code:1:59f13b75d8]<html><head><style type="text/css">
    #background
    {position:absolute; background-image: url(http://www…../background.jpg); width:700px; height:500px; border:0px; top:0px; left:0px; z-index: -1;}
    #menu
    {position:absolute; width:500px; height:50px; border:0px; top:50px; left:100px; z-index: 0;}
    #tekstvak
    {position:absolute; width:600px; height:400px; border:0px; top100px; left:50px; z-index: 0; }
    </style></head>

    <body>
    <div class="background"></div>
    <div class="menu">hierjemenu</div>
    <div class="tekstvak">hierjetekst</div>
    </body></html>[/code:1:59f13b75d8]

    Ik heb dit geprobeert met mijn eigen gegevens natuurlijk maar nu geeft hij het plaatje niet meer weer, alleen de teksts zie ik : http://royrijkers.downfire.com

    Bijdrager
    computer space

    Zo moet ie zijn:
    [code:1:4e602caf6d]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    .container {position:absolute; width: 800px; height: 600px; border: 0px; left:50%; top:0px; margin:0 0 0 -400px; z-index: 0;}
    .menu {position:absolute; width: 500px; height: 50px; border: 0px; top: 210px; left: 100px; z-index: 1;}
    .tekst {position:absolute; width: 600px; height: 200px; border: 0px; top: 250px; left: 100px; z-index: 2;}
    </style>
    </head>

    <body>

    <div class="container"><img src="http://royrijkers.downfire.com/images/pixeldesign.gif" alt="background" />

    <span class="menu">Home | Diensten | Werkwijze | Portfolio | Contact</span>

    <span class="tekst">Welkom op de site van PixelDesigns.</span>
    </div>

    </body></html>[/code:1:4e602caf6d]

    De hekjes moesten . zijn. Ook had ik voor de versimpeling doctypes weggelaten. Ook heb ik m maar meteen gecentreerd. Deze is getest en klopt.
    En van de teksten heb ik spans gemaakt, genest in de container-div. Net iets beter
    Trouwens, die gif zou ik niet interlaced doen.

    Bijdrager
    iRoy

    hartstikke bedankt!:D

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

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