Søg
Avatar billede Douink Novice
24. januar 2005 - 04:31 Der er 13 kommentarer og
1 løsning

Er det smart med tabeller i style.css?

Hejsa.. jeg er begynder med css. men har dog været igennem
alle tutorials på html.dk og alle på w3
Jeg sidder nu og skal bygge min side op fra bunden.

Siden:
Siden skal marges in i vinduet som de har på jubii eksempelvis.

Jeg skal så have en tabel til banner i toppen (Tabel1)
En tabel i venstre side til menu (Tabel2)
og en stor vindu i midten til alt tekst. og når de trykker på et link i menuen (tabel2) skal det vise sig i den store vindu (tabel3)
Altså kan jeg styre tabel1 og tabel2 med style.css og så lave resten i normale html sider?
Er der en der ved om det er så smart at gøre og måske en der vil paste mig en tabel script til style.css med magen lidt inde på siden?

Er det smart at gøre det?
Er det bedre at styre tabel1 og tabel2 med PHP? da PHP også er smart med sådan noget :)

Håber der er en der kan hjælpe mig :)

//Douink
Avatar billede Slettet bruger
24. januar 2005 - 10:34 #1
Kig lidt på denne kode, og se om det er noget du kan bruge
........................

<html>

<head>
<title>..: skabelon :..</title>
<style type="text/css">
<!--
.DATE {
    font-family: Verdana;
    font-size: 9px;
    font-style: normal;
    color: #7A7A7A;
    padding: 4;
}
.HEADLINE {
    font-family: Verdana;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #263F18;
    letter-spacing: 4;
    padding: 4;
}
.COPYRIGHT {
    font-family: Verdana;
    font-size: 9px;
    font-style: normal;
    color: #E5E7DC;
    letter-spacing: 1px;
}

BODY {
    font-family: Verdana;
    font-size: 9px;
    font-style: normal;
    color: #000000;
}
 
  A:LINK {
    font-family: Verdana;
    font-size: 9px;
    font-style: normal;
    text-decoration : none;
    letter-spacing: 2px;
    color: #000000;
}

  TD {
    font-family: Verdana;
    font-size: 9px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
}
  FORM {
    margin-bottom : 8;
}
a.menu {
    FONT-SIZE: 9px;
    background : #D7D9CE;
    color: #000000;
    text-decoration : none;
    display:block;
    width:100%;
    border-top: 1 solid #D7D9CE;
    border-left: 1 solid #D7D9CE;
    border-right: 1 solid #D7D9CE;
    border-bottom: 1 solid #D7D9CE;
    letter-spacing: 2px;
    padding: 4;
}

a.menu:hover {
    FONT-SIZE: 9px;
    background : #B4B7A6;
    color: #ffffff;
    display:block;
    width:100%;
    border-top: 1 solid #ffffff;
    border-left: 1 solid #ffffff;
    border-right: 1 solid #ffffff;
    border-bottom: 1 solid #ffffff;   
    letter-spacing: 2px;
    padding: 4;
}
-->
</style>
<base target="_self">
</head>

<body topmargin="0" leftmargin="0" bgcolor="#B4B7A6">

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" valign="top" align="center">
      <table border="4" width="760" cellpadding="0" height="100%" bordercolor="#B4B7A6" cellspacing="4">
        <tr>
          <td width="100%" bordercolor="#F1F2EA" bordercolorlight="#F1F2EA" bordercolordark="#F1F2EA" height="100">
            <div align="center">
                <center>
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td style="width: 200px;">200 i bredden</td>
                        <td>468 x 60 banner</td>
                    </tr>
                </table>
                </center>
            </div>
            </td>
        </tr>
        <tr>
          <td width="100%" bordercolor="#F1F2EA" bordercolorlight="#F1F2EA" bordercolordark="#F1F2EA" valign="top">
            <table border="3" width="100%" cellspacing="4" cellpadding="0" bordercolor="#B4B7A6" height="100%">
              <tr>
                <td width="150" bordercolor="#F1F2EA" bgcolor="#D7D9CE" valign="top">
                  <table border="1" width="100%" cellpadding="0" bordercolor="#D7D9CE" cellspacing="0">
                    <tr>
                      <td width="100" bgcolor="#B4B7A6" bordercolor="#F1F2EA">
                        <p class="HEADLINE">NAVIGATION</p>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" valign="top"><a href="#" class="menu">Link
                        01</a></td>
                    </tr>
                    <tr>
                      <td width="100%" valign="top"><a href="#" class="menu">Link
                        02</a></td>
                    </tr>
                    <tr>
                      <td width="100%" valign="top"><a href="#" class="menu">Link
                        03</a></td>
                    </tr>
                    <tr>
                      <td width="100%" valign="top"><a href="#" class="menu">Link
                        04</a></td>
                    </tr>
                    <tr>
                      <td width="100%" valign="top"><a href="#" class="menu">Link
                        05</a></td>
                    </tr>
                  </table>
                </td>
                <td width="410" bordercolor="#F1F2EA" rowspan="3" valign="top">
                  <table border="0" width="100%" cellspacing="3">
                    <tr>
                      <td width="100%">CAPUT 1
                        <p>Magnus es, domine, et laudabilis valde: magna virtus
                        tua, et sapientiae tuae non est numerus. et laudare te
                        vult homo, aliqua portio creaturae tuae, et homo
                        circumferens mortalitem suam, circumferens testimonium
                        peccati sui et testimonium, quia superbis resistis: et
                        tamen laudare te vult homo, aliqua portio creaturae
                        tuae.tu excitas, ut laudare te delectet, quia fecisti
                        nos ad te et inquietum est cor nostrum, donec requiescat
                        in te. da mihi, domine, scire et intellegere, utrum sit
                        prius invocare te an laudare te, et scire te prius sit
                        an invocare te. sed quis te invocat nesciens te? aliud
                        enim pro alio potest invocare nesciens. an potius
                        invocaris, ut sciaris? quomodo autem invocabunt, in quem
                        non crediderunt? aut quomodo credent sine praedicante?
                        et laudabunt dominum qui requirunt eum. quaerentes enim
                        inveniunt eum et invenientes laudabunt eum. quaeram te,
                        domine, invocans te, et invocem te credens in te:
                        praedicatus enim es nobis. invocat te, domine, fides mea,
                        quam dedisti mihi, quam inspirasti mihi per humanitatem
                        filii tui, per ministerium praedicatoris tui.
                        <p>CAPUT 2
                        <p>Et quomodo invocabo deum meum, deum et dominum meum,
                        quoniam utique inme ipsum eum invocabo, cum invocabo eum?
                        et quis locus est in me, quoveniat in me deus meus? quo
                        deus veniat in me, deus, qui fecit caelum et terram?
                        itane, domine deus meus, est quiquam in me, quod capiat
                        te?an vero caelum et terra, quae fecisti et in quibus me
                        fecisti, capiuntte? an quia sine te non esset quidquid
                        est, fit, ut quidquid est capiat te? quoniam itaque et
                        ego sum, quid peto, ut venias in me, quinon essem, nisi
                        esses in me? non enim ego iam in inferis, et tamen etiam
                        ibi es. nam etsi descendero in infernum, ades. non ergo
                        essem, deus meus, non omnino essem, nisi esses in me. an
                        potius non essem, nisi essem in te, ex quo omnia, per
                        quem omnia, in quo omnia? etiam sic, domine, etiam sic.
                        quo te invoco, cum in te sim? aut unde venias in me? quo
                        enim recedam extra caelum et terram, ut inde in me
                        veniat deus meus, qui dixit: caelum et terram ego impleo</td>
                    </tr>
                  </table>
                </td>
                <td width="150" bordercolor="#F1F2EA" rowspan="2" valign="top" bgcolor="#D7D9CE">
                  <table border="1" width="100%" height="100" cellpadding="2" bordercolor="#D7D9CE">
                    <tr>
                      <td width="125" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">&nbsp;Reklame
                        1</td>
                    </tr>
                    <tr>
                      <td width="125" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">Reklame
                        2</td>
                    </tr>
                    <tr>
                      <td width="125" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">Reklame
                        3</td>
                    </tr>
                    <tr>
                      <td width="100%" height="75"></td>
                    </tr>
                  </table>
</td>
              </tr>
              <tr>
                <td width="150" bordercolor="#F1F2EA" bgcolor="#D7D9CE" valign="top">
                  <table border="1" width="100%" height="100" cellpadding="0" bordercolor="#D7D9CE" cellspacing="0">
                    <tr>
                      <td width="100" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">
                        <p class="HEADLINE">LINKS</p>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="75" valign="top"></td>
                    </tr>
                  </table>
</td>
              </tr>
              <tr>
                <td width="150" bordercolor="#F1F2EA" bgcolor="#D7D9CE" valign="top">
                  <table border="3" width="100%" height="100" cellpadding="0" bordercolor="#D7D9CE" cellspacing="0">
                    <tr>
                      <td width="100" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">
                        <p class="HEADLINE">HEADLINES</p>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="75" valign="top">-&nbsp; Her har
                        du s&aring; en celle til at inds&aelig;tte nyheder.
                        <hr size="1" color="#B4B7A6">-&nbsp; Brug denne skabelon
                        som et udgangspunkt p&aring; dit rammedesign.</td>
                    </tr>
                  </table>
                    </td>
                <td width="150" bordercolor="#F1F2EA" valign="top" bgcolor="#D7D9CE">
                  <table border="1" width="100%" height="100" cellpadding="2" bordercolor="#D7D9CE">
                    <tr>
                      <td width="100" height="25" bgcolor="#B4B7A6" bordercolor="#F1F2EA">&nbsp;</td>
                    </tr>
                    <tr>
                      <td width="100%" height="75"></td>
                    </tr>
                  </table>
                    </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td width="100%" bordercolor="#B4B7A6" height="25">
            <p align="center" class="COPYRIGHT">&nbsp;copyright © 2002.&nbsp;
            All rights belong to you | /cdc - eksperten.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>

</html>
Avatar billede Slettet bruger
24. januar 2005 - 10:38 #2
Kan også laves helt uden tabeller:
........................

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Website Powered by Bravenet</title>
    <link rel="stylesheet" type="text/css" href="images196/purple_b.css">
</head>
<body>
<div class="wrapper">
    <div class="title border titlemargin" style="padding-bottom: 20px; margin-bottom: 10px;">My Website</div>

    <div class="right" style="font-weight: bold;">
        <div class="sidebaritem first"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
        <div class="sidebaritem"><a href="">menu item</a></div>
    </div>

    <div class="content padright" style="padding-left: 20px;">
        <p class="title2">Welcome to Your New Website</p>
          <p>Welcome to your new home on the Net!  If you don't have your own Domain Name yet, you can get one through your Hosting Manager.  Also in your Hosting Manager, you can find handy tools to maintain and update your Web Site, such as our Java-based FTP Applet, an easy way to upload your files to the server.</p>
          <p>From the Hosting Manager you will also find links to our Web-based File Manager which includes a Text Editor and Visual Editor, making Site maintenance easy. And don't forget to check out the <a href="http://www.bravenet.com/resources/index.php">Resource Area</a> for HTML help, scripts, clip art, audio clips, fonts, and more!</p>
          <p class="title2">Adding Fun Tools to Your Site</p>
          <p>Through your Bravenet Account, you can choose many of our FREE Tools to enhance your Site.  Add as many as you like!  Get a Hit Counter, Guestbook, Message Board, Email Form, Minipoll, Web Journal, or any of Bravenet's other great <a href="http://www.bravenet.com/webtools/index.php">Tools and Services</a> to make your Site fun and interactive.</p>
          <p>Finally, don't forget to join the <a href="http://www.bravenet.com/webtools/affiliate/index.php">Bravenet Affiliate Program</a> and earn money everytime you send somebody to join Bravenet.</p>
    </div>
    <br style="clear: both;" />
    <div class="border footer"><a href="http://www.bravenet.com">Powered by Bravenet.com</a></div>
</div>
</body>
</html>
Avatar billede Slettet bruger
24. januar 2005 - 10:41 #3
Du skal også lige have CSS-filen - husk at gemme den i >images196/purple_b.css
.................................
/* This CSS file is used in all 9 of the free simple templates at        */
/* www.bravenet.com.  Feel free to look at the templates themselves      */
/* to get an idea of how the various classes listed here can combine      */
/* to produce a wide variety of layouts.  (Classes are the entries        */
/* beginning with a '.')                                                  */

/* Note: The slash star combinations surround text that is to be          */
/*      marked a comment.  These just describe the CSS and are          */
/*      ignored by the browser.                                          */

body
{
    font: 16px arial;
    background-color: #000000;
}
/* these are the font styles for the links that appear on your web page */
a:link {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:active {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:visited {font: bold 13px arial; color: #ffffff; text-decoration: none;}
a:hover {font: bold 13px arial; color: #4B1A95; text-decoration: underline;}/*this one changes the mouseover or hover state of the link*/

.border
{
    /* this is used for all kinds of borders */
    /* be it for the whole page, or just the content section */
    border: solid 1px #807395;
}

.left
{
    /* floats the item to the left side of the page, and adds a margin */
    float: left;
}

.right
{
    /* floats the item to the right side of the page, and adds a margin */
    float: right;
}

.scroll
{
    /* this makes the element create scroll bars if the text is too long */
    /* to be displayed.  This is very similar to the effect created by */
    /* frames and iframes, but does not allow page transitions like frames do */
    overflow: auto;
}

.wrapper
{
    /* remove this to have the page load at full width */
    width: 780px;
}

.title
{
    /* this is the styling for the title.  Semantically, this should be an h1 */
    /* padding all four sides of the div in order top, right, bottom, left */
    background-color: #4B1A95;
    color: #ffffff;
    font-face: Arial;
    font-weight: bold;
    font-size: 36px;
    padding: 10px 20px 10px 20px;
}

.title2
{
    color: #ffffff;
    font-face: Arial;
    font-weight: bold;
    font-size: 18px;

}

.titlemargin
{
    margin: 10px 0px 10px 0px;
}

.subtitle {
    color: #ffffff;
    font-face: Arial;
    font-weight: bold;
    font-size: 14px;
}

.content
{
    /* this describes the container of the content paragraphs. */
    padding: 0px 20px 0px 20px; /* keeps text off the borders */
    font-face: Arial;
    font-size: 12px;
    color: #ffffff;
    padding: 0px;
    margin: 0px;
}

.content.padleft
{
    /* this is to pad if there's a sidebar on the left */
    padding-left: 180px;
}

.content.padright
{
    /* this is to pad if there's a sidebar on the right */
    padding-right: 180px;
}

.sidebar
{
    width: 150px;
    height: 400px; /* remove this to allow different-sized sidebars */
    background-color: #807395;
    color: #4B1A95;
    font-weight: bold;
    padding: 10px 0px 5px 0px;

}

.sidebaritem
{
    width: 130px;
    background-color: #807395;
    color: #807395;
    border: solid 1px #4B1A95;
    font-size: 14px;
    padding: 2px;
    margin-bottom: 3px;

}
.horiz
{
    color: #4B1A95;
    font-weight: bold;
    width: 124px;
    float: left;
    text-align: center;
}

.sidebaritem.first
{
    margin-top: 10px;
}

.footer
{
    background-color:#807395;
    font-size: 10px;
    font-face: arial;
    text-align: center;
}
Avatar billede olebole Juniormester
24. januar 2005 - 15:50 #4
<ole>

Når du skal vise tabulerede data og/eller opdele en side i kollonner, er tabeller langt det bedste at bruge - og det, W3C anbefaler. Med en bunke krumspring kan det af og til lade sig gøre at konstruere sære koder, der kan *næsten* det samme med divs. Det giver dog meget sjældent mening at bruge andre elementer end de, der er beregnet til en bestemt opgave  ;o)

/mvh
</bole>
Avatar billede Douink Novice
25. januar 2005 - 04:55 #5
hejsa... og tak for en kanon hjælp.. men den første nævnte kan man da ikke bruge som Css kan man?
Sorry men er som sagt lidt ny i css :)
Avatar billede Slettet bruger
25. januar 2005 - 12:26 #6
Jo da - f. eks menuen > <p class="HEADLINE">NAVIGATION</p> er formateret med CSS - eller prøv at rette >font-size: 9px; til font-size: 12px; i denne blok

TD {
    font-family: Verdana;
    font-size: 9px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
}

og se forskellen.
Avatar billede yxos Nybegynder
30. juni 2007 - 08:43 #7
Husk at give points for de svar du modtager her på eksperten.
Du har oprettet 5 spørgsmål, og du har ikke givet points for et eneste.
Avatar billede Douink Novice
01. juli 2007 - 23:57 #8
- Abonner
Avatar billede Slettet bruger
02. juli 2007 - 08:24 #9
Jeg er deltager i dette spm, men forstår ikke lige hvad det er douink vil med sine sidste 2 indlæg her, andet end han forsøger at blive meget upopulær på website.
Sproget du bruger er ikke velkommen her.
..............................................................................

# Indlæg på Eksperten.dk skal holdes i en sober tone. Nedsættende bemærkninger samt direkte personangreb eller injurier, det være sig mod firmaer eller privatpersoner, hører ikke hjemme på Eksperten.dk - og kan give anledning til deaktivering og sletning af indlæg.

# Opleves overtrædelse af Eksperten.dk’s regler i et spørgsmål, hvor man selv deltager, er man forpligtet til at oplyse dette via www.eksperten.dk/anmeld.phtml
..............................................................................

Jeg lægger derfor et svar, da jeg ikke rigtig kan 'oversætte' dine bemærkninger til almindelig forståeligt dansk, måske er det fordi jeg er fra jylland, og her taler vi som regel pænt om folk
Avatar billede yxos Nybegynder
02. juli 2007 - 08:35 #10
Næ, det bunder i at Douink vist ikke helt vidste, at alle spørgsmål bør lukkes med et svar; at hvis der kun kommer kommentarer, så er det som regel fordi man af høflighed afventer at Spørger efterlyser et Svar.
Det ved han så nu.
Avatar billede yxos Nybegynder
02. juli 2007 - 09:04 #11
ibtage: Så det var altså ikke dig, men mig der blev referet til som "hjerne døde spasser".

Jeg har prøvet at forklare douink om pointgivningen via anden tråd; http://www.eksperten.dk/spm/785839, men enig; sprogbruget kunne være pænere.

Da jeg er sikker på at Douinks reaktion bunder i misforstået anvendelse af svar og kommentarer ønsker jeg jeg ikke at anmelde ham på nuværende tidspunkt.
Avatar billede Douink Novice
12. januar 2008 - 00:16 #12
Tak for alt hjælp... skal vist have rodet op i mine tråde som ikke er accepteret :)

<---------------- Ikke Ekspert :-)
Avatar billede Slettet bruger
12. januar 2008 - 10:50 #13
Tak for point

~~~~~~~~~~~~~~~~~~~~~~~~

Tiden er en gave vi har fået
for at vi med den kan blive klogere, mere modne og fuldkomne
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 går 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »