01. april 2003 - 21:15Der 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 :)
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...
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 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...
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
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.
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
<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.
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.
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
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
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
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.
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
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...
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.
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!
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
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.
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
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>)
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.
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.
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.