[Fish-hunter]

Hej!

Jag håller på och fixar lite med joomla o vill ha lite snyggare ramar än bara liksom 2 pixel enfärgad ram o man kan ju skriva HTML-kod osv men jag vet inte riktigt om man kan få nån snygg layout. Vill ha text som man ska kunna markera (därför funkar det inte att göra något i en jpeg-bild) och osv typ enligt denna skiss fast på ett bra sätt.

Notera att jag vill ha nåt snyggt o inte den bordern som finns nu. Kanske rundade kanter o skugga eller nåt i den stilen.

[CotopaXi]

Vill du ha hjälp hur du ska bära dig åt eller någon som hjälper dig att göra detta?

http://www.webdesignskolan.se/css-ef...m#roundcorners

Finns även en jQuery-plugin som ordnar detta väldigt smidigt om du ska använda det på många olika ställen på sidan och inte har något emot att blanda in javascript.

[tartareandesire]

Vad är frågan egentligen? Hur du gör rundade kanter?

[wiB]

Du kan väl omsluta allt med en ljusgrå border istället och lägga en padding på cirka 10-15 pixlar.

Ser rätt stelt och instängt ut när allt är inboxat.

Om du vill ha det som du har på din skiss så gör du en <div> med float left och bilden har du float right och lite vänstermarginal på.

[KarlRoos]

Markup

<div id="container">
	<div>
 *<div class="ingredients">
 *	<h3>Ingredientser</h3>
 *	<strong>1 st</strong>
 *	<ul>
 * *<li>Något...</li>
 *	</ul>
 *</div>
 *<img src="img.png" alt="Bild" />
 *<div class="clear"></div>
	</div>
	<div class="instructions">
 *<h3>Gör så här</h3>
 *<p>Lorem ipsum...</p>
	</div>
</div>

CSS

#container
{width: 430px;}

.ingredients, .instructions
{border: 1px solid #ccc; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.ingredients
{float: left; width: 110px; margin-right: 10px;}

.instructions
{margin-top: 10px;}

En ljusgrå rundad kant (FF, Webkit) och likadana marginaler överallt.
Sen får du styla .ingredients ul (listan) samt #container h3 för rubrikerna.

Hoppas att det var till någon nytta