/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
div'er ved siden af hinanden
Fra : Mads Sejersen


Dato : 29-09-02 14:44

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

 
 
Rune Glerup (29-09-2002)
Kommentar
Fra : Rune Glerup


Dato : 29-09-02 14:51

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

Lars Hoffmann (29-09-2002)
Kommentar
Fra : Lars Hoffmann


Dato : 29-09-02 15:36

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.

Mads Sejersen (29-09-2002)
Kommentar
Fra : Mads Sejersen


Dato : 29-09-02 15:37

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

Lars Hoffmann (29-09-2002)
Kommentar
Fra : Lars Hoffmann


Dato : 29-09-02 15:46

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

Mads Sejersen (29-09-2002)
Kommentar
Fra : Mads Sejersen


Dato : 29-09-02 21:48

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

Lars Hoffmann (29-09-2002)
Kommentar
Fra : Lars Hoffmann


Dato : 29-09-02 22:40

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

Niels Andersen (29-09-2002)
Kommentar
Fra : Niels Andersen


Dato : 29-09-02 23:05

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

jopa (29-09-2002)
Kommentar
Fra : jopa


Dato : 29-09-02 15:49

"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



Lars Hoffmann (29-09-2002)
Kommentar
Fra : Lars Hoffmann


Dato : 29-09-02 16:02

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

Rune Glerup (29-09-2002)
Kommentar
Fra : Rune Glerup


Dato : 29-09-02 16:08

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

Lars Hoffmann (29-09-2002)
Kommentar
Fra : Lars Hoffmann


Dato : 29-09-02 16:08

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

jopa (29-09-2002)
Kommentar
Fra : jopa


Dato : 29-09-02 16:13

"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



Mads Sejersen (29-09-2002)
Kommentar
Fra : Mads Sejersen


Dato : 29-09-02 21:51

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

Niels Andersen (29-09-2002)
Kommentar
Fra : Niels Andersen


Dato : 29-09-02 22:29

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

Jørn Andersen (29-09-2002)
Kommentar
Fra : Jørn Andersen


Dato : 29-09-02 16:11

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

jopa (29-09-2002)
Kommentar
Fra : jopa


Dato : 29-09-02 17:52

"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






Jørn Andersen (29-09-2002)
Kommentar
Fra : Jørn Andersen


Dato : 29-09-02 18:22

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

// Ralley (29-09-2002)
Kommentar
Fra : // Ralley


Dato : 29-09-02 16:29

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



Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408874
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste