2 svar · 348 visningar · startad av David N
Hej,
Jag undrar hur man egentligen ska gå till väga för att göra en box liknande denna på ett enkelt sätt i HTML och CSS:
Jag har egentligen inte pillat med just sådant tidigare, så jag provade att bryta upp den i tre delar, en för rubrik, en för mitt och en för botten. Om det här är ett dumt sätt så uppskattar jag andra förslag :)
- Uppe
- Mitt
- Nere
Jag vill alltså att den mittersta bilden ska upprepas. Jag försökte nå det önskade resultatet på följande sätt:
<div id="mbox">
<div id="mboxu"></div>
<div id="mboxm">text text text<br />text text text<br />text text text<br /></div>
<div id="mboxd"></div>
</div>
Min css ser ut som följer:
#mbox { width: 475px;
height: auto;
}
#mboxu {background-image: url(images/mboxu.jpg);
background-repeat: repeat-x;
height: 19px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
#mboxm {background-image: url(images/mboxm.jpg);
background-repeat: repeat-x;
height: auto;
}
#mboxd {background-image: url(images/mboxd.jpg);
background-repeat: repeat-x;
height: 10px;
}
Så till problemet... Trots att jag anger repeat-x så vill inte bilden upprepas. Resultatet blir som följer:
http://i31.tinypic.com/302uwyr.jpg
Oerhört tacksam för hjälp och förslag, jag har försökt men nu står det helt stilla.
MVH,
David Nilsson
ta reapeat-y istället.
repeat-x är horisontellt, y är vertikalt, bara "repeat" är bådadera.
Sen kan du ju testa om du ska ha align mitten, höger eller vänster (center, right eller left) åxå, så här (med left):
#mboxm {background-image: url(images/mboxm.jpg);
background-repeat: repeat-x left;
height: auto;
}
Height behöver du inte ha alls.
Hehe, tusen tack. Är det på detta sätt man annars brukar strukturera upp boxar av den här typen, eller finns det något smidigare sätt?
En annan fundering, vad ska man använda för attribut på en gradient? Säg att man exempelvis har en liten gradient på 2x200 pixlar som man vill använda som bakgrund i några boxar liknande den ovan men så att det ser snyggt ut även om boxarna kanske bara är 100 pixlar höga eller 300 pixlar höga, hur går man till väga då? Går det att göra så att den "dras" ut vertikalt och upprepas horisontellt (repeat-x antar jag) för att fylla upp hela rutan oberoende av storlek?
Har provat att sätta background-position till bottom på mittdelen så att den smälter ihop korrekt med den nedre delen, samt experimenterat med olika repeats. Vad jag vill åstadkomma är alltså så att bakgrundsbilden istället "dras ut" snarare än att repeteras, men som det är nu så repeteras gradienten om boxen blir högre än bakgrundsbilden. Koden jag använder är följande:
.rboxm {background-image: url(images/rboxm.jpg);
background-repeat: repeat;
background-position: bottom;
}
Detta är alltså på en annan ruta än den i första exemplet (men uppbyggd på samma sätt, med tre delar), resultatet ser för tillfället ut som följer (repeteras alltså):
http://i26.tinypic.com/a9yexk.jpg
Att den repeteras är ju inget större mysterium då jag har angett repeat, men hur drar jag ut den istället?
