tekst naast afbeelding

merlijn16 · 27 jun 2010

hallo,
Ik heb in IE8 en FF netjes de tekst naast de afbeelding staan. Echter in IE7 begint de tekst pas onder de afbeelding. Weet iemand hoe ik dit kan oplossen?
Heb even een testpagina online gezet zie:

Dit heb ik in de css staan:

Code:

hr {
	clear: both;
	}
#rightside .ill-links, #rightside .ill-rechts {
	margin-top: 4px;	
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: 0.85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
        padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 15px;
        margin-right: 25px;
        padding: 0px;
	}
.ill-links img, .ill-rechts img {
	margin-bottom: 5px;
	}

En dit in de pagina:

HTML:

<p style="width: 150px;" class="ill-links">
	<img src="images/paard.gif" width="150" alt="paard" /><br />
	Ik ben bijschrift-tekst en ik kom precies onder de afbeelding te staan.</p>

In de bijlage een plaatje hoe het in IE7 getoont wordt.
Heeft iemand een idee hoe ik tekst ook netjes naast de afbeelding kan krijgen in IE7? (in IE6 zal dit probleem ook wel spelen)

remcovg · 27 jun 2010

je zou de tekst in een divje kunnen zetten met een vaste hoogte..
of op de afbeelding in je css het volgende toevoegen:
Display: inline;
geloof ik...
Het beste kan je een margin afstand instellen vanaf je content frame...
maar dat moet je even experimenteren..
veel browsers reageren wat anders op css code.. dus je zult moeten kijken welke code het meest universeel is..

merlijn16 · 27 jun 2010

bedankt voor je reactie. Heb display: inline; geprobeert echter het probleem blijft.
Heb meer dan 50 pagina's met op elke pagina een aantal plaatjes

Ik hoopte alleen iets in css te hoeven veranderen of kleine aanpassing in code van plaatje.
De plaatjes met de tekst ernaast staan ook al in een div.

Nog ander idee?

That Guy · 28 jun 2010

het ziet er naar uit dat de clear: both niet helemaal goed werkt. Haal die eens weg? :thumb:

merlijn16 · 28 jun 2010

helaas Vegras, dat lost het probleem ook niet op.

Edit:
denk dat ik inmiddels weet wat het probleem is. Nu nog uitzoeken WAAR het zit.
Denk dat het veroorzaakt wordt door een fout elders in de css. Validator geeft foutmeldingen.
Ik ga eerst hier mee aan de slag.

merlijn16 · 28 jun 2010

validator fouten hadden er helaas geen effect op.

weet wel waar het probleem mogelijk moet zitten. Ooit de plaatjes in de pagina op deze manier met forumhulp voor elkaar gekregen. Toen ook getest in IE6 en IE7. No Problem!!

Heb de oude codes erbij gezocht, hier was later een kleine aanpassing in gedaan omdat lettergrootte niet toegepast werd bij de codes van het onderschrift van plaatje. De lettergrootte uit "content" werd toegepast.
Met dit "oude" stukje code werkt alles ook in IE6 en IE7

Code:

hr {
	clear: both;
	}
.ill-links, .ill-rechts {
	margin-top: 4px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}

Code was daarna aangepast naar onderstaand zodat lettergrootte ook werkte.

Code:

hr {
	clear: both;
	}
#rightside .ill-links, #rightside .ill-rechts{  
       	margin-top: 4px;	
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}

Iemand een idee hoe ik het probleem kan oplossen?

defietser · 28 jun 2010

Bekijk dit eens in Ie7 of dit doet wat je wenst.
Ik heb nml Ie7 niet maar heb in maxton gekeken ook nog een oudere versie die ik heb en dat ziet er daar goed uit.

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
}
#rightside{
	float: right;
	width: 700px;
	height: auto;
	background-color: #ffffff;
}
#wrapper {
	height: auto;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
.textContent {
	height: auto;
	width: 700px;
	float: right;
	margin-top: 10px;
	margin-bottom: 10px;
}
.paardRechts {
	margin: 20px;
	float: right;
	height: auto;
	width: 190px;
	font-size: 9pt;
	font-style: italic;
	text-align: left;
}
.paardLinks {
	margin: 20px;
	float: left;
	height: auto;
	width: 190px;
	font-size: 9pt;
	font-style: italic;
}
.textRechts {
	float: right;
	margin: 20px;
	width: 400px;
}
.textLinks {
	float: right;
	margin: 20px;
	width: 400px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="rightside">
 <div class="textContent">
 	<div class="paardRechts"><img src="images/paard.gif" width="230" height="198" /><br />
Ik ben bijschrift-tekst en ik kom precies onder de afbeelding te staan.</div>
    <p class="textLinks">Etiam posuere justo sit amet odio vulputate faucibus. Donec tempus aliquet mauris vel varius. Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula justo ut 
justo dapibus at cursus quam ultrices. Integer sit amet pharetra enim. Aenean in enim risus. Pellentesque habitant 
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nunc nisi, elementum ut pulvinar et, 
viverra vitae massa. Sed blandit porttitor tempus. 
Curabitur eu congue nisl. Donec dignissim nibh id magna sagittis et consectetur leo facilisis. Donec quis semper justo. 
Donec scelerisque ornare felis, nec rutrum arcu mollis eu. Quisque sed euismod turpis. Pellentesque convallis mi vitae 
arcu sollicitudin ultricies. Ut vitae tellus eu ligula tincidunt sagittis ac at quam. Pellentesque vel ipsum elit, eget 
luctus metus.</p>
</div><br />
<div class="textContent">
 	<div class="paardLinks"><img src="images/paard.gif" width="230" height="198" /><br />
Ik ben bijschrift-tekst en ik kom precies onder de afbeelding te staan.</div>
    <p class="textRechts">Etiam posuere justo sit amet odio vulputate faucibus. Donec tempus aliquet mauris vel varius. Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula justo ut 
justo dapibus at cursus quam ultrices. Integer sit amet pharetra enim. Aenean in enim risus. Pellentesque habitant 
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nunc nisi, elementum ut pulvinar et, 
viverra vitae massa. Sed blandit porttitor tempus. 
Curabitur eu congue nisl. Donec dignissim nibh id magna sagittis et consectetur leo facilisis. Donec quis semper justo. 
Donec scelerisque ornare felis, nec rutrum arcu mollis eu. Quisque sed euismod turpis. Pellentesque convallis mi vitae 
arcu sollicitudin ultricies. Ut vitae tellus eu ligula tincidunt sagittis ac at quam. Pellentesque vel ipsum elit, eget 
luctus metus.</p>
</div>
</div>
</div>
</body>
</html>

Mvg
Defietser

merlijn16 · 28 jun 2010

bedankt, echter ik heb al meer dan 50 pagina's klaar met op elke pagina meerdere plaatjes.
Is erg veel werk om aan te passen.
Terwijl het wel prima gewerkt heeft. Er is ergens een foutje ingeslopen in de css en ik weet niet hoe dit op te lossen.

merlijn16 · 29 jun 2010

Er moet ergens iets in de CSS staan wat er voor zorgt dat de tekst niet naast de afbeelding getoond wordt in IE6 en IE7.
Hier de volledige CSS:

Code:

* {margin:0px;padding:0px;top:0px;left:0px;}

body{
	text-align: center;
	background-color: #003300;
        scrollbar-arrow-color: #003300;
        scrollbar-face-color: #ffffff;
        scrollbar-highlight-color: #000000;
        scrollbar-3dlight-color: #ffffff;
        scrollbar-shadow-color: #003300;
        scrollbar-darkshadow-color: #333333;
        scrollbar-track-color: #ffffff;                                           
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 923px;
        text-align: left;
	background-color: #ffffff;
}
#header{
	background-image: url(images/header.jpg);
	height: 144px;
	width: 923px;
	left: 0px;
	top: 0px;
}
#header a{
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	color: #ffffff;
	text-decoration: none;
	margin-left: 12px;
	font-family: "Courier New", Courier, mono;
	margin-top: 35px;
}
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 923px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;
	background-image: url(images/button.gif);
	height: 20px;
	width: 91px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}
#leftside{
	float: left;
}
#leftside a{
        color: #003300;
        text-decoration: none;}
#leftside a:hover{ color: #666666;}
#leftside h3{
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00306f;
	border-right-color: #00306f;
	border-bottom-color: #00306f;
	border-left-color: #00306f;
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	display: block;
	margin-left: 35px;	
	margin-top: 35px;	
}
#content{	
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;                       
        margin-top: 170px;
	position: absolute;
	width: 923px;
        height: 560px;
	background-color: #f5f5f5;
}
#footer{
	clear: both;
	background-color: #003300;
	position: relative;
	height: 46px;
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#rightside{
	float: right;
	width: 705px;
	height: 560px;
        background-color: #ffffff;
	margin-right: 0px;
	margin-top: 0px;
	overflow: auto;           
}
p.antwoord {
           display: none;
           width: 250px;
           border: 1px solid; 
           border-color: #003300;
           background-color: #f5f5f5;
           padding: 5px;
           font-size: 12px;
}
div.ex1{
        width: 175px;
        padding: 10px;
        border: 1px solid;
        border-color: #003300;
        margin-top: 15px;
        margin-left: 10px;
}        
#picture1{
	margin-left: 0px;
        margin-bottom: 10px;
	height: 4px;
	width: 180px;
	background-image: url(images/lijn.gif);        
}
hr {
	clear: both;
	}
#rightside .ill-links, #rightside .ill-rechts{  
       	margin-top: 4px;       
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
        padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 15px;
        margin-right: 25px;
        padding: 0px;
	}	
.ill-links img, .ill-rechts img {
	margin-bottom: 3px;
	}
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	margin-left: 25px;
	margin-bottom: 20px;
	width: 633px;
}      
#rightside h1{
	margin: 10px 0px 10px 0px;
	width: 580px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
        margin-left: 100px;
}
#rightside span{
	margin-top: 10px;
	margin-bottom: 4px;
	width: 625px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
#rightside a{
        color: #003300;
        text-decoration: underline;}
#rightside a:hover{ color: #666666;}
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	float: right;
	padding-top: 23px;
	margin-right: 10px;
}
#footer a{
        color: #ffffff;
        text-decoration: none;}
#footer a:hover{color: #ffffff;}
#imagepreloader{
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	width: 0px;
}

Ben er al weken mee aan het puzzelen. Ik hoop dat iemand weet hoe ik het probleem kan oplossen.

Ik had ooit de vraag gepost in het forum hoe ik tekst netjes onder een afbeelding kon plaatsen, ben toen door csshunter geholpen die mij een voorbeeld stuurde. Dat werkte perfect in IE6, 7, 8, FF etc.
Dat was dit voorbeeld: http://developerscorner.nl/csshunter/img-bijschrift-4.htm
Heb de codes overgenomen in mijn externe stylesheet, ervan uitgaand dat het dan ook hetzelfde getoont werd in verschillende browsers. Ruim 50 pagina's verder kom ik er pas achter dat dit niet zo is.

Ziet iemand een code in de CSS staan die de plaatjescode "tegenwerkt"?

Naarling · 29 jun 2010

De pagina die in de HTML pagina zelf staat weegt zwaarder dan de HTML in externe sheets. Als ik de interne CSS weghaal ziet de site er in Opera in elk geval nog steeds normaal uit, wellicht dat het dan in IE6/7 ook goed werkt. Voor de duidelijkheid, CSS in externe bestanden weegt, meestal, minder zwaar dan interne CSS, wat weer minder weegt dan inline CSS wat weer minder weegt dan CSS op de PC van de bezoeker. (je kunt met veel browsers zelf css aan een pagina toevoegen om het uitelijk op je eigen pc te verandern. Ik zou dus, als ik dat zou willen, een stukje CSS kunnen gebruiken om alle tekst op het forum rood en enorm te maken)

merlijn16 · 29 jun 2010

ik begrijp je niet helemaal.
Als ik de codes in de html pagina zet zoals het voorbeeld van csshunter, ook dan werkt het bij mij niet in IE6 en IE7. Alsof er iets in de externe stylesheet staat die het tegengaat.

Naarling · 29 jun 2010

ah, mijn fout, ik had niet door dat de code in het HTML document zelf juist de code van CSShunter was, excuus. Ik zie één twee drie niet wat het probleem zou kunnen zijn. Wat je zou kunne proberen is om de illustraties zelf, en niet alleen de paragrafen waar ze in staan, naar links en naar rechts te drijven.
In de css zou dat dus

HTML:

.ill-links img{
float:left;
}

worden. Ik heb hier echter geen IE (draai Linux) dus ik kan het niet voor je testen.

merlijn16 · 29 jun 2010

bedankt voor je reactie.
Volgens mij heb ik dat al.

Code:

#rightside .ill-links, #rightside .ill-rechts{  
       	margin-top: 4px;       
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
                     padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 15px;
                     margin-right: 25px;
                     padding: 0px;
	}	
.ill-links img, .ill-rechts img {
	margin-bottom: 3px;
	}

Of ik begrijp je verkeerd?

edit: ja ik begrijp je verkeerd, ik zie nu wat je bedoelt. Ga het proberen.

merlijn16 · 29 jun 2010

dan zou het dit moeten worden als ik het goed begrepen heb?

Code:

.ill-links img{
                 margin-bottom: 3px;
                 float:left;
}
.ill-rechts img {
                   margin-bottom: 3px;
                   float:right;
}

Ik hoef dan verder niets in de P tag aan te passen in de xhtml pagina?

Naarling · 29 jun 2010

Correct. Maar, zoals ik al zei, ik weet niet of het zal helpen.

merlijn16 · 29 jun 2010

ik ga gewoon een poging doen.

merlijn16 · 29 jun 2010

helaas ook dat is niet de oplossing

merlijn16 · 29 jun 2010

het probleem zit vast ergens anders in de css.
Dit omdat eerst font-size van de plaatjes ook niet werkte.
font-size van content woog zwaarder.

edit: probleem gevonden. Ik had in css een vast code voor breedte tekst aangegeven. ( width: 633px; )
Dus zodra ik <p>..</p> gebruikte ging het mis.
De aanhouder wint!

tekst naast afbeelding

merlijn16

Gebruiker

Bijlagen

remcovg

Gebruiker

merlijn16

Gebruiker

That Guy

Meubilair

merlijn16

Gebruiker

merlijn16

Gebruiker

defietser

Gebruiker

merlijn16

Gebruiker

merlijn16

Gebruiker

Naarling

Terugkerende gebruiker

merlijn16

Gebruiker

Naarling

Terugkerende gebruiker

merlijn16

Gebruiker

merlijn16

Gebruiker

Naarling

Terugkerende gebruiker

merlijn16

Gebruiker

merlijn16

Gebruiker

merlijn16

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy