Text och bild i en box

6 svar · 598 visningar · startad av dotar 2 apr. 2006

dotarMedlem sedan okt. 2002117 inlägg

Frågan2 apr. 2006 17:23#1

Tjena tjena.. Hur gör jag för att få min sida att se ut som på bilden, alltså att texten "smeker" runt bilden?

Min kod ser ut så här just nu:

XHTML:

			<div id="boxholder">
				<div class="box">
					<p class="box-rubrik">Mini MC</p>
					<p class="box-text">
						Vi har många olika modeller av mini MCs inne på lager. Här på hemsidan visar vi vårt utbud, så att du kan spana in vilken modell du gillar, innan du bestämmer dig.<img src="img/minimc.png" alt="" />
					</p>
				</div>
			</div>

CSS:

div#boxholder {
	padding: 20px 0 0 30px;
}

div.box {
	padding: 5px 0 0 5px;
	width: 240px;
	height: 170px;
	background-color: #F0F9FF;
	border: 3px solid #9AD5FF;
}

p.box-rubrik {
	margin: 0;
	font: bold 14px Arial;
	color: #00BAFF;
}

p.box-text {
	margin: 5px 0 0 0;
	font: normal 12px Arial;
}

MozfanMedlem sedan okt. 2005541 inlägg

2 apr. 2006 17:33#2

Lägg bilden som bakgrund, positionerad i höger nedre hörn. Texten måste du nog skriva med radbrytningar på lämpliga ställen för varje rad, eftersom dom är olika långa.

dotarMedlem sedan okt. 2002117 inlägg

2 apr. 2006 17:34#3

Måste väl finnas något bättre sätt?
Det kommer väl fuckas upp i olika upplösningar etc. annars.

MozfanMedlem sedan okt. 2005541 inlägg

2 apr. 2006 17:49#4

Tja, jag vet inget annat sätt så länge man inte kan beskära bilder för webben som man gör i ex.vis Word. :) Du kan förstås inte räkna med att det ska se exakt likadant ut i alla upplösningar, ingen vanlig webbsida gör det. Men en rad på x antal tecken har alltid samma antal tecken, oavsett upplösning. Det gäller bara att ha med det i beräkningen så att man i en lägre upplösning inte får in alltför mycket text över bilden. ;)

NiponMedlem sedan juli 2003270 inlägg

2 apr. 2006 17:50#5

Nja...

En bild är ju en rektangel... Och en textbox också...

Hur du än floatar kommer texten att anpassa sig efter bildens RAKA kanter.

Men lägger du den som bakgrundsbild kan texten lappa över bilden och bli "kantig" - som på din bild. Men bara om du GÖR den kantig (som Mozfan föreslog) eftersom texten anpassar sig annars - och anpassas efter de raka kanterna... Och det kommer att fuckas upp om man ändrar textstorleken t.ex.

Du kan lägga bakgrundsbilden i en extra div som placeras "runt" text-diven. Sedan gör du textdiven smalare än bakgrundsdiven och låter texten anpassa sig efter den. Har du tur så byter texten rad på ett sätt som liknar din bild...

Red: Mozfan hann före...

dotarMedlem sedan okt. 2002117 inlägg

2 apr. 2006 17:51#6

Okay jag kör på det då..
Tack så mycket :)

zcorpanMedlem sedan dec. 20042 245 inlägg

2 apr. 2006 19:35#7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>test</title>
  <style type="text/css">
   .box {
    min-width:200px;
    width:15em;
    min-height:175px;
    border:1em solid lime;
    background:url(cykel.png) 100% 50px no-repeat;
   }
   .box div { float:right; clear:right; }
   .a { width:0; height:30px; }
   .b { width:90px; height:30px; }
   .c { width:100px; height:20px; }
   .d { width:110px; height:15px; }
   .e { width:130px; height:15px; }
   .f { width:150px; height:60px; }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="a"></div>
   <div class="b"></div>
   <div class="c"></div>
   <div class="d"></div>
   <div class="e"></div>
   <div class="f"></div>
   <p>Vi har många olika modeller av mini MCs inne på lager.
    Här på hemsidan visar vi vårt utbud, så att du kan spana
    in vilken modell du gillar, innan du bestämmer dig.</p>
  </div>
 </body>
</html>