Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:43 Der er 24 kommentarer og
1 løsning

Findes der en * i css, som vi kender den fra Frameset ?

Jeg har lige et spørgsmål som nogle af jer CSS hajer måske kan
svare mig på.

Jeg sidder og arbejder med et css layout. Det er meget vigtigt at
der i toppen af siden er en menu som er 100 pixels høj. Og
nedenunder, skal der være tekst billeder og hvad man ellers kunne
finde på at proppe på siden. Menuen skal blive på skærmen hele
tiden, hvorimod det nedenunder skal have en scrollbar på.

Indtil nu har jeg fundet en løsning løsning, hvor man laver 2
divs. Den ene er 20% og fixed i toppen. Den anden er placeret
neden under, med 80% height og overflow på, så kun denne div har
scrollbar... Derved opnår jeg næsten det samme som et frameset,
bare i css.

Nu er mit spørgsmål så. Findes der noget jeg kan sætte istedet
for de 80% ? Sådan at jeg kan skrive 100 pix højde på topbar og
"resterende" plads på div under topbar ?

Så man får noget som ligner, stjernen vi allesammen kender fra
frameset.. ( rows = " 100 , * " )

Mvh Johannes M
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:43 #1
Er måske lettere at forstå hvis jeg lige viser det jeg har fået til
at virke indtil nu..

http://www.museth.ishoejby.dk/test/layout.html
Avatar billede roenving Novice
22. maj 2004 - 20:48 #2
Nej !-)

Den eneste metode, man kan bruge, ligner den du bruger til forveksling:

Hvis også html og body i stylesheet sættes til 100% højde, kan du lade en div være 100% også, og så lade et element i toppen tage noget af pladsen ...

-- men du kan ikke opnå, at et element fylder resten (og får en selvstændig scrollbar !-) uden at du sætter noget javascript til at beregne den rest-højde et element vil kunne have !o]
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:52 #3
okie...

Jeg havde godt nok overvejet at bruge javascript, men jeg tænkte at der måtte da være en tegn som kunne klare det hurtigt... 

W3c skyder jo sig selv i foden her..  Dem og alle deres meninger om hvordan sider skal se ud...  Man får helt lyst til at gå tilbage til tables...
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:54 #4
Du må lige svare hvis du vil have points. :)
Avatar billede roenving Novice
22. maj 2004 - 20:55 #5
Hvorfor bruger du så ikke tables ?-)

Præcis, som w3c foreskriver; at til visse design-mæssige opgaver vil det være mest hensigtsmæssigt at bruge tabeller !-)
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:57 #6
man kunne måske også.. lade div nr 2 fylde 100%.. Give den en top margin på 100 px og så placere div1 som absolut...  Men så er der bare et problem med centering...  Det er meningen at siden skal være 750 bred.. Og resten skal bare være hvidt..
Avatar billede roenving Novice
22. maj 2004 - 20:57 #7
À propos har jeg et indlæg fra et spørgsmål, som forsvandt i forbindelse med et servernedbrud, liggende:

"<ole>

'CSS vs. tabeller' er noget - og jeg nævner det for 30.000'ende gang - noget vrøvl :)
Du kan bruge CSS til at layout'e alle HTML-elementer. CSS og tabeller udelukker derfor på ingen måde hinanden ... og CSS har intet specielt at gøre med containers (<div> og <span>).

Der har bredt sig en kedelig misforståelse om, at tabeler er på vej ud - og at det eneste, der duer, er CSS sammen med containers. Endda i en sådan grad, at mange tror, CSS pr. definition hører sammen med containers.
Det stammer desværre fra folk, der har pluklæst lidt hist og pist på W3C - men tydeligvis ikke har forstået ret meget af idéen bag CSS.

Til nogen ting er tabeller langt bedre end containers - og til andre ting er det lige omvendt. Der er jeg helt på linie med roenving :)
At så http://www.csszengarden.com/ er en temmelig misforstået måde at bruge CSS på (omend det er ganske nydeligt), er en helt anden ting. Det har aldrig været meningen med CSS, at man skulle bruge id-selectors i den udstrakte grad, som tilfældet er på det site ... tværtimod er 'kodeordet' for CSS: 'Nedarvning gennem klasser'

/mvh
</bole>"
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 20:59 #8
Jo... Mit problem er bare at siden skal være læsbar på en 3G mobil telefon.. og det er opera browseren...  Så derfor skal html dokumentet være rent divs og H1 / h2 osv...  Uden nogle tables.. ellers går det helt galt.. 

Men ellers jaa...    Jeg fatter bare ikke, at når der er en * i tables og Frames, hvorfor så ikke i css ?
Avatar billede roenving Novice
22. maj 2004 - 21:00 #9
100% højde vil være 100% + evt. margin !-)
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:01 #10
Så må man lave noget workaround med div i div og padding eller margin noget...
Avatar billede roenving Novice
22. maj 2004 - 21:02 #11
Måske kan du bruge noget af det, jeg har pillet i, i disse spørgsmål:

http://www.eksperten.dk/spm/497362
http://www.eksperten.dk/spm/488278

-- men stadig vil et overflow være på den fulde div-højde ...
Avatar billede roenving Novice
22. maj 2004 - 21:04 #12
Den samlede højde for en boks er:

margin-top + border-top + padding-top + Den definerede højde for boksen + padding-bottom + border-bottom + margin-bottom ...
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:05 #13
Jeg har læst flere artikler, hvori folk som er w3c "prædikanter", fortæller om hvor vigtigt det er at vi adskiller indhold og struktur fra udseende og style...

Netop fordi vi skal hen imod det her XML dokument som kun indeholder "indhold" og alt andet er i css filen...  Tables er jo ikke til at koble sammen med XmL...

De vil jo så gerne have vi snart dropper Html... Så vi kan komme hen til deres elskede XML dokument...  Og derfor har de lavet vores lille dejlige mellemting Xhml...
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:06 #14
det er korrent.. så en div med 100% højde...  Og inden i den div, en div med den margin på...
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:07 #15
okie tak.. læser dem lige igennem
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:14 #16
okie øv bøv...  100% width indeholder også scrollbar... hurra :(

http://www.museth.ishoejby.dk/test2/layout.html
Avatar billede olebole Juniormester
22. maj 2004 - 21:28 #17
<ole>

sharkmeat >> XHTML er ingenlunde en 'mellemvare'. Vi er faktisk der, hvor du gerne vil være - vi kan adskille vores koder i indhold, visning og funktion (XML, CSS, script) og klistre det sammen med XHTML.
Der er intet i vejen for at bruge tables i forbindelse med disse teknologier - og tables er alt andet end på vej ud  :)

Det må du vist have misforstået ... og det er ikke så mærkeligt med alt det sludder, der skrives om emnet på WWW.

/mvh
</bole>
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 21:38 #18
Okie nu er jeg ikke så god til at gemme links til de artikler jeg læser... 

Men vi kan da i det mindste blive enige om, at <Table> tagget er det mest misbrugte tag på hele internettet ik ? 

Så kan du sige hvad du vil, <table> har fra prøgrammørens side _ALDRIG_ været tiltænkt layout. Det er lavet til at fremstille Excell lignende ark og intet andet.

Og det er jeg ret sikker på at der er nogle folk i W3c som er ret sure over...

Tables er fint til normale browsere, det vil jeg give dig, men der går kuk i den på andre platforme.

Hvis Xhtml ikke er en mellemvare mellem Html og Xml, hvad er det så ?

Jeg så en Xml side stylet XSl i sidste uge. Og der er altså ikke plads til tables layout. Det funker bare ikke.. CSS og XSL _ER_ beregnet til layout. Og det ville virke FINT, hvis de aber bare beregnede 100%  i css og xsl på samme måde som tables og Frames...   

:)

Mvh Johannes
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 22:14 #19
Overstående er hentet fra det roenving pastede og er efter hvad jeg kan se skrevet af OleBole

"Der har bredt sig en kedelig misforståelse om, at tabeler er på vej ud - og at det eneste, der duer, er CSS sammen med containers"

Det er fordi at table tagget er MISBRUGT.  Og det er der en helt masse mennesker som meget vil gerne have lavet om. Så ja, hvis de får sin vilje, er tables på vej ud. Så om det er på vej ud eller ej, kommer helt an på hvem der vinder..  Så jeg syntes det er lidt "modigt" at stille sig op og sige hvem der vinder på forhånd.

Font er da også rimelig dødt tag ik ? ( selv om det har en anden historie )

"Til nogen ting er tabeller langt bedre end containers - og til andre ting er det lige omvendt...."

Lige nu kan jeg kun komme i tanke om 100% og at der åbenbart ikke findes * i css..  Og det er kun fordi 100% beregnet anderledes, ellers kan css alt det tables kan og mere til.

Css kan alt det tables OG Frameset kan.  Og at det samtidig holdes i 1 dokument er da en kæmpe fordel, når man snakker søgemaskiner...

For slet ikke at snakke om opdatering / ændring af layout. Hvis du skal flytte et grafisk objekt på en side opbygget i tables, er du virkelig på skideren.. Og tænk så på hvis det var 100+ sider, ik. CSS derimod, der kan du nøjes med at ændre i 1 css-fil, hvis man vel og mærke har lagt css i et seperat dokument.

"At så http://www.csszengarden.com/ er en temmelig misforstået måde at bruge CSS på (omend det er ganske nydeligt), er en helt anden ting."

Jeg kan ikke se hvad de har misforstået...  De har nogle divs og så styler de dem.. Strukturen i dokumentet er bevaret. Der indgår kun tags som er relevant. Søgemaskiner skal ikke igennem 100 siders kode, før de når frem til teksten / indholdet aka. God rating. 

Det har også den fordel at folk, i de browsere som understøtter det, selv kan style teksten, eller helt fjerne css hvis de ikke gidder glo på grafikken eller ikke kan læse teksten.  Det samme kan vist ikke siges om Tables... 

"Det har aldrig været meningen med CSS, at man skulle bruge id-selectors i den udstrakte grad, som tilfældet er på det site ..."

Hvis id bruges til at lave layout, så kan det da ikke være meget mere end en 10 gange de gør det.. Og hvis det samtidig i et css dokument, så gør de det kun 1 gang.  Det er under alle omstændighedder MEGET mindre kode / download tid end hvis man skulle skrive det samme tableset for hver side. 
Ud over det har vi jo den dejlige class-mulighed hvis man gentager det samme flere gange....

Mvh Johannes
Avatar billede roenving Novice
22. maj 2004 - 22:32 #20
css kan netop _ikke_ det som tables og framesets kan ...

Har du brug for et tabulært design er en tabel langt nemmere at lave end at skulle fedte sig igennem eventuelle synkroniseringsting vha. javascript (forudsat at dit indhold er dynamisk, selvfølgelig !-)

-- og dermed fremgår det også, at du med de standarder, som findes i dag, ikke kan klare dig uden javascript til nogle af de ting, som kan laves relativt simpelt med præcis den slags elementer ...

-- og til forskel fra table-tagget er font-tagget altså allerede deprecated i html4 !o]

-- men det handler vel om, hvordan din side kommer til at virke efter hensigten ?-)

-- og hvis tabeller (og/eller framesets !-) er udelukket, skal du altså bruge noget javascript, hvis du vil have et element, som har en højde, som du ikke kender pga. skærmstørrelses-forskelle ...

F.eks. sådan noget lignende:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>

<script type="text/javascript">
function divHeight(){
var ns = (navigator.userAgent.indexOf('Gecko')>-1)?1:0;
var ie = (navigator.userAgent.indexOf('MSIE')>-1)?1:0;

var t=(ie)?(document.body.clientHeight-117)+'px':(ns)?(window.innerHeight-117)+'px':(screen.availHeight-240)+'px';
alert(screen.availHeight+'\n'+t);
document.getElementById('indhold').style.height=t;
}
</script>

<meta name="Generator" content="Stone's WebWriter 4">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#over{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 117px;
  margin-left: -241px;
  background-color: #f3f300;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 2;
}
#indhold{
  position: absolute;
  top: 117px;
  left: 50%;
  width: 482px;
/*  height: 100%;*/
  margin-left: -241px;
/*  margin-top:117px;*/
/*  border-top: 117px solid #f3f300;*/
  background-color: #00fffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
</style>
</head>
<body onload="divHeight()">
<div id="over"></div>
<div id="indhold">
Her skal stå en tekst der er lang
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 22:48 #21
hehe ok der fik du mig.. Lige i dette tilfælde kan CSS ikke det som tables kan.

Jeg sidder bare og bitcher lidt over, den måde de beregner 100% på...  Det er der mit problem ligger...  En 100% width i et table tag, vil jo ikke være antal pixel på browservinduet.. Men derimod den "rasterende" plads. Og det er jo sindsygt at det ikke er det samme med css...  Eller omvendt.

Jeg kan ikke lige komme på nogen måde hvor man kan opnå det samme med tables alene som i mine css layouts. Jeg tror man ville være nødt til at bruge frames / iframe..  Og så splitter man dokumentet.. Hvilket i dette skoleprojekt er uacceptabelt...

Javascript der imod, kunne være løsningen. Det eneste problem jeg lige kan få øje på, er at det skal beregnes for hver gang brugeren ændrer på vinduets størrelse.

Jeg syntes det er kanon det du har lavet. Vil du ikke lave et svar så jeg kan give dig points ? :)

MHt font tag, så tror jeg at der sker lidt det samme efterhånden som vi går over til XML dokumenter. Men lad os bare stoppe her
Avatar billede roenving Novice
22. maj 2004 - 22:52 #22
Oki '-)
Avatar billede sharkmeat.dk Nybegynder
22. maj 2004 - 22:54 #23
Mange tak for forslag / kritik / debat.
Avatar billede roenving Novice
22. maj 2004 - 22:58 #24
-- og jeg takker for point ;~}
Avatar billede olebole Juniormester
23. maj 2004 - 23:48 #25
sharkmeat >> Hvad der er misbrug og ikke, er altid en relativ diskution. Man kunne ligeså godt argumentere, at grafisk design i HTML er misbrug - det var ikke meningen med HTML og derfor heller ikke med tables  ;o)

Jeg er dog enig i, at de nestede tabel-helveder, man ser rundt omkring, er helt hen i vejret.
Til en kolonneopstilling med tre kolonner, ville det til gengæld - efter min mening - være helt tåbeligt at lave i andet end tabeller ... og der er jeg tydeligvis ganske på linie med W3C.

Hvad csszengarden og ID-selectors angår, så kan du jo læse lidt i W3C's arbejdspapirer og udvikler-tråde. Så vil du se, det gang på gang understreges, at ID-selectors kun bør bruges i situationer, hvor man ikke kan bruge klasser - og at man ikke bør basere sit design på disse.
Bl.a. forringes overskueligheden ganske betydeligt og vedligeholdelsen vanskeliggøres. Man har netop 'adopteret' tankegangen med klasser fra OOP i andre programmeringssprog, hvor det som bekendt har gået sin sejersgang af præcis samme årsager.

I det hele taget kan du lære 10 gange så meget i W3C's arbejdspapirer og tråde, end du kan i mere eller mindre uaftoriserede artikler af folk, der meget sjældent har gjort sig ulejligheden at læse baggrunden for W3C's rekommendationer  ;o)
/mvh
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