[Robert]

Behöver hjälp med ett problem. Jag har läst många artiklar om detta på webben men det finns ingen som besvarar mitt problem (eller mina krav rättare sagt).

Jag håller på med ett ramverk för siter (xhtml) och ambitionen är att designen ska kunna stylas om med olika themes som jag har framställt. Problemet är att jag måste tänka väldigt generiskt och inte lösa ett specifikt problem. Saken är den att jag försöker mig på att skapa en container som man ska kunna kasta in sitt innehåll i, lite som en generisk komponent exempelvis för att visa en liten text i eller kanske en hel sida.
Det jag har fastnat på är hur man löser själva den grafiska "ramen" som måste sättas runt boxen. Har gjort "rundade hörn" boxar tidigare med css, även läst ett tjog med tutorials hur detta kan göras med CSS. Men deras förslag håller inte riktigt på alla punkter.

Jag visar en bild hur det måste fungera (med beskrivning nedan):



Det som skiljer mitt sätt ifrån de flesta andras är att jag endast vill stretcha mittensektionerna av ramen (de som har siffran 100% i sig) där jag lämpligast har en bakgrundsbild som stretchas ut. Hörnbitar är det inget problem med och dessa får inte strecthas. Däremot så har jag det sedvanliga problemet med att skapa mittsektionerna *på höjden* (vänster och höger sida) och få dessa att stretcha så mycket som contentboxen i mitten vill (bestämms av innehållet eller fast width). Dessa vill ju endast ha så pass hög höjd som de har innehåll, dvs inget.

Går det kanske att lägga in en bild i dessa div'ar och sätta bildens höjd till 100% och sedan styla bildens url?? :blink:

[koala]

Jag är inte helt säker på vad du menar. Skulle behöva dricka ytterligare en kopp kaffe för att förstå det tror jag. Men ett litet tips är att använda style="background: #fff url(img) top left repeat-y" eller liknande istället för att infoga en bild i vänster och höger "100%"-fält.

Nu förstår jag ditt dilemma. Dessa två boxar blir inte lika höga som "Contentbox". Och du vet inte i förväg hur hög Contentbox ska vara. Detta är lite svårt med CSS/xhtml 1.x.

Du måste nästan skapa en wrapper runt de de tre boxarna med en bestämd höjd, och sedan sätta höjden på de tre boxarna till 100%. Jag vet inte om det går att låta höjden av alla tre bero på just höjden av Contentbox.

[Robert]

Ja, du förstod problemet. =)

Jo, jag har wrappat både här och där (så att 3 boxar kan flyta bredvid varandra tex). Grejjen är att content kan vara olika stort, ja man ska tom kunna nästla dessa boxar i varandra.

Hade fixat det med tabeller på direkten, men man vill ju gärna försöka med de nya "möjligheterna" (hehe) som css erbjuder.

[digiArt]

Vad gäller y-led så åker du på en repeat-y, men för att inte låsa dig vid en viss bredd så får du nästan nästla två divar med olika bakgrunder. En slags "sliding doors" i sidled.

x-led blir väl också en repeat-x

Titta lite på alistapart hur de stylat ol-listor, jag tror det var Dan Cederholm som gjorde ngn artikel på detta (simplebits.com), där kanske du kan hitta lite ideer.

Oftast är det så att när man inte hittar lösningen på ett problem gäller det att omarbeta problemet.

[Björn]

Det går inte att sätta höjd 100% i css och få det att flyta... det blir nog faux-columns för dig...

[Robert]

Originally posted by Björn@Apr 22 2005, 12:58
Det går inte att sätta höjd 100% i css och få det att flyta... det blir nog faux-columns för dig...

Hmm, faux columns. Snubblade på det uttrycket för första gången tidigare idag, men har inte riktigt koll på vad är.
Det viktiga är att jag kan ha 1 bild i vardera hörn samt att kunna stretcha grafik vertikalt och horizontalt för "sidodivarna". På bredden går det ju galant, men på höjden är det lite sämre.

[Robert]

Ok, läste vad faux-kolumner var och jag använder mig faktiskt av detta på några siter som jag har gjort. Problemet är väl att bredden inte blir dynamisk då bakgrundsbilden måste stretchas på bredden... =/

[bakgrund]

Jag gjorde en sida till en kund med hörn (ej runda) men jag fick ge upp efter ett tag.
När jag infogade bilder i contentboxen uppståd det fel i Explorer och i Firefox.
Bakgrundsfärgen gick igenom contentboxen fast den inte skulle göra det.

Så här ser den CSS kod som jag testade:

div.Article {
background: url("images/topleft.gif") top left no-repeat;
position:relative;
}
div.Article h3 {
position:relative;
background: url("images/topright.gif") top right no-repeat;
font-size:1.3em;
padding:15px;
padding-left:0;
margin:0;
right:-8px;
}
div.ArticleBody {
background: url("images/right.gif") top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
padding-left:0;
position:relative;
right:-8px;
}
div.ArticleFooter {
background: url("images/bottomleft.gif") bottom left no-repeat;
position:relative;
top:7px;

}
div.ArticleFooter p {
background: url("images/bottomright.gif") bottom right no-repeat;
padding:15px;
padding-left:0;
display:block;
margin:-2em 0 0 0;
position:relative;
right:-8px;
}
div.ArticleLongContent {
background: url("images/left.gif") top left repeat-y;
}