Div tekst naast plaatje

  • Onderwerp starter Onderwerp starter flbos
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
F

flbos

Gebruiker
Lid geworden
5 feb 2004
Berichten
267
Hallo,

ik krijg het niet voor elkaar om binnen een DIV een tekst mooi naast een plaatje te krijgen:

<div class="test" style="height:60px;">
<img src="banners/test.JPG" align="left">
<p align="left">Hier komt de tekst</p>
</div>

Op zich werkt dit wel, maar ik kan nu niet meer de tekst verder rechts van het plaatje zetten, het staat er nu vast tegaan. Ook krijg ik het nu niet meer voor elkaar om de tekst in het midden te zetten (verticaal gezien), valign werkt simpelweg niet.

De div heeft verder ook nog een achtergrondkleur, ik wil dat de div net zo hoog wordt als het plaatje, deze wordt echter net zo hoog als de tekst. De achtergrondkleur loopt dan dus niet gelijk met de boven en onderkant van het plaatje. Nu los ik dit op met style="height:60px;", maar nu moet ik voor elk plaatje dat ik op deze manier wil weergeven handmatig de hoogte van de div instellen. Is het niet mogelijk om de div standaard dezelfde hoogte als het plaatje te laten krijgen.

Hoe krijg ik het voor elkaar om de tekst rechts naast het plaatje te krijgen, de tekst uit te lijnen hoe ik wil (dus verder rechts van het plaatje af en in de hoogte op het midden van het plaatje), en dan ook nog eens de achtergrondkleur van de div even hoog als het plaatje te laten worden?

Alvast bedankt!
 
Met:
HTML: 
<div class="test" style="background: #ccc;">
<img src="banners/test.JPG" style="height: 60px; vertical-align: middle">
&nbsp; Hier komt de tekst
</div>
gaat het goed. De vertical-align: middle; zorgt voor de vertikale uitlijning, de paragraaf is weg want die voegde de nieuwe regel in en met &nbsp; kun je evt. nog extra spaties invoegen.

background: #ccc; is alleen voor het voorbeeld.


Vr.Gr. Egel.
 
Ik vraag me af of het script ook werkt in FF. Heb een soortgelijke vraag al gesteld binnen DropCap, geen reactie..:confused: Ga het ook even uitproberen.
 
Hallo,

sorry voor de late reactie. Bij mij werkt de oplossing van egel niet helemaal. Als ik namelijk meerdere regels tekst heb komt één regel naast het plaatje en de rest er onder, en alles moet er naast komen. Ik doe het nu zo, maar ik vraag me af of het niet eenvoudiger moet kunnen:

HTML: 
<div style="height:100px;">

<div style="float:left; padding:3px"><img src="test.JPG"></div>
<div style="float:right; padding-right:5px;">HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST HIER ALLE TEKST </div>

</div>

Bedankt voor de tip in ieder geval, maar het moet toch eenvoudiger kunnen dan mijn aangepaste versie van het voorbeeld van egel???
 
hmm, ik zie nu dat mijn oplossing in FF al helemaal niet werkt. De divs die met float:left en float:right naast elkaar moeten komen, komen onder elkaar te staan. Alles staat dan dus door elkaar. Hoe kan ik er voor zorgen dat de twee divs ook in FF naast elkaar komen???
 
HTML: 
<div class="test" style="background: #ccc;"><nobr>
<img src="banners/test.JPG" style="height: 60px; vertical-align: middle">
&nbsp; Hier komt de tekst. En als die langer wordt breekt het door de nobr-tag niet af. :)
</nobr></div>
Tussen nobr-tags breekt het niet af. :)

Maar ik zie wel dat in Fx de achtergrondkleur niet doorloopt als het breder dan het venster wordt. Je kunt de div ook een breedte in de style geven zodanig dat alles erin past.


Vr.Gr. Egel.
 
hmm, ja, maar er moet een heel verhaal naast staan van dus inderdaad meerdere regels die onder elkaar moeten komen maar dus wel naast het plaatje. Is dat ook mogelijk?

Mijn aangepast opzet met geneste div tags werkte dus wel in IE maar niet in FF, iemand een idee hoe ik die opzet in FF aan het werken krijg.

Of misschien nog een simpelere oplossing die zowel in IE als FF goed werkt?
 
Even aan het stoeien geweest, en inderdaad IE en FF geven sommige CSS dingen anders weer.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>div plaatje float</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

      BODY {
       margin: 0px 0px 0px 0px;
       font-family: verdana, arial, helvetica;
       background-image: url(layout/sfeerstrook/site_home.jpg);
       background-repeat: no-repeat;      
       font-size: 14px;
       font-color: #000000;
       color: #000066;
}
.plaatje{
margin-right:10px;
   background-color: #ff8040;
text-align:left;
width:468px;
height:60px;
border:10px;
margin-right:40px;
float:left;
}
.blok{
border: dotted 1px #000000;
background-color: #cffcff;
text-align:center;
width:100%;
}
.tekst{
border: dotted 1px #000000;
background-color: #cffcff;
height:100%;
text-align:center;
float:right;
padding-left:10px;
padding-right:10px;
margin-right:5px;
       </style>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

<div class=" blok"  ><div class="plaatje" ><img src="banners/test.JPG" ></div><div class="tekst " >afmeting banner 468x60 <br>
Hier komt de tekst en Hier komt de tekst<br>Hier komt de tekst en Hier komt de tekst  Hier komt de tekst <br>
afmeting banner 468x60 <br>
Hier komt de tekst en Hier komt de tekst<br>Hier komt de tekst en Hier komt de tekst  Hier komt de tekst <br>
afmeting banner 468x60 <br>
Hier komt de tekst en Hier komt de tekst<br>Hier komt de tekst en Hier komt de tekst  Hier komt de tekst <br>
afmeting banner 468x60 <br>
Hier komt de tekst en Hier komt de tekst<br>Hier komt de tekst en Hier komt de tekst  Hier komt de tekst <br> </div>
<div style="clear:both;"></div></div>
</body>

</html>

Speel er wat mee ;)
:cool:
 
Bedankt, hier ga ik wat mee testen. Kom er wel uit nu!
 
HTML: 
<table style="background: #ccc;" cellspacing="0" cellpadding="0">
 <tr>
  <td style="width: 468px; vertical-align: top;"><img src="banners/test.JPG" style="width: 468px; height: 60px;"></td>
  <td style="padding: 0px 4px 0px 4px; vertical-align: middle;">Hier komt de tekst. En als die langer wordt breekt het netjes af. :)</td>
 </tr>
</table>
Een tabel kan ook nog. :)

Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan