Avatar billede dp2001 Juniormester
08. maj 2005 - 20:30 Der er 3 kommentarer og
1 løsning

Sideopbygning med CSS

Jeg forsøger at skrue et layout sammen med CSS. Ret simpelt....banner, menu (horizontal), undermenu (horizontal) og indholdrude med 2 spalter.

1) Jeg har sat hele siden til at være 804 bred (defineret som attribute: width i <body>), men i IE går det helt galt - kun banneret har denne bredde.

2) Hvordan centrerer jeg alt indhold (elementer, ej tekst) i browseren?

Kode:

<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
    <title>CSS opbygning</title>
</head>
<body>
    <div id='outline'>
        <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...
                </div>
            </div>               
            <div id='spalte2'>
                <div id='spalte2-indhold'>
                    Spalte 2
                </div>
            </div>           
        <img src='images/450h.gif'>
        </div>
    </div>
</body>
</html>

CSS:

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

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

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

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

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

#content {
    padding: 0pt;
}

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

#spalte2 {
    margin: 0pt;
    padding: 0pt;
    background-color: #EEEEEE;
    float:left;
    width: 15%;
}

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

#spalte2-indhold {
    margin: 0pt;
    padding: 2pt;
    background-color: #EEEEEE;
}

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

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

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

#supernav a:hover
{
    color: #CCDDEE;
    background: #DDDDDD;
    border: 0pt;
}
Avatar billede olebole Juniormester
08. maj 2005 - 21:28 #1
<ole>

For det første skal du have en DTD før dit <html> tag ... og den skal indeholde en definitions-URL, da IE ellers ikke kan bruge CSS. F.eks:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Derudover må kun værdien 0 stå uden enheder. Det hedder med andre ord: 'width: 804px;' og 'padding: 20px;'

Et element kan centreres med 'margin: 0 auto'

/mvh
</bole>
Avatar billede dp2001 Juniormester
08. maj 2005 - 22:29 #2
Well, den er nu stadig mere end 800px bred i IE.

Koden som den ser ud nu...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
    <title>CSS opbygning</title>
</head>
<body>
    <div id='outline'>
        <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...
                </div>
            </div>               
            <div id='spalte2'>
                <div id='spalte2-indhold'>
                    Spalte 2
                </div>
            </div>           
        <img src='images/450h.gif'>
        </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: 802px;
}

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

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

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

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

#content {
    padding: 0pt;
}

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

#spalte2 {
    margin: 0pt;
    padding: 0pt;
    background-color: #EEEEEE;
    float:left;
    width: 15%;
}

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

#spalte2-indhold {
    margin: 0pt;
    padding: 2pt;
    background-color: #EEEEEE;
}

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

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

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

#supernav a:hover
{
    color: #CCDDEE;
    background: #DDDDDD;
    border: 0pt;
}
Avatar billede dp2001 Juniormester
08. maj 2005 - 22:31 #3
Sorry, havde fået trunkeret noget af DTD'en.

Works! Takker mange gange! Smider du et svar?
Avatar billede olebole Juniormester
08. maj 2005 - 22:46 #4
- selvtak  :)
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