05. november 2005 - 10:37Der er
82 kommentarer og 1 løsning
Hvordan centreres en tabel vertikalt?
Hej Eksperter
Jeg har en tabel, som jeg ønsker altid skal placeres lige midt på skærmen - lige meget hvilken opløsning skærmen har. Horisontalt styres det med en <div align="center"></div>, men hvordan klares det vertikalt?
Umiddelbart synes jeg spørgsmålet opfordrer til at få lagt den endelige brug af padding, margin etc. fast. Og jeg har lidt svært ved at gennemskue, hvornår man f.eks. skal bruge padding og margin på hhv. #maintable {} og #maintable td {}. Hvis ikke det emne berøres i dette spørgsmål, opretter jeg et nyt. Kigger som sagt spændt med :)
Jo, men brugeren kan slet ikke bruge margin og padding i IE med XML-prologen foran DTD'en. Bare en HTML-kommentar ødelægger det hele. Jeg prøver lige mit sædvanlige eksempel :) Dette dokument tolkes korrekt i forhold til CSS i både IE og FF (border lægges udenom elementet):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>TITLE</title> <style type="text/css"> body, html { height: 100%; margin: 0; padding: 0; } div { width: 200px; height: 200px; background: yellow; } .withBorders { border: 50px solid red; } </style> </head> <body>
Prøv det så med denne DTD - og se, hvad der sker i IE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- eller bare skriv en HTML-kommentar før DTD'en:
<!-- Det er da vist ikke meningen --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> ... osv - osv ...
Hvis du har en side loaded i din browser, kan du se, om dokumentet overholder standarden - eller er gået i såkaldt 'quirks mode' (og ikke understøtter bl.a. CSS' box-model) - kan du skrive: java script:alert(document.compatMode)
- i browserens adressefelt - og trykke 'Return'.
Returneres 'CSS1Compat', er alt fint. Returneres 'BackCompat' er IE gået i quirks mode :o|
#maintable { width: 755px; background-color: #fff; margin: 0px auto; border: 0px; padding: 0px; /* Er denne linie overflødig, når den også er sat i td? */ border-collapse: collapse; border: 0px; /*Skal denne linie også sættes ind, når border-collapse: collapse; står der i forvejen? */ } #maintable td { text-align: left; vertical-align: top; margin: 0px; border: 0px; /*Skal denne linie sættes ind, når border i tabellen allerede er defineret? */ padding: 3px; }
Hvilke linier er overflødige, for de fleste af dem optræder jo begge steder?
Jeg tror lige jeg skal have tømt støvsugerposen, inden jeg kigger alle dine kommentarer igennem :D
Har nu læst dine to artikler olebole og du råder så vidt jeg kan se (du skriver jo meget!) at man skal vente med brugen af xhtml.
Så går I videre og skriver derudaf, men jeg må indrømme at jeg meget hurtigt bliver sat af. Ærlig talt forstår jeg ikke særlig meget af det!!!
Det lyder som om at debatten meget drejer sig om min brug af
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
Men hvad skal jeg gøre i stedet?
For min side er jo uhyre simpel. Den indeholder blot en tabel med tre celler fordelt på to rækker.
Skal det virkelig være så svært at lave det???
11:02:17 "Hvad vertikal centrering angår, så kræver det, du sætter en fast højde på tabellen" Jamen, hvad hvis jeg ønsker forskellige højder på mine tabeller?
Ok, mine kommentarer og spørgsmål udsprang af dit spørgsmål. Jo, det er din !DOCTYPE, som nok er for tidlig at anvende.
Min første kommentar drejer sig om, at din tabel skal positioneres i forhold til det omkransende element: Du har en tabel, som fylder 100% i både højde og bredde. Når den er fastsat, kan du sætte din (synlige) tabel i forhold til den. Om det kan lade sig gøre bare ved angivelse af
html, body {} har jeg ikke prøvet af, men det ved Ole garanteret.
Jeg stikker lige piben ind og følger med fra sidelinien.
Det ser lige sådan ud så det er jo fint. Men hvad betyder de 200px i <div style="width:200px;margin:0 auto"> ?
Og jeg har endnu ikke fattet hvordan jeg centrerer vertikalt som spm jo egt drejede sig om. I siger min synlige tabel skal positioneres efter en usynlig tabel der fylder hele skærmen ud. Men jeg forstår altså ikke lige hvordan.
Det er ikke sikkert, at den er nødvendig, når du har dette i dit CSS:
html, body { height: 100%; width: 100%; margin: 0px; }
Men det er jeg som sagt ikke sikker på, jeg har ikke testet. Og måske bør det laves mere hensigtsmæssigt, og det er derfor jeg håber min guru, olebole, kommer på banen :D
Det er ét misk-mask af styles i hhv. CSS og html-dokument, og noget af det burde lægges ind i dit stylesheet, istedet for at noget er stylet i dit dokument, og noget andet ligger i dit CSS. Jo mere du lægger ind i dit CSS, desto mere overskuelig bliver din side at kigge igennem. Men det er noget du altid kan hygge dig med, når nu det rusker og regner udenfor :)
Jeg har ikke kigget alt dit CSS igennem, men der er flere ting, der med lidt held kunne rettes til. Måske konflikter noget af det med dine styles i dit html-dokument, så meget har jeg ikke kigget på det.
Hvis ikke du angiver padding til at være 0px, sættes der som standard 2px af.
collapse gør, at border (som jeg har forstået det) bliver "flad", og hvis den sættes til 0 (nul) samtidig, er der ingen border at se. Men jeg håber lige Ole kommer på banen.
Mht. bredden på tabellen, så skal cellen være 702px bred, da der skal sættes 700px af til billedet, og 2 x 1px til den sorte kant på hver side af billedet. Højden er ligegyldig, da den skal være variabel.
Derefter skal der være 2px på hver side af tabellen med baggrundsfarven #333300.
Det vigtige i denne sammenhæng er, at du angiver, at der ikke skal være nogen padding eller margin, så du har fuld kontrol over bredden.
Jeg har fået meget erfaring mht. CSS, men har stadig en del uafklarede spørgsmål. Det er også derfor jeg håber Ole har overskud til bl.a. 05/11-2005 11:59:43
Ups, der er noget galt: Hvis du ser siden i Mozilla, når tabelbredden er 706px;, ser den anderledes ud; så bliver den for bred. Ændres tabelbredden til 704px; er den ok. Ved ikke lige hvor det går galt, kigger lige ...
Jeg skal snart ud at handle lidt ind, så jeg må kigge efter lidt senere. Men lige en lille ting: Har du overvejet at lave det i en iframe? Ellers kan tabelhøjden jo variere en del, når du fylder indhold i siden.
... selvom jeg personligt ikke bryder mig om i/frames. Men hvis den skal ligge centreret vertikalt på siden, bør den (efter min ringe mening) have en fast højde. Ellers ryger kontinuiteten sig en tur :)
Tabellen vil have samme højde på alle sider da der udelukkende vil være billeder med højden 700px og bredden 442px.
Hvis jeg indsætter en iframe, vil jeg ikke have mulighed for at ændre linksene til hvide på den valgte side. Det vil jeg meget gerne, selvom en iframe kunne gøre opdateringsarbejdet lidt nemmere. Men så stor er min side jo heller ikke.
Er der nogen forskel på at bruge id og class? Hvorfor skriver du style i text og text2 direkte i koden og ikke i css'en? Billedet skal vel også i en style for sig?
Forstår heller ikke hvorfor du skriver alt i links css'en. Hvorfor ikke bare:
Og som skrevet 05/11-2005 15:31:29 Fandt en lille fejl efter validering af min css (selve kildekoden godkendte den). font-weight: none; skal være font-weight: normal;
Hej Steen og Ole. Nu har jeg indarbejdet ændringerne i min side. I kan se resultatet på www.petersand.net hvor samtlige sider overholder HTML 4.01 Transitional! :)
Som jeg skrev i 05/11-2005 14:17:17, så er det hele rodet sammen; noget skal ind i CSS, andet skal styles i dokumentet p.gr.a. af nærhedsprincippet. Når du styler direkte i dokumentet, "overruler" det hvad der er i dit CSS. Og det var dét jeg mente du kunne hygge dig med at rydde op i på en kold, regnfuld og stormfuld søndag efterårs-eftermiddag :)
Forskellen på id og class er, at id er unik, og kan kun bruges til ét formål. Dvs. du kan kun bruge den til én ting pr. side, og så er det slut. Eksempel på et unikt id:
#maintable { }
Det kan du KUN bruge på din hovedtabel, fordi id er unikt. Hvis du derimod benytter det som en class:
.maintable { }
vil du kunne genbruge den alle de steder, hvor du finder det hensigtsmæssigt. Men i dette tilfælde, hvor tabellen som det eneste skal have en bredde på 704px;, kan man godt lave den unik, hvis ens styling går på den unikke tabel, som er din hovedtabel, som indeholder alt.
Man skal dog passe med overdreven brug af id frem for class, fordi et stylesheet kan blive unødigt stort, hvis man har det svært med at holde selvjustits. Man bør kun bruge id (efter min mening), hvis det er rationelt, og man kan se en fordel.
Ok, så meget har jeg ikke kigget på det, men det var en besvarelse på din kommentar fra 07/11-2005 10:12:23: "Hvorfor skriver du style i text og text2 direkte i koden og ikke i css'en? Billedet skal vel også i en style for sig?" :)
Nu er smag og behag jo forskelligt, og kan aldrig diskutteres, hvis det er designet/helhedsindtrykket vi taler om. Men jeg har personligt aldrig brudt mig om sider, der har en fastsat størrelse, og hvor indholdet er centreret på siden. Du har dog ikke de næsten obligatoriske prikker som baggrundsbillede, og det er da glædeligt :)
Jeg bryder mig ikke om det dominerende billede, som man kommer bliver mødt med. Jeg bryder mig ikke om alt det sorte og den grønne farve. Skal jeg være hudløst ærlig (og det skal man jo), så er siden for mig en kende for dyster at se på.
Jeg selv er til det mere traditionelle (og ikke for mørke) design. hvor man starter i toppen, og scroller ned ad siden. Men igen - det er smag og behag. Hvad du synes er smukt, bryder jeg mig måske ikke om. Og omvendt :)
Hvis vi derimod ser på det rent håndværksmæssige, så ser det solidt og gedigent ud. Siden er crossbrowser-venlig, og det er en fornøjelse. CSS kan med garanti laves mere hensigtsmæssigt. Som du nok har forstået, så bokser jeg selv med at lave det noget nær perfekte. Men jeg har en hel del at lære endnu :)
Alt i alt godt gået, når man ser på det håndværksmæsssige. Det kan godt være, at olebole eller andre vil modsige mig, og han vil uden tvivl kunne optimere dit CSS yderligere. Men som sagt, så er jeg også ved at lære det. Og jo mere man forsøger, desto mere og mere rationel bliver ens tankegang til sidst :)
Alt i alt rigtig godt, hvis jeg for mit eget vedkommende ser bort fra dit design og farvevalg. Men igen - det er smag og behag :)
Og det er en fornøjelse at se, hvor urokkelig din side er. Kontinuitet fra ende til anden, præcision på .... mulehårs-niveau. En sand fornøjelse at surfe rundt på din side :)
Endnu engang et lækkert uddybende svar - sådan! :)
Jo, smag og behag er åbenbart forskellig! Hvad er "de obligatoriske prikker" egentlig? Du kan måske have ret i, at den sorte baggrundsfarve er en anelse dyster, men jeg har nu lavet rigtig mange udkast til siden (dette er udkast 21!), og mine projekter står klart flottest med sort baggrund. Kontrasten synes jeg er lækker. Dyster? Lidt, men flot? Ja. Men igen, smag og behag er forskellig.
Du bryder dig ikke om det dominerende billede, som man bliver mødt af. Det forstår jeg godt. Det er også mit eget største kritikpunkt. Synes selv det kun bør være under "Kontakt" man ser det. Forsiden skal ændres til et slideshow (som under "Udvalgte projekter"), der viser det bedste af det bedste jeg kan (5-10 billeder). Har siddet og rodet lidt med det. Det fungerer helt fint på startsiden og "Kontakt" med mit store billede. Men hvad gør man så på siden for "Udvalgte projekter"? Det oplagte svar er at gøre det samme som på forsiden. Men min mouseovereffekt og slideshowet fungerer rigtig dårligt sammen. Slideshowet overruler mouseovereffekten. Det ser ikke godt ud. Men så billedet af mig på de to undersider? Nej, det er heller ikke helt godt. Så nu står billedet af mig selv alle tre steder selvom jeg ikke er helt tilfreds. Det giver også en stor genkendelighed nu hvor siden er så simpel i sin opbygning.
Mit eget andet kritikpunkt er at jeg ikke kan stoppe slideshowet og hoppe frem og tilbage som jeg har lyst til. Overvejer at sætte mig ind i flash til at lave et slideshow. Som projekterne bliver vist på www.plot.dk synes jeg er super!
Angående det håndværksmæssige er jeg naturligvis super glad for hvad du skriver. Kontinuitet på mulehårsniveau! He he. Jo, sådan er jeg!
- og så er det ikke en mindre fornøjelse at se Steen 'køre med klatten', når man nu har fulgt ham fra 'de tidlige forsøg'. Det er også dejligt at læse, han fuldt ud er klar over, han stadig er ved at lære ... så er opgaven vist blot at få ham til at forstå, han på det punkt ikke adskiller sig fra roenving og mig. Vi begyndte bare vores 'vandring' lidt før - og er derfor kommet til et andet sted på 'turen'. Min største rædsel er nok at stå ved skiltet: "Vejen er ikke længere!" ;D
Der kører mange debatter omkring, om det nu er tilladeligt at bruge denne eller hin teknik til at løse denne eller hin opgave med. De er ofte af 'religiøs' karakter og er efter min mening somregel ret tåbelige. Man bør forsøge at få sin kode til at leve op til standarderne - og ikke mindst meningen med dem ... og det er ofte hér, kæden hopper af. Hvis man læser tekster med det fundamentalistiske øje, kan man få, hvad somhelst ud af, hvad somhelst. Mellem to dybe grøfter ligger ofte en farbar vej - og jeg har personligt ikke rigtig noget at brokke mig over i resultatet her i tråden ;o)
Jeg har (bevidst) overladt dette til Steen - og selvom jeg ikke har 'dyrket fluesex' med den færdige kodes detaljer, virker den absolut robust og gangbar :)
Det kan godt være jeg holder mig til det lidt traditionelle, og for mange lidt kedelige design. Det er igen det her med præsentationen; Hvis en forretningsmand møder op med til et forhandlingsmøde iført sweatshirt og hullede cowboybukser med maling på, så er der nok ikke mange, der vil tage ham seriøst. Image udadtil og førstehåndsindtryk betyder alt.
Nu kan man ikke sammenligne en side med prikker over det hele, med en forretningsmand iført den omtalte beklædning. Men når jeg ser en side lavet på den måde, så drejer min tankegang sig over i noget med teenagere/meget unge, og ved første øjekast gætter jeg på, at man kan downloade skrivebordstemaer, animerede GIF'er etc. Og for de særligt indviede er der måske noget fildeling på et eller andet niveau. Til trods for, at visse funktioner flot er udført i PHP eller ASP.
Nej, SÅ fordomsfuldt tænker jeg dog ikke ... men det snerper derhenad. Det er ihvertfald en side, hvor jeg pr. automatik tænker, at den nok er tiltænkt et yngre publikum :)
Nej, det er det bestemt ikke. Jeg kan bare ikke ... have det, så er det sagt diplomatisk :D
Er det ikke rigtigt, at man kan forbinde den type af sider sammen med et ret ungt publikum? Der er garanteret også en spilserver, og skins, og jeg-ska-gi-dig-ska-jeg :)
Nej, helt seriøst, og uden at være alt for fordømmende, så ER smag og behag forskelligt :)
Og jeg vil lige skynde mig at sige, at jeg er ikke er ude på at nedgøre eller latterliggøre noget. Jeg siger bare, at mit generelle indtryk er, at den type af sider nok ikke henvender sig så meget til et publikum på min alder. Det hører sig alderen til, og teenagetiden/den helt pure ungdom er for mit vedkommende noget, der efterhånden er foregået for en del år siden :)
Nææh ... nu skal man jo - med Jesper Kleins ord - ikke kaste benzin på *det forkerte* bål *LoL* Jeg er ganske enig, Steen :)
Professionelle (læs: klassisk uddannede) grafikere kan fortælle i timevis om deres lange, våde drømme. Ikke omhanlende deres grafik - men de 'tomme', jomfruelige flader, der støder op til denne. Spørger man en musiker, hvor de største momenter i musikken opstår, vil svaret prompte være: "I pauserne!".
Desværre er pianisten Liberace's 'kamp-bøssoide' motto: "To much of a good thing is just ......... *goooOooOOOOORGEOUS* ...!!!" blevet god latin. Det er ekstremt svært at blive fri for auditive og visuelle tæppebomardementer i hverdagen.
Jeg har ikke lyst til at forholde mig til alverdens bipperi, jingles og knaldrøde gummibåde, når jeg kører i bus, køber mælk eller ringer til et firma. På samme måde, er der ingen grund til at give mig prikker for øjnene, omkring de informationer, jeg søger på et website - for ikke at tale om at pine min musikalitet med baggrunds-muzak.
Hvad blev der af begreberne: Pause, fordybelse, fravær af stimuli, forventning? En sur, gammel mand overvejer at stifte "Det Pauserende Folkeparti"! *ROTFL*
PS: Mon ikke nogle af de musikere, der klager over manglende respekt for deres 'kunst' (læs: piratkopiering af konsum-tracks), skulle overveje et medlemskab og få dæmmet op for den egentlige årsag ... som formodentlig ikke er WWW eller P2P, men overproduktion og misbrug :)
Så har du allerede det første medlem til dit parti, Ole :D
Det er så sandt, som du har sagt: Fokus skal hverken være på indpakningen eller på den dårlige smag, men på det, der betyder noget. Enkle og indbydende virkemidler skal kun føre publikum frem til substansen, det er ikke rammerne, der skal være målet for opmærksomheden :)
Jeg er ikke designer, men det, der er altafgørende for mig er, at det er ENKELT og OVERSKUELIGT. Det skal være, så man med et enkelt blik ned over siden får fat i essensen, og uden det mindste besvær kan manøvrere rundt efter det man har brug for. Eftersom jeg ikke er prof, kan jeg snildt bruge TIMER på at få det enkelt og overskueligt. Ind imellem kunne jeg virkelig godt bruge en professionel grafikers øje for opbygningen af en side. Jeg vil vove den påstand, at jeg kan opnå det samme. Jeg skal bare have 1000 gange længere tid til det, end en prof ville bruge :D
Undskyld den sene pointgivning! Tusinde tak for hjælpen til Jer begge.
Synes godt om
Ny brugerNybegynder
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.
Ny bruger
Nybegynder
Opret
Preview
