Søg
Avatar billede cmau Nybegynder
23. november 2005 - 15:08 Der er 25 kommentarer og
1 løsning

Hvordan kan jeg lave den smarteste stylesheet på denne tabel?

Hejsa

Hvordan kan jeg lave den smarteste stylesheet på denne tabel + dens indhold?

Tabeller magen til denne kommer jeg til at have på man sider, så jeg synes det ville være smartere at have en style for det.

De skal helst hedde noget med content_small, content_small .td osv..

<div align="center">
<form method="POST" action="hmm.php" enctype="multipart/form-data">
<table style="width:300px;border-collapse:collapse;border:0;">
<tr>

<td bgcolor="#FF0000" height="25" class="menutopic" width="150" align="left">Brugernavn:</td>
<td bgcolor="#FF0000" width="150" align="right" height="25"><input type="text" name="username" value=""></td>

</tr>
<tr>

<td bgcolor="#FF00FF" height="25" class="menutopic" width="150" align="left">Kode:</td><td bgcolor="#FF00FF" width="150" align="right" height="25"><input type="password" name="password" value=""></td>

</tr>
<tr>

<td bgcolor="#FF0000" height="25" class="menutopic" width="150" align="left">Login:</td><td bgcolor="#FF0000" width="150" align="right" height="25"><input type="submit" name="submit" value="Login"></td>

</tr>
</table>
</form>
</div>
Avatar billede roenving Novice
23. november 2005 - 15:18 #1
F.eks.

<style type="text/css">
/*
  Bl.a. style-regler for html og body
*/
.content_small{width:300px;border-collapse:collapse;border:0;}
.content_small tr{background-color:#f00;}
.content_small tr.even{background-color:#f0f;}
.content_small td{width:150px;height:25px;text-align:left;}
.content_small td.rightColumn{text-align:right;}

/*
  Andre regler
*/
}
</style>

-- og så ser tabellen sådan ud:

<table class="content_small">
<tr>

<td class="menutopic">Brugernavn:</td>
<td class="rightColumn"><input type="text" name="username" value=""></td>

</tr>
<tr class="even">

<td class="menutopic">Kode:</td>
<td class="rightColumn"><input type="password" name="password" value=""></td>

</tr>
<tr>

<td class="menutopic">Login:</td>
<td class="rightColumn"><input type="submit" name="submit" value="Login"></td>

</tr>
</table>
Avatar billede cmau Nybegynder
23. november 2005 - 15:27 #2
Sådan der &#65273; ;)

Der er bare lige en ting, hvordan kan jeg centere tabellen? Opera kan ikke lide <div align="center>
Avatar billede roenving Novice
23. november 2005 - 15:29 #3
.content_small{width:300px;margin:0 auto;border-collapse:collapse;border:0;}

-- men det forudsætter, for at få IE med i folden, at du har en fuldt kvalificeret doctype inklusive dtd-link, f.eks.

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

Velbekomme '-)
Avatar billede cmau Nybegynder
23. november 2005 - 15:36 #4
Hvis jeg smider den der dtd ind så ignorere den <td style="margin:5;padding:5;">asd</td> og laver ikke margin
Avatar billede roenving Novice
23. november 2005 - 15:41 #5
Ja, fordi du ikke har sat den obligatoriske enhed på !-)

<td style="margin:5px;padding:5px;">asd</td>
Avatar billede cmau Nybegynder
23. november 2005 - 15:54 #6
Hmm der er stadig lidt fejl:

                <td width="599" bgcolor="<?=$style['site']['tdcolor']?>" align="left" style="margin:5px;padding:5px;">

                                                <td class="menutopic" style="margin:5px;padding:5px;" colspan="3" width="146" bgcolor="<?=$style['site']['tdcolor']?>" align="left">

Ved disse 2 vises teksten i dem ens, i både IE og Opera, men i FF starter teksten 8 px nede, men samme antal som de 2 andre borwsere inde fra venstre.
Avatar billede cmau Nybegynder
23. november 2005 - 15:59 #7
Ved en 3. td som ikke indeholder noget, laver den også så den er 8 pc høj.

<td class="menutopic" style="margin:5px;padding:5px;" colspan="3" width="146" bgcolor="<?=$style['site']['tdcolor']?>" align="left">
Avatar billede roenving Novice
23. november 2005 - 16:01 #8
Sæt dog alt i style:

<td style="width:599px; background-color:<?=$style['site']['tdcolor']?>; text-align:left; margin:5px;padding:5px;">

<td class="menutopic" style="margin:5px;padding:5px;background-color:<?=$style['site']['tdcolor']?>; width:146px;" colspan="3">

-- små forskelle tror jeg ikke, det er muligt at undgå !-)
Avatar billede cmau Nybegynder
23. november 2005 - 16:04 #9
Halvdelen af gangene jeg smider alt i style fucker et eller andet.
Avatar billede roenving Novice
23. november 2005 - 16:07 #10
Det betyder præcis det samme !-)

-- men så kan du flytte det væk fra html-koden, så det bliver en hel del lettere at overskue den !o]

-- og det anbefales kraftigt kun at efterlade den slags attributter, som ikke kan placeres andre steder i html-koden (gælder f.eks. colspan !-)
Avatar billede cmau Nybegynder
23. november 2005 - 16:10 #11
Hvordan kunne jeg gøre med dette:
border="0" cellspacing="0" cellpadding="0"
Avatar billede roenving Novice
23. november 2005 - 16:12 #12
Se mit forslag til stylesheet !-)

table{border:0;border-collapse:collapse;}
table td{margin:0;padding:0;}
Avatar billede cmau Nybegynder
23. november 2005 - 16:19 #13
jamen hvis nu det skulle smides ind i den her:

table, td { font : 11px verdana, sans-serif; line-height:140%; color : <?=$style['site']['fontcolor']?>; }

Og nogle td'er er der sat style="margin:5px;padding:5px;"
Avatar billede roenving Novice
23. november 2005 - 16:21 #14
Du laver bare en klasse, som har de specielle egenskaber, og så kan du tildele nogle celler flere klasser:

.tdLuft{margin:5px;padding:5px;}

class="menutopic tdLuft"
Avatar billede cmau Nybegynder
23. november 2005 - 16:23 #15
Det vil sige at jeg først gør sådan her:

table, td { margin:0;padding:0;border:0;border-collapse:collapse;font : 11px verdana, sans-serif; line-height:140%; color : <?=$style['site']['fontcolor']?>; }
Avatar billede cmau Nybegynder
23. november 2005 - 16:29 #16
eller hvad?
Avatar billede roenving Novice
23. november 2005 - 16:39 #17
Jeg ville nu nok dele reglen i to, fordi det er meget forskellige html-elementer, men du kan dog sagtens gøre det, ja!-)
Avatar billede cmau Nybegynder
23. november 2005 - 17:00 #18
Lidt offtopic:
Hmm jeg har hørt mange snakke om at man kun skal bruge <div>'s til at lave hjemmesider, hvorfor det?..
Avatar billede roenving Novice
23. november 2005 - 17:20 #19
1. Det er en reaktion på den eneste rigtige layout-mulighed, der fandtes før html4 og css (fra ca. 1998 !-), som præcist var tabeller, hvorfor man ganske ofte stødte ind i html-sider, hvor der var op til 17-20 lag tabeller nestet inde i hinanden og mylliarder af spacer.gifs til at udspænde alle cellerne ...

-- en helt naturlig reaktion er at forbande den slags, når man får andre muligheder !-)

2. Sjovt nok har jeg rent faktisk ikke set udsagnet 'kun bruge divs' før, men derimod kun det forvrøvlede 'kun bruge css' ...

-- men det er netop en overfortolkning af w3cs anbefalinger, som i relativt kraftige vendinger netop gør op med tabel-helvederne, men også pointerer, at man til enhver opgave skal vælge den kombination af elementer, som klarest og nemmest løser den opgave, man har !o]

-- og det forvrøvlede i det andet udsagn er, at man selvfølgelig kun kan opbygge html-sider med html-elementer, som man derefter kan style med css, så 'kun bruge css' svarer til, at man dropper cyklen og bilen, når man skal ned efter morgenbasser om søndagen og i stedet tager turen i en dåse autolak !-)

-- et andet af de forvrøvlede argumenter hentyder til, at tabellen blev opfundet dengang html og internettet primært blev brugt i en videnskabelig kontekst, og der var så behov for opstillinger og sammenligninger af data, som bedst kunne løses med et tabel-værktøj, som Tim Berners-Lee derfor supplerede html med ...

Virkeligheden har jo så forandret sig meget siden, men nogle af de visuelle egenskaber tabeller og tabel-celler har, er så ofte ganske nyttige til helt andre ting end 'tabulære data', som tågehornene hævder er det eneste, de kan bruges til fordi det var det, de blev skabt til !-)

-- og der er vel ingen, der har tænkt sig at undlade at bruge hvadsomhelst, der indeholder hjul, bare fordi det oprindeligt blev opfundet til brug i vandingssystemer ?-)
Avatar billede cmau Nybegynder
23. november 2005 - 18:17 #20
Det er dette billede jeg så:
http://www.tips-og-tricks.com/images/banners/cssbog.png
SOm linkede til
http://www.sitepoint.com/books/css1/

Men du anbefaler at stadig bruge tabeller?..
Avatar billede roenving Novice
23. november 2005 - 18:40 #21
Brug tabeller, når de giver det bedste og simpleste resultat, men undgå for gud i himlen at lave dybt nestede tabeller, for så skal du finde en anden måde at definere dit design !-)

-- og jeg vil gerne gentage, at det er noget vrøvl at tale om at lave et html-layout kun i css, det kræver selvfølgelig, at der er nogle html-elementer, der kan styles !-)

-- og det med fastloading, vil f.eks. være tilfældet, hvis man stiller et almindeligt nutidigt design overfor et design, der er baseret på en masse spacer.gifs !o]

-- men et nutidigt design behøver ikke at udelukke tabeller, der oftest vil være den indlysende løsning til f.eks. en pæn opstilling af en formular, synkron højde af flere elementer ved siden af hinanden, i det hele taget elementer ved siden af hinanden samt f.eks. vertikal centrering !-)
Avatar billede cmau Nybegynder
25. november 2005 - 10:24 #22
Ok :)..

Har lige et spørgsmål hvordan kan jeg vise en film, som der gøre på fx på http://www.break.com/articles/paralellparking.html med en valid kode?
Avatar billede roenving Novice
25. november 2005 - 15:17 #23
Såvidt jeg husker:

<object id="MediaPlayer1" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows® Media Player components..." type="application/x-oleobject" width="440" height="330" data="http://media1.Break.com/content/paralellparking.wmv">
<param name="fileName" value="http://media1.Break.com/content/paralellparking.wmv">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="Volume" value="-10">
</object>

-- jeg har ikke overblik over valide properties til object-tagget, mn kig f.eks. her: http://blooberry.com/indexdot/html/tagpages/o/object.htm
Avatar billede cmau Nybegynder
03. december 2005 - 11:02 #24
Hmm den viser slet ikke noget i FF :S men i Opera virker det fint.
Avatar billede cmau Nybegynder
06. december 2005 - 21:03 #25
?
Avatar billede roenving Novice
14. december 2005 - 16:59 #26
Tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »