Avatar billede Slettet bruger
04. marts 2009 - 10:05 Der er 25 kommentarer og
1 løsning

100% height div + centreret

Hej,

Er der nogen, der kan vise, hvordan det skal se ud? Mit div skal være 100% i height, og samtidigt være centreret.

Håber på hjælp :-)
Avatar billede keysersoze Ekspert
04. marts 2009 - 10:09 #1
http://web-dev.dk/post/2007/12/Absolut-centrering-af-hjemmeside-med-layers.aspx

Dette centrerer både horisontat og vertikalt (ved ikke om det var begge veje du søgte) men det virker kun hvis du kender højden på dit indhold.
Avatar billede Slater Ekspert
04. marts 2009 - 10:15 #2
100% height, så behøver den jo ikke være centreret lodret :P

html, body { height: 100%; text-align: center; }
#divnavn { min-height: 100%; _height: 100%; width: 800px; text-align: left; margin: 0 auto; }

- burde gøre tricket, med lidt fusk for at få IE6 til at fatte det.
Avatar billede Slettet bruger
04. marts 2009 - 10:24 #3
Jeg kender ikke højden - kun bredden på div
Avatar billede jokkejensen Novice
04. marts 2009 - 10:24 #4
min height til IE6 bør udtrykkes:

min-height: 100%;
height: auto !important;
height: 100%;

Desuden er text-align totalt unødvendig for at centrere elementer, det er jo ikke text.

/J
Avatar billede Slater Ekspert
04. marts 2009 - 10:26 #5
Nej, den er ikke spor unødvendig, eftersom IE6 ikke fatter margin: auto; men til gengæld fejlagtigt tror den skal centrere block-elementer sat til text-align: center;
Avatar billede jokkejensen Novice
04. marts 2009 - 10:39 #6
jeg kan sagtens uden..

IE6 fatter det fint.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        @import 'http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css';
        html,body
        {
            height: 100%;
   
        }
        #Wrapper
        {
            width: 600px;
            border: 1px solid red;
            border-width: 0px 1px;
            margin: 0 auto;
            height: auto !important;
            height: 100%;
            min-height: 100%;
           
        }
    </style>
</head>
<body>
<div id="Wrapper">
Indhold
</div>
</body>
</html>

/J
Avatar billede Slater Ekspert
04. marts 2009 - 10:54 #7
Det var lige godt pokkers. Jeg var fuldstændig overbevist om at margin: auto; ikke virkede på IE, og at jeg har prøvet det flere gange.

Det er jo heller ikke noget jeg bare har fundet på selv, men noget jeg har læst flere steder at folk bruger som alternativ til margin: auto;

Jeg er stadig overbevist om at der må være et eller andet det ikke virkede på. IE6 uden service packs? IE5? No idea. Men i hvert fald har du ret her :)
Avatar billede jokkejensen Novice
04. marts 2009 - 10:56 #8
Vi lærer alle.

Jeg ved ikke med IE5, men hvor mange bruger den ?

/J
Avatar billede Slater Ekspert
04. marts 2009 - 10:57 #9
Ingen. Hvis det er den der er problemet, er det en forældet tro jeg sad inde med. Jeg designer i hvert fald ikke til den.
Avatar billede jokkejensen Novice
04. marts 2009 - 11:02 #10
Nej jeg er også stoppet :) - eller tror egentligt aldrig jeg har arbejdet pro hvor den har været aktuel :)

Kun lige da jeg læste htx, der var det vist ie5 og netscape, men der fattede jeg hat af alt :)

/J
Avatar billede mclemens Nybegynder
04. marts 2009 - 11:28 #11
Behovet for text-align:center; til centrering melder
sig ved en IE i quirks-mode ("dårlig"/manglende doctype).
Avatar billede jokkejensen Novice
04. marts 2009 - 11:31 #12
... Så blev det sat på plads :)..

men har altid brugt en dtd, dog ikke altid helt gyldig :)

/J
Avatar billede Slettet bruger
04. marts 2009 - 14:16 #13
viperine - dit første indlæg virker fint. Svar gerne for point!
Avatar billede olebole Juniormester
04. marts 2009 - 14:22 #14
<ole>

Bortset fra helt manglende DTD er det stortset kun i DTD'en for HTML 4.01 Transitional, man skal huske at inkludere URL'en til definitionen for ikke at disable CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dog kan blot en HTML-kommentar eller XML-deklaration før en DTD i IE6 disable CSS:

<!-- Dette disabler store dele af CSS i IE6 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Det første er ikke en bug, men en feature:
    http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

Det sidste er derimod en bug, som dog er rettet i IE7.

/mvh
</bole>
Avatar billede Slater Ekspert
04. marts 2009 - 14:24 #15
Svar :)
Avatar billede olebole Juniormester
04. marts 2009 - 14:25 #16
omalley >> Med al respekt, så nej ... viperines første indlæg er noget møg. Det bygger på browser-bugs/hacks - og det bør man aldrig bygge sin kode på.

jokkejensens første indlæg er derimod i orden og en pæn måde at løse problemet på  =)
Avatar billede jokkejensen Novice
04. marts 2009 - 14:34 #17
fuck pointene, bare ærgeligt for spørger, at han ikke selv læser at viperine indser der findes en bedre løsning.

Og tak :)

/J
Avatar billede Slater Ekspert
04. marts 2009 - 14:50 #18
Jeg indså ikke der var en bedre løsning, jeg indså at en CSS-deklaration var overflødig så længe man kører den i standards-compliance mode.

Ole kan man jo ikke tage seriøst, desværre, da han mener ALT skal være fuldstændig standard og perfekt, hvilket både Google, Yahoo, Microsoft og W3C er lodret uenige med ham i. Det er hans måde at gøre tingene på, men absolut ikke den eneste rigtige.

Jeg ser intet problem i et hack, så længe man er sikker på det virker hvor det skal, ikke ødelægger andre ting, og ikke kommer til at ødelægge noget i fremtiden.
Avatar billede jokkejensen Novice
04. marts 2009 - 14:57 #19
Den diskution har jeg også taget 1000 gange med ham, men han har jo ret.

Dog er det ofte en kæææææmpe omvej at gøre alt validerende, og jeg bruger også hacks i vildt omfang, hvor det kan betale sig i mine øjne.

Men dit forslag er gammeldags, og text-align bør kun gives til elementer der indeholder tekst.

/J
Avatar billede jokkejensen Novice
04. marts 2009 - 15:21 #20
.. og hvad har google, yahoo med w3c standarder at gøre ?

At de skriver markup der skal passe til så ufatteligt mange enheder og klienter, har intet med w3c's regler at gøre.
Avatar billede olebole Juniormester
04. marts 2009 - 15:59 #21
"Ole kan man jo ikke tage seriøst, desværre, da han mener ALT skal være fuldstændig standard og perfekt, hvilket både Google, Yahoo, Microsoft og W3C er lodret uenige med ham i" >> Sikke noget guddommeligt vås! Det, jeg skriver, er jo netop i fuld overensstemmelse med W3C! Dén kommentar kan kun skyldes total uvidenhed om emnet.

"men absolut ikke den eneste rigtige" >> W3C sætter standarderne for webkode, så det er noget vrøvl at skrive. Det svarer til at sige, det absolut ikke er det eneste rigtige at holde tilbage for rødt lys, bare fordi Folketing og Politi siger, du skal  =)

Der er en verden til forskel på at bygge sin kode på valide properties som f.eks. jokkejensens.
Ikke eksisterende propeties som '_height' har man ingen garanti for, hvordan vil virke i morgen ... og så er den endda helt unødvendig, hvis man kan lidt CSS.

Jeg bruger også selv hacks, men det kunne aldrig falde mig ind at bruge hacks og invalid kode, når der findes bedre og valide alternativer. Hvad i alverden begrundelsen for at skrive skidt kode, når der findes bedre alternativer, forekommer mig en gåde.

Jeg ville i hvertfald føle mig komplet tåbelig - og enormt tarvelig overfor en evt. kunde - hvis jeg lavede et skidt stykke arbejde, som ikke lever op til de faglige standarder for branchen. Ikke mindst når jeg nu ved, det kan gøres bedre og i overensstemmelse med de nævnte standarder.

At viperine så finder dén holdning useriøs, siger vel bare en hel del om ham  =)
Avatar billede jokkejensen Novice
04. marts 2009 - 16:04 #22
how how, jeg bruger ikke  _Height: det ville være tåbeligt ! :) eller *html og de andre lamme.
Avatar billede olebole Juniormester
04. marts 2009 - 16:19 #23
Præcis! Jeg fremhæver netop din løsning fremfor viperines, da han gør brug af en af 'de lamme' (_height:100%) - hvilket jeg også finder tåbeligt  ;o)

http://www.eksperten.dk/spm/866285#reply_7340664 :
    #divnavn { min-height: 100%; _height: 100%; width: 800px; text-align: left; margin: 0 auto; }
Avatar billede Slater Ekspert
04. marts 2009 - 16:42 #24
Hold da op en masse løgne, infantile tilsvininger og direkte dumheder du kan komme med, Ole. Jeg gider ikke engang tage denne diskussion, da dette sted er for at hjælpe hinanden, og ikke for at lufte sin barnlig fornærmelse, når folk siger en imod.

- Desuden er hele dit indlæg baseret på den komplet fejlagtige antagelse, at det er det samme at definere standarder, som at påstå at man absolut ikke må fravige dem, så det kan slet ikke besvares.

Faktum her er at din måde ikke er den eneste rigtige. Når du påstår andet, tager du grueligt fejl. Jeg har på intet tidspunkt forsøgt at forhindre dig i at arbejde efter din metode, men lad dog være med at flæbe når nogen tillader sig at antyde at det ikke er den eneste måde at gøre det.


~
@Jokke: Du er i det mindste voksen at høre på, og giver mig jo sådan set ret, eftersom du siger du også selv bruger hacks når det betaler sig. Jeg kan ikke helt se problemet i underscore-tricket, men du er da ganske velkommen til ikke at kunne lide det.
- Nu ved vi ikke engang om opretter kører SCM, så muligvis var text-align nødvendigt. Og med hensyn til Google og Yahoo, så sagde jeg ikke at de havde noget med standarderne at gøre, men blot at det er arrogant at mene at de fire giganter tager fejl, og at ens egen løsning er den eneste korrekte :)
Avatar billede jokkejensen Novice
04. marts 2009 - 19:45 #25
Glem det tøser, mine hacks er bedst :)
Avatar billede mclemens Nybegynder
04. marts 2009 - 19:49 #26
Såfremt _height: 100%; leverer height 100% til IE<7 ser
jeg egentlig heller intet problem i det - browsere der ikke
forstår det - ignorer det (eller rettere det "skal" de jo).

- Der er simpelthen ikke den store forskel (rent moralsk) på
at levere en min-height til en browser der ikke forstår det
og en _height til en browser der ikke forstår det - er den ene
fungerende del "forkert" er den anden ligeså "forkert" IMO.

Man kan selvfølgelig sige at det er bedre at levere en ikke
genkendt css property til en ældre browser end at levere ikke
genkendte css properties til nyere browsere. Men er vi ude på
det felt vil jeg stadig sige at hvis det første er forkert bør
vi heller ikke støtte op om det andet - der bør enten benyttes
en body > #wrapper selector til {height:auto;min-height:100%;}
så IE<7 ikke får min-height eller benyttes conditional comments
med den ønskede css regel (sidst nævnte bør jo så være at foretrække, da vi ellers ville levere en css selector til IE<7 som de heller ikke forstår).

- Så vidt jeg ved skal browsere ignorere selectors eller properties de ikke kender, ret mig venligst hvis jeg tager fejl, tager jeg ikke fejl - skal vi da så ikke blot sige at der er flere løsningsmuligheder og hvilken man vælger afhænger af om man foretrækker den ene eller den anden.

Jeg ville selv bruge
html,body{height: 100%;}
#Wrapper{width: 600px;margin: 0 auto;height: 100%;}
body > #Wrapper{height:auto;min-height:100%;}
- men jeg er ikke istand til at sige de andre er forkerte medmindre jeg tager fejl i reglerne for browseres css behandling, hvis ja så ville ovenstående jo så også være forkert m.h.t. selector kendskabet).

... M.h.t. at bygge ting på browser bugs/hacks synes jeg at konstruktionen i Jokke's virker lidt pudsig:
            height: auto !important;
            height: 100%;
- Umiddelbart ville jeg her mene at alle browsere skulle benytte height:auto; og ikke slå over til height:100%; - så mon ikke den del bygger på en browser bug også.


M.h.t. store sites kodningsstil, må vi bare konkludere at Ole
ikke er ansat hos dem - med den derfor "dårlige" kodestil til
følge - men dog med måske større sites og måske mere dynamisk
aktivitet grundet mere løs kodestil med små/store krumspring.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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