|
| CSS eller tabeller - til layout?? Fra : Kewin Pedersen |
Dato : 05-10-04 09:49 |
|
Efter at have fumlet noget rundt med CSS-tutorialen på HTML.dk er jeg blevet
bidt af det! Jeg synes det virker utroligt hvad man kan få lavet med CSS, i
stedet for tabeller, i hvert fald når det gælder layoutet af siden. Synes
det er rigtig smart, og praktisk, at man mere eller mindre milimeterpræcist
kan style og layoute ens sider som man lyster Dog er jeg bange for, at
jeg er blevet så "bidt" af brugen af CSS, at jeg nærmest er blevet
tabel-fjendtlig...
Det siges jo godt nok, at CSS skal bruges til at layoute siden med, og man
så med HTML/ASP/PHP kan lave resten af siden indhold. Men hvad med
tabellerne - skal de nu slet ikke bruges til noget mere?? Når jeg selv
sidder og laver lidt på min egen siden, som jeg gerne vil, og er i gang med,
at konvertere til CSS-layout, kommer spørgsmålet: Skal jeg bruge CSS til det
hele, eller skal jeg stadig bruge tabeller til noget af det, primært
indholdet?
Hvis man tager en kik på min hjemmeside, som den føreløbelig ser ud i træls
og nok uoverskuelig HTML kode - www.3nickma.dk - kan man se, at jeg har
forskellige "indholds-elementer" placeret midt på siden. Jeg påtænker mig,
at jeg vil ændre siden design og layout til at bruge CSS, i stedet for at
sætte det hele op i tabeller og bruge spacer images osv. Vil dette være mest
"rigtigt"?
Har også prøvet at bruge CSS på selve "indholds-elementerne", hvilket man
nok kan hvis det er, men med position: absoulte, f.eks., så har de jo én
plads, og så kan man da ikke umiddelbart tilføje nye elementer, eller kan
man? Har tænkt på, om jeg skulle layoute siden i CSS, så så ellers bruge
alm. tabeller til at få vist selve indholdet - og så senere skifte til
f.eks. ASP.NET, så jeg kan bruge databaser på tabellerne, så det bliver
lettere at vedligeholde siden... Hvad siger I, er det sådan jeg bedst bruger
hhv. CSS og tabeller til design og indhold?
| |
Kristian Thy (05-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 05-10-04 10:11 |
|
Kewin Pedersen uttered:
> Det siges jo godt nok, at CSS skal bruges til at layoute siden med, og man
> så med HTML/ASP/PHP kan lave resten af siden indhold. Men hvad med
> tabellerne - skal de nu slet ikke bruges til noget mere??
Jo, de skal bruges til alt det du også ville putte i tabeller hvis du
skrev det på et stykke papir eller i et tekstbehandlingssystem.
Resultatet af Copenhagen Marathon, oversigt over klankampe, ugeskemaer -
de er alle tre eksempler på ting der giver god mening at sætte i
tabeller.
> Hvis man tager en kik på min hjemmeside, som den føreløbelig ser ud i træls
> og nok uoverskuelig HTML kode - www.3nickma.dk - kan man se, at jeg har
> forskellige "indholds-elementer" placeret midt på siden. Jeg påtænker mig,
> at jeg vil ændre siden design og layout til at bruge CSS, i stedet for at
> sætte det hele op i tabeller og bruge spacer images osv. Vil dette være mest
> "rigtigt"?
Så absolut.
> Har også prøvet at bruge CSS på selve "indholds-elementerne", hvilket man
> nok kan hvis det er, men med position: absoulte, f.eks., så har de jo én
> plads, og så kan man da ikke umiddelbart tilføje nye elementer, eller kan
> man? Har tænkt på, om jeg skulle layoute siden i CSS, så så ellers bruge
> alm. tabeller til at få vist selve indholdet - og så senere skifte til
> f.eks. ASP.NET, så jeg kan bruge databaser på tabellerne, så det bliver
> lettere at vedligeholde siden... Hvad siger I, er det sådan jeg bedst bruger
> hhv. CSS og tabeller til design og indhold?
Så vidt jeg kan se er din side opbygget som en klassisk "to spalter, en
smal med menu og en bred med indhold". Det letteste er efter min mening
at lave en <div> til dine indholdselementer med en fast bredde og
absolut top, og så bare putte hver post i en <div> indeni denne.
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
Kewin Pedersen (06-10-2004)
| Kommentar Fra : Kewin Pedersen |
Dato : 06-10-04 09:45 |
|
> Så vidt jeg kan se er din side opbygget som en klassisk "to spalter, en
> smal med menu og en bred med indhold". Det letteste er efter min mening
> at lave en <div> til dine indholdselementer med en fast bredde og
> absolut top, og så bare putte hver post i en <div> indeni denne.
Ok, det lyder da som et ganske interessant forslag, men har lige et par
uddybende spørgsmål...
Hvis vi siger, at jeg laver selve siden layout med CSS - altså min
"navigations menu" ude i venstre siden, samt baggrunden osv. - og så bruger
tabeller på selve indholdet, så kan det godt lade sig gøre på en fornuftig
måde? Ok, så langt så godt Men hvis du kigger på min "indholdsside", så
består den af et sted til at vise nogle senere forum svar, samt mine
"kasser" til indhold. Som det er nu med "Doom 3 - Multiplayer" og "Doom 3"
f.eks. Dem vil du altså godt med jeg kan tillade mig at lave i <div> tags i
stedet for tabeller, eller hvordan??
Sidst jeg prøvede lidt á la denne metode, med position: absolute, lå de bare
oven i hinanden, hvilket jo ikke er for smart :D Du mener jeg bare skal
bruge en position-top: absolute i stedet, og så bare tilføje nye <div>
elementer når jeg vil tilføje nye "kasser" med indhold? Og så burde de stå
pænt efter hinanden, ved f.eks. at skille dem med et enkelt <br> tag?
Men hvordan vil du så få indholdet sat ind i disse <div> tags, med tabeller?
For hver kasse har jeg jo en overskrift, en linje med hvornår nyheden er
lagt op, samt selve teksten og en plads til tidligere links. Skal det så
laves i tabeller, da det jo ligner tabulære data?
Håber ikke min besvarelse er blevet for langt og uforståelig, men hvis man
skal til at redesigne og skifte fra brug af tabel-layout til CSS-layout kan
det jo lige så godt gøres mest hensigtsmæssigt fra starten af
| |
Kristian Thy (06-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 06-10-04 14:04 |
|
Kewin Pedersen uttered:
>> Så vidt jeg kan se er din side opbygget som en klassisk "to spalter, en
>> smal med menu og en bred med indhold". Det letteste er efter min mening
>> at lave en <div> til dine indholdselementer med en fast bredde og
>> absolut top, og så bare putte hver post i en <div> indeni denne.
>
> Ok, det lyder da som et ganske interessant forslag, men har lige et par
> uddybende spørgsmål...
Fyr løs :)
> Hvis vi siger, at jeg laver selve siden layout med CSS - altså min
> "navigations menu" ude i venstre siden, samt baggrunden osv. - og så bruger
> tabeller på selve indholdet, så kan det godt lade sig gøre på en fornuftig
> måde? Ok, så langt så godt Men hvis du kigger på min "indholdsside", så
> består den af et sted til at vise nogle senere forum svar, samt mine
> "kasser" til indhold. Som det er nu med "Doom 3 - Multiplayer" og "Doom 3"
> f.eks. Dem vil du altså godt med jeg kan tillade mig at lave i <div> tags i
> stedet for tabeller, eller hvordan??
Absolut.
> Sidst jeg prøvede lidt á la denne metode, med position: absolute, lå de bare
> oven i hinanden, hvilket jo ikke er for smart :D Du mener jeg bare skal
> bruge en position-top: absolute i stedet, og så bare tilføje nye <div>
> elementer når jeg vil tilføje nye "kasser" med indhold? Og så burde de stå
> pænt efter hinanden, ved f.eks. at skille dem med et enkelt <br> tag?
Nej, ikke <br> efter <div>. Brug i stedet relativ bredde (fx 100%, så en
div fylder hele "moder"-div'en) og float til at få dine div'er til at
lægge sig pænt efter hinanden. Ideen er at lave så lidt absolut som
muligt, så dit design 1) skalerer automatisk når du putter flere bokse
ind, og 2) skalerer automatisk i forskellige skærmstørrelser.
> Men hvordan vil du så få indholdet sat ind i disse <div> tags, med tabeller?
> For hver kasse har jeg jo en overskrift, en linje med hvornår nyheden er
> lagt op, samt selve teksten og en plads til tidligere links. Skal det så
> laves i tabeller, da det jo ligner tabulære data?
Hum hum, der er vi ude i en gråzone. Jeg ville nok selv lave det med en
overskrift (<hN>), en <span> med formatteret skrift til datoen, en
normal <p> til teksten og igen en <span> til tidligere links.
> Håber ikke min besvarelse er blevet for langt og uforståelig, men hvis man
> skal til at redesigne og skifte fra brug af tabel-layout til CSS-layout kan
> det jo lige så godt gøres mest hensigtsmæssigt fra starten af
Meget arbejde kan spares hvis man tænker sig om før man går i gang. Det
er desværre noget jeg er slem til at glemme når det kommer til stykket
;)
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
Kewin Pedersen (07-10-2004)
| Kommentar Fra : Kewin Pedersen |
Dato : 07-10-04 08:26 |
|
> Hum hum, der er vi ude i en gråzone. Jeg ville nok selv lave det med en
> overskrift (<hN>), en <span> med formatteret skrift til datoen, en
> normal <p> til teksten og igen en <span> til tidligere links.
Okay. Så en span også til selve de tidligere links? Skal da nok blive sjovt
at rode lidt med! Men klarer det nok, kan jo altid prøve sig lidt frem
Men ellers kan jeg da godt følge dig. Men kan denne metode også bruges, hvis
man senere ønsker at lave en dynamisk hjemmeside, f.eks. ved brug af
ASP.NET? Det jeg tænker på er, f.eks. at lave sit eget lille CMS-system,
hvor man kan gå ind fra en browser, logge sig ind og skrive nyheder, i
stedet for at skulle sidde og redigere i al HTML-koden... Kan dette stadig
gøres i et recordset/DataGrid, selvom det kun bliver indsat i <div> tags, og
ikke i tabeller?? Har endnu ikke så meget forstand på server-side
programmering, men er da ved at læse mig til det. Derfor vil jeg gerne vide
allerede nu, om man senere kan skalere det? Så man f.eks. laver en database,
med forskellige pladser til at lave en overskrift, span til dato og
tidligere links - og bruge CSS til at formatere dette med - så man ellers
kan trække det nyeste fra databasen op på siden.
Kan lige så godt få styr på det først som sidst, så ville bare lige høre...
| |
Kristian Thy (07-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 07-10-04 09:32 |
|
Kewin Pedersen uttered:
> Menn kan denne metode også bruges, hvis man senere ønsker at lave en
> dynamisk hjemmeside, f.eks. ved brug af ASP.NET?
Så absolut. Du skal forestille dig at du har et mere eller mindre fast
layout, defineret ved hjælp af css. Du bruger så en serversideteknologi
- i dit tilfælde ASP.NET - til at fylde dynamisk indhold ind i dine
div'er etc.
> Det jeg tænker på er, f.eks. at lave sit eget lille CMS-system,
> hvor man kan gå ind fra en browser, logge sig ind og skrive nyheder, i
> stedet for at skulle sidde og redigere i al HTML-koden... Kan dette
> stadig gøres i et recordset/DataGrid, selvom det kun bliver indsat i
> <div> tags, og ikke i tabeller??
Der må du nok over i dk.edb.programmering.dotnet - jeg aner intet om
ASP.NET. Men hvis du får lyst til at lave det i php i stedet kan jeg
være med
> Har endnu ikke så meget forstand på server-side programmering, men er
> da ved at læse mig til det. Derfor vil jeg gerne vide allerede nu, om
> man senere kan skalere det? Så man f.eks. laver en database, med
> forskellige pladser til at lave en overskrift, span til dato og
> tidligere links - og bruge CSS til at formatere dette med - så man
> ellers kan trække det nyeste fra databasen op på siden.
Det er lige sådan man gør (bortset fra at jeg generelt anser det for
hensigtsmæssigt at holde html ude af databasen, så den kun indeholder
den rå tekst, og så lader man sin serversideløsning formattere det ved
hjælp af css og html-tags).
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
Kewin Pedersen (10-10-2004)
| Kommentar Fra : Kewin Pedersen |
Dato : 10-10-04 15:55 |
|
Hej Kristian
Kan jeg ikke lige få din mail, eller du kan sende mit et brev, så vi lige
kan udveksle yderligere informationer? Ved ikke om du har fået noget fra
mig, eller ej, men min mail er: kewinp@vip.cybercity.dk, hvis du skulle være
i tvivl Håber da at høre fra dig, så man evt. lige kunne få set bare
lidt yderligere på sagen...
| |
Kristian Thy (10-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 10-10-04 22:17 |
|
Kewin Pedersen uttered:
> Kan jeg ikke lige få din mail,
Den står skam herover, og jeg har også fået din mail. Men ...
> Håber da at høre fra dig, så man evt. lige kunne få set bare
> lidt yderligere på sagen...
Da dit problem har sådan generel interesse for gruppen her, synes jeg
klart at vi skal lade yderligere diskussion foregå her - der er ingen
grund til at du skal afskære dig fra alle andres råd; det er langt fra
alt jeg kan svare på, og der vil givetvis også være nogle der er uenige
i min måde at gøre tingene på. :) Det skader aldrig at høre nogle
forskellige meninger.
Mit forslag er at du får lagt det du har indtil videre på din server (du
kan jo bare lave et temp-dir eller lign. til testformål), poste et link
her i gruppen og bede om hjælp / kommentarer.
Det er absolut ikke for at afvise dig eller være uhøflig, men bare for
at du (og andre der måtte kigge med senere) får mest ud af processen.
Google indekserer (endnu) ikke min private email-korrespondance ;)
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
Kewin Pedersen (15-10-2004)
| Kommentar Fra : Kewin Pedersen |
Dato : 15-10-04 08:14 |
|
"Kristian Thy" <thy@it.edu> skrev i en meddelelse
news:2stn65F1p6uluU1@uni-berlin.de...
> Kewin Pedersen uttered:
> > Kan jeg ikke lige få din mail,
>
> Den står skam herover, og jeg har også fået din mail. Men ...
Det tænkte jeg nok, men ville lige være helt sikker Selvfølgelig kan jeg
godt se, at hele gruppen nok kan få brug for det, men derfor vil jeg jo
gerne have lavet det alligevel! Derfor var det jeg tænkte, om ikke du kunne
starte med første udkast, og så sende det til mig, så jeg lige kunne se,
hvordan og hvorledes du har båret dig ad? Derefter skal jeg nok se om jeg
kan få lagt det op, så andre også kan gøre brug af det - dog forhåbentligt
ikke mine grafik ting
Men jeg er ikke lige så god til Outlook og ved ikke så meget om
nyhedsgrupper, så det må du lige hjælpe mig lidt med. Jeg kan se at nogle af
de tidligere posts er væk - hvorfor nu det? Også derfor jeg gerne ville have
en mail ping-pong, da de jo nok ikke lige forsvinder Men jeg har
'krydset' dette emne af med en lille "kikkert", så nu håber jeg da bare det
bliver der, så jeg kan læse dig svar...
| |
Kristian Thy (15-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 15-10-04 11:31 |
|
Kewin Pedersen uttered:
> Derfor var det jeg tænkte, om ikke du kunne starte med første udkast,
> og så sende det til mig, så jeg lige kunne se, hvordan og hvorledes du
> har båret dig ad?
Sådan spiller klaveret ikke, makker :) Hvis _du_ vil have _mig_ til at
lave dine ting, er du bedre tjent med at post i dk.opslag.stillinger :)
> Men jeg er ikke lige så god til Outlook
Jeg ved kun én ting om Outlook, og det er at det er det bedste værktøj
til at hjælpe dig med at få virus på din pc.
> Jeg kan se at nogle af de tidligere posts er væk - hvorfor nu det?
> Også derfor jeg gerne ville have en mail ping-pong, da de jo nok ikke
> lige forsvinder
Jeg vil love dig (medmindre du bruger gmail) at denne tråd overlever
længere end dine mails. Kig fx. på:
<URL: http://shor.ter.dk/313105653>
--
-- [ kristian ] --------------------------------------------------------
--------------- [if( you->toppost() ) { killfilter->append( you ); }] --
| |
Kewin Pedersen (18-10-2004)
| Kommentar Fra : Kewin Pedersen |
Dato : 18-10-04 09:40 |
|
"Kristian Thy" <thy@it.edu> skrev i en meddelelse
news:2t9n6mF1smh37U1@uni-berlin.de...
> Kewin Pedersen uttered:
> > Derfor var det jeg tænkte, om ikke du kunne starte med første udkast,
> > og så sende det til mig, så jeg lige kunne se, hvordan og hvorledes du
> > har båret dig ad?
>
> Sådan spiller klaveret ikke, makker :) Hvis _du_ vil have _mig_ til at
> lave dine ting, er du bedre tjent med at post i dk.opslag.stillinger :)
Det jeg tænkte var, at i stedet for vi blev ved med at poste flere
spørgsmål/svar i denne tråd - som f.eks. hvordan jeg skal bruge <div> tags
med float osv. - og jeg ikke kunne finde ud af det alligevel(!), om ikke du
så bare kunne lave et første udkast? Det 'meste' design er jo lavet i CSS,
men derfor vil jeg gerne vide, hvordan man også kunne lave et
"indholds-div", og få det hele til at passe med float, i stedet for at bruge
position absolute.
Nu jeg tænker over det, er du så sikker på, at jeg ikke skal bruge nogle
tabeller, til at styre det databasebaserede indhold, i mine indholds-diver?
Eller kan man måske godt bare smække et recordset (eller hvad end det hedder
i PHP/ASP), i ens div-tag, der f.eks. var adskildt med hN, span til dato og
span til tidligere links, som du sagde? Nu jeg tænker over det, så kunne det
da måske nok være man kunne det alligevel
Men som sagt, i stedet for jeg "baklager" min nød her, og du giver mig et
forslag, og jeg får det til at virke tildels, og jeg spørger igen osv. Kunne
du så ikke bare lave et første udkast mht. til det at bruge float i indholds
div-tagget? Kommer måske i sidste ende til at spare lidt tid på det, ved
ikke at skulle blive ved med at poste i denne tråd, hvor der er chance for,
at man misforstår noget... Håber det giver mening :D
| |
Kristian Thy (18-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 18-10-04 11:20 |
|
Kewin Pedersen uttered:
> Det jeg tænkte var, at i stedet for vi blev ved med at poste flere
> spørgsmål/svar i denne tråd - som f.eks. hvordan jeg skal bruge <div> tags
> med float osv. - og jeg ikke kunne finde ud af det alligevel(!), om ikke du
> så bare kunne lave et første udkast? Det 'meste' design er jo lavet i CSS,
> men derfor vil jeg gerne vide, hvordan man også kunne lave et
> "indholds-div", og få det hele til at passe med float, i stedet for at bruge
> position absolute.
Så lod jeg da alligevel mit gode hjerte løbe af med mig...
<URL: http://itu.dk/people/thy/test.php>
--
-- [ kristian ] --------------------------------------------------------
--------------- [if( you->toppost() ) { killfilter->append( you ); }] --
--
| |
Erik Ginnerskov (07-10-2004)
| Kommentar Fra : Erik Ginnerskov |
Dato : 07-10-04 16:08 |
|
Kristian Thy wrote:
> Jeg ville nok selv lave det med
> en overskrift (<hN>), en <span> med formatteret skrift til datoen, en
> normal <p> til teksten og igen en <span> til tidligere links.
Du kan ikke vilkårligt bruge et <span> i stedet for et <p> eller <div>. Et
<span> er et inline-element, der *skal* sættes ind i et blok-element. De to
sidste, <p> og <div>, er blok-elementer, hvoraf <p> kun må indeholde
inline-elementer som f.eks. <span>, mens <div> både må indeholde blok- og
inline-elementer.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk
| |
Kristian Thy (07-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 07-10-04 20:25 |
|
Erik Ginnerskov uttered:
> Kristian Thy wrote:
>
>> Jeg ville nok selv lave det med
>> en overskrift (<hN>), en <span> med formatteret skrift til datoen, en
>> normal <p> til teksten og igen en <span> til tidligere links.
>
> Du kan ikke vilkårligt bruge et <span> i stedet for et <p> eller <div>. Et
><span> er et inline-element, der *skal* sættes ind i et blok-element. De to
> sidste, <p> og <div>, er blok-elementer, hvoraf <p> kun må indeholde
> inline-elementer som f.eks. <span>, mens <div> både må indeholde blok- og
> inline-elementer.
Som du selv skriver: <div> må indeholde både blok- og inlineleementer.
Så er der vel heller ikke noget galt med <h1>, <span>, <p>, <span>.
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
Erik Ginnerskov (07-10-2004)
| Kommentar Fra : Erik Ginnerskov |
Dato : 07-10-04 20:38 |
|
Kristian Thy wrote:
> Som du selv skriver: <div> må indeholde både blok- og inlineleementer.
> Så er der vel heller ikke noget galt med <h1>, <span>, <p>, <span>.
Nej, det er helt fint. Det bruger jeg selv i vid udstrækning. Men som jeg
var inde på før, må et <span> ikke stå 'nøgen' mellem <body> og </body>.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk
| |
Kristian Thy (07-10-2004)
| Kommentar Fra : Kristian Thy |
Dato : 07-10-04 21:33 |
|
Erik Ginnerskov uttered:
> Kristian Thy wrote:
>
>> Som du selv skriver: <div> må indeholde både blok- og inlineleementer.
>> Så er der vel heller ikke noget galt med <h1>, <span>, <p>, <span>.
>
> Nej, det er helt fint. Det bruger jeg selv i vid udstrækning. Men som jeg
> var inde på før, må et <span> ikke stå 'nøgen' mellem <body> og </body>.
Vi er helt enige - og det har jeg heller ikke slået på tromme for. Hvis
du læser et par poster tilbage vil du opdage at alt indhold er lagt ind
i to div'er - en til menuen og en til selve indholdet.
\\kristian
--
<URL: http://lpf.ai.mit.edu/Patents/knuth-to-pto.txt>
<URL: http://home.att.net/~jbcole/humor/Microsoft_patents.htm>
| |
|
|