Avatar billede casperin Nybegynder
19. januar 2008 - 15:22 Der er 21 kommentarer

100% height layout

Hej, første gang jeg poster herinde, men jeg har hørt godt om jer.

Jeg har brug for et 100% height layout some forbliver 100%, uanset om indholdet overskrider skærmens højde.

At gøre det med tables og en iframe ville ikke være noget problem og det er næsten den nemmeste måde at forklare det på:

<table> <!-- sat til 100% height og centreret på siden. fixed width -->
  <tr>
    <td id="header">hdr</td> <!-- css: height:70px; -->
  </tr>
  <tr>
    <td id="content"><iframe> <!-- og hvad dermed følger af skidt --></td>
  </tr>
  <tr>
    <td id="footer">ftr</td> <!-- css: height:75px; -->
  </tr>
</table>

Måske man bare kunne lægge en overflow:auto på #content for at undgå iframe det ved jeg ikke, og det er også lige meget.

Det vigtige er at siden ikke selv kommer til at scrolle, men at det er #content, og at siden under alle omstændigheder forbliver 100%.


Håber jeg har forklaret det godt nok; ellers må i spørge.
Avatar billede roenving Novice
19. januar 2008 - 15:32 #1
Avatar billede casperin Nybegynder
19. januar 2008 - 15:45 #2
Ingen af dem løste opgaven. Når "hovedsiden" blev fyldt ud med tekst (bare 5 paragraphs af Lipsum) så enten blev siden længere så footeren gik ud af billedet, eller også fungerede den slet ikke.

Jeg kan iøvrigt sagtens lave skidtet i tables (og er seriøst begyndt at overveje det), men det MÅ kunne lade sig gøre i ren css.
Avatar billede casperin Nybegynder
19. januar 2008 - 15:51 #3
problemet er egentligt tofoldigt:

1) overflow:auto; virker kun hvis man sætter en fast højde i px.

2) Det er ingen måde at sige en div skal have højden 100% minus 45px.
Avatar billede roenving Novice
19. januar 2008 - 16:04 #4
Korrekt !-)
Avatar billede casperin Nybegynder
19. januar 2008 - 17:12 #5
heh.. jo tak.. men det løser jo ikke mit problem.
Avatar billede olebole Juniormester
19. januar 2008 - 23:27 #6
<ole>

Det bliver ikke mere 'ren CSS' af at udelade tabeller ... det beror på en misforståelse af, hvad CSS er  ;o)

Du har valget mellem en tabel eller at bruge JavaScript - eller den gode løsning: Indret layout'et efter, hvad teknologien er beregnet til og det, den kan håndtere  :)

/mvh
</bole>
Avatar billede casperin Nybegynder
20. januar 2008 - 01:53 #7
.. Og det viste sig endda at være svært nok med tables. Fandt dog en løsning med JavaScript.

Men jeg forstår ikke helt hvad du mener med hvad css er beregnet til. Det er jo netop lavet til layout (og styling), og jeg synes egentligt at det er et forholdsvist standard design jeg er ude efter (selvom det ikke er et jeg ville anbefale til nogen). Det bliver i hvert fald ofte forsøgt med en fixed height (fordi alt andet er møgsvært) med større eller mindre success. At css så ikke kan håndtere det kan vi derimod godt blive enige om. :)
Avatar billede olebole Juniormester
20. januar 2008 - 14:23 #8
Du kan ikke lave en side i CSS - det kan du derimod i HTML. CSS indeholder ikke elementer, men er et sprog, der udelukkende kan 'klæde' HTML-elementer ud og placere dem på siden. Desuden hører CSS ikke mere sammen med div- og span-elementer, end det gør med table-elementer. At man bruger CSS på en side betyder ikke, at man ikke bruger tabeller ... de to ting udelukker absolut ikke hinanden  ;o)

Er det nødvendigt at bruge JavaScript for at få sit design/layout til at lykkes, er koden ikke bedre, end hvis der var brugt tabeller  :)
Avatar billede casperin Nybegynder
20. januar 2008 - 17:53 #9
Som du siger er css beregnet til at style og placere ting.. Derfor synes jeg det ville være oplagt at css kunne lave det layout jeg fremlagde, og ikke tables (som er beregnet til at fremlægge data - ikke layout).

Jeg ved godt at det selvfølgelig ikke er enten eller. Det ville give lige så meget mening som at udelukke <dl>; men KAN layoutet laves i css, så er det bestemt min mening at det også bør gøres. Css er så meget mere elegant. For eksempel skal der omtrændt lige så meget JavaScript til alene at bestemme højden på #content (100% - Xpx) som css'en fylder for resten af dokumentet.

Jeg tror egentlig ikke vi er uenige; jeg er bare ærgelig over at det ikke kan løses med css.
Avatar billede roenving Novice
20. januar 2008 - 23:37 #10
Jamen du har vel netop fundet en løsning ved at css-style elementerne med javascript ...

-- og også tabeller kan ganske glimrende styles, hvilket jo netop viser at det ikke er et spørgsmål om tabeller _eller_ css, men hvilke html-elementer, der mest hensigtsmæssigt kan bruges til hvilke opgaver (og tabeller kan bruges til meget andet end rå data !-)
Avatar billede casperin Nybegynder
21. januar 2008 - 01:04 #11
Jep: http://g81.dk/code/layout/100height/index.html


Selvfølgelig kan tabeller bruges til meget andet end rå data... For ikke ret mange år siden var det jo MÅDEN at få sat siden ordenligt op på.. Der er bare en masse problemer ved tabeller, og jeg har principielt noget imod at benytte et redskab der ikke er beregnet til layout, hvis jeg kan benytte det som er. Bl.a. på grund af bedre seo, mindre kode (i kb), nemmere at vedligeholde, selv blinde kan være med, osv..
Avatar billede olebole Juniormester
21. januar 2008 - 02:07 #12
Hvis du spørger en blind, kan du sikkert få lov at teste, hvad tabeller egentlig betyder - hvilket sikkert vil nuancere dén tese. En enkelt tabel, der opdeler siden i søjler, giver ingen somhelst gener for en blind. Store, nestede tabel-helveder er naturligvis noget helt andet.

Mange webløsninger skal ikke indekseres af søgemaskiner - mange skal allerhelst undgå det - så der er SEO-hensynet ikke relevant.

Yderst ofte bruges der flere bytes på JS-/CSS-løsninger, der med 'kreativt hekseri' forsøger at få HTML-elementer til at efterligne andre elementer, hvis naturlige egenskaber i virkeligheden er dem, der skal bruges.

Mellem to dybe grøfter ligger ofte en farbar vej  ;o)
Avatar billede olebole Juniormester
21. januar 2008 - 02:16 #13
Et godt eksmpel er en formular med rækker af tekster og felter i hver sin søjle. Her ville det være vanvittigt at anvende andet end en tabel - selvom mange tabel-o-fober vil messe et mantra om, at den slags indhold ikke er tabulerede data.

Her ville det f.eks. være tortur af enhver blind at bruge floatede block-elementer  ;o)
Avatar billede casperin Nybegynder
21. januar 2008 - 12:18 #14
Vanvittigt?

Jeg er for så vidt enig i at forms er et godt eksempel på at tabeller kan benyttes til layout, men jeg tog lige et kig på min sidste form:

<label for="City">* City:</label> <input type="text" id="City" name="city" /><br />

Jeg går ud fra at css'en lyder noget i retning af:

label {display:block; float:left; width:150px; text-align:right; margin-right:10px;}


Personligt synes jeg at det er en bedre løsning end tabeller, men det er måske fordi jeg selv har lavet det.. Men uanset hvordan jeg vender og drejer det bliver min løsning aldrig direkte vanvittig. Men igen, det er altid svært at se sit eget vanvid hehe. :D ... OG vi skal passe godt på den smule vanvid vi nu engang har, så jeg fortsætter med det. ;)
Avatar billede olebole Juniormester
21. januar 2008 - 18:22 #15
Jaja, man kan altid vælge det simplest mulige eksempel, men mere end ofte ser formularen væsentlig mere kompliceret ud, og så ender koden ofte op i noget, der er mere kompliceret, større og mindre logisk, hvis man hækler sig et patchwork tæppe i enkelt elementer og CSS  ;o)

En tabel er yderst fornuftig, når noget hænger sammen i vandrette rækker - og samtidig er inddelt i søjler. Den er det eneste element, der er beregnet til den slags - og giver fremragende mening, når siden afsøges med 'andre klienter'.
Derudover tilbyder den en lang række yderst anvendelige underelementer - som godtnok er vildt undervurderede - og fortræffelige muligheder for styling af de enkelte søjler og rækker, m.m. Underelementerne forøger endda læsbarheden væsentligt i forhold til 'andre klienter'

Det er meget sjovt, at mange gerne vil bruge en tabel til tabulerede data, men ikke til blandede data og elementer, som skal ordnes på præcis samme måde - og af præcis samme årsager - som tabulerede data

Det eneste, jeg advokerer for, er brugen af det mest hensigtsmæssige element til opgaven ... det, hvis opbygning er det mest logiske til løsningen. Her glæder det mig, vi er enige om, at tabellen er logisk til formularer  ;o)
Avatar billede casperin Nybegynder
21. januar 2008 - 19:23 #16
Jeg er stor fortaler for at man ikke hækler sig til noget som helst...

Men helt oprigtigt, kan jeg ikke se at tables har anden fordel end 1. det kan ændre 'width' så den passer til mængden af indhold, og 2. at alle kolloner altid er lige så lang som den længste.

Det er slet ikke for at tale ondt om tables (jeg elsker da at skrive <td> 1000 gange hehe); jeg synes bare at ulemper bliver lidt overset.. Selvfølgelig advokerer du for at bruge det mest hensigtsmæssige til opgaven.. det gør jeg også.. vi er bare uenige om hvad der er det mest hensigtsmæssige. ;)
Avatar billede olebole Juniormester
21. januar 2008 - 19:44 #17
Der er masser af fordele, når man begynder at bruge de utallige muligheder CSS i forbindelse med elementer som col, colgroup, caption, thead, tbody, tfoot og th tilbyder - men det er ret sjældent at møde en 'tabel-o-fob', som for alvor har arbejdet seriøst med tabeller og kender deres potentiale/muligheder (i høj grad også for blinde). Måske, tingene hænger sammen  :)

Hvad er nu lige helt præcist ulemperne ved at bruge en tabel i en form?
Avatar billede olebole Juniormester
21. januar 2008 - 19:48 #18
- og til det der med de 1000 td'er: Udover den åbenlyse overdrivelse, så skal du lave nogle keyboard øvelser, så du med ganske få hug i tastaturet har kopieret en række og pasted den ind 1000 gange. Derefter er det bare at ændre i tekst/elementer.

Derudover bør det vel ikke være niveauet af dovenskab, der afgør valget af element(?)  ;o)
Avatar billede casperin Nybegynder
21. januar 2008 - 23:12 #19
Jeg mente det faktisk da jeg sagde at jeg godt kunne lide at arbejde med tables. De er fantastisk nemme og meget logiske..

Det største problem jeg har med tabeller er helt sikkert at jeg ikke synes layout og indhold bliver adskildt ordenligt.. og så selvfølgelig at det fylder en masse.

Jeg er iøvrigt ikke så vild med at blive kaldt navne, og jeg synes du bliver ved med at misforstå mig. Måske, tingene hænger sammen (kunne ikke dy mig :P). Så nu udpensler jeg lige for dig hvor jeg står så jeg ikke ender med at skulle forsvare noget jeg ikke mener:
1) CSS bør benyttes over tabeller hvis det er muligt, og ja, hensigtsmæssigt. Mange sider misbruger tabeller til layout nu.
2) Tabeller kan være gode til forms. Det er de meget ofte; men ikke udelukkende. Det gælder især når vi snakker to kolonner. Taler vi om flere kolonner og rækker i forskellig farve osv, så er vi jo nærmest også ovre i tabuleret data og derved præcis hvad tabeller er lavet til at præsentere.
Avatar billede olebole Juniormester
22. januar 2008 - 22:50 #20
"Det største problem jeg har med tabeller er helt sikkert at jeg ikke synes layout og indhold bliver adskildt ordenligt" >> Hvad er forskellen i adskillelsen i disse to eksempler:

<table>
<tr>
    <td>ælæoæ</td>
    <td style="position:absolute;left:200px;top:500px">iuuyo</td>
    <td>mnbmvhvjh</td>
</tr>
</table>

- og:

<div>
<div>
    <span>ælæoæ</span>
    <span style="position:absolute;left:200px;top:500px">iuuyo</span>
    <span>mnbmvhvjh</span>
</div>
</div>

Den eneste forskel, jeg kan få øje på, er element navnene  :)
Avatar billede casperin Nybegynder
23. januar 2008 - 15:08 #21
Jeg går ud fra at den css du har sat ind bare var for at skrive noget. En id eller class ville nok være at foretrække.

Forskellen er at du bliver ked af det når bossen pludselig synes det er en mægtig god ide at den sidste <td> på samtlige sider står i en række for sig selv.

Men vi bliver nok ved med at være uenige.


Fandt forresten en løsning på mit første spørgsmål (i css) hvis nogen skulle være interesseret.
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