Avatar billede kennith Nybegynder
14. januar 2004 - 08:44 Der er 17 kommentarer og
1 løsning

Kan jeg lave det i CSS

Hej jeg er lige startet på at lege med CSS og nu er jeg lidt i tvivl om hvor meget jeg af min html jeg kan erstatte jeg har følgende tabel(r) til at styrre layoutet:

<TABLE WIDTH="100%" HEIGHT="100%" ALIGN="center">
<TR>
<TD ALIGN="center">

    <TABLE BACKGROUND="grafik/5pbackgul.jpg" WIDTH="720" HEIGHT="480" BORDER="1" cellspaceing="0" cellpadding="0">
    <TR>
    <TD WIDTH="200" ROWSPAN="5" ALIGN="center"><IMG SRC="grafik/logogul.jpg"></TD>
    <TD WIDTH="520" COLSPAN="7" ALIGN="center"><IMG SRC="grafik/title.gif"></TD>
    </TR>
    <TR>
    <TD COLSPAN="7" ALIGN="center" VALIGN="top"><IMG SRC="grafik/streg.jpg"></TD>
    </TR>
    <TR>
    <TD WIDTH="45"></TD>
    <TD WIDTH="76"><A HREF="http://*****" TARGET="new">Forside</A></TD>
    <TD WIDTH="120"><A HREF="sider/about.htm">Hvad er ???</A></TD>
    <TD WIDTH="69"><A HREF="http://*********" TARGET="new">Forum</A></TD>
    <TD WIDTH="109"><A HREF="sider/registrer.htm">Bliv medlem</A></TD>
    <TD WIDTH="56"><A HREF="sider/kontakt.htm">Kontakt</A></TD>
    <TD WIDTH="45"></TD>
    </TR>
    <TR>
    <TD COLSPAN="7" ALIGN="center" VALIGN="top"><IMG SRC="grafik/streg.jpg"></TD>
    </TR>
    <TR>
    <TD HEIGHT="10" COLSPAN="7"></TD>
    </TR>
    <TR>
    <TD HEIGHT="355" COLSPAN="8">
       
        <TABLE WIDTH="90%" ALIGN="center">
        <TR>
        <TD></TD>
        </TR>
        </TABLE>
    </TD>
    </TR>
    </TABLE>
   
</TD>
</TR>
</TABLE>


kan jeg lave det i CSS i stedet. Hvilke funktioner "koder" skal jeg kigge nærmere på?
Avatar billede medions Nybegynder
14. januar 2004 - 08:49 #1
Den her kan du ihvertfald lave om:

<TABLE WIDTH="100%" HEIGHT="100%" ALIGN="center">

Så den ser således ud:

<TABLE style="width:100%;height:100%;text-align:center;">

Alt hvad der har højde og vide kan laves i CSS!
Colspan og RowSpan kan oxo laves i CSS, kan sq bare ik' huske hvordan, du kan se det inde på www.html.dk/tutorials/css

//>Rune
Avatar billede medions Nybegynder
14. januar 2004 - 08:50 #2
Den her :

<TABLE BACKGROUND="grafik/5pbackgul.jpg" WIDTH="720" HEIGHT="480" BORDER="1" cellspaceing="0" cellpadding="0">


Kan oxo se således ud:

<TABLE style="background-image: url(grafik/5pbackgul.jpg); width: 720px; height: 480px; border: 1px solid;" cellspaceing="0" cellpadding="0">

//>Rune
Avatar billede kennith Nybegynder
14. januar 2004 - 08:52 #3
tak Rune jeg sad faktisk og kiggede på www.html.dk men var bare doven og ville vide hvor jeg skulle kigge *GG*

Kennith
Avatar billede kennith Nybegynder
14. januar 2004 - 08:53 #4
men kan jeg lave tabeler i css??

Kennith
Avatar billede exp Juniormester
14. januar 2004 - 08:54 #5
Alle formateringskoderne kan du ændre...

<style type="text/css">
<!--
body, html {
    height: 100%;
    width: 100%;
}
table, tr, td {
    border:1px solid black;
}
.outer_table {
    border:0px !important;
}
-->
</style>
<TABLE class="outer_table" style="width:100%;height:100%;text-align:center;">
<TR>
<TD style="text-align:center;" class="outer_table">

    <TABLE style="background:url('grafik/5pbackgul.jpg'); width:720px;height:480px;border:1px solid black;border-collapse:collapse;">
    <TR>
    <TD style="width:200px;text-align:center;" ROWSPAN="5"><IMG SRC="grafik/logogul.jpg"></TD>
    <TD style="width:520px;text-align:center;" COLSPAN="7"><IMG SRC="grafik/title.gif"></TD>
    </TR>
    <TR>
    <TD COLSPAN="7" style="vertical-align:top;text-align:center;"><IMG SRC="grafik/streg.jpg"></TD>
    </TR>
    <TR>
    <TD style="width:45px;"></TD>
    <TD style="width:76px;"><A HREF="http://*****" TARGET="new">Forside</A></TD>
    <TD style="width:120px;"><A HREF="sider/about.htm">Hvad er ???</A></TD>
    <TD style="width:69px;"><A HREF="http://*********" TARGET="new">Forum</A></TD>
    <TD style="width:109px;"><A HREF="sider/registrer.htm">Bliv medlem</A></TD>
    <TD style="width:56px;"><A HREF="sider/kontakt.htm">Kontakt</A></TD>
    <TD style="width:45px;"></TD>
    </TR>
    <TR>
    <TD COLSPAN="7" style="text-align:center;vertical-align:top;"><IMG SRC="grafik/streg.jpg"></TD>
    </TR>
    <TR>
    <TD style="height:10px;" COLSPAN="7"></TD>
    </TR>
    <TR>
    <TD style="height:355px;" COLSPAN="8">
       
        <TABLE  style="width:90%;text-align:center;">
        <TR>
        <TD></TD>
        </TR>
        </TABLE>
    </TD>
    </TR>
    </TABLE>
   
</TD>
</TR>
</TABLE>
Avatar billede exp Juniormester
14. januar 2004 - 08:55 #6
Og nej, du kan ikke lave tabeller i css - du kan _kun_ formatere med css - ikke "skabe"
Avatar billede kennith Nybegynder
14. januar 2004 - 08:57 #7
exp det vil sige at den kode du har skrevet alligevel skal ind på alle sider? Hvis den skal det så er det vel ikke nogen fordel at bruge det??

Kennith
Avatar billede exp Juniormester
14. januar 2004 - 08:59 #8
Der er fordele i det øjeblik du kan lave en skabelon, og så dynamisk implementere indholdet alt efter hvilken side der er valgt
Avatar billede medions Nybegynder
14. januar 2004 - 09:01 #9
HTML er et Markup sprog, CSS er et Formaterings sprog, og det vil sige at HTML designer man med CSS, sådan stort sagt :)

//>Rune
Avatar billede kennith Nybegynder
14. januar 2004 - 09:03 #10
hmmm forstår det ikke helt men tror nok jeg har fanget det overordnede exp lig lige et svar så du kan få nogle point *S*

Tak for hjælpen
Kennith
Avatar billede bb_maze Nybegynder
14. januar 2004 - 09:03 #11
Undskyld keenith... men exp kan du svare mig på hvad !important; gør i denne her:

.outer_table {
    border:0px !important;
}

HYGGE
Avatar billede exp Juniormester
14. januar 2004 - 09:08 #12
!important gør, at uanset hvad der tidligere er skrevet som formateringer, så vil de tables, tr's, td's der har outer_table som class overskrive af border:0px

!important betyder at den givne værdi ER VIGTIG, og skal overskrive alle andre værdier der kunne have indflydelse på lige præcis DENNE.

http://developer.irt.org/script/5408.htm
http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules
Avatar billede medions Nybegynder
14. januar 2004 - 09:14 #13
kennith> Hvad er der galt i mine svar siden du ikke kunne bruge dem?

//>Rune
Avatar billede bb_maze Nybegynder
14. januar 2004 - 09:14 #14
Mange tak for det, exp!

HYGGE
Avatar billede jakobdo Ekspert
14. januar 2004 - 09:21 #15
En god side til css er: www.w3schools.com/css/ og for at du slipper for at skrive CSS på hver side, så kan du jo bruge følgende:

<link rel="stylesheet" type="text/css" href="style.css">

og så lave en fil, som du kalder style.css og i den ligger du alle dine formatteringer.

F.eks.

table.outer { width: 100%; height: 100%; }

osv....
Avatar billede exp Juniormester
14. januar 2004 - 09:38 #16
jakobdo >>
Enig. Det ville jeg også selv gøre. Men nu var det også bare for at gøre det lettere for kennith.

Skal det være helt korrekt, så skal
<style type="text/css">
<!--
body, html {
    height: 100%;
    width: 100%;
}
table, tr, td {
    border:1px solid black;
}
.outer_table {
    border:0px !important;
}
-->
</style>

være placeret mellem <head> og </head>
Avatar billede exp Juniormester
14. januar 2004 - 10:43 #17
Avatar billede kennith Nybegynder
15. januar 2004 - 11:50 #18
medions> ok jeg var nok for hurtig til at lukke det. Gider bare ikke have spørgsmål stående i flere uger før jeg giver point. Jeg kunne ikke umiddelbart se at det du svarede kunne løse mit "problem" det jeg var interesseret i var en måde at undgå og skrive de samme tabeller på alle siderne og som jeg forstod dit svar så var det stadig noget der skulle skrives ind på alle siderne. exp skrev mere og det troede jeg lige umiddelbart løste mit problem men nu har jeg kigget på det og kan se at det gør det ikke så du burde som den første svarer selvfølgelig have haft point.

Nu ser jeg at det venlige væsen exp har delt sine point med dig *GG* men sådan skal det heller ikke være så jeg laver lige et nyt spm hvor i kan få 15 ekstra hver der skal ikke være nogle sure miner her.

http://www.eksperten.dk/spm/451912

Hvad kan jeg sige det er umuligt altid at være retfærdig :)


Kennith
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