WN - CSS strul..

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

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

- - CSS strul.. (https://www.wn.se/forum/showthread.php?t=31854)

Hej,
Vore tacksam om någon kunde hjälpa mig.. Står helt still i huvudet.

Jag vill med hjälp av CSS och div-taggar skapa vad jag enkelt kan skapa med tables.

Jag vill åstakomma, och låt mig illustrera;

-----------------------------------
|..BG..|.....TEXT & BG...|..BG..|
-----------------------------------

Förstår ni? Jag vill alltså ha en "låda/knapp" med text på. BG = står för backgrund. Jag har nämligen gjort grafiken i tre delar, höger och vänster sida, som har rundade hörn, samt mitten.

Jag har testat;

Kod:

.menublock {

        background:url(../image_layout/layout_menu_m.png) repeat-x;

        height:32px;

        text-align:center;

    display:inline;

}

.menublock_l {

        background:url(../image_layout/layout_menu_l.png) no-repeat; 

        width:13px;

        height:32px;

        display:inline;



}

.menublock_r {

        background:url(../image_layout/layout_menu_r.png) no-repeat;

        width:13px;

        height:32px;

        display:inline;



}

<div class="menublock_l"></div><div class="menublock">TEXT</div><div class="menublock_r"></div>

Detta kändes bra i tanken, men, det fungerar inte alls.

Med table hade jag gjort, något liknande;

Kod:

.menublock {

        background:url(../image_layout/layout_menu_m.png) repeat-x; /*THEME CHANGE HERE*/

        height:32px;

        text-align:center;

}

.menublock_l {

        background:url(../image_layout/layout_menu_l.png) no-repeat; /*THEME CHANGE HERE*/

        width:13px;

        height:32px;



}

.menublock_r {

        background:url(../image_layout/layout_menu_r.png) no-repeat; /*THEME CHANGE HERE*/

        width:13px;

        height:32px;



}



<table border="0" cellspacing="0" cellpadding="1">

 *<tr>

 * *<td class="menublock_l"></td>

 * *<td class="menublock">TEXT!</td>

 * *<td class="menublock_r"></td>

 *</tr>

</table>

Tacksam som --- för lite vägledning!

finns det något specifikt skäl att göra den i 3 delar?

Njao.. jag tänkte så eftersom texten kan vara olika stor. Därmed behöver mittendelen kunna expandera.

Google är din vän. Jag sökte på "divs graphical button" och fann följande..

Instruktion: http://www.456bereastreet.com/archive/2007...ttons_with_css/

Exempel: http://www.456bereastreet.com/lab/bulletpr...apping-buttons/

Kanske kan hjälpa dig på traven.

Kod:

.menublock

{

background:url(../image_layout/layout_menu_m.png) repeat-x; /*THEME CHANGE HERE*/

height:32px;

text-align:center;

float: left;

}

.menublock_left

{

background:url(../image_layout/layout_menu_l.png) no-repeat; /*THEME CHANGE HERE*/

width:13px;

height:32px;

float: left;

}

.menublock_right

{

background:url(../image_layout/layout_menu_r.png) no-repeat; /*THEME CHANGE HERE*/

width:13px;

height:32px;

float: left;

}

.clear

{

clear: both;

}

Kod:

<div>

<div class="menublock_left"></div>

<div class="menublock">Hej</div>

<div class="menublock_right"></div>

<div class="clear"></div>

</div>

Om jag har förstått rätt så borde detta fungera.

Tack! Jag använde mig av KarlRoos lösning, det var typ så jag hade i mina tankar. Tack även till coredev's länk tips.

Men en fråga som dyker upp i mitt huvud är varför inte display:inline; fungerar?
Det borde få blocken att hamna bredvid varandra? Eller kan man kanske inte ha width och height på inline?

Tack för svaren!

gör du det till inline blir der ju inte block längre, eller hur?!

http://www.w3.org/TR/CSS21/visuren.h...ock-formatting

"The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations."

Så svaret är nej, men kan inte sätta width och height på inline-boxar.