---

Hejsa,

Jeg har altid normalt brugt tables når jeg designet hjemmesider.
Nu forsøger jeg så med DIV og CSS istedet.

Jeg har lavet 3 divs, som er centereret og mangler nu hjælp til
at få lavet nogle "indholds bokse" - altså hvordan jeg sætter 3
divs ved siden af hinanden med sammen mellemrum og runde hjørner.

Se hvad jeg mener her:
http://wps.dk/div_layout.jpg

Har i et godt bud på det ? Jeg har selv forsøg med lidt
float:left osv... men syntes ikke de opfører sig som jeg vil.

Hele siden er 1000px bred.

På forhånd tak

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

---

Den 08-03-2010 15:58, SilwerDK skrev:

> Jeg har lavet 3 divs, som er centereret og mangler nu hjælp til
> at få lavet nogle "indholds bokse" - altså hvordan jeg sætter 3
> divs ved siden af hinanden med sammen mellemrum

Du kan left-floate dem og give dem en %-bredde. Det vil betyde, at en
boks vil forsøge at lægge sig op af en anden boks ved siden af, hvis der
er plads.

..boks1{
   float: left;
   width: 20%;
}

Hvis nu du ved, hvor mange bokse, der skal være ved siiden af hinanden,
er det forholdsvist nemt at prøve sig frem til hver boks bredde. Boksene
skal sættes ved siden af hinanden i koden også, altså f.eks.:

<div class="boks">indhold boks1</div>
<div class="boks">indhold boks2</div>
<div class="boks">indhold boks3</div>

Den sidste boks, som floates skal "cleare", så nyt indhold nedenunder
ikke også begynder at flyde. Dette er ret nemt normalt med CSS. Læs
f.eks. her om float:

http://www.hjemmesideskolen.dk/html/float.php?id=flbillede


> og runde hjørner.

Jeg gætter på, du gerne vil have IE med her, så kan du ikke bruge CSS3,
i hvert fald (som jeg er vant til). Så prøv f.eks.:

http://www.kalsey.com/blog/2003/07/rounded_corners_in_css/


> Se hvad jeg mener her:
> http://wps.dk/div_layout.jpg


Så skik lige linket til din side også...



MVH
Rune Jensen

---

Rune Jensen skrev:

>> og runde hjørner.
>
> Jeg gætter på, du gerne vil have IE med her, så kan du ikke bruge CSS3,
> i hvert fald (som jeg er vant til). Så prøv f.eks.:

Vil det sige at det er begyndt at virke i de andre browsere, deriblandt
Firefox?


--
Philip - http://www.chartbase.dk | http://www.hitsurf.dk

---

Philip Nunnegaard skrev:
> Rune Jensen skrev:
>
>>> og runde hjørner.
>>
>> Jeg gætter på, du gerne vil have IE med her, så kan du ikke bruge
>> CSS3, i hvert fald (som jeg er vant til). Så prøv f.eks.:
>
> Vil det sige at det er begyndt at virke i de andre browsere, deriblandt
> Firefox?

Absolutely. Se boksende på
http://webdesign101.dk/

Det fine ved de CSS3 rundehjørner er
at IE tegner almindelige firkantede
hjørner, så boks-effekten bevares.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen skrev:

>> Vil det sige at det er begyndt at virke i de andre browsere,
>> deriblandt Firefox?
>
> Absolutely. Se boksende på
> http://webdesign101.dk/

Jeg har lige prøvet mig frem selv og konstateret at det åbenbart ikke
virker uden de browserspecifikke "hacks".

Det er dog stadig mere simpelt end den metode jeg ellers bruger, som er
denne:
http://webdesign101.dk/css/roundcorners

Den har så selvfølgelig den fordel at den virker i alle browsere, selvom
det ikke ser kønt ud i koden.

--
Philip - http://www.chartbase.dk | http://www.hitsurf.dk

---

Philip Nunnegaard har bragt dette til os:
> Jørgen Farum Jensen skrev:
>
>>> Vil det sige at det er begyndt at virke i de andre browsere, deriblandt
>>> Firefox?
>>
>> Absolutely. Se boksende på
>> http://webdesign101.dk/
>
> Jeg har lige prøvet mig frem selv og konstateret at det åbenbart ikke virker
> uden de browserspecifikke "hacks".
>
> Det er dog stadig mere simpelt end den metode jeg ellers bruger, som er
> denne:
> http://webdesign101.dk/css/roundcorners
>
> Den har så selvfølgelig den fordel at den virker i alle browsere, selvom det
> ikke ser kønt ud i koden.

Fordi der er en masse div'er, der tilsyneladende ikke anvendes til
noget, kan koden da godt være pæn...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 08-03-2010 19:18, Philip Nunnegaard skrev:
> Rune Jensen skrev:
>
>>> og runde hjørner.
>>
>> Jeg gætter på, du gerne vil have IE med her, så kan du ikke bruge
>> CSS3, i hvert fald (som jeg er vant til). Så prøv f.eks.:
>
> Vil det sige at det er begyndt at virke i de andre browsere, deriblandt
> Firefox?

Jeg bruger stadig de "interne" (browserspecifikke) egenskabsangivelser,
som CSS3info angiver:

http://www.css3.info/preview/rounded-border/

De korrekte, som skal bruges, når standarden er blevet til
recoomendation engang i 2020, de virker ikke endnu, mig bekendt i nogen
af browserne. Det kan være, Opera ikke helt synes om idéen endnu, og de
skal jo samarbejde (jeg har hørt et eller andet om, at MS er kommet til
på det seneste - de skal jo også ifølge dem selv have understøttelse for
CSS3 i IE9, så de har en vis interesse i at præge det).


PS
De har desværre ændret udseende og navigeringssystem på css3info, kan
jeg så se. Ikke til det bedre, nærmere tværtimod. Kedeligt/grimt design
og svært at finde rundt i.


MVH
Rune Jensen

---

Den 08-03-2010 17:57, Rune Jensen skrev:
> Den 08-03-2010 15:58, SilwerDK skrev:
>
>> Jeg har lavet 3 divs, som er centereret og mangler nu hjælp til
>> at få lavet nogle "indholds bokse" - altså hvordan jeg sætter 3
>> divs ved siden af hinanden med sammen mellemrum
>
> Du kan left-floate dem og give dem en %-bredde. Det vil betyde, at en
> boks vil forsøge at lægge sig op af en anden boks ved siden af, hvis der
> er plads.
>
> .boks1{
> float: left;
> width: 20%;
> }

width: 33% / 25 %;

Lyder bedre.

Og lav sidebredden 85% og centreret.

Så passer den i de fleste browser-vinduer.


--
Ib K. Jensen :: www.ikjensen.dk
Only a Genealogist regards a step backwards as progress.