CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

sholm Nybegynder

01. april 2003 - 21:15 Der er 34 kommentarer og
1 løsning

Dynamisk placering af <div> boks

Hejsa,

Jeg vil gerne have en div-boks placeret under nogle andre div-bokse problemet er, at jeg ikke ved hvor på siden den nederste skal starte, så jeg kan vel ikke bruge position til det?

Hvis det er nogen der har en god css løsning på det så skriv lige :)

Synes godt om

-master-d- Nybegynder

01. april 2003 - 21:35 #1

Jo da

Her er en med absolut placering
<div id="nedersteDiv" style="position:absolute;z-index:1;"></div>

og hermed relativ
<div id="nedersteDiv" style="position:relative;z-index:1;"></div>

Synes godt om

sholm Nybegynder

01. april 2003 - 21:55 #2

ja, det virker bare ikke helt efter hensigten...
Jeg må vist prøve at smide noget af koden ind:
.menu{
position: absolute;
top: 156px;
left: 5px;
height: 90%;
width: 170px;
z-index: 1;
}
.copy{
position: relative;
height: 20px;
width: 950px;
z-index: 1;
}

Det er de to blokke jeg bruger i mit stylesheet.

<div class='menu'></div>
<div class='copy'></div>

og det er de to div's

Men copy som skal være lige menu, ligger øverst på siden...

Synes godt om

olebole Juniormester

01. april 2003 - 22:17 #3

<ole>

.menu{
position: relative;
left: 5px;
height: 90%;
width: 170px;
z-index: 1;
}
.copy{
position: relative;
height: 20px;
width: 950px;
z-index: 1;
}

/mvh
</bole>

Synes godt om

sholm Nybegynder

02. april 2003 - 12:54 #4

tak for svaret men det er stadig ikke helt det jeg skal bruge...Sorry men nu smider jeg hele koden ind, håber i kan bære over med mig :O)
Stylesheet:
body{
margin : 5px 0px 0px 5px;
z-index: 1;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
.logo{
position: absolute;
top: 5px;
left: 5px;
height: 125px;
width: 950px;
background-color: #787879;
border-left: 1px solid Black;
border-top: 1px solid Black;
border-right: 1px solid Black;
z-index: 2;
}
.status{
position: absolute;
top: 130px;
left: 5px;
height: 26px;
width: 950px;
background-color: #787879;
border-left: 1px solid Black;
border-top: 1px solid Black;
border-right: 1px solid Black;
border-bottom: 1px solid Black;
z-index: 2;
}
.menu{
position: absolute;
top: 156px;
left: 5px;
width: 170px;
border-right: 1px solid #656565;
background-color: #F1F1F1;
z-index: 5;
border-left: 1px solid Black;
}
.contents{
position: absolute;
top: 156px;
left: 175px;
width: 600px;
background-color: #FFFFFF;
z-index: 5;
}
.adds{
position: absolute;
top: 156px;
left: 775px;
width: 180px;
background-color: #F1F1F1;
border-right: 1px solid #000000;
border-left: 1px solid #656565;
z-index: 5;
}
.copyright{
position: relative;
height: 20px;
width: 950px;
background-color: #F1F1F1;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
z-index: 5;
}

.html side:
<?xml version='1.0' encoding='iso-8859-1'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='da'>
<head>
<title>Blah</title>
<link rel='stylesheet' type='text/css' href='test.css' />
</head>
<body>
<div class='logo'>Logo</div>
<div class='status'>Status</div>
<div class='menu'>Menu</div>
<div class='contents'>Contents</div>
<div class='adds'>Adds</div>
<div class='copyright'>Copyright - Den her skal være nederst...</div>
</body>
</html>

Håber det forklarer sig selv...

Synes godt om

olebole Juniormester

02. april 2003 - 21:38 #5

Enten må du neste dine divs - eller bruge nogle mere fornuftige elementer til dit brug ... herunder tabeller. Derudover kan vi jo ikke vide, hvordan du vil have dine elementer placeret.

Hvad vil du med disse linier:
<?xml version='1.0' encoding='iso-8859-1'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='da'>
...?
Du skriver jo ikke i XML ... endda slet ikke noget, der ligner :)

Jeg har lidt på fornemmelsen, du er en af de mange, der ligger under for misforståede modeluner. Der er intet somhelst galt eller dårligt i at bruge tabeller ... tværtimod.
Der er heller ikke nogen grund til at bruge XHTML på de måder, det oftest skrives ... tværtimod.
Hvorfor prøver du at skrive XHTML ... hvorfor skrive HTML?
/mvh

Synes godt om

olebole Juniormester

02. april 2003 - 21:38 #6

"... hvorfor ikke skrive HTML?" burde der have stået :)

Synes godt om

sholm Nybegynder

02. april 2003 - 22:04 #7

Synes nu nok det er fint beskrevet hvordan elementerne skal placeres - hvis du gad læse koden, evt. sætte den ind i et par dokumenter...

Jeg har skam ikke påstået at der er noget galt i at benytte tabeller, men jeg har tilgengæld læst flere steder at det kan lade sig gøre at sætte sine sider op med css istedet for at benytte tabeller - så hvorfor ikke prøve det? Det samme gør sig gældende med XHTML vs. HTML...

Ærgeligt du ikke kan komme med et svar jeg kan bruge til noget, men mon ikke jeg finder ud af det...

Synes godt om

olebole Juniormester

02. april 2003 - 22:22 #8

Det er muligt, du synes, du har forklaret det tydeligt. Man kan dog undre sig over, du foretrækker at spille småfornærmet, når du får at vide, det ikke er tilfældet.
Tror du ikke, det ville tjene dit formål bedst, hvis du selv gad give en forklaring, andre end du selv kan bruge? Det ville nok tjene formålet bedre end fejlagtigt at påstå, at de der prøver at hjælpe dig ikke gider copy/paste din kode.

Det kan sagtens lade sig gøre at bruge XHTML i stedet for HTML (man får sjældent noget ud af det ... men det kan lade sig gøre). Man kan også bruge CSS til at placere DIVs i stedet for tabeller.
Sagen er bare, at det er et par voldsomt opreklamerede modefænomener, der ikke gør din kode bedre. Hvordan forventer du, det skal forbedre din kode?
/mvh

Synes godt om

sholm Nybegynder

02. april 2003 - 22:42 #9

Rolig nu...

Ved ikke helt hvordan jeg skal forklare det bedre end det er, men prøver da lige igen.

"logo" skal ligge øverst og fylde 950 px i bredden.
"status" skal ligge lige neden under og fylde det samme i bredden.
"menu", "contents" og "adds" skal ligeledes fylde 950 px i bredden - tilsammen, disse tre divs skal gerne være lige høje dvs. de skal være så høje som den højeste af dem er - og der kan variere.
"copy" skal ligge lige under disse tre div's og også fylde 950 px i bredden.
Man må ikke kunne se baggrunden imellem nogle af div'sne...

Det jeg har prøvet at gøre er at placere alle div's pånær "copy" absolut, men position og så var ideen at "copy" skulle placeres under de andre men da jeg ikke ved præcis hvor den skal være kan jeg ikke benytte absolut positionering og har forsøgt med relativ - dette kan jeg heller ikke få til at virke efter hensigten.

Til olebole:
Jeg forventer ikke at xhtml og css skal gøre min kode meget bedre, men jeg vil da gerne lære noget nyt, er det noget galt i det? Det kunne jo være at når jeg har prøvet det, at det viser sig at være et flop og jeg går tilbage til tabeller. Det kunne jo også være, at jeg finder ud af at det bare er sagen og fortsætter med at bruge det - hvem ved. Men det er ikke en religionskrig for mig, jeg vil bare gerne finde ud af hvordan det fungerer.

Synes godt om

olebole Juniormester

02. april 2003 - 23:09 #10

Så skal du nok læse en del på http://www.w3.org - så du kan få 'basics' på plads.

Det projekt, du har gang i, er et skole-eksempel på noget, der _ikke_ bør laves i positionerede divs.
'menu', 'contents' og 'adds' er en hel klar tabel-løsning ... du vil blot få en kluntet mudder-kode ud af at lave dem i divs.
/mvh

Synes godt om

dr_nielsen Nybegynder

15. april 2003 - 20:14 #11

<Ole> jeg vil nu mene at sholm har tankerne i orden.

Jeg vil sige at markup med tabeller hører til der hvor tabeldata findes.
Hvis man feks vil bruge ganske anvendelige dataimport funktioner fra eksempelvis MS office er det virkelig noget hø hvis hele sites er bygget op i tabeller. Plus det fakta at accessability for handicappede går helt af fløjten, når tabellerne bruges for flittigt.

Synes godt om

olebole Juniormester

16. april 2003 - 13:48 #12

dr_nielsen >> Et gammelt ordsprog siger: "Man lærer så længe, man lever".
Trøst dig ... du har et langt liv foran dig ;o)
/mvh

Synes godt om

dr_nielsen Nybegynder

16. april 2003 - 14:08 #13

ikke helt forstået, jeg er rimelig fortrøstningsfuld, meget lærelysten, og mener bare at sholm har fat i den rette idelogi, når han adskiller markup til data og markup til layout, og derved betragter en 'container' som det det er.

Og jeg ser jo frem til mit lange liv ;)
/Nielsen

Synes godt om

olebole Juniormester

16. april 2003 - 15:27 #14

Han adskiller absolut ikke visning og data bedre ved at anvende divs. Det er blot én af de mange misforståelser og ammestuehistorier, der har gjort, at disse er blevet det helt hotte buzz-fænomener for tiden ... ved siden af XHTML, som de fleste også har misforstået godt og grundigt :)
/mvh

Synes godt om

dr_nielsen Nybegynder

16. april 2003 - 15:39 #15

OK, har du baggrund for det du siger, eller er det en holdning. Som du kan læse af min sidste kommentar, er jeg interesseret i at lære, så fyr den af og læg en URL til nogle artikler - det ville være fedt

Synes godt om

olebole Juniormester

16. april 2003 - 15:46 #16

Jeg forstår ikke, hvad du mener med, om jeg har en baggrund for at sige det ... naturligvis har jeg det - men jeg kan ikke underbygge det med en artikel, hvor der står: "dr_jensen tager fejl på dette og hint punkt" :)

Hvis du læser W3C's rekomendationer og ser bort fra alle de vrøvle-historier, folk der ikke har læst dem (eller læst dem, som Fanden læser Biblen) kommer med - så vil du nok finde ud af, hvad det er, du har misforstået.
/mvh

Synes godt om

dr_nielsen Nybegynder

16. april 2003 - 15:47 #17

hmm, vi lader den ligge. man kan jo altid blive sur

:)

Synes godt om

olebole Juniormester

16. april 2003 - 15:51 #18

Ja, men det synes jeg ikke, du skal blive ....... jeg prøver jo blot at give dig en hjælpende hånd :)
/mvh

Synes godt om

dr_nielsen Nybegynder

16. april 2003 - 16:00 #19

Så giv mig den :), for mig er der ingen fornuft i at sætte et layout op i tabeller, det er jo ofte helt umuligt at browse et sådant site med feks en PDA uden at der optræder 10km scoll i alle retninger.
Jeg mener at alt layout kan lade sig gøre uden brug af tables og at man med css så fravælger/vælger hvilke screens og browsere man vil understøtte.

:)Nielsen

Synes godt om

olebole Juniormester

16. april 2003 - 16:24 #20

Scrollbars har intet med tabeller at gøre ... på PDA eller på PC. Og hvad har det i øvrigt med handicap-venlighed at gøre?

Vi mangler stadig, du forklarer det hensigtsmæssige i at undlade tabeller.
Naturligvis kan det lade sig gøre. Men du kan da ligeså godt bruge tabeller til det, de er bedst til - og divs til det, de er bedst til. Hvad du vælger og fravælger i dit stylesheets har heller ikke noget med tabeller/divs at gøre.
Det er jo ikke uden grund, W3C ikke har deprecated tabeller ... og heller ikke agter at gøre det.

Det forekommer mig, du roder lidt rundt i begreberne, uden at have helt styr på dem. Det er derfor, jeg anbefaler dig at nærlæse W3C's rekommendationer.
/mvh

Synes godt om

pollas Nybegynder

20. april 2003 - 05:06 #21

Hmm, jeg forsøger lige et forsigtigt spørgsmål (bl.a. fordi jeg sidder med _nøjagtig_ samme problem ang. positionering som sholm :)

Kan man lade en bok s'flyde frit' nederst afhængig af størelsen (dynamisk) i en <div>? Fx. som i eksemplet med nogle helt faste størrelser, så et par absolut positionerede - og så en, der 'lægger sig nederst'?

Kommentarer vedr. tabeller er noteret, men det kunne stadig være interessant at se, om det kunne alde sig gøre - så kan folk selv vælge foretrukken teknologi bagefter :)

Jeg har selv eksperimenteret med nestede <div>s, men uden noget brugbart resultat...

Anyone?

Synes godt om

dr_nielsen Nybegynder

24. april 2003 - 14:32 #22

Jeg har iøvrigt lige set www.tivoli.dk, den er lavet uden tabeller, og pressen siger at der ligger en composite bag. nice work må man sige.
Den validerer dog ikke xhtml, hvilket også vil være tæt på umuligt med den flittige brug af visual-editors i cms´erne i dag.

<Ole> hvad synes du, er det militant i udu?

mvh /Nielsen

Synes godt om

olebole Juniormester

24. april 2003 - 15:14 #23

Jeg er ked af at sige det, men Tivoli's site er rent 'kamp-slam', der kun kan bruges i IE og er ubrugelig for f.eks. syns-handicappede. Det er simpelthen ikke godt nok af et firma med de traditioner og det omdømme.
Jeg har i flere omgange haft længere ansættelse i deres scenetekniske afdeling (før jeg skiftede branche) og det er med skam, jeg har fulgt min gamle arbejdsplads (mis-)brug af WWW. De synes dog med det seneste site at have nået det forløbige bundniveau!

Synes godt om

olebole Juniormester

24. april 2003 - 15:21 #24

Rettelse: Den fungerer _næsten_ i IE :D
Det er jo også tankevækkende, at haven har haft så legendariske skikkelser indenfor dansk design som Poul Henningsen i deres sold, når man ser det 'design', man lægger for dagen på dette site. Det er overfyldt med helt grundlæggende, designmæssige brølere.
Kort sagt: Ynkeligt ...!
/mvh

Synes godt om

dr_nielsen Nybegynder

25. april 2003 - 11:02 #25

tjaa, jeg ved ikke helt, men enig er jeg jo ikke, og du er altså en bitter mand. *LO*
Kan du ikke vise mig noget du synes om?, og ikke nødvendigvis noget du selv har lavet.

/Nielsen

Synes godt om

olebole Juniormester

25. april 2003 - 14:24 #26

Jeg er ikke det mindste bitter ... hvor har du dog det fra? Jeg kan se, er kvalitetsbevidst og værdsætter godt håndværk. Det er måske det, du misforstår, da det er egenskaber, hvor vi tydeligvis adskiller os milevidt fra hinanden :)

En god webside, bør kunne bruges af alle - både svagtseende og normaltseende. Derudover bør den som _absolut_ minimum fungere uden fejl i IE, NS, Mozilla og Opera7 (de ældre Opera'er var for ynkelige, hvad angår DHTML).
Endvidere bør designet overholde de mest grundlæggende grafiske og typografiske regler - eller bevidst bryde dem med en begavet og velgennemtænkt begrundelse. Det sidste kræver dog et endnu bedre kendskab til grafik, design og typografi.
Om en side er god, afhænger desuden helt af, hvad der er dens formål og målsegment. En info-side og en branding-side skal opbygges helt forskelligt og opfylde helt forskellige normer.

Hvilke sider, jeg personligt kan lide, kan vel ikke have almen interesse. Men du kan jo kikke efter sider, der overholder ovenstående - det er blandt dem, du finder noget, jeg ville kunne synes om :)

Tivolis side fungerer kun delvist i én browser og indeholder rigtig mange grimme designfejl, så den er et helt klart eksempel på den dårlige ende af WWW.

Den er desværre ikke enestående i den retning. Problemet er jo, at det intet kræver at kunne nedsætte sig som 'webdesigner'. Enhver halvblind klamphugger kan gøre det - og rigtig mange har desværre gjort det.
Når mediet, teknologien og markedet bliver 'voksent', vil det naturligvis ændre sig - men så længe WWW endnu er et 'blebarn' må vi leve med ufattelig mange brækværdige 'øjebæer'.

Fordelen ved det er, at vi har noget at glæde os til ;o)
/mvh

Synes godt om

kappel Nybegynder

16. oktober 2003 - 15:10 #27

-> sholm

Fandt du nogensinde ud af om det kunne lade sig gøre?

/kappel

Synes godt om

sholm Nybegynder

16. oktober 2003 - 16:25 #28

Til kappel:

Desværre ikke, hvis du eller en anden finder ud af det vil jeg gerne høre mere om det.

/Søren

Synes godt om

kappel Nybegynder

16. oktober 2003 - 16:27 #29

Øv - jeg kan nemlig heller ikke få det til at virke.

Synes godt om

dr_nielsen Nybegynder

16. oktober 2003 - 20:11 #30

prøv dette
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='da'>
<head>
<title>Blah</title>
<style>
body{
margin : 5px 0px 0px 5px;
z-index: 1;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
.logo{
height: 125px;
width: 950px;
background-color: #787879;
border-left: 1px solid Black;
border-top: 1px solid Black;
border-right: 1px solid Black;
}
.status{
height: 26px;
width: 950px;
background-color: #787879;
border-left: 1px solid Black;
border-top: 1px solid Black;
border-right: 1px solid Black;
border-bottom: 1px solid Black;
z-index: 2;
}
.menu{
float:left;
width: 170px;
border-right: 1px solid #656565;
background-color: #F1F1F1;
z-index: 5;
border-left: 1px solid Black;
}
.contents{
float:left;
width: 600px;
background-color: #FFFFFF;
z-index: 5;
}
.adds{
float:left;
width: 180px;
background-color: #F1F1F1;
border-right: 1px solid #000000;
border-left: 1px solid #656565;
z-index: 5;
}
div.clear{clear:both;}
.copyright{
width: 950px;

background-color: #F1F1F1;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
z-index: 5;
}

</style>

</head>
<body>

<div class='logo'>Logo</div>
<div class='status'>Status</div>
<div class='menu'>Menu</div>
<div class='contents'>Contents</div>
<div class='adds'>Adds</div>
<div class="clear"></div>
<div class='copyright'>Copyright - Den her skal være nederst...</div>
</body>
</html>

Synes godt om

dr_nielsen Nybegynder

16. oktober 2003 - 20:18 #31

undlad at bruge position, anvend elementerne som de er og "float" dem så derhen hvor du ønsker dem.
husk at nulstille float igen efter kolonnerne (<div class="clear"></div>)

Synes godt om

sholm Nybegynder

16. oktober 2003 - 22:03 #32

Til dr_nielsen:

Sådan der! Det var en stort skridt i den retning jeg gerne vil. Der er stadig en ting jeg ikke helt kan gennemskue med det. Hvordan får jeg de tre kolonner til at følge med i højden når der ikke er lige meget indhold i dem alle? Hvis du f.eks. prøver at fylde indhold i contents så kommer menu og adds til at "gabe" - er det noget du har en løsning på? jeg har prøvet at sætte en højde på de tre divs men problemet opstår igen hvis indholdet kommer til at skubbe div'erne længere end højden er sat til.

Synes godt om

dr_nielsen Nybegynder

17. oktober 2003 - 12:49 #33

Højder er altid et problem, med dette. <div> er jo herlige nemme, og men en smule fornuft i markupen vil de uden ekstra krumspring være tilpaasset andre og mindre screens. Men glem ikke tre div´er der beskriver tre kolonner kommer aldrig til at opføre sig som var det en tabel.
En alternativ løsning, hvis du vil holde alt i css (blandt en milliard sikkert) var måske at lave markup sådan:

<div id="MidleContainer">
<div class="menu">Menu</div>
<div class="contents">Contents</div>
<div class="adds">Adds</div>
</div>
Og evt. style #MidleContainer med et baggrundsbillede, så den den tilfredsstiller de tre kolonners udseende. Derved kan du fjerne layout fra de tre kolonner og lade dem gabe som de vil.

Synes godt om

sholm Nybegynder

17. oktober 2003 - 17:31 #34

Mange tak for hjælpen...det er super med et godt svar.

Synes godt om

dr_nielsen Nybegynder

19. oktober 2003 - 18:13 #35

Welc. Det tog også kun 6 måneder og få svar *LO*

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS