Avatar billede qualon1 Nybegynder
14. september 2007 - 13:49 Der er 8 kommentarer

Hjælp til fuld side design

Hej

Jeg har prøvet at lave et design efter følgende skabelon:
http://work.qualon.dk/design%20template.jpg

Mit problem ligger i at jeg ikke kan få den nederste boks i højre side til at være knyttet til bunden, som skal være i bunden af browseren. Designet skal altså være ligeså høj som browseren kan, og hvis indholdet er størrer, så skal den flytte bunden nedad indtil der er plads. Jeg har brugt min bedste CSS og HTML kunnen, men skidtet vil bare ikke låse sig i bunden.

Nogen der kan hjælpe med at skrive en hurtig kode?
Avatar billede jhe-ting Nybegynder
14. september 2007 - 14:28 #1
Hvid du lige viser hvad du har prøvet, bliver det lettere at hjælpe...
Avatar billede qualon1 Nybegynder
14. september 2007 - 14:43 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   
    <meta http-equiv="Content-Language" content="da" />
    <link href="/style.css" rel="stylesheet" type="text/css"></link>
    <title></title>
    <style>
HTML, BODY {
    background: #EBEBF1;
    margin: 0px;
    text-align:center;
    height: 100%;
font-family: verdana;
font-size: 12px;
}
#container {
    margin: 0 auto;
    width: 900px;
    height: 100%;
    background: #ffffff;
}
div#footer {
    height: 91px;
    width: 900px;
background: #ffffff url('footer_background.gif') no-repeat bottom left;
}

#maincontainer {
    height: 90%;
}
#header {
    margin: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}
#right {
    width: 207px;
    float: right;
    padding-right: 33px;
    height: 75%;
}
#right .adress {
    color: #BD3A86;
    text-align: right;
line-height: 150%;
padding-right: 13px;
margin-top: 30px;
}
#left {
    width: 167px;
    float: left;
    padding-left: 33px;
    text-align:left;
}
#content {
    width: 450px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    text-align:left;
}
h1.header_quote {
    color: #5E5F61;
    font-size: 30px;
    font-weight: normal;
}

#newsbox .top {
    width: 183px;
    height: 47px;
    background: url('news_top.gif');
}
#newsbox .middle {
    width: 173px;
    padding: 5px;
    padding-bottom: 10px;
    background: url('news_middle.gif');
    text-align:left;
}
#newsbox ul {
    padding: 10px;
    margin: 0px;
    list-style-type: none;
}
#newsbox li {
    padding-bottom: 14px;
}
#newsbox a:link {
color: #000000;
text-decoration: none;
}
#newsbox a:visited {
color: #000000;
text-decoration: none;
}
#newsbox a:hover {
color: #000000;
text-decoration: underline;
}
#content h1 {
    font-size: 30px;
}
#content p {
    padding-bottom: 10px;
}
#left {
line-height: 135%;
}
#left ul {
    padding: 0px;
    padding-left: 10px;
    margin: 0px;
    list-style-type: none;
}
#left li {
    padding: 3px;
}
#left a:link {
    text-decoration: none;
    color: #000000;
}
#left a:visited {
    text-decoration: none;
    color: #000000;
}
#left a:hover {
    text-decoration: underline;
    color: #000000;
}
#left a.current {
    color: #BD3A86;   
}
#left .searcharea {
    margin-top: 40px;
}

input {
    border: 1px solid #000000;
}
    </style>
    </head>
   
    <body>
        <div id="container">
            <div id="maincontainer">
                <div id="header">
                    <table cellspacing="0" cellpadding="0" width="100%">
                        <tr>
                            <td width="50%" rowspan="2" align="left"><img src="header_logo.gif" style="margin: 10px;" /></td>
                            <td width="50%" align="right" valign="top" style="padding-right: 23px;"><img alt="quote" src="header_quote.gif" />
                            <h1 class="header_quote">Dette er et citat der kunne være 2 linjer</h1></td>
                        </tr>
                    </table>
                </div>
               
                <div id="left">
                    <ul>

                        <li><a href="/cms/3/startside.html">Startside</a></li>
                        <li><a href="/cms/4.html">Inspiration</a></li>
                        <li><a href="/cms/8.html">Hent materiale</a></li>
                        <li><br></li><li><a href="/cms/5.html">Økonomi</a></li>
                        <li><a href="/cms/6.html">Hvem er vi</a></li>
                        <li><a href="/cms/10.html">Kontakt os</a></li>
                        <li><a href="/cms/9.html">Kundelogin</a></li>
                    </ul>
                    <div class="searcharea">
                    <form action="">
                        <input type="text" name="searchword" style="width: 100px;" value="Søgeord.." onfocus="if(this.value=='Søgeord..')this.value='';" onblur="if(this.value=='')this.value='Søgeord..';" /><br />
                        <input type="submit" value="Søg" />
                        </form>
                    </div>
                </div>
                <div id="content">
                   
                </div>
                <div id="right">
   
                    <div id="newsbox">
                        <div class="top"></div>
                        <div class="middle">
                            <ul>
                            <li><a href="/articles/showarticle/5/Support+i+hverdagen.html">Support i hverdagen</a></li>
                            <li><a href="/articles/showarticle/4/Vista+og+EfterskoleIT.html">Vista</a></li>
                            <li><a href="/articles/showarticle/3/Nyt+samarbejde.html">Nyt samarbejde</a></li>

                            </ul>
                        </div>
                    </div>

                    <div class="adress">
                        ADRESSE INFORMATION
                    </div>

                   
                </div>

               
            </div>
            <div id="footer">&nbsp;</div>
        </div>
    </body>
</html>
Avatar billede jhe-ting Nybegynder
14. september 2007 - 17:35 #3
Der er en del validerings fejl. Din kode ligner mere HTML end XHTML. Der er færre fejl at rette hvis du bruger denne ærklæring i starten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >


Så har du:

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

der refererer til et eksternt style-sheet; hvordan ser det ud?
Avatar billede qualon1 Nybegynder
14. september 2007 - 18:01 #4
den style.css indeholder kun nogle styles til noget af indholdet, ingenting med designet at gøre.
Avatar billede jhe-ting Nybegynder
15. september 2007 - 01:09 #5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Ekselpel til spm/796385</title>
<script type="text/javascript"><!--
window.onload = function(){
        with (document) {
        getElementById("h1Title").appendChild(createTextNode(title));
      }
}
//--></script>
<style type="text/css">
html,body{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    text-align:center;
}
tr,td{
    margin:0;
    border:0;
}

#container {
    height:100%;
    width:100%;
    text-align:left;
    margin:0px;
    padding:10px;
    border:0;
    border-collapse:collapse;
}
#banner{
    height:91px;
    width:900px;
    text-align:center;
    background:#4080ff;
}
#bannerMinWidth{
    width:900px;
    height:0px;
}
#left{
    width:200px;
    text-align:left;
    padding-left:5px;
    vertical-align:top;
    background:#80c0ff;
}
#content{
    vertical-align:top;
    background:#f0f0ff;
}
#contentMinWidth{
    width:460px;
    height:1px;
}
#rightTop{
    width:240px;
    text-align:right;
    padding-right:10px;
    background:#40ff80;
}
#rightBottom{
    height:70px;
    text-align:center;
    background:#ff4080;
}
#footer{
    height:46px;
    background:#4080ff;
    text-align:center;
}
</style>
</head>
<body>
<table id="container" border=0>
  <tr>
    <td colspan="3" id="banner"><h1 id="h1Title"></h1><div id="bannerMinWidth">&nbsp;</div>
</td></tr>
  <tr id="midHi">
    <td rowspan="2" id="left">Left</td>
    <td rowspan="2" id="content"><div id="contentMinWidth">&nbsp;</div>
      Her er hovedinholdet, hvor der nok skal stå en hel del tekst og meget andet.
      Her er hovedinholdet, hvor der nok skal stå en hel del tekst og meget andet.
      Her er hovedinholdet, hvor der nok skal stå en hel del tekst og meget andet.
    </td>
    <td            id="rightTop">rightTop:<br>111111111111<br>111111111111<br>111111111111</td>
  </tr>
  <tr id="midLo">
    <td            id="rightBottom">rightBottom</td>
  </tr>
  <tr>
    <td colspan="3" id="footer">Footer</td></tr>
</table>
</body>
</html>
Avatar billede qualon1 Nybegynder
15. september 2007 - 10:11 #6
det virker umiddelbart okay i firefox, men i IE passer de angivne breder ikke
Avatar billede jhe-ting Nybegynder
15. september 2007 - 17:46 #7
Ups - det kan jeg da godt se...
Avatar billede qualon1 Nybegynder
18. september 2007 - 15:18 #8
har du en ide til hvordan det kan løses?
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