---

Okay ... jeg har lidt problemer med mine div-tags

Jeg har hørt at man ikke skal bruge tabeller til sit design. Derfor vil
jeg gerne bruge div'er i stedet.
Men hvordan får jeg sat dem ved siden af hinanden, så det bliver lige som
en tabel med en enkelt række og tre koloner. Den eneste løsning jeg kan
komme på er float-left og float-right, men det du'r ikke.

Nogen forslag???

Mvh. Mads Sejersen

---

Mads Sejersen skrev:

> Men hvordan får jeg sat dem ved siden af hinanden, så det bliver lige som
> en tabel med en enkelt række og tre koloner. Den eneste løsning jeg kan
> komme på er float-left og float-right, men det du'r ikke.

Floating virker fint.

Du skal bare være opmærksom på at hvis du ikke har angivet en bredde
fylder en <div> automatisk så meget den kan (dvs. 100% minus margin
minus padding minus border).
   Derfor skal du huske at sætte en bredde når du vil have <div>’er
til at stå ved siden af hinanden:

CSS:
div.tilvenstre { float : left; margin : 2px; width : 200px }

HTML:
<div class="float">første</div>
<div class="float">anden</div>
<div class="float">tredje</div>

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

---

El 29 sep 2002, escribiste dk.edb.internet.webdesign.html:

> CSS:
> div.tilvenstre { float : left; margin : 2px; width : 200px }


eller hvis du ved at der skal være 3 kan du sætte deres width til 33% og
så vil de fylde hele sidens bredde.

---

I artikel <MPG.1801239b5e0a36a69897c6@sunsite.dk>, skrev "Rune Glerup"
<usenet@kaboom.dk>:

> Floating virker fint.

Ikke hos mig

> Du skal bare være opmærksom på at hvis du ikke har angivet en bredde
> fylder en <div> automatisk så meget den kan (dvs. 100% minus margin
> minus padding minus border).
>    Derfor skal du huske at sætte en bredde når du vil have <div>’er
> til at stå ved siden af hinanden:
>
> CSS:
> div.tilvenstre { float : left; margin : 2px; width : 200px }

Det har jeg gjort ... prøv at se på http://crazypenguin.amok.dk/test ...
det virker ikke (eller hvad har jeg gjort galt??)

Mvh. Mads Sejersen

---

Mads Sejersen escribió / skrev

> Det har jeg gjort ... pr›v at se p†
> http://crazypenguin.amok.dk/test ... det virker ikke (eller hvad
> har jeg gjort galt??)
>


din indhold er 800 px bred

men den har en margin på 5 px i hver side, så ender vi på 790 px,
dine menuer er 150 px bredde hver for sig + at de har en border 1px (vi
fjerner altså yderligere 4 px (1 i hver side for hver menu)) og så er
der 790-150-150-4=486 px tilbage.

Din div i centrum er 500px (plus 2px border bred), og den kan
naturligvis ikke være der.
Med venlig hilsen
Lars Hoffmann

---

I artikel <Xns9298AAF3BA48intercambiodvdPUNTOc@130.133.1.4>, skrev "Lars
Hoffmann" <lars@hoffmann.ac>:


>
> din indhold er 800 px bred
>
> men den har en margin på 5 px i hver side, så ender vi på 790 px, dine
> menuer er 150 px bredde hver for sig + at de har en border 1px (vi
> fjerner altså yderligere 4 px (1 i hver side for hver menu)) og så er
> der 790-150-150-4=486 px tilbage.
>
> Din div i centrum er 500px (plus 2px border bred), og den kan
> naturligvis ikke være der.

Margin på 5px var kun så man kunne se hvor den øverste lange div blev af.
Og i øvrigt hjælper det ikke at ændre de 800px til 900px, hvilket det
burde hvis det var det der var i vejen.

Men hvis vi nu ser bort fra at der er et par pixels for lidt, er der så
nogen der har en ide???

---

Mads Sejersen escribió / skrev

> Og i ›vrigt hj‘lper det ikke at ‘ndre de 800px til 900px, hvilket det
> burde hvis det var det der var i vejen.

øh, jo det gør, se selv på:
http://www.intercambiodvd.com/temp/Multimedienetværk.htm

Hvis det ikke er det der er problemet, må du lige forklare hvad der
ellers er galt.

Med venlig hilsen
Lars Hoffmann

---

Lars Hoffmann wrote in <Xns9298F123A5779intercambiodvdPUNTOc@130.133.1.4>:
>> Og i ›vrigt hj‘lper det ikke at ‘ndre de 800px til 900px, hvilket det
>> burde hvis det var det der var i vejen.
>
> øh, jo det gør, se selv på:
> http://www.intercambiodvd.com/temp/Multimedienetværk.htm

Det ser helt forkert ud her hos mig. (Konqueror)
Så han er ikke ene om at se problemet. :)

--
Mvh.

Niels Andersen
(la nels. anersyn.)

---

"Mads Sejersen" skrev bla..
> Det har jeg gjort ... prøv at se på http://crazypenguin.amok.dk/test ...
> det virker ikke (eller hvad har jeg gjort galt??)

Lidt inspiration.
http://www.glish.com/css/7.asp

--

jopa
www.jp-web.dk
www.web-templates.dk
www.webshop-jylland.dk

---

jopa escribió / skrev

> http://www.glish.com/css/7.asp

Hvad er det for en farveangivelse:

border:1px solid #000;

bør det ikke være:
border:1px solid #000000;
?
Med venlig hilsen
Lars Hoffmann

---

Lars Hoffmann skrev:

> Hvad er det for en farveangivelse:
> #000; bør det ikke være: #000000;

Nej, det er faktisk helt korrekt. Når man kun angiver 3 cifre bliver de
“gentaget parvist”: #382 er den samme farve som #338822

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

---

Rune Glerup escribió / skrev

> Nej, det er faktisk helt korrekt. N†r man kun angiver 3 cifre
> bliver de "gentaget parvist"

lækkert, det vidste jeg ikke, man kan jo lære noget nyt hver dag

---

"Lars Hoffmann" skrev
> Hvad er det for en farveangivelse:
> border:1px solid #000;
> bør det ikke være:
> border:1px solid #000000;

#000; er sort

Prøv selv i din editor

--

jopa
www.jp-web.dk
www.web-templates.dk
www.webshop-jylland.dk

---

I artikel <3d9712d5$0$70298$edfadb0f@dspool01.news.tele.dk>, skrev "jopa"
<john@jp-web.dk>:

> "Mads Sejersen" skrev bla..
>> Det har jeg gjort ... prøv at se på http://crazypenguin.amok.dk/test
>> ... det virker ikke (eller hvad har jeg gjort galt??)
>
> Lidt inspiration.
> http://www.glish.com/css/7.asp

Ja ... men den du'r jo ikke helt. Der bruger de position: absolute.
Hvilket vil sige at menuen altid vil være et bestemt antal pixels fra
kanten.
Jeg vil gerne have det hele centreret så menuernes afstand fra kanten vil
variere fra skærmopløsning til skærmopløsning.
Er der ikke andre der har lavet sådan noget før???

Mvh. Mads Sejersen

---

Mads Sejersen wrote in <3d97678d$0$69051$edfadb0f@dspool01.news.tele.dk>:
>> http://www.glish.com/css/7.asp
>
> Ja ... men den du'r jo ikke helt. Der bruger de position: absolute.
> Hvilket vil sige at menuen altid vil være et bestemt antal pixels fra
> kanten.

Positionen er relativ til den første "parent", som har position "relative"
eller "absolute".

Dvs. du kan lave en div rundt om det hele, som er midt på siden, og har den
faste bredde du vil have.

--
Mvh.

Niels Andersen
(la nels. anersyn.)

---

On Sun, 29 Sep 2002 15:44:26 +0200, "Mads Sejersen" <Psyco@mailme.dk>
wrote:

>Okay ... jeg har lidt problemer med mine div-tags
>
>Jeg har hørt at man ikke skal bruge tabeller til sit design. Derfor vil
>jeg gerne bruge div'er i stedet.
>Men hvordan får jeg sat dem ved siden af hinanden, så det bliver lige som
>en tabel med en enkelt række og tre koloner. Den eneste løsning jeg kan
>komme på er float-left og float-right, men det du'r ikke.

Tillægsspørgsmål:
Hvis man nu ved et traditonelt tabel-layout har:
(læs med fixed pitch font (fast tegnbredde, fx Courier))

-------------------------------
| a |
-------------------------------
| | | |
| | | |
| b | c | d |
| | | |
| | | |
| | | |
| | | |
| | | |
-------------------------------

- altså en topbjælke (a), en venstremenu (b), et 'hovedvindue' (c) og
en højrekolonne (d)

Det er så ret enkelt at sørge for:
1) at bredden af a (= bredden af b + c + d) er lig med vinduesbredden
2) at b, c og d er lige høje (ses tydeligt med baggrundsfarve)
3) at bredden af b og d bestemmes af indholdet, mens bredden af c er
'resten' (c = a - b - d (bredde))
4) at alle disse ting overholdes i så at sige alle browsere,
vinduesstørrelser og skærmopløsninger.

Nu er det så at jeg gerne vil gå væk fra tabeller som layout-værktøj
og i stedet bruge CSS også til positionering. Jeg har brugt CSS til
tekst-formattering i årevis, men synes ikke helt jeg kan finde en
tilfredsstillende løsning som erstatning for tabel-layout.

Løsningen må ikke være afhængig af JavaScript.
Indholdet af b er nogenlunde konstant, mens indholdet af c og d
varierer dynamisk (der er tale om ASP-sider).

Nogen ideer?

Et eksempel på hvor "langt" jeg er kommet:
<URL: http://www.modstand.org/bts/titeltest4.htm>
(links mm. virker ikke.)

"Originalen" er på:
<URL: http://www.socialister.dk/bts/btstitel.asp?titel=404>

--
Jørn Andersen,
Brønshøj

---

"Jørn Andersen" skrev bla...
> - altså en topbjælke (a), en venstremenu (b), et 'hovedvindue' (c) og
> en højrekolonne (d)
>Nogen ideer?

Måske noget ala dette, uden garantier

<html>
<head>
<title>4 boxe</title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial;
color: white;
background-color: white;
}
a {
text-decoration: none;
font-weight: bold;
color: blue;
outline: none;

}
a:visited {
color: blue;
}
a:active {
color: blue;
}
a:hover {
color: aqua;
text-decoration: underline;
}

p {
font-size: 11px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
color: Black;
}

#top {
margin: 30px 0px 0px 0px;
padding: 5px;
border: 2px dashed gray;
background: white;
height: 70px;}


#venstre {
position: absolute;
top: 120px;
left: 0px;
margin: 10px;
padding: 2px;
border: 2px dashed gray;
background: white;
width: 150px;

}

#midten {
margin: 20px 180px 20px 190px;
padding: 10px;
border: 2px dashed gray;
background: white;

}
#hojre {
position: absolute;
top: 120px;
right: 0px;
margin: 20px;
padding: 10px;
border: 2px dashed gray;
background: white;
width: 150px;
width: 120px;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="venstre">
<p>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
<a href="bla.htm">LINKS HER</a><br/>
</p>
</div>
<div id="midten">
<p>Indhold Indhold Indhold Indhold Indhold Indhold Indhold Indhold Indhold
Indhold Indhold Indhold Indhold Indhold Indhold Indhold Indhold Indhold
Indhold Indhold Indhold Indhold Indhold Indhold </p>
<div align="right"></div>
</div>
<div id="hojre">
<p>diverse</p>
</div>
</body>
</html>

--

jopa
www.jp-web.dk
www.web-templates.dk
www.webshop-jylland.dk

---

On Sun, 29 Sep 2002 17:11:28 +0200, Jørn Andersen <jorn@jorna.dk>
wrote:

> et traditonelt tabel-layout

Jeg fandt lige:
<URL:
http://www.webreference.com/authoring/style/sheets/layout/advanced/>
- som ser ret interessant ud til mit problem - skal nok give
tilbagemelding, hvis det virker


--
Jørn Andersen,
Brønshøj

---

Prøv at tjekke www.glish.com/css/

// Ralley

"Mads Sejersen" <Psyco@mailme.dk> wrote in message
news:3d9703ad$0$18142$edfadb0f@dspool01.news.tele.dk...
> Okay ... jeg har lidt problemer med mine div-tags
>
> Jeg har hørt at man ikke skal bruge tabeller til sit design. Derfor vil
> jeg gerne bruge div'er i stedet.
> Men hvordan får jeg sat dem ved siden af hinanden, så det bliver lige som
> en tabel med en enkelt række og tre koloner. Den eneste løsning jeg kan
> komme på er float-left og float-right, men det du'r ikke.
>
> Nogen forslag???
>
> Mvh. Mads Sejersen