[grinditwp]

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;

.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;

.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!

[mephisto73]

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

[grinditwp]

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

[coredev]

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.

[KarlRoos]

.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;
}

<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.

[grinditwp]

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!

[allstars]

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

[Syke]

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.