Avatar billede dp2001 Juniormester
09. maj 2005 - 11:38 Der er 13 kommentarer og
1 løsning

Problemer med CSS (omkransning og baggrundsfarve)

Jeg har 2 problemer med et simpelt layout jeg er ved at bygge op med CSS. Kode+CSS allernederst.

I min side har jeg et banner, menu (horizontal), undermenu (horizontal) og 2 spalter.

1) Jeg vil gerne sikre, at de 2 spalter altid får hele "cellen" udfyldt med en baggrundsfarve - og ikke kun den plads, der er optaget af tekst. Jeg kunne selvfölgelig sätte hver spalte til at have height=600px; - men hvad nu hvis den ene spalte fylder mere end 600 px i höjden, så ser det ikke så pänt ud längere.

2) Jeg har forsögt at lave sådan at hele indholdet (banner, menu, undermenu og de 2 spalter) har en ydre omkrasning. Men det virker hverken i IE eller ildräven, idet kun de 3 överste elementer bliver omkranset.

Kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
    <title>Sideopbygning med CSS</title>
</head>
<body>
    <div id='outline'>
        <div id='banner'><img src='images/top.png'>
        <div id='status'>Log på</div>
        <div id='menu'>
            <ul id='supernav'>
                <li>
                    <a href='link1.htm'>LINK</a>
                    <a href='link2.htm'>LINK</a>
                </li>
            </ul>
        </div>
        <div id='content'>
            <div id='spalte1'>
                <div id='spalte1-indhold'>
                    Spalte 1........
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                    Haec disserens qua de re agatur
                    et in quo causa consistat non videt...
                    <br/><br/><br/><br/><br/><br/><br/>
                </div>
            </div>             
            <div id='spalte2'>
                <div id='spalte2-indhold'>
                    Spalte 2
                </div>
            </div>         
        </div>
    </div>
</body>
</html>


CSS:

body {
        background-color : #FFFFFF;
        font: 10pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
        color : #000000;
        margin: 0 auto;
        padding: 20px;
        width: 800px;
}

#outline {
        border-style: ridge;
        border-color: black;
        border-width: 1pt;
}
     
img {
        border: 0pt;
}
   

#status {
        margin: 0;
        padding: 0;
        background-color: black;
        color: white;
        font: 10pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
        padding: 2pt;
        text-align: right;
}

#menu {
        margin: 0;
        padding: 0;
        background-color: #A9C7BF;
        font: bold 9pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}

#submenu {
        margin: 0;
        padding: 0;
        background-color: #92B2A1;
        font: 9pt 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}

#supernav
{
    margin: 0;
    padding: 2px;
    text-align: left;
    display: block;
}

#supernav li
{
    display: inline;
    padding: 1px;
    text-transform: none;
}

#supernav a
{
    color: #000000;
    height: 12px;
    padding: 10px;
    margin: 0; 
    border: 0 solid;
}

#supernav a:hover
{
    color: #CCDDEE;
    background: #DDDDDD;
    border: 0px;
}

#content {
    padding: 0pt;
}

#spalte1 {
    margin: 0pt;
    padding: 0pt;
    background-color: #FFFCCF;
    float:left;
    width: 85%;
    height: 600px;
}

#spalte2 {
    margin: 0;
    padding: 0;
    background-color: #DDDDEE;
    float:left;
    width: 15%;
    height: 600px;
}

#spalte1-indhold {
    margin: 0;
    padding: 2pt;
}

#spalte2-indhold {
    margin: 0pt;
    padding: 2pt;
}
Avatar billede roenving Novice
09. maj 2005 - 12:23 #1
Det simple trick (hvis man altså ikke bruger det element, w3c anbefaler til den slags: tabellen !-) i at få noget til at være lige langt er at give containeren den baggrundsfarve og så lade selve elementet være transparent ...

-- og så er det en misforståelse at bruge pt som enhed for noget, som skal vises på skærmen, brug i stedet skærm-enheden px !o]
Avatar billede dp2001 Juniormester
09. maj 2005 - 13:26 #2
Ikke helt forstået....kan du give et eksempel?
Avatar billede roenving Novice
09. maj 2005 - 13:45 #3
F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#container{width:760px;margin:0 auto;background-color:#9ab;}
#left{float:left;width:240px;background-color:transparent;color:#fff;font-weight:900;}
#left *{margin:5px;}
#right{float:right;width:520px;background-color:#9af;}
</style>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<div id="container">
  <div id="left">
    <div>
      En menu, som helst skal være lige så høj som indholdet
    </div>
  </div>
  <div id="right">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.
<br>
Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.
<br>
Nunc dolor. Nulla id purus vitae lacus interdum blandit. Donec lorem ante, rutrum eget, nonummy quis, luctus vel, eros. Quisque porttitor felis malesuada elit. Aliquam pretium purus vitae nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem. In mattis ipsum id dolor. Vivamus quis neque. Etiam vitae velit. Phasellus interdum, eros sit amet porta rutrum, mi neque ornare diam, et nonummy ipsum eros a dolor. Maecenas ut ligula. Vivamus adipiscing dignissim neque. Cras sit amet sapien.
<br>
Proin accumsan consequat felis. Nunc pellentesque, nisl vestibulum iaculis rhoncus, mauris enim luctus neque, quis auctor dolor sapien et massa. Donec in lorem vel pede mollis condimentum. Mauris libero. Praesent imperdiet. Nam porttitor nisl ac eros. Nulla sed metus. Duis id quam. Donec id augue. In enim ante, consectetuer in, cursus vitae, tristique sit amet, ipsum. Mauris ullamcorper porta nisl. Morbi pharetra. Proin commodo. Sed facilisis vehicula wisi. Ut malesuada. In hac habitasse platea dictumst. Vivamus auctor. Pellentesque quis massa id nunc ornare varius. Aliquam erat volutpat.
<br>
Aenean vel justo vel ligula nonummy fermentum. Nulla a elit non orci egestas viverra. Sed tempus augue et massa. Maecenas tincidunt leo a purus. Curabitur elementum malesuada purus. In nunc purus, imperdiet eu, bibendum at, vulputate quis, augue. Aenean sed nibh blandit pede scelerisque luctus. Pellentesque vestibulum. Sed faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tellus. Sed eu justo. Duis purus augue, tincidunt a, feugiat at, tempor sed, ante.
<br>
Pellentesque convallis. Sed quam urna, venenatis eget, scelerisque eget, pharetra vitae, nisl. Aliquam sem. Nulla in lacus. Phasellus ultricies nibh eu enim. Aenean tincidunt, tortor eget fringilla congue, tortor wisi sollicitudin wisi, in tincidunt eros urna et ipsum. Donec vestibulum interdum sapien. Vestibulum ultricies erat. Phasellus pulvinar metus et sapien. Aliquam in mauris nec tellus tincidunt sollicitudin.
<br>
  </div>
</div>
</body>

</html>
Avatar billede dp2001 Juniormester
09. maj 2005 - 13:50 #4
virker i IE, ej i Firefox.
Avatar billede roenving Novice
09. maj 2005 - 14:10 #5
Næh umiddelbart forlanger Geckoerne en defineret højde på containeren, men det klares meget nemt:

<table style="width:760px;margin:0 auto;border:0;">
  <tr>
    <td style="width:240px;margin:0;padding:0;">
      Menu</td>
    <td style="width:520px;margin:0;padding:0;">
      Indhold</td>
  </tr>
</table>
Avatar billede dp2001 Juniormester
09. maj 2005 - 14:13 #6
Du har tabt mig! Er jeg nu tvungent til at benytte tabel til opstilling alligevel?

Jeg kunne godt tänke mig at se, hvordan det endelige script i givet fald ser ud - og det med ekstern style sheet.

Hvad med problem nr. 2, har du en lösning på det?
Avatar billede roenving Novice
09. maj 2005 - 14:26 #7
Du mangler i hvert fald at lukke din bannerdiv, mon ikke det kan løse den ?-)

-- og ja, jeg mener at man skal bruge det html-element, som bedst løser en given opgave, og til dette formaål anbefaler W3C entydigt at benytte sig af en tabel !-)
Avatar billede olebole Juniormester
09. maj 2005 - 14:30 #8
<ole>

dp2001 >> hvorfor insisterer du på at undgå en tabel? Du opnår langt bedre kode ved at bruge en tabel i denne situation ... hvorfor så for enhver pris undgå at bruge tabel?

/mvh
</bole>
Avatar billede dp2001 Juniormester
09. maj 2005 - 14:32 #9
Njah, fordi man efterhånden läser alle steder, at man skal bruge CSS til sideopbygning og ikke tabeller, som kun er til data.
Avatar billede roenving Novice
09. maj 2005 - 15:05 #10
Men css og tabeller er ikke hinandens modsætninger ...

En tabel er et html-element, som kan løse forskellige opgaver, en af dem er at fremvise tabulerede data ...

CSS er et sprog, som bruges til at style html-elementer, altså f.eks. tabeller !-)
Avatar billede olebole Juniormester
09. maj 2005 - 15:33 #11
- og så er det ikke noget, man læser 'alle steder', men primært steder, hvor forfatteren har et yderst begrænset kendskab til webkodning ... dog som oftest uden selv at være klar over dette  :)

Det eneste sted, der i den sammenhæng er rigtig interessant - nemlig W3C - læser man ikke den slags misforståelser. Derfor er W3C stedet, man bør hente sine oplysninger ... og så bør man i øvrigt indse, at webkodning er et fag.
At lære at kode ordentligt kræver, man tilbringer hundredevis af timer i W3C's dokumenter - udover den tid, det tager at lære standarderne udenad. Skyder man genvej her, bliver man i bedste fald en middelmådig koder  ;o)
Avatar billede dp2001 Juniormester
09. maj 2005 - 16:04 #12
OK, har fået det hele til at virke efter en del baksen (jeg er sgu ikke engang middelmådig).

Point til roenving, hvis svar.

Takker mange gange.
Avatar billede roenving Novice
09. maj 2005 - 16:10 #13
Velbekomme '-)
Avatar billede roenving Novice
09. maj 2005 - 16:16 #14
-- og 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
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