text rechts van plaatje plaatsen, en text links van plaatje plaatsen. (om en om)

djeric · 15 apr 2011

hallo. ik wil text om en om (links/rechts) naarst een plaatje plaatsen maar het ziet eranders uit wat ik wil. Het 1e plaatje met een link staat netjes aan de linkerkant (tussen de menu's in)en de text komt dan netjes ernaarst staan.
voor het 2e plaatje gaat dit minder goed. Ik heb dan de code align="left" veranderd naar align="right"
maar de text gaat nu extreem ver weg van het plaatje staan.
wat doe ik fout?

HTML:

		<p id="linktxt1">Klik op een logo om naar een andere website te gaan die u iets te bieden heeft.</p>
		
       <br><A HREF="http://www.yourdjeric.nl"><IMG SRC="links/yourdjeric.jpg" WIDTH="450" HEIGHT="112" align="left" STYLE="border: solid 2px blue;" ALT="Yourdjeric"></a><h2 id="txt1">yourdjeric voor al uw apresski feesten.</h2></br>

	   <br><A HREF="http://www.berkmusic.nl"><IMG SRC="links/berkmusic.jpg" WIDTH="285" HEIGHT="88" align="right" STYLE="border: solid 2px blue;" ALT="Berkmusic"></a><h2 id="txt2">Berkmusic voor alle apresski muziek.</h2></br>	
		
		<p id="linktxt2">Wilt u hier kosteloos adverteren? Gebruik dan de knop "contact" uit het linker menu.</p>

mijn css code:

Code:

#linktxt1 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
}
#linktxt2 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
} 
h2#txt1 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
h2#txt2 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
}

Sevo · 16 apr 2011

Voorbeeldje?

djeric · 16 apr 2011

Sevo zei:
Voorbeeldje?

http://members.home.nl/ebosmannetjes/links.html

djeric · 17 apr 2011

ik wil tekst naarst een plaatje plaatsen maar dit lukt me niet goed.

de ene keer wil ik de tekst links hebben staan van het plaatje en de andere keer rechts van het plaatje. maar dit gaat niet zoals ik wil.
het ziet er helemaal anders uit dan ik wil. (zie voorgaande bericht voorbeeld)

wie weet hoe het wel kan? of is t niet mogelijk?

csshunter · 18 apr 2011

Hoi djeric,
Er staat nu:

HTML:

<div id="inhoud"> 
    <h1 id="home">Links</h1>
</div>

Als je de </div> hier eens uit knipt, en weer inplakt vlak voor de ?

djeric · 18 apr 2011

csshunter zei:
Als je de </div> hier eens uit knipt, en weer inplakt vlak voor de ?

gedaan, en opnieuw gevalideerd.

zie nu dat het wel op de juiste manier staat, maar ik gebruik de code en die mag volgens html strict dus niet. ik dacht misschien moet de code: er wel tussen om ruimte maken tussen de linken in. maar geeft geen juiste resultaat van wat ik wou. ik mis iets...

door die krijg ik een nette spatie tussen de plaatjes met link in, en loopt de tekst niet doorelkaar. zoals nu het geval is, staat het dus goed. maar wordt niet geacepteerd. (dacht ik al wel

)

ook bevat alleen de "align="left" atribuut een fout volgens de validator. waarom dan die "align="right" weer niet???

het is me een raadsel, maar me vermoeden gaat uit naar die 
hier moet iets mee gedaan worden denk ik.
heb al zitten kijken op handleiding.html.nl maar kom er niet uit......

mijn html code is nu veranderd in:

HTML:

	    <div id= "inhoud"> 

        <h1 id="home">Links</h1>
		
		<p id="linktxt1">Klik op een logo om naar een andere website te gaan die u iets te bieden heeft.</p>
		
       <br><A HREF="http://www.yourdjeric.nl"><IMG SRC="links/yourdjeric.jpg" WIDTH="450" HEIGHT="112" align="left" STYLE="border: solid 2px blue;" ALT="Yourdjeric"></a><h2 id="txt1">yourdjeric voor al uw apresski feesten.</h2></br>
	   <br><A HREF="http://www.berkmusic.nl"><IMG SRC="links/berkmusic.jpg" WIDTH="285" HEIGHT="88" align="right" STYLE="border: solid 2px blue;" ALT="Berkmusic"></a><h2 id="txt2">Berkmusic voor alle apresski muziek.</h2></br>
		
		<p id="linktxt2">Wilt u hier kosteloos adverteren? Gebruik dan de knop "contact" uit het linker menu.</p>
		
	    </div>

volledige css:

Code:

body { 
background : url(index/achtergrond.jpg); 
} 
ul.navigatie { 
font-family : verdana, Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : bold; 
width : 12em; 
border-right : 1px solid #666; 
padding : 0; 
background-color : #9cc; 
color : #333; 
list-style : none; 
float : left; 
margin-top : 0; 
margin-right : 10px; 
margin-bottom : 1em; 
margin-left : 0; 
} 
ul.rechts { 
float : right; 
margin : 0 0 1em 10px; 
} 
ul.navigatie li { 
margin : 0; 
border-top : 1px solid #003; 
} 
ul.navigatie li a { 
display : block; 
padding : 2px 2px 2px 4px; 
border-left : 10px solid #990000; 
border-right : 1px solid #69c; 
border-bottom : 1px solid #369; 
background-color : #000099; 
color : #c0c0c0; 
text-decoration : none; 
width : 100%; 
} 
ul.rechts { 
margin : 0 0 1em 10px; 
} 
html > body ul.navigatie li a { 
width : auto; 
} 
ul.navigatie li a:hover { 
border-left : 10px solid #006600; 
border-right : 1px solid #69c; 
border-bottom : 1px solid #369; 
background-color : #ffff00; 
color : #ff1493; 
} 
div#welkom { 
text-align : center; 
} 
#inleiding { 
color : #330000; 
font-weight : bold; 
font-size : 1.6em; 
} 
h1#home { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
p#fotos { 
clear : both; 
text-align : center; 
} 
img#links { 
float : left; 
} 
img#rechts { 
float : right; 
} 
div#tip { 
color : blue; 
clear : both; 
float : left; 
width : 45%; 
} 
h2#homeupdate { 
color : #003366; 
margin : 0; 
float : left; 
} 
h2#updatecenter { 
color : #003366; 
margin : 0; 
text-align : center; 
} 
div#teller { 
float : right; 
} 
p#stealth { 
margin : 0; 
} 
table { 
text-align : center; 
border : 5px outset black; 
background : black; 
margin : 0 auto; 
} 
tr#kop { 
height : 30px; 
font-size : 1.1em; 
font-weight : bold; 
color : #c0c0c0; 
background : #c30; 
} 
tr#kop td { 
width : 200px; 
} 
tr { 
height : 40px; 
background : #663300;
color : #FF33FF; 
} 
#inhoud { 
margin : 0 12.5em; 
} 
h1#kop1 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#inf1 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf2 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf3 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
h1#kop2 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#inf4 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf5 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf6 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
h1#nederland { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
h1#drankjes { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#apDiv1 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 1; 
left : 0; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
visibility : visible; 
} 
#apDiv2 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 2; 
left : 22px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv3 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 3; 
left : 44px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv4 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 4; 
left : 66px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv5 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 88px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv6 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 110px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv7 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 132px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv8 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 154px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv9 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 176px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv10 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 198px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv11 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 220px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv12 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 244px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv13 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 266px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv14 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 288px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv15 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 310px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv16 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 332px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv17 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 354px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv18 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 376px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv19 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 398px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv20 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 420px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv21 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 444px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv22 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 466px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv23 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 488px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv24 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 510px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv25 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 532px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv26 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 554px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#Letters { 
height : auto; 
position : relative; 
width : 575px; 
margin-left : auto; 
margin-right : auto; 
} 
#apDivA { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 100; 
visibility : hidden; 
left : 0; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivB { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 102; 
visibility : hidden; 
left : 22px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivC { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 103; 
visibility : hidden; 
left : 44px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivD { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 104; 
visibility : hidden; 
left : 66px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivE { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 105; 
visibility : hidden; 
left : 88px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivF { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 106; 
visibility : hidden; 
left : 110px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivG { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 107; 
visibility : hidden; 
left : 132px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivH { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 108; 
visibility : hidden; 
left : 154px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivI { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 109; 
visibility : hidden; 
left : 176px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivJ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 110; 
visibility : hidden; 
left : 198px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivK { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 111; 
visibility : hidden; 
left : 220px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivL { 
position : absolute; 
width : 200px; 
height : auto; 
z-index : 112; 
visibility : hidden; 
left : 242px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivM { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 264; 
visibility : hidden; 
left : 264px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivN { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 114; 
visibility : hidden; 
left : 286px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivO { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 115; 
visibility : hidden; 
left : 308px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivP { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 116; 
visibility : hidden; 
left : 330px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivQ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 117; 
visibility : hidden; 
left : 352px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivR { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 118; 
visibility : hidden; 
left : 374px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivS { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 119; 
visibility : hidden; 
left : 396px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivT { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 120; 
visibility : hidden; 
left : 418px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivU { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 121; 
visibility : hidden; 
left : 440px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivV { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 122; 
visibility : hidden; 
left : 462px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivW { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 123; 
visibility : hidden; 
left : 484px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivX { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 124; 
visibility : hidden; 
left : 506px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivY { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 125; 
visibility : hidden; 
left : 528px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivZ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 126; 
visibility : hidden; 
left : 550px; 
top : 28px; 
border : 1px solid #009; 
} 
#Letters a:link { 
color : #000000; 
text-decoration : none; 
} 
#Letters a:hover { 
color : #ff0000; 
} 
#Letters a:visited { 
color : #3300ff; 
} 
#Letters a:active { 
color : #ff0000; 
} 
table a{
color: #CCFF33;
} 
table a:hover{
color: #FF0066;
}
#sponsertxt1 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
}
#sponsertxt2 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
} 
div#sponser { 
text-align : center; 
} 
#linktxt1 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
}
#linktxt2 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
text-align : center; 
} 
h2#txt1 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
h2#txt2 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
}

zie gehele html code in bron: http://members.home.nl/ebosmannetjes/links.html

CaptainBri · 18 apr 2011

Als je de DIV een gefixeerde breedte geeft, kan je het plaatje rechts alignen, misschien is dit wat je bedoeld:

HTML:

<div style="width:200px">
<img src="plaatje.jpg" align="right" style="float:right" />
<p>Dit is tekst</p>
</div>

<div style="width:200px">
<img src="plaatje.jpg" align="left" style="float:left" />
<p>Dit is tekst</p>
</div>

P.S. de stijlen moeten natuurlijk wel in de Style Sheet, ik heb het even snel gedaan als voorbeeld zonder Style Sheet.

djeric · 18 apr 2011

CaptainBri zei:
Als je de DIV een gefixeerde breedte geeft, kan je het plaatje rechts alignen, misschien is dit wat je bedoeld:

"dit is tekst" staat bij het 1e plaatje van "home" ongeveer 3 centimeter ervandaan.
terwijl bij het 2e plaatje van "home" "dit is tekst" bijna tegen elkaar staat.
dit is al niet juist toch???

ze moeten netjes naarst elkaar komen, met zelfde afstand en op gelijke hoogte.
die eerste staat dus wel goed, maar de 2e niet die is anders.

moet er iets misschien met een float gemaakt worden van die plaatjes (die tevens een link bevatten) ?????

ik begrijp het nu ff niet meer.
hoe krijg ik t beste resultaat???

CaptainBri · 18 apr 2011

Is dit misschien wat je bedoelt?

Code:

HTML:

<div style="width:200px">
<img src="plaatje.jpg" align="right" style="float:right" />
<p>Dit is tekst</p>
</div>
 
<div style="width:200px">
<img src="plaatje.jpg" align="left" style="float:left" />
<p style="float:right">Dit is tekst</p>
</div>

djeric · 18 apr 2011

ja dat wel.
zo moet het idd.

maar snap totaal niet met mijn code dan.
het is compleet anders (afgezien van bestand namen)

moet nu heel mijn code vervangen worden door jou code?
en dan de link erin en klaar?

CaptainBri · 18 apr 2011

djeric zei:
moet nu heel mijn code veravnagen worden door jou code?
en dan de link erin en klaar?

Dat zou ik niet zo snel doen, ik probeer morgen het voorbeeld toe te passen op je code, nu ga ik eerst slapen =)

Je kan natuurlijk wel wat dingetjes proberen, zorg er wel voor dat je een back-up hebt van je bestanden!

csshunter · 19 apr 2011

Zoiets?

HTML:

<div id="inhoud"> 

    <h1 id="home">Links</h1>
		
    <p class="center">Klik op een logo om naar een andere website te gaan die u iets te bieden heeft.</p>

    <div class="txtRechts">
        <a href="http://www.yourdjeric.nl"><img src="links/yourdjeric.jpg" alt="Yourdjeric" width="450" height="112"></a>
        <p>yourdjeric voor al uw apresski feesten.</p>
        <div class="clearB"><!-- ! --></div>
    </div>

    <div class="txtLinks">
        <a href="http://www.berkmusic.nl"><img src="links/berkmusic.jpg" alt="Berkmusic" width="285" height="88"></a>
        <p>Berkmusic voor alle apresski muziek.</p>
        <div class="clearB"><!-- ! --></div>
    </div>
		
    <p class="center">Wilt u hier kosteloos adverteren? Gebruik dan de knop "contact" uit het linker menu.</p>

</div>

met als toegevoegde css:

Code:

#inhoud p {
   margin: 0;
   padding: 0;
   color: maroon; 
   font-weight: bold; 
   font-size: 1.2em;
}

#inhoud .txtRechts,
#inhoud .txtLinks {
   margin: 30px 0;
}

#inhoud .txtRechts a {
   float: left;
   margin-right: 10px;
}

#inhoud .txtRechts p {
   text-align: right;
}

#inhoud .txtLinks a {
   float: right;
   margin-left: 10px;
}

#inhoud a img {
   vertical-align: top;
   border: 2px solid blue;
}

.clearB{
   clear: both;
}
.center {
   text-align: center;
}

Een align="left" of align="right" in de html zou ik niet gebruiken; dat is overbodig bij een float, en al > 10 jaar achterhaalde/afgekeurde html. Dat valideert niet lekker!

Met vriendelijke groet,
CSShunter

djeric · 19 apr 2011

csshunter zei:
Zoiets?

ja ziet er wel prima uit hoor.
Al is het resultaat goed gekeurd door de validator, je blijft alsnog die tekst op een rare manier weergegeven worden.

in het voorbeeld van CaptainBri zie je dit:

CaptainBri zei:

nu lijkt de tekst een eigen breedte te zoeken, en ziet er geheel compleet anders uit kwa afstand.

is dit nog mooier te krijgen dat het zelfde resultaat heeft kwa afstand als het 1e plaatje met link???

ik bekijk het via een breed beeld scherm met scherm resolutie: 1280x768 in ie8

edit: vind jullie hulp/inzet echt fantastisch hoor.

csshunter · 19 apr 2011

Ja, je moet ervoor kiezen: òf de tekst op een bepaalde afstand van de afbeelding, òf de tekst afwisselend links of rechts in de kolom uitlijnen.
Bij dezelfde tekst links en rechts, zoals in het plaatje hierboven komt dat op hetzelfde neer.
Zodra je verschillende tekstlengtes hebt, wordt het anders.

Maar er zijn ook nog wat andere mogelijkheden om het mooier te laten ogen.
Bv. een klein en fijn kadertje om elke advertentie, en dan alle afbeeldingen dezelfde grootte, bv. 285x70px:

Code:

#inhoud .txtRechts,
#inhoud .txtLinks {
   height: 75px;
   margin: 30px 0;
   border: 1px solid maroon;
   padding: 10px;
}

Dat is dan de versie met naar de zijkant uitgelijnde teksten.

Of de versie met gelijke afstand tot de afbeelding:

Code:

#inhoud .txtRechts,
#inhoud .txtLinks {
   height: 75px;
   margin: 30px 0;
   border: 1px solid maroon;
   padding: 10px;
}

#inhoud .txtRechts a {
   float: left;
   margin-right: 20px;
}

#inhoud .txtRechts p {
   float: left;
}

#inhoud .txtLinks a {
   float: right;
   margin-left: 20px;
}
#inhoud .txtLinks p {
   float: right;
}

Met vriendelijke groet,
CSShunter

djeric · 20 apr 2011

csshunter zei:
Ja, je moet ervoor kiezen: òf de tekst op een bepaalde afstand van de afbeelding, òf de tekst afwisselend links of rechts in de kolom uitlijnen.

Ik heb het gevonden dan. neem toch je eerdere antwoord aan. heb wel een stukje toegevoegd aan de text. Heb zitten kijken voor een pijl naar rechts en pijl naar links. dacht eerst aan >> en << maar dat is niet zo mooi. Heb nu iets gevonden wat wel mooi is, en werkt. namelijk: ← (pijl naar links) en: → (pijl naar rechts) Alleen blijven deze pijlen erg klein en bijna onopvallend. Ik kan ze groter maken met maar is niet groot genoeg en front mag weer niet in de html volgens de validator. hoe krijg ik die weer groot die pijlen??? Ik heb de pijlen verwerkt op me pagina in deze html/css code:

en heb dan deze html code nu momenteel:

HTML:

<div id="inhoud"> 
 
    <h1 id="home">Links</h1>
        
    <p class="center">Klik op een logo om naar een andere website te gaan die u iets te bieden heeft.</p>
 
    <div class="txtRechts">
        <a href="http://www.yourdjeric.nl"><img src="links/yourdjeric.jpg" alt="Yourdjeric" width="450" height="112"></a>
        <p>&larr;yourdjeric voor al uw apresski feesten.</p>
        <div class="clearB"><!-- ! --></div>
    </div>
 
    <div class="txtLinks">
        <a href="http://www.berkmusic.nl"><img src="links/berkmusic.jpg" alt="Berkmusic" width="285" height="88"></a>
        <p>Berkmusic voor alle apresski muziek.&rarr;</p>
        <div class="clearB"><!-- ! --></div>
    </div>
        
    <p class="center">Wilt u hier kosteloos adverteren? Gebruik dan de knop "contact" uit het linker menu.</p>
 
</div>

en deze css:

Code:

#inhoud p {
   margin: 0;
   padding: 0;
   color: maroon; 
   font-weight: bold; 
   font-size: 1.2em;
}

#inhoud .txtRechts,
#inhoud .txtLinks {
   margin: 30px 0;
}

#inhoud .txtRechts a {
   float: left;
   margin-right: 10px;
}

#inhoud .txtRechts p {
   text-align: right;
}

#inhoud .txtLinks a {
   float: right;
   margin-left: 10px;
}

#inhoud a img {
   vertical-align: top;
   border: 2px solid blue;
}

.clearB{
   clear: both;
}
.center {
   text-align: center;
}

dus bedankt voor je hulp om de juiste weergave te geven, fouten zijn er nu uit (aldus validator) alleen rest de vraag hoe die 2 pijlen te vergoten in de tekst ??????

csshunter · 20 apr 2011

Daarvoor kan je om de code van die pijlen een ... zetten, die je in de css opblaast:

Code:

.txtLinks span,
.txtRechts span {
   font-size: 2em;
   }

djeric · 21 apr 2011

csshunter zei:
Daarvoor kan je om de code van die pijlen een ... zetten, die je in de css opblaast:
[/CODE]

ja tnx gelukt.

nu is t toch duidelijk.

bedankt joh, super bedankt allen......

echt top.:thumb::thumb::thumb::d

text rechts van plaatje plaatsen, en text links van plaatje plaatsen. (om en om)

djeric

Gebruiker

Sevo

Gebruiker

djeric

Gebruiker

djeric

Gebruiker

csshunter

Meubilair

djeric

Gebruiker

CaptainBri

Gebruiker

djeric

Gebruiker

CaptainBri

Gebruiker

djeric

Gebruiker

CaptainBri

Gebruiker

csshunter

Meubilair

djeric

Gebruiker

csshunter

Meubilair

djeric

Gebruiker

csshunter

Meubilair

djeric

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy