Foto + content in midden zetten

**Bjorn v U.** · 21-02-2010, 16:40

Dit moet werken:

Code:

<!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" xml:lang="en" lang="en">
<head>
    <title></title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        body { font-family: Arial; }
        img { border: 0; vertical-align: middle; }
        a { color: #ff9900; }
        #wrap { width: 1000px; margin: 0 auto; }
        div.item { width: 900px; }
        div.item h3 { color: #FF9900; font-size: 1.9em; padding-top: 50px; }
        div.item p {
            border-top: 5px solid #FF9900;
            border-bottom: 5px solid #FF9900;
            color: #696969;
            padding: 10px; }
        div.item img.mainimg { float: left; }
        div.item span { float: right; }
        .clear { clear: both; }
    </style>
</head>

<body>
<div id="wrap">
    <div class="item">
        <img class="mainimg" src="iphone.png" alt="iPhone"/>
        <h3>Unlock Uw PDA!</h3>
        <p>
            U heeft een nieuwe PDA gekocht?<br />
            Waarschijnlijk een veelzijdig apparaat, maar u bent gebonden aan een duur abonnement.<br />
            Voor slechts 2,99 EURO kan u met elke provider uw PDA gebruiken.<br />
            Na de unlock behoudt u al uw functies op uw nieuwe PDA!<br />
        </p>
        <span><img src="email-16x16.png" alt="Email"/> <img src="twitter-16x16.png" alt="Twitter"/></span>
        <h4><a href="#">Unlock uw PDA nu, klik hier!</a></h4>
        <span>
            <a href="gsm.htm"><img alt="" src="nokia-3600-slide.jpg" width="59" height="78" /></a> 
            <a href="iphone.htm"><img alt="" src="iphone.png" width="57" height="79" /></a> 
            <a href="pda.htm"><img alt="" src="blackberry-pearl.jpg" width="61" height="77" /></a>
        </span>
    </div>
    <br class="clear" />
</div>
</body>
</html>

**Stijn Adams** · 21-02-2010, 16:44

Origineel gepost door Bjorn v U.

Dit moet werken:

Code:

<!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" xml:lang="en" lang="en">
<head>
    <title></title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        body { font-family: Arial; }
        img { border: 0; vertical-align: middle; }
        a { color: #ff9900; }
        #wrap { width: 1000px; margin: 0 auto; }
        div.item { width: 900px; }
        div.item h3 { color: #FF9900; font-size: 1.9em; padding-top: 50px; }
        div.item p {
            border-top: 5px solid #FF9900;
            border-bottom: 5px solid #FF9900;
            color: #696969;
            padding: 10px; }
        div.item img.mainimg { float: left; }
        div.item span { float: right; }
        .clear { clear: both; }
    </style>
</head>
 
<body>
<div id="wrap">
    <div class="item">
        <img class="mainimg" src="iphone.png" alt="iPhone"/>
        <h3>Unlock Uw PDA!</h3>
        <p>
            U heeft een nieuwe PDA gekocht?<br />
            Waarschijnlijk een veelzijdig apparaat, maar u bent gebonden aan een duur abonnement.<br />
            Voor slechts 2,99 EURO kan u met elke provider uw PDA gebruiken.<br />
            Na de unlock behoudt u al uw functies op uw nieuwe PDA!<br />
        </p>
        <span><img src="email-16x16.png" alt="Email"/> <img src="twitter-16x16.png" alt="Twitter"/></span>
        <h4><a href="#">Unlock uw PDA nu, klik hier!</a></h4>
        <span>
            <a href="gsm.htm"><img alt="" src="nokia-3600-slide.jpg" width="59" height="78" /></a> 
            <a href="iphone.htm"><img alt="" src="iphone.png" width="57" height="79" /></a> 
            <a href="pda.htm"><img alt="" src="blackberry-pearl.jpg" width="61" height="77" /></a>
        </span>
    </div>
    <br class="clear" />
</div>
</body>
</html>

Staat inderdaad in het midden!
Ik zal een paar dingen opnieuw moeten verzetten en aanpassen om het oroginele te krijgen.
Heb je de code ingekort?

Maar, zeer erg bedankt! (Iedereen trouwens!)

**Bjorn v U.** · 21-02-2010, 16:46

Ik heb het helemaal overnieuw geschreven, aan die code van jou ga ik niet eens beginnen :)
Mag ik vragen hoe je aan dat soort code komt? Een WYSIWYG editor?

**Stijn Adams** · 21-02-2010, 16:57

Ik gebruik (gratis) office Shairpoint Designer.
Was vroeger betaald.

Ik maak het altijd met dat en dan code verbeteren, etc.
Thx, CSS valid, maar HTML 2 opmerkingen, één niks van aantrekken, tweede weet ik niet goed op te lossen.

Wilt u dat ook doen?
Feedback volgt ZEKER!

**Bjorn v U.** · 21-02-2010, 17:05

Oops :), even dit tussen je <head></head>

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

**Stijn Adams** · 21-02-2010, 17:08

Opgelost!
Aan iedereen dank!

Foto + content in midden zetten

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Foto + content in midden zetten

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen