---

Hej

ved hjælp af CSS skal jeg lave 3 bokse med runde hjørner. De skal
hver især laves ved hjælp af 4 grafikstumper, der repræsenterer
hvert sit hjørne. De skal indgå i et design, der skal være
skalerbart i forhold til skærmens opløselig, dvs der skal
arbejdes med % angivelser og ikke faste pixels.

De 3 bokse skal ligge ved siden af hinanden og have forskellige
baggrundsfarver. Der skal være lige bund, hvilket vil sige, at
såfremt der er mere indhold i en af boksene, så skal de andre
følge med, så de altid følger hinanden. Det skal bredt
understøttes på browsersiden.

Kan dette lade sig gøre i CSS og såfremt det kan. Hvordan?

Har I nogle eksempler?

På forhånd tak

Bo Nedergaard

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Bo Nedergaard wrote:
> Hej
>
> ved hjælp af CSS skal jeg lave 3 bokse med runde hjørner. De skal
> hver især laves ved hjælp af 4 grafikstumper, der repræsenterer
> hvert sit hjørne. De skal indgå i et design, der skal være
> skalerbart i forhold til skærmens opløselig, dvs der skal
> arbejdes med % angivelser og ikke faste pixels.
> (...)
> Kan dette lade sig gøre i CSS og såfremt det kan. Hvordan?

Ja, det kan sagtens lade sig gøre. Der er både løsninger i ren css
(html) og løsninger, hvor der også anvendes javascript.

> Har I nogle eksempler?

En hurtig googling giver en masse resultater, prøv at se på nogle af
løsninger:
http://www.google.com/search?hs=8Xg&hl=da&client=opera&rls=da&q=rounded+corners+css&btnG=S%C3%B8g&lr=

/Frederik

---

Frederik skrev:
> Bo Nedergaard wrote:
> > Hej
> >
> > ved hjælp af CSS skal jeg lave 3 bokse med runde hjørner. De skal
> > hver især laves ved hjælp af 4 grafikstumper, der repræsenterer
> > hvert sit hjørne. De skal indgå i et design, der skal være
> > skalerbart i forhold til skærmens opløselig, dvs der skal
> > arbejdes med % angivelser og ikke faste pixels.
> > (...)
> > Kan dette lade sig gøre i CSS og såfremt det kan. Hvordan?
Hejsa

Du kan evt se her :


http://www.thorsenholm.dk/webdesign/floating3.html


Den brugte jeg her f.eks
http://spintail.dk/angel/temp.asp


Vil du have de runde hjørner som jeg har lavet så er det her det
foregår:


http://webdesign101.dk/css/roundcorners/


Håber du kan bruge det til noget


MvH
Allan

---

Spintail wrote:
> http://www.thorsenholm.dk/webdesign/floating3.html

Pssst..
Hvis der skulle være runde hjørner på denne side, så er de der ikke i
firefox 2.0 RC2 :)

---

Martin skrev:

> Hvis der skulle være runde hjørner på denne side, så er de der ikke i
> firefox 2.0 RC2 :)

Heller ikke i hverken Opera eller IE 6.0.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Spintail wrote in dk.edb.internet.webdesign.html:
> Frederik skrev:
> > Bo Nedergaard wrote:
> > > Hej
> > >
> > > ved hjælp af CSS skal jeg lave 3 bokse med runde hjørner. De skal
> > > hver især laves ved hjælp af 4 grafikstumper, der repræsenterer
> > > hvert sit hjørne. De skal indgå i et design, der skal være
> > > skalerbart i forhold til skærmens opløselig, dvs der skal
> > > arbejdes med % angivelser og ikke faste pixels.
> > > (...)
> > > Kan dette lade sig gøre i CSS og såfremt det kan. Hvordan?
> Hejsa
>
> Du kan evt se her :
>
>
> http://www.thorsenholm.dk/webdesign/floating3.html
>
>
> Den brugte jeg her f.eks
> http://spintail.dk/angel/temp.asp
>
>
> Vil du have de runde hjørner som jeg har lavet så er det her det
> foregår:
>
>
> http://webdesign101.dk/css/roundcorners/
>
>
> Håber du kan bruge det til noget
>
>
> MvH
> Allan
>
Tak til jer begge for jeres indlæg. Mit problem er ikke så meget at lave
kasser med runde hjørner, der ligger ved siden af hinanden og er bredt
understøttet at browsere, men at sørge for at der samtidig er lige bund,
når der fyldes mere indhold i en af boksene. Jeg har ikke set den teknik
nogen steder. Jeg har kun set, hvordan der laves runde hjørner på en
boks og hvordan, der laves lige bund ved firkantede kasser. Men ingen
eksempler på kombinationen af de to.

http://spintail.dk/angel/temp.asp

har ikke lige bund.

Kender nogen et eksempel, der kombinerer dette?

mvh

Bo


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Bo Nedergaard wrote:

> Mit problem er ikke så meget at
> lave kasser med runde hjørner, der ligger ved siden af hinanden og er
> bredt understøttet at browsere, men at sørge for at der samtidig er
> lige bund, når der fyldes mere indhold i en af boksene.


#boks {
color: #000;
background: #fff url(boks.gif) repeat-y; /* venstre og højre side */
width: 200px;
padding: 0;
}
#top {
color: #000;
background: #fff url(top.gif) repeat-x;
position: relative;
}
#topright, #bottomright {
float: right;
}
#topleft, #bottomleft {
float: left;
}
#bottom {
color: #fff;
background: #fff url(bottom.gif) repeat-x;
}
#boksindhold {
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
}

<div id="boks">
<div id="top">
<img id="topright" src="tr.gif">
<img id="topleft" src="tl.gif">
</div> <!-- slut top-div -->
<div id="boksindhold">
Indhold
</div> <!-- slut boksindhold -->
<div id="bottom">
<img id="bottomright" src="br.gif">
<img id="bottomleft" src="bl.gif">
</div> <!-- slut bottom-div -->
</div> <!-- boks -->

Det er alt, hvad du behøver at kode. Lav så en baggrundsgrafik med en bredde
som den ønskede boks, en topgrafik og bottomgrafik der har samme kant som
boksgrafikken, samt de fire hjørner, i alt 7 grafikfiler.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

Spintail wrote in dk.edb.internet.webdesign.html:
> Frederik skrev:
> > Bo Nedergaard wrote:
> > > Hej
> > >
> > > ved hjælp af CSS skal jeg lave 3 bokse med runde hjørner. De skal
> > > hver især laves ved hjælp af 4 grafikstumper, der repræsenterer
> > > hvert sit hjørne. De skal indgå i et design, der skal være
> > > skalerbart i forhold til skærmens opløselig, dvs der skal
> > > arbejdes med % angivelser og ikke faste pixels.
> > > (...)
> > > Kan dette lade sig gøre i CSS og såfremt det kan. Hvordan?
> Hejsa
>
> Du kan evt se her :
>
>
> http://www.thorsenholm.dk/webdesign/floating3.html
>
>
> Den brugte jeg her f.eks
> http://spintail.dk/angel/temp.asp
>
>
> Vil du have de runde hjørner som jeg har lavet så er det her det
> foregår:
>
>
> http://webdesign101.dk/css/roundcorners/
>
>
> Håber du kan bruge det til noget
>
>
> MvH
> Allan
>
Tak til jer begge

Mit problem er ikke så meget at lave bokse med runde hjørner, der skal
ligge ved siden af hinanden og understøttes af forskellige browsere og
være lavet i %, men derimod samtidig at sørge for en lige bund, selvom
der fyldes mere indhold i en af boksene.

Det har jeg ikke set nogen eksempler på. Jeg har kun set eksempler på
enten kasser med runde hjørner eller lige bund, hvor der er fikantede
kasser. Ikke kombinationen af de to .

http://spintail.dk/angel/temp.asp

der er der jo ikke lige bund.

Kunder I nogen eksempler på kombinationen?

mvh

Bo

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Martin skrev:
> Spintail wrote:
> > http://www.thorsenholm.dk/webdesign/floating3.html
>
> Pssst..
> Hvis der skulle være runde hjørner på denne side, så er de der ikke i
> firefox 2.0 RC2 :)

Nix ikke på den side
http://www.thorsenholm.dk/webdesign/floating3.html

På denne side er de her :http://spintail.dk/angel/temp.asp