Avatar billede mtrolle Nybegynder
27. oktober 2005 - 11:42 Der er 12 kommentarer og
2 løsninger

padding og height

hej.

Hvor er jeg led og ked af at browsere ikke opføre sig ens :) Jeg er virkelig hidsig nu ;)
Jeg har besluttet mig for at læse at bruge <div> til alt mit design.

Link: http://mortentrolle.dk/test/
http://mortentrolle.dk/test/css/autumn.css

Følgende problemer har jeg:
1. Padding
Når jeg skriver en padding på p.submenupunkt, kan jeg fint sørger for min tekst står i midten og med det rigtige indryk, men kun i IE. I safari og firefox tager den height og lægger min padding til. Så når jeg laver en padding i toppen gavner det intet, da højden vil følge med.

2. height:
height:100%; er i forhold til container div'en. Fint:
body er 100%
div.main er 100% høj
nu kommer problemet, i main ligger der så div.top og div.page
div.top er 105px høj og div.page skal være 100%-105px; høj. Hvordan gør jeg det?

Et 3. problem er igen i firefox og safari: Når mit indhold i div.page bliver højere end div.main, så følger min baggrund i div.main ikke længere med. Den er kun så høj som browseren er.

Det volder mig virkelig nogle problemer det her :(
Avatar billede notes2c Nybegynder
27. oktober 2005 - 12:23 #1
Hvis du skal have det til at lykkes er du nødt til at starte med at anvende en fuld doctype

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

Så ret den først, så skulle der være en bedre chance for at tingende vil komme til at virke på tværs af browsere...

Så kan vi kigge på evt problemer efterfølgende...
Avatar billede mtrolle Nybegynder
27. oktober 2005 - 12:28 #2
Ja, det skal da så rettes, men det hjalp mig nu ikke så meget :)
Nu er intet 100% længere.
Avatar billede notes2c Nybegynder
27. oktober 2005 - 12:58 #3
Ok, er nødt til lige at kigge lidt på... Kan først vende tilbage i aften... Regner med det er OK...
Avatar billede mtrolle Nybegynder
27. oktober 2005 - 13:07 #4
Naturligvis ;)
Avatar billede roenving Novice
27. oktober 2005 - 17:50 #5
Du kan ikke i css angive en højde til at være 100%-noget ...

-- og ifølge standardens box-model _skal_ margin, border-width og padding tillægges elementets egen højde/bredde for at finde den højde/bredde elementet fylder ialt !-)

-- en metode til at klare det er at arbejde med 'skygge'-elementer, se f.eks. her:

http://www.eksperten.dk/spm/520876 !o]
Avatar billede notes2c Nybegynder
27. oktober 2005 - 19:59 #6
Med udgangspunkt i roenving point, så er dette det tætteste jeg kommer...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Description" content="Test1">
<meta name="Keywords" content="Test1">
<meta name="Author" content="Test1">
<meta name="Reply-to" content="Test1">
<meta name="Title" content="Test1">
<meta http-    equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test1 (exp.dk - 659555)</title>
<base href="http://mortentrolle.dk/test/">
<style type="text/css">
<!--
html {
    height:100%;
}
body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background-color:white;
}
div.main {
    width:799px;
    height:100%;
    min-height:100%;
    border-right:1px solid black;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/bg_fade.gif');
    background-repeat:repeat-x;
    background-color:white;
}
div.top {
    width:799px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/top.gif');
    height:105px;
}
div.menu {
    width:782px;
    height:22px;
    margin-left:9px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/top_menu.gif');
    background-repeat:no-repeat;
    background-color:#875927;
}
p.menu {
    color:white;
    font-weight:bold;
    font-family:Verdana;
    font-size:10px;
    padding-left:10px;
    padding-top:5px;
}
div.page {
    background-color:white;
    width:780px;
    height:100%;
    margin-left:9px;
    border-left:1px solid #9D8B65;
    border-right:1px solid #9D8B65;
}
div.submenu {
    float:left;
    margin:1px;
    width:169px;
    height:auto;
    padding-bottom:45px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/end_submenu.gif');
    background-repeat:no-repeat;
    background-position:bottom;
}
p.submenupunkt {
    margin:0px;
    margin-bottom:1px;
    width:169px;
    height:31px;
    max-width:169px;
    max-height:31px;
    padding:auto;
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    background-color:#F4F1E7;
}
a.submenu {
    color:#875926;
    text-decoration:none;
}

div.content {
    padding-top:31px;
    padding-left:179px;
    padding-right:10px;
    padding-bottom:10px;
}

h1 {
    margin-top:0px;
}
-->
</style>
</head>
<body>
    <div class="main">
        <div class="top"></div>

        <div class="menu">
            <p class="menu">Punkt1 | Punkt2 | Punkt2 | Bøh!</p>
        </div>
        <div class="page">
            <div class="submenu">
                <p class="submenupunkt"></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Mig</a></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Dig</a></p>

                <p class="submenupunkt"><a href="kaster.php" class="submenu">Tilbehør til Dyr</a></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Det kan man ikke sige!</a></p>
            </div>
            <div class="content">
            <h1>Hej hej her er <br/>MOOOOORSEPER!</h1>
            <h1>Hej hej her er <br/>MOOOOORSEPER!</h1>

            </div>
        </div>
    </div>
</body>
</html>
Avatar billede roenving Novice
28. oktober 2005 - 08:46 #7
Hrm, de 100% højde har du så ikke arbejdet med !-)
Avatar billede notes2c Nybegynder
28. oktober 2005 - 08:51 #8
roenving >> Hvad tænker du lige på...
Avatar billede roenving Novice
28. oktober 2005 - 08:58 #9
I http://www.eksperten.dk/spm/520876 ligger den, såvidt jeg ved, eneste måde at få et site til at være 100% i højden uden at skulle bruge javascript ...

-- jeg har ikke fornylig kæmpet med baggrundsproblematikken for alvor, men mener at huske, at den faktisk er uløselig uden javascript-tingene ...

-- den eneste måde at få en container til at være 100%-noget i højden er ved at lave den 100% og så lægge et blindt element bagved det, der skal optage noget af højden !-)
Avatar billede notes2c Nybegynder
28. oktober 2005 - 09:32 #10
Jamen så forstod jeg dig rigtigt, og du har fuldstændig ret... Og mit forslag er heller i perfekt... Så tænker på om en tabel er vejen frem

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Description" content="Test1">
<meta name="Keywords" content="Test1">
<meta name="Author" content="Test1">
<meta name="Reply-to" content="Test1">
<meta name="Title" content="Test1">
<meta http-    equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test1 (exp.dk - 659555)</title>
<base href="http://mortentrolle.dk/test/">
<style type="text/css">
<!--
html {
    height:100%;
}
body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background-color:white;
}
.main {
    width:799px;
    height:100%;
    min-height:100%;
    border-right:1px solid black;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/bg_fade.gif');
    background-repeat:repeat-x;
    background-color:white;
}
div.top {
    width:799px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/top.gif');
    height:105px;
}
div.menu {
    width:782px;
    height:22px;
    margin-left:9px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/top_menu.gif');
    background-repeat:no-repeat;
    background-color:#875927;
}
p.menu {
    color:white;
    font-weight:bold;
    font-family:Verdana;
    font-size:10px;
    padding-left:10px;
    padding-top:5px;
}
div.page {
    background-color:white;
    width:780px;
    height:100%;
    margin-left:9px;
    border-left:1px solid #9D8B65;
    border-right:1px solid #9D8B65;
}
div.submenu {
    float:left;
    margin:1px;
    width:169px;
    height:auto;
    padding-bottom:45px;
    background-image:url('http://mortentrolle.dk/test/imgs/autumn/end_submenu.gif');
    background-repeat:no-repeat;
    background-position:bottom;
}
p.submenupunkt {
    margin:0px;
    margin-bottom:1px;
    width:169px;
    height:31px;
    max-width:169px;
    max-height:31px;
    padding:auto;
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    background-color:#F4F1E7;
}
a.submenu {
    color:#875926;
    text-decoration:none;
}

div.content {
    padding-top:31px;
    padding-left:179px;
    padding-right:10px;
    padding-bottom:10px;
}

h1 {
    margin-top:0px;
}
-->
</style>
</head>
<body>
    <table class="main" cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr><td><div class="top"></div></td></tr>

        <tr><td><div class="menu">
            <p class="menu">Punkt1 | Punkt2 | Punkt2 | Bøh!</p>
        </div></td></tr>
        <tr><td height="100%"><div class="page">
            <div class="submenu">
                <p class="submenupunkt"></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Mig</a></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Dig</a></p>

                <p class="submenupunkt"><a href="kaster.php" class="submenu">Tilbehør til Dyr</a></p>
                <p class="submenupunkt"><a href="kaster.php" class="submenu">Det kan man ikke sige!</a></p>
            </div>
            <div class="content">
            <h1>Hej hej her er <br/>MOOOOORSEPER!</h1>
            <h1>Hej hej her er <br/>MOOOOORSEPER!</h1>

            </div>
        </div></td></tr>
    </table>
</body>
</html>
Avatar billede mtrolle Nybegynder
17. november 2005 - 13:35 #11
notes2c>
Smid et svar, din doctype har hjulpet mig.

roenving>
Smid et svar, du har hjulpet vedr. selve begrebet om boksene :)
Avatar billede roenving Novice
17. november 2005 - 13:36 #12
Velbekomme '-)
Avatar billede notes2c Nybegynder
17. november 2005 - 15:19 #13
Og velbekomme ;-)
Avatar billede roenving Novice
22. november 2005 - 01:28 #14
-- 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