roomMedlem sedan mars 2001270 inlägg Tjena. Jag har ett problem. Jag har en Div som representerar ett inlägg i en gästbok. I denna div ska jag ha en bild samt text till vänster om bilden. Men när jag lägger in bilden och sätter align left på den så hoppar bilden utanför min div. Kika på bilden så ser ni hur jag menar.
<div id="gbPhoto" style="background-color:#fafaf7; border-bottom: #d0d0d0 1px solid; padding: 10px;">
<img src="gfx/temp_photo.gif" width="65" height="60" align="left" />Hejsan hejsan
</div>
Någon som har nån ide please??
vicMedlem sedan apr. 2006244 inlägg kör strict, dumpa align och kör css
div#gbPhoto img {float:left}
Fixar det inte sig då, så testa overflow:atuo på divven
roomMedlem sedan mars 2001270 inlägg Funkade fina fisken
Tack för det! det gick kanon. Nu har ett nytt problem uppstått! Nämligen att jag vill ju inte att texten ska flyta in under bilden när det blir ett långt inlägg.
Skickar med en bild och kod i sedvanlig anda ;)..
<div id="gbPhoto#1" style="background-color:#fafaf7; border-bottom: #d0d0d0 1px solid; padding: 10px; clear:left; overflow:auto;">
<img src="gfx/temp_photo.gif" width="65" height="60" style="padding-right:10px; float:left;" />
<span style="font-size:10px; color:#999999;">Idag 13:25 (#3251)</span><br />
<strong style="color:#666666"><a href="#">Kallebanan P32</a> från Torsby i Värmlands Län</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sodales tincidunt magna. Proin blandit dui faucibus nisl. Proin ultrices turpis sed justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sodales tincidunt magna. Proin blandit dui faucibus nisl. Proin ultrices turpis sed justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
<span style="font-size:9px; font-weight:bold;">SVARA · TA BORT · BESÖK
</div>
En variant! :)
Du får ändra bredden på divven till vad som passar.
<div id="gbPhoto#1" style="background-color:#fafaf7; border-bottom: #d0d0d0 1px solid; padding: 10px; clear:both;">
<img src="gfx/temp_photo.gif" width="65" height="60" style="margin-right:10px; float:left; display:block;" />
<div style="float:left; width:250px;">
<span style="font-size:10px; color:#999999;">Idag 13:25 (#3251)</span><br />
<strong style="color:#666666"><a href="#">Kallebanan P32</a> från Torsby i Värmlands Län</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sodales tincidunt magna. Proin blandit dui faucibus nisl. Proin ultrices turpis sed justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sodales tincidunt magna. Proin blandit dui faucibus nisl. Proin ultrices turpis sed justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
<span style="font-size:9px; font-weight:bold;">SVARA · TA BORT · BESÖK</div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
div.entry {
overflow: auto;
border: 1px solid #f00;
}
div.entry img.avatar {
float: left;
border: 1px solid #000;
}
div.entry p {
margin: 0 0 0 60px;
border: 1px solid #00f;
}
</style>
</head>
<body>
<div class="entry">
<img class="avatar" src="path/to/file" width="50" height="50" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut molestie commodo erat.
Donec enim. Nam non enim. Cras placerat, lectus in adipiscing facilisis, diam ipsum
consectetuer diam, nec dapibus elit ligula non velit. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Integer nisi lectus, viverra
id, tincidunt porttitor, iaculis in, massa. Cras rutrum libero a nibh cursus consequat.
In leo enim, imperdiet ac, congue et, ornare non, est. Duis adipiscing tristique nunc.
Aenean sed massa a enim aliquam rhoncus. In id mauris eu nibh nonummy malesuada. </p>
</div>
</body>
</html>
