WN - Enkel redigering o ramar etc?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Enkel redigering o ramar etc? (https://www.wn.se/forum/showthread.php?t=36761)

Fish-hunter

2009-05-12 01:47

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.

http://www.fish-hunter.net/images/mintcondition.JPG

CotopaXi

2009-05-12 01:55

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

2009-05-12 02:19

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

wiB	2009-05-13 11:33

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

2009-05-13 16:31

Markup

Kod:

<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

Kod:

#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 :)

Alla tider är GMT +2. Klockan är nu 11:00.