Avatar billede lylover Nybegynder
05. maj 2007 - 15:33 Der er 58 kommentarer og
1 løsning

HTML/css fil virker ikk i FF og Opera?

Hej alle sammen :)

Jeg har et design (Tak til thesurfer fordi han vill lave det for mig!) men der er noget galt..
Det virker ikk i FF og opera?
Hva gør jeg galt ;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
height:100%;
background-color:#000000;
}

div
{
    padding:0px;
    margin:0px;
}

#outerbounds
{
border:1px solid #ffff00;
padding:2px;
width:760px;
height:100%;
position:absolute;
left:235px;
background-color:#ff0000;
}

    #bannerarea
    {
    width:100%;
    height:145px;
    background-color:#00ff00;
    padding:0px;
    margin:0px;
    text-align:center;
    vertical-align:middle;
    }

    #toparea
    {
    text-align:center;
    background-color:#0000ff;
    padding:0px;
    margin:0px;
    }

#menumain
{
height:100%;
}

    #menuarea
    {
    border:0px solid #ff0000;
    padding:2px;
    float:left;
    width:160px;
    height:100%;
    background-color:#ffff00;
    padding:0px;
    margin:0px;
    }
       
        #menu1
        {
        background-color:#a2a2a2;
        }
       
        #menu2
        {
        background-color:#c2c2c2;
        }
       
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {
    border:0px solid #ff0000;
    padding:0px;
    height:100%;

    background-color:#00ffff;
    }

        #main
        {
        float:left;
        clear:right;
        width:437px;
        height:100%;
        background-color:#f0a0ff;
        padding:0px;
        margin:0px;
        }

        #mainright
        {
        float:left;
        clear:right;
        width:160px;
        height:100%;
        background-color:#a0f0a0;
        padding:0px;
        margin:0px;
        }

#bottomarea
{
float:left;
width:100%;
text-align:center;
background-color:#f0f0f0;
}
</style>

<style type="text/css">
#grouptop
{
height:165px;
}

#groupmenumain
{
height:100%;
width:100%;
}

#groupbottom
{
height:20px;
}
</style>
</head>

<body>


<div id="outerbounds">

    <div id="grouptop">

        <div id="bannerarea">banner</div>

        <div id="toparea">top</div>

    </div>

    <div id="groupmenumain">

        <div id="menumain">

            <div id="menuarea">
                <div id="menu1">menu1</div>
                <div id="menu2">menu2</div>
                <div id="menu3">menu3</div>
            </div>

            <div id="mainarea">
                <div id="main">main</div>
                <div id="mainright">mainright</div>
            </div>

        </div>
       
    </div>

    <div id="groupbottom">

        <div id="bottomarea">bottom</div>

    </div>

</div>

</body>
</html>

Mvh. Lylover
Avatar billede mclemens Nybegynder
05. maj 2007 - 16:15 #1
height:100%; i css medfører fastlåsning
til 100% i højden, så elementer ikke kan
udvide sig i IE7+ samt andre browsere.

Prøv at slette height:100%; eller
skrive min-height:100%; istedet.

(^alle steder med height:100%;)
Avatar billede lylover Nybegynder
05. maj 2007 - 16:32 #2
Hey mclemens :)

tak for svaret..

Men jeg har lige et sidste spørgsmål,
jeg vil gerne gøre designet centreret, ved du/eller nogle andre hvordan man gør?
Avatar billede mclemens Nybegynder
05. maj 2007 - 16:41 #3
#outerbounds
{
border:1px solid #ffff00;
padding:2px;
width:760px;

position:absolute;
left:235px;
background-color:#ff0000;
}

->

#outerbounds {
border:1px solid #ffff00;
padding:2px;
width:760px;

margin:0 auto;
background-color:#ff0000;
}
Avatar billede mclemens Nybegynder
05. maj 2007 - 16:44 #4
"Tak for svaret.."
Her er lige et hvis
det kunne bruges. :o)
Avatar billede lylover Nybegynder
05. maj 2007 - 16:52 #5
mclemens - Bare rolig, hvade ikke tænkt mig at lade være med at give point ;)

Var bare lige den eneste måde jeg kunne sige tak for ;)

-Også havde jeg jo også lige et andet spørgsmål..

Men du får ihvertfald point!
Avatar billede lylover Nybegynder
05. maj 2007 - 16:54 #6
Glemte lige noget.. Nu gjorde du det gennemsigtigt altså outerbounds.. Det skal det helst ikk være? Hvordan retter jeg det?
Avatar billede lylover Nybegynder
05. maj 2007 - 17:06 #7
Nu er der midt i det hele helt gennemsigtigt, sådan man kan se baggrund..
Avatar billede mclemens Nybegynder
05. maj 2007 - 17:06 #8
05/05-2007 16:52:29 - Forstod det jeg quotede
som en opfordring til at kaste et svar sammen
med svaret på ønsket om en centrering.

Glemte at kaste et svar sammen med det,
men misforstod så den del af kommentaren ;)
- Tak for point :)

...

Gennemsigtig outerbounds ?
Umiddelbart er den ikke gennemsigtig her
- Hvilken farve har den hos dig ?





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body
{
margin:0px;
padding:0px;

background-color:#000000;
}

div
{
    padding:0px;
    margin:0px;
}

#outerbounds
{
border:1px solid #ffff00;
padding:2px;
width:760px;
margin:0 auto;
background-color:#ff0000;
height:500px;
}

    #bannerarea
    {
    width:100%;
    height:145px;
    background-color:#00ff00;
    padding:0px;
    margin:0px;
    text-align:center;
    vertical-align:middle;
    }

    #toparea
    {
    text-align:center;
    background-color:#0000ff;
    padding:0px;
    margin:0px;
    }

#menumain
{

}

    #menuarea
    {
    border:0px solid #ff0000;
    padding:2px;
    float:left;
    width:160px;
   
    background-color:#ffff00;
    padding:0px;
    margin:0px;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
     
        #menu2
        {
        background-color:#c2c2c2;
        }
     
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {
    border:0px solid #ff0000;
    padding:0px;
   

    background-color:#00ffff;
    }

        #main
        {
        float:left;
        clear:right;
        width:437px;
       
        background-color:#f0a0ff;
        padding:0px;
        margin:0px;
        }

        #mainright
        {
        float:left;
        clear:right;
        width:160px;
       
        background-color:#a0f0a0;
        padding:0px;
        margin:0px;
        }

#bottomarea
{
float:left;
width:100%;
text-align:center;
background-color:#f0f0f0;
}
</style>

<style type="text/css">
#grouptop
{
height:165px;
}

#groupmenumain
{

width:100%;
}

#groupbottom
{
height:20px;
}
</style>
</head>

<body>


<div id="outerbounds">

    <div id="grouptop">

        <div id="bannerarea">banner</div>

        <div id="toparea">top</div>

    </div>

    <div id="groupmenumain">

        <div id="menumain">

            <div id="menuarea">
                <div id="menu1">menu1</div>
                <div id="menu2">menu2</div>
                <div id="menu3">menu3</div>
            </div>

            <div id="mainarea">
                <div id="main">main</div>
                <div id="mainright">mainright</div>
            </div>

        </div>
     
    </div>

    <div id="groupbottom">

        <div id="bottomarea">bottom</div>

    </div>

</div>

</body>
</html>
Avatar billede mclemens Nybegynder
05. maj 2007 - 17:08 #9
(i ovenstående lagde jeg en height
på for at man kunne se baggrunden)

Umiddelbart kan det lyde til at
du har glemt at kopiere margin:0 auto;
over med ;-et så der kun står:

margin:0 auto
background-color:#ff0000;

- På den måde tager browseren ikke
baggrunden med i dens css beregning.
Avatar billede lylover Nybegynder
05. maj 2007 - 18:43 #10
Så er jeg her lige igen med et par problemer..

www.zipen.tii.dk/designrettes.html

Der er et par problemer
-Den nederste linje med copyright er ikke helt nede, og jeg kan ikk få den helt ned.. Imellem main også der hvor der står Velkommen til Zipen! Er der et lille bitte hul, det skal lukkes.. Også er der op ved banneret, der går der lidt farve rundt om det hele, og det skal ikk være der.. Det skal væk!

Selve koden ser lige nu sådan her ud ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
min-height:100%;
background-image: url("design/pattern4.png");
}

div
{
    padding:0px;
    margin:0px;
}

#outerbounds
{
border:1px solid #ffff00;
padding:2px;
width:760px;
margin:0 auto;
background-color:#CC9966;
height:500px;
}


    #bannerarea
    {
    width:100%;
    min-height:145px;
    background-image: url("design/banner.gif");
    padding:0px;
    margin:0px;
    text-align:center;
    vertical-align:middle;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    padding:0px;
    margin:0px;
    }

#menumain
{
min-height:100%;
}

    #menuarea
    {
    border:0px solid #ff0000;
    padding:2px;
    float:left;
    width:160px;
    min-height:100%;
    background-color:#FFCC33;
    padding:0px;
    margin:0px;
    }
       
        #menu1
        {
        background-color:#a2a2a2;
        }
       
        #menu2
        {
        background-color:#c2c2c2;
        }
       
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {
    border:0px solid #FF9900;
    padding:0px;
    height:100%;

    background-color:#FFCC33;
    }

        #main
        {
        float:left;
        clear:right;
        width:437px;
        min-height:100%;
        background-color:#FFCC33;
        padding:0px;
        margin:0px;
        }

        #mainright
        {
        float:left;
        clear:right;
        width:160px;
        min-height:100%;
        background-color:##FFFF00;
        padding:0px;
        margin:0px;
        }

#bottomarea
{
float:left;
width:100%;
text-align:center;
background-image: url("design/topm.gif");
}
</style>

<style type="text/css">
#grouptop
{
min-height:165px;
}

#groupmenumain
{
min-height:100%;
width:100%;
}

#groupbottom
{
min-height:20px;
}
</style>
</head>

<body>
&nbsp;&nbsp;&nbsp;
<div id="outerbounds">
  <div id="grouptop">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
  </div>
  <div id="groupmenumain">
    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Menu:</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      </div>
      <div id="mainarea">
        <div id="main">
          <p>main</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="mainright">mainright </div>
      <div id="groupbottom">
    <div id="bottomarea">Copyright by Zipen.dk - All rights reserved! </div>
  </div>
</div>
</body>
</html>
Avatar billede mclemens Nybegynder
05. maj 2007 - 20:27 #11
Nu har height 100% løsninger altid drillet, men hvad med:





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/pattern4.png");}


#outerbounds {
width:760px;
margin:0 auto;
background-color:#FFCC33;
height:100%;position:relative;
}

body>#outerbounds {
height:auto;min-height:100%;
}



#tops {position:absolute;top:0;left:0;width:100%;height:170px;background:#c96;z-index:5;}

    #bannerarea
    {
    width:100%;
    min-height:145px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:170px;width:100%;background:#FFCC33;}

#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:0px;width:100%;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
     
        #menu2
        {
        background-color:#c2c2c2;
        }
     
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFCC33;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
</style>
</head>
<body><div id="outerbounds">


<div id="tops">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Menu:</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      </div>
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
        </div>
        <div id="mainright">mainright </div>
      </div>
<div id="spacerdiv">&nbsp;</div>
</div>

<div id="footer">Copyright by Zipen.dk - All rights reserved!</div>

</div></div>

</div></body></html>
Avatar billede mclemens Nybegynder
05. maj 2007 - 20:29 #12
^ Bygget på denne:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}

#tops{position:absolute;top:0px;left:0px;background:#aaa;height:100px;width:100%;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:100px;width:100%;}

#footer,#spacerdiv{height:100px;}
#footer{position:absolute;bottom:0px;left:0px;background:#aaa;width:100%;}
#spacerdiv{clear:both;width:100%;}

#bil{float:left;width:200px;background:#555;}
#bim{background:#666;}
#bir{float:right;width:200px;background:#777;}
</style>
</head>
<body>


<div id="tops">Test</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="bil">est<br>test<br>test slut<br></div>
<div id="bir">test</div>
<div id="bim">test</div>
<div id="spacerdiv">&nbsp;</div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>
Avatar billede lylover Nybegynder
05. maj 2007 - 20:33 #13
mclemens - Hvorfor ahr du lavet 2 indlæg? Hvad er;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}

#tops{position:absolute;top:0px;left:0px;background:#aaa;height:100px;width:100%;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:100px;width:100%;}

#footer,#spacerdiv{height:100px;}
#footer{position:absolute;bottom:0px;left:0px;background:#aaa;width:100%;}
#spacerdiv{clear:both;width:100%;}

#bil{float:left;width:200px;background:#555;}
#bim{background:#666;}
#bir{float:right;width:200px;background:#777;}
</style>
</head>
<body>


<div id="tops">Test</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="bil">est<br>test<br>test slut<br></div>
<div id="bir">test</div>
<div id="bim">test</div>
<div id="spacerdiv">&nbsp;</div>
</div>

<div id="footer">Test</div>

</div></div>

</body></html>



..Hva skal den bruges til?
Avatar billede mclemens Nybegynder
05. maj 2007 - 20:37 #14
"mclemens - Hvorfor ahr du lavet 2 indlæg? Hvad er; "
For at vise dig grundstrukturen, jeg kastede elementerne
ind i den og omdøbte nogle - med andre ord, hvis du ville
nørde rundt på det i 05/05-2007 20:27:54 senere, kunne du
kigge på hvordan den var bygget op uden en masse elementer.

Kig på 05/05-2007 20:27:54 istedet ;)
Avatar billede lylover Nybegynder
05. maj 2007 - 20:41 #15
Ok Mclemens :) Men den virker vist ikke, ikke helt korrekt i ff ihvertfald.. Det er lidt mærkeligt? :S

'main' er under min menu, den skal jo være i midten?
Avatar billede mclemens Nybegynder
05. maj 2007 - 20:51 #16
Hvis jeg kører 05/05-2007 20:27:54 som den
står - er main i midten og ikke under menu ?
Vær opmærksom på at hvis du tilføjer padding, border eller andet skal du reducere de omkringliggende elementers width så elementerne stadig kan stå på linje - ellers hopper de ned under hinanden. Hvis du har ændret ved 05/05-2007 20:27:54 så kast det du har, hvis ikke så hvilken FF version bruger du ? Og hjælper det at opdatere ?
Avatar billede lylover Nybegynder
05. maj 2007 - 20:55 #17
Nu virker det også ved mig ;)

Nu er der kun et problem tilbage, den viser ikke banneret, den viser kun lige lidt af det .. Men jeg prøver lige at uploade, så kan du selv se ;)
Avatar billede lylover Nybegynder
05. maj 2007 - 20:58 #18
http://www.zipen.tii.dk/designrettes.html

Sådan :)  DU kan selv se problemet.. og selve banneret ligger ved www.zipen.tii.dk/design/banner.gif
Avatar billede mclemens Nybegynder
05. maj 2007 - 21:22 #19
Den oprindelige du havde var 760px bred,
derfor lavede jeg også den nye 760px bred.
Ret width i outerbounds til 800px hvilket
er den størrelse som dit banner har.

- Øg evt. width på menu / main sektioner
så de bruger de forøgede 40px width tilsammen.
Avatar billede mclemens Nybegynder
05. maj 2007 - 21:24 #20
Og så var banneret en tand højere så tops height og
et par andre elementer skulle have øget deres height.

css:






html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/pattern4.png");}


#outerbounds {
width:800px;
margin:0 auto;
background-color:#FFCC33;
height:100%;position:relative;
}

body>#outerbounds {
height:auto;min-height:100%;
}



#tops {position:absolute;top:0;left:0;width:100%;height:196px;background:#c96;z-index:5;}

    #bannerarea
    {
    width:100%;
    min-height:176px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:196px;width:100%;background:#FFCC33;}

#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:0px;width:100%;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
     
        #menu2
        {
        background-color:#c2c2c2;
        }
     
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFCC33;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
Avatar billede lylover Nybegynder
05. maj 2007 - 21:30 #21
100 % tak !

Du har været en rigtig rigtig stor hjælp !
Hvis du nogensinde har brug for en tjeneste så sig til !
Avatar billede mclemens Nybegynder
05. maj 2007 - 21:35 #22
Velbekomme, jeg skal nok
lave et spørgsmål så ;)
Avatar billede lylover Nybegynder
05. maj 2007 - 21:37 #23
Har lige et aller aller aller sidste spørgsmål, dette bliver (jeg lover)! det sidste..

Jeg vil gerne have en ramme om hele siden
#rammeh
    {
    width:100%;
    min-height:176px;
    background-image: url("design/rammeh.gif");
    text-align:center;
    }
#rammev
    {
    width:100%;
    min-height:176px;
    background-image: url("design/rammev.gif");
    text-align:center;
    }

Men den skal så sættes helt ud, hvad er den kode?
Avatar billede mclemens Nybegynder
05. maj 2007 - 21:59 #24
Må jeg se rammen ?
Avatar billede mclemens Nybegynder
05. maj 2007 - 22:00 #25
Eller rettere hvad bredde har den ?
Avatar billede lylover Nybegynder
05. maj 2007 - 22:11 #26
Jeg gir et link til imorgen..

Går i seng, skal op kl. 5, skal ud og gå med aviser
Avatar billede lylover Nybegynder
06. maj 2007 - 11:20 #27
Hej :)

Så er den gal igen,
denne gang har jeg sat login boks ind.. Og det er sådan set det, og har self. også sat nogle flere menuer i..
Men nu er banneret væk igen, og login boksen er der noget galt i..

Der er noget galt i både IE og FF ..

Min nuværende kode er;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/pattern4.png");}


#outerbounds {
width:800px;
margin:0 auto;
background-color:#FFCC33;
height:100%;position:relative;
}

body>#outerbounds {
height:auto;min-height:100%;
}



#tops {position:absolute;top:0;left:0;width:100%;height:196px;background:#c96;z-index:5;}

    #bannerarea
    {
    width:100%;
    min-height:176px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:196px;width:100%;background:#FFCC33;}

#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:0px;width:100%;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
        #menu2
        {
        background-color:#c2c2c2;
        } 
     
        #menu3
        {
        background-color:#c2c2c2;
        }
     
        #menu4
        {
        background-color:#e2e2e2;
        }
        #menu5
        {
        background-color:#e2e2e2;
        }
        #menu6
        {
        background-color:#e2e2e2;
        }
        #menu7
        {
        background-color:#e2e2e2;
        }
        #menu8
        {
        background-color:#e2e2e2;
        }
        #menu9
        {
        background-color:#e2e2e2;
        }
        #menu10
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFFFFF;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
</style>
</head>
<body><div id="outerbounds">


<div id="tops">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Zipen</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      <div id="menu4">Redaktionen</div>
      <div id="menu5">Konkurrencer</div>
      <div id="menu6"><b>Habbo</b></div>
      <div id="menu7">Galleri</div>
      <div id="menu8">Guides</div>
      <div id="menu9">Diverse</div><br><br><br>
      <div id="menu9">Login<form action="comm.php?mode=login" method="post">
    <table>
  <tr><td width="7%">B:</td><td><input type="text" name="user" class="field"></td></tr>
  <tr><td width="7%">P:</td><td><input type="password" name="pass" class="field"></td></tr>
    "<tr><td></td><td><input type="submit" value="Login"> <input type="checkbox" name="auto" value="true">Autologin</td></tr>
    </table></form><br>

   
    <a href=\"?mode=opret\">Opret bruger</a><br /></div>
      </div>
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
        </div>
        <div id="mainright"> mainright </div>
      </div>
<div id="spacerdiv">&nbsp;
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>

<div id="footer">Copyright by Zipen.dk - All rights reserved!</div>

</div></div>

</div></body></html>
Avatar billede mclemens Nybegynder
06. maj 2007 - 11:38 #28
1. Hvorfor har du sat 3x <p>&nbsp;</p> i spacerdiv ?
- Fjern dem og brug de 3 elementer (main/mainright
og menu) til at placere dit indhold i.

2. Banneret vises fint her i både IE og FF ?

3. Din form, tjah du skal nok lave dine input
elementer mindre med style="width:noglepx;"
evt. fjerne margin på form'en eller andet.

Hvis du vil udbygge med borders i billeder
så kan du arbejde videre på denne her:



<!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">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/pattern4.png");}

#outerbounds {
width:820px;background:#FFCC33;
height:100%;position:relative;margin:0 auto;
}


body>#outerbounds {
height:auto;min-height:100%;
}





#tops {position:absolute;top:0;left:10px;width:800px;height:196px;background:#c96;z-index:5;}
#spctop {height:196px;}

    #bannerarea
    {
    width:100%;
    min-height:176px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}




#nybodyindre{position:relative;width:810px;height:100%;padding-left:10px;
background: url("http://www.eksperten.dk/img/flag_green.gif") left top repeat-y;}





#nybodyydre>#nybodyindre{min-height:100%;height:auto;}


#nybody{position:relative;width:800px;padding-right:10px;
background: url("http://www.eksperten.dk/img/flag_blue.gif") #FFCC33 right top repeat-y;}


#rborderfix {position:absolute;right:0px;height:100%;width:10px;
background: url("http://www.eksperten.dk/img/flag_blue.gif") right top repeat-y;}


#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:10px;width:800px;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
     
        #menu2
        {
        background-color:#c2c2c2;
        }
     
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFFFFF;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
</style></head><body><div id="outerbounds"><div id="rborderfix"></div>


<div id="tops">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="spctop"></div>
    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Menu:</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      </div>
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
        </div>
        <div id="mainright">mainright</div>
      </div>
<div id="spacerdiv">&nbsp;</div>
</div>

<div id="footer">Copyright by Zipen.dk - All rights reserved!</div>

</div></div>

</div></body></html>
Avatar billede lylover Nybegynder
06. maj 2007 - 11:54 #29
Hej Mclemens..

Banneret virker ikke i IE, tjek selv http://www.zipen.tii.dk/designrettes.html ..

Og jeg har fjernet  de der ting i space div.. Aner ikk hvorfor jeg satte dem :?
Avatar billede lylover Nybegynder
06. maj 2007 - 11:57 #30
OG det der med formen som du siger forstår jeg ikk?

Jeg skal sætte en style="width=px"
og så slette margin?
Avatar billede mclemens Nybegynder
06. maj 2007 - 12:16 #31
style="width=px" <- Det skrev jeg ikke...
style="width:70px" - Bemærk : ikke =
Og den kaster du så på input felter.

M.h.t. at menuen hopper ned skal du
nok kigge på (såfremt det er en fejl):
<div id="menu9">Diverse</div><br><br><br>

"Banneret virker ikke i IE, tjek selv"
- Skulle over på en IE6 (bruger 7).
IE6 understøtter ikke min-height, så
ret lige det til height, bemærk ret kun:

min-height:176px;
->
height:176px;

Umiddelbart må det være noget du har ændret siden
05/05-2007 17:06:17 når jeg kigger tilbage, sikkert
som følge af 05/05-2007 16:15:34, men det er dog kun
dem med height:100%; der lige skulle rettes rundt og
kun i den oprindelige kode, ikke i den jeg kastede.
Avatar billede lylover Nybegynder
06. maj 2007 - 12:23 #32
Hvis banneret virker i V.7 og opefter så  beholder jeg det med min-height :)
Og medhensyn til login den passer OGSÅ nu ;) Pga. det med px..
-Jeg syntes jeg lærer mere og mere :)

Btw. nu mangler kun rammen, men den er jeg ikk i besiddelse af endnu, så jeg vender lige tilbage..

Btw. nu har du hjulpet såå meget så er det muligt at jeg kan give dig flere points?
Avatar billede lylover Nybegynder
06. maj 2007 - 12:28 #33
Nu er jeg her..

Og rammen har; width: 34 px ,  height: 390 :)
Avatar billede lylover Nybegynder
06. maj 2007 - 12:30 #34
Det er så til venstre side, den til højre er; width: 44 px og height: 414
Avatar billede mclemens Nybegynder
06. maj 2007 - 12:49 #35
"Hvis banneret virker i V.7 og opefter så  beholder jeg det med min-height :)"
Det forstår jeg ikke, designet er bygget så du alligvel skal genjustere 176px
alle steder, hvis banneret bliver højere eller lavere, med andre ord - grunden
til at det er så indviklet er for at få IE6 med også - og at rette min-height
til height det ene sted berører igenting, udover at IE6 også kan være med.

"Btw. nu har du hjulpet såå meget så er det muligt at jeg kan give dig flere points?"
Sagtens, husk max 200 point reglen for en point tildeling.

"Og rammen har; width: 34 px ,  height: 390 :)"
"Det er så til venstre side, den til højre er; width: 44 px og height: 414"

Så kan du bygge videre på denne istedet:


<!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">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/pattern4.png");}

#outerbounds {
width:878px;background:#FFCC33;
height:100%;position:relative;margin:0 auto;
}


body>#outerbounds {
height:auto;min-height:100%;
}





#tops {position:absolute;top:0;left:44px;width:800px;height:196px;background:#c96;z-index:5;}
#spctop {height:196px;}

    #bannerarea
    {
    width:100%;
    min-height:176px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}




#nybodyindre{position:relative;width:834px;height:100%;padding-left:44px;
background: url("v.jpg") left top no-repeat;}





#nybodyydre>#nybodyindre{min-height:100%;height:auto;}


#nybody{position:relative;width:800px;padding-right:34px;
background: url("h.jpg") #FFCC33 right top repeat-y;}


#rborderfix {position:absolute;right:0px;height:100%;width:34px;
background: url("h.jpg") right top no-repeat;}


#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:44px;width:800px;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
     
        #menu2
        {
        background-color:#c2c2c2;
        }
     
        #menu3
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFFFFF;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
</style></head><body><div id="outerbounds"><div id="rborderfix"></div>


<div id="tops">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div id="spctop"></div>
    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Menu:</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      </div>
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
        </div>
        <div id="mainright">mainright</div>
      </div>
<div id="spacerdiv">&nbsp;</div>
</div>

<div id="footer">Copyright by Zipen.dk - All rights reserved!</div>

</div></div>

</div></body></html>



- Hvis den gule baggrund ikke er ønsket kan du rette:

#outerbounds {
width:878px;background:#FFCC33;
height:100%;position:relative;margin:0 auto;
}

til

#outerbounds {
width:878px;background:url('baggrund.jpg') 44px 0 repeat-y;
height:100%;position:relative;margin:0 auto;
}

og så lave en baggrund.jpg på 800px bredde evt. blot
med 1px højde og så baggrundsfarven til selve siden.

v og h.jpg udskiftes med stier til rammer, jeg
har kastet no-repeat på istedet for repeat-y.
Avatar billede lylover Nybegynder
06. maj 2007 - 12:55 #36
Hey..

nu har jeg jo siddet og lavet en masse til designet, så findes der ikke en måde jeg bare kan sætte rammen ind på?

Eks.
#rammeh {
width:878px;background:url('baggrund.jpg') 44px 0 repeat-y;
height:100%;position:relative;margin:0 auto;
}

også lave en <div> kode? :s
Avatar billede mclemens Nybegynder
06. maj 2007 - 13:06 #37
<div id="nybody">

<div style="background:url('design/banner.gif');position: absolute; left:-34px;top:0;height:390px;width:34px;"></div>

<div style="background:url('design/banner.gif');position: absolute; right:-44px;top:0;height:414px;width:44px;"></div>

    <div id="menumain">

- Ret baggrunde, den første er den til venstre den næste er den til højre.
... Hvis du senere får behov for height:100%; borders skal du
kigge på 06/05-2007 12:49:16 og skifte no-repeat til repeat-y;
Avatar billede mclemens Nybegynder
06. maj 2007 - 13:33 #38
En lille detalje mere, du har glemt at lukke et af dine nye elementer,
Umiddelbart hjælper det hvis du lukker elementet efter denne:

    <a href="\"?mode=opret\"">Opret bruger</a><br/></div>

->

    <a href="\"?mode=opret\"">Opret bruger</a><br/></div>
</div>
Avatar billede mclemens Nybegynder
06. maj 2007 - 13:52 #39
Sidder lige og læser 13:33:26 igen.
... Ret lige " />" til ">", siden du kører
med html skal du ikke lukke som i xhtml.
Avatar billede lylover Nybegynder
06. maj 2007 - 16:13 #40
www.zipen.tii.dk
-Banneret er ikke rettet til?
Hvordan gør jeg det? :S
Avatar billede lylover Nybegynder
06. maj 2007 - 16:14 #41
Er det noget med px?

btw. min nuværende kode;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

html{height:100%;width:100%;}
body {background-image: url("design/tonga.gif");}


#outerbounds {
width:800px;
margin:0 auto;
background-color:#FFCC33;
height:100%;position:relative;
}

body>#outerbounds {
height:auto;min-height:100%;
}



#tops {position:absolute;top:0;left:0;width:100%;height:196px;background:#c96;z-index:5;}

    #bannerarea
    {
    width:100%;
    min-height:176px;
    background-image: url("design/banner.gif");
    text-align:center;
    }

    #toparea
    {
    text-align:center;
    background-image: url("design/topm.gif");
    }



p {margin:0;}

#nybodyydre{position:absolute;top:0px;height:100%;}
#nybodyindre{position:relative;height:100%;}
#nybodyydre>#nybodyindre{min-height:100%;height:auto;}

#nybody{position:relative;padding-top:196px;width:100%;background:#FFCC33;}

#footer,#spacerdiv{height:20px;}
#footer{position:absolute;bottom:0px;left:0px;width:100%;}
#spacerdiv{clear:both;width:100%;}







    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
        #menu2
        {
        background-color:#c2c2c2;
        } 
     
        #menu3
        {
        background-color:#c2c2c2;
        }
     
        #menu4
        {
        background-color:#e2e2e2;
        }
        #menu5
        {
        background-color:#e2e2e2;
        }
        #menu6
        {
        background-color:#e2e2e2;
        }
        #menu7
        {
        background-color:#e2e2e2;
        }
        #menu8
        {
        background-color:#e2e2e2;
        }
        #menu9
        {
        background-color:#e2e2e2;
        }
        #menu10
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-color:#FFFFFF;
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:##FFFF00;
        }

#footer
{
text-align:center;
background: url("design/topm.gif") #c96;
}

.clearer {clear:both;}
</style>
</head>
<body><div id="outerbounds">


<div id="tops">
    <div id="bannerarea"></div>
    <div id="toparea"><b>Velkommen til Zipen! </b></div>
</div>

<div id="nybodyydre"><div id="nybodyindre">
<div id="nybody">
<div style="background:url('design/Side_2.gif');position: absolute; left:-34px;top:0;height:390px;width:34px;"></div>

<div style="background:url('design/side.gif');position: absolute; right:-44px;top:0;height:414px;width:44px;"></div>

    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>Zipen</b></div>
        <div id="menu2">Nyheder</div>
        <div id="menu3">Artikler</div>
      <div id="menu4">Redaktionen</div>
      <div id="menu5">Konkurrencer</div>
      <div id="menu6"><b>Habbo</b></div>
      <div id="menu7">Galleri</div>
      <div id="menu8">Guides</div>
      <div id="menu9">Diverse</div><br><br><br>
      <div id="menu9">Login<form action="comm.php?mode=login" method="post">
    <table>
  <tr><td>B:</td>
  <td><input style="width:100px" type="text" name="user" class="field"></td></tr>
  <tr><td>P:</td>
  <td><input style="width:100px" type="password" name="pass" class="field"></td></tr>
    "<tr><td></td><td><input type="submit" value="Login"> <input type="checkbox" name="auto" value="true">Autologin</td></tr>
    </table></form><br>

   
    <a href="comm.php?mode=opret">Opret bruger</a><br /></div>
   
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
        </div>
        <div id="mainright"> mainright </div>
      </div>
<div id="spacerdiv">&nbsp;
</div>
</div>

<div id="footer">Copyright by Zipen.dk - All rights reserved! Optimeret til Firefox og Internet Explore!</div>

</div></div>

</div></body></html>
Avatar billede mclemens Nybegynder
06. maj 2007 - 17:09 #42
"-Banneret er ikke rettet til? Hvordan gør jeg det?"
Læs 06/05-2007 12:16:05 og 06/05-2007 12:49:16
Og kig på 06/05-2007 13:33:26. Jeg er desværre
nødt til at bremse noget ned her, jeg kan ikke
kode din side for dig, du må selv tage fat på det.

- Jeg kan ikke se noget på dit nye link og det tidligere
virker fint i min IE7 og FF hvis du retter 06/05-2007 13:33:26.
Og virker fint i min IE6 med 06/05-2007 12:16:05 og 06/05-2007 12:49:16.
(rettelsen af min-height til height). Jeg anbefaler lidt læsning på css.

... Jeg er på arbejde p.t., da jeg har noget, der skal laves inden mandag.
- Men kig på mine tidligere kommentarer om min-height,
jeg tror at du måske er kommet til at overse dem.
Avatar billede lylover Nybegynder
06. maj 2007 - 17:15 #43
Okay :)
-Det er iorden.. Jeg er også igang selv..

Men nu mente jeg ikke banneret (tastefejl).. Jeg mente rammerne.. Jeg har leget lidt med width og height, men det vil sku ikke fungere :S

Jeg er godt igang med resten af designet, og det skal jeg ikke have hjælp til, det er kun lgie det med rammen..
Avatar billede mclemens Nybegynder
06. maj 2007 - 17:24 #44
"Kommentar: lylover
06/05-2007 12:28:46    Nu er jeg her..

Og rammen har; width: 34 px ,  height: 390 :)
Karma: Ingen eller færre end 3
Kommentar: lylover
06/05-2007 12:30:30    Det er så til venstre side, den til højre er; width: 44 px og height: 414"

Prøv at rette din ramme til så den passer med de størrelser som du angav,
alternativt kan du rette på left og right samt width og height på de to
elementer. Kig på de nuværende størrelser og juster en af dem ad gangen.

<div style="background:url('design/Side_2.gif');position: absolute; left:-34px;top:0;height:390px;width:34px;"></div>

<div style="background:url('design/side.gif');position: absolute; right:-44px;top:0;height:414px;width:44px;"></div>

... Eksperimentering med elementer er tit det man lærer mest af...

F.eks. med
<div style="background:url('design/Side_2.gif');position: absolute; left:-26px;top:0;height:390px;width:26px;"></div>
- er den mere op ad siden.

... Alternativt hvis du skal bruge height 100% rammer kan du kigge på
06/05-2007 12:49:16, og så overføre dine elementer derind og rette sti
til ramme baggrunde.
Avatar billede lylover Nybegynder
06. maj 2007 - 17:58 #45
Jeg har forstået det med height og width..

Men nu har jeg rodet med at få sat rammen "på" designet, sådan det passer ind, men det vil ikke lykkes www.zipen.tii.dk/designrettes.html ..
Jeg fatter ikke hvordan jeg gør :S
Avatar billede mclemens Nybegynder
06. maj 2007 - 19:43 #46
Jeg ved ikke hvordan de borders skal se ud og hvordan de skal reagere.
- Størrelserne matcher ikke dem du nævnte og jeg er ikke klar over hvor
de skal placeres og hvor høje de skal være, men umiddelbart kunne de to
her måske ligne noget i stil med de borders du forsøger på at placere ?

<div style="background:url('design/Side_2.gif');position: absolute; left:-55px;top:0;height:390px;width:55px;"></div>

<div style="background:url('design/side.gif') -50px top;position: absolute; right:-54px;top:0;height:414px;width:54px;"></div>
Avatar billede lylover Nybegynder
06. maj 2007 - 19:49 #47
Jeg har nogle borders ;)

De skal være ude i begge sider af designet, ellers så ser det så firkantet ud.. Så de skal lave kulør.. altså ude i højre og venstre side..
Avatar billede lylover Nybegynder
06. maj 2007 - 20:26 #48
Nu kommer jeg lige tilbage, jeg har siddet og leget med det, og har fundet ud af en MASSE ! Men mit design driller stadig..

www.zipen.tii.dk/designrettes.html  - Som du kan se så i den <div> hvor der står Velkommen til Zipen', den går ud over borders.. Det kan jeg ikke få væk..

Og borderne vil uanset hvad ikk passe i højden.. Uasnet hvad jeg gør..
Avatar billede mclemens Nybegynder
06. maj 2007 - 20:45 #49
"den går ud over borders.. Det kan jeg ikke få væk.."
Kast en z-index:6; ind i dine borders style.

"Og borderne vil uanset hvad ikk passe i højden.. Uasnet hvad jeg gør.."
Er det ikke fordi at dine borders har et par px mellemrum i
toppen og bunden når man kigger på selve border billedet ?
Avatar billede mclemens Nybegynder
07. maj 2007 - 01:18 #50
Efter at have tænkt lidt på dine border der skal ryge
ind over rammerne har jeg kastet lidt rundt på det hele.
Så hvad med denne her:






<!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>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}
body {background: url("tonga.gif");}


#outer {
  margin:0 auto;
  width:878px;
  position:relative;
  height:100%;
  background:#fc5;
}


#lb,#rb {
  width:45px;height:100%;
  left:50%;
  position:absolute;
  background:url('http://www.zipen.tii.dk/design/Side_2.gif') -25px -15px;
  z-index:9;
}
#lb {margin-left:-473px;}
#rb {margin-left:405px;}

#copy {
  position:absolute;
  bottom:0;left:50%;
  margin-left:-449px;
  width:878px;
  background:url('http://www.zipen.tii.dk/design/topm.gif');
  z-index:8;text-align:center;
}


#bodyen {
  height:100%;width:100%;
  overflow-y:scroll;
  position:absolute;
  top:0;left:0;
}

#bodyen>#outer {
  height:auto;
  min-height:100%;
}


#bannerarea {
  height:176px;
  background: url("http://www.zipen.tii.dk/design/banner.gif");
}

#toparea {
  text-align:center;font-weight:bold;
  background: url("http://www.zipen.tii.dk/design/topm.gif");
}









p {margin:0;}



    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
        #menu2
        {
        background-color:#c2c2c2;
        } 
     
        #menu3
        {
        background-color:#c2c2c2;
        }
     
        #menu4
        {
        background-color:#e2e2e2;
        }
        #menu5
        {
        background-color:#e2e2e2;
        }
        #menu6
        {
        background-color:#e2e2e2;
        }
        #menu7
        {
        background-color:#e2e2e2;
        }
        #menu8
        {
        background-color:#e2e2e2;
        }
        #menu9
        {
        background-color:#e2e2e2;
        }
        #menu10
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-image: url("design/baggrund.jpg");
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:#FFCC33;
        }





.clearer {clear:both;}





</style>
</head><body>

<div id="bodyen">
    <div id="outer"><div style="position:absolute;z-index:1;width:800px;"></div>
        <div id="bannerarea">a<br>a<br></div>
        <div id="toparea">Velkommen til Zipen!</div>






    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>&nbsp;&nbsp;Zipen</b></div>
        <div id="menu2">&nbsp;&nbsp;Nyheder</div>
        <div id="menu3">&nbsp;&nbsp;Artikler</div>
      <div id="menu4">&nbsp;&nbsp;Redaktionen</div>
      <div id="menu5">&nbsp;&nbsp;Konkurrencer</div>
      <div id="menu6"><b>&nbsp;&nbsp;Habbo</b></div>
      <div id="menu7">&nbsp;&nbsp;Galleri</div>
      <div id="menu8">&nbsp;&nbsp;Guides</div>
      <div id="menu9">&nbsp;&nbsp;Diverse</div>
      <br><br><br>
      <div id="menu9">&nbsp;&nbsp;Login<form action="comm.php?mode=login" method="post">
    "<table>
  <tbody><tr><td>&nbsp;&nbsp;B:</td>
  <td><input style="width: 100px;" name="user" class="field" type="text"></td></tr>
  <tr><td>&nbsp;&nbsp;P:</td>
  <td><input style="width: 100px;" name="pass" class="field" type="password"></td></tr>
    <tr><td></td><td><input value="Login" type="submit"> <input name="auto" value="true" type="checkbox">Autologin</td></tr>
    </tbody></table></form><br>

   
    <a href="http://www.zipen.tii.dk/comm.php?mode=opret">&nbsp;&nbsp;Opret bruger</a><br></div>
   
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="mainright">
          <p>mainright        </p>
          </div>
      </div>



<div class="clearer"></div>


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

<div id="lb"></div>
<div id="rb"></div>
<div id="copy">Copyright by Zipen.dk - All rights reserved! Optimeret til Firefox og Internet Explore!</div>

</body></html>




(går til køjs nu)
Avatar billede lylover Nybegynder
07. maj 2007 - 14:10 #51
OMG !!

Det kun ikke blive bedre !
Jeg skylder dig helt 100 % point!

Du får 200, for du har sku lært mig en del ! Det må jeg sige !! :D
Avatar billede lylover Nybegynder
07. maj 2007 - 14:15 #52
Jeg aner bare ikke hvordan jeg giver dig flere point.. Du har jo allerede fået 60? Og jeg kan ikke sende det?? eller?
Avatar billede lylover Nybegynder
07. maj 2007 - 14:27 #53
Det er dog lige en ting til..

Sorry..

Jeg vil gerne have banneret og det nederste der hvor der står; copyright osv det skal gerne fast fryses, sådan det ikke kan bevæge sig?
Har prøvet med position:absolute; men det virker ikke?
Avatar billede roenving Novice
07. maj 2007 - 14:28 #54
Du laver et nyt spørgsmål til 140 point (da du jo ikke samlet må komme over 200 point !-) i denne kategori, skriver "Point til mclemens" i overskriften og kaster linket til dette spørgsmål, http://www.eksperten.dk/spm/776725 ind i spørgsmålsteksten !-)
Avatar billede mclemens Nybegynder
07. maj 2007 - 15:57 #55
.clearer {clear:both;} bør nok istedet være
.clearer {clear:both;height:0;overflow:hidden;}

<div style="position: absolute; z-index: 1; width: 800px;"></div>
^ - Denne her har vist ikke det store formål.

Og så har jeg vist skrevet forkert baggrund her:

#outer {
  margin:0 auto;
  width:878px;
  position:relative;
  height:100%;
  background:#fc5;
}

- det skulle vist have været #fc3 istedet

... det var sent igår :P

...

Prøv at rykke top og banner herned til:

<div id="bannerarea"></div>
<div id="toparea">Velkommen til Zipen!</div>
<div id="lb"></div>
<div id="rb"></div>
<div id="copy">Copyright by Zipen.dk - All rights reserved! Optimeret til Firefox og Internet Explore!</div>
</body></html>

...

Ret de to stk css til:

#bannerarea {
  position:absolute;
  top:0;left:50%;
  margin-left:-449px;
  width:878px;
  height:176px;
  background: url("http://www.zipen.tii.dk/design/banner.gif");
}

#toparea {
  position:absolute;
  top:176px;left:50%;
  margin-left:-449px;
  width:878px;
  text-align:center;font-weight:bold;
  background: url("http://www.zipen.tii.dk/design/topm.gif");
}



Og så tilføj denne css

#menumain {padding-top:196px;}

...

...

Og som Roenving skriver så max
140 point, så vi ikke får smæk ;)
Avatar billede mclemens Nybegynder
07. maj 2007 - 16:06 #56
Hmm, testede lige - det padding-top ødelagde det,
så her er en tilrettet med et top space element.
- Og så kastede jeg height:20px: på clearer'en så
den reserverer plads til copyright placeringen.





<!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>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}
body {background: url("tonga.gif");}


#outer {
  margin:0 auto;
  width:878px;
  position:relative;
  height:100%;
  background:#fc3;
}


#lb,#rb {
  width:45px;height:100%;
  left:50%;
  position:absolute;
  background:url('http://www.zipen.tii.dk/design/Side_2.gif') -25px -15px;
  z-index:9;
}
#lb {margin-left:-473px;}
#rb {margin-left:405px;}

#copy {
  position:absolute;
  bottom:0;left:50%;
  margin-left:-449px;
  width:878px;
  background:url('http://www.zipen.tii.dk/design/topm.gif');
  z-index:8;text-align:center;
}


#bodyen {
  height:100%;width:100%;
  overflow-y:scroll;
  position:absolute;
  top:0;left:0;
}

#bodyen>#outer {
  height:auto;
  min-height:100%;
}


#bannerarea {
  position:absolute;
  top:0;left:50%;
  margin-left:-449px;
  width:878px;
  height:176px;
  background: url("http://www.zipen.tii.dk/design/banner.gif");
}

#toparea {
  position:absolute;
  top:176px;left:50%;
  margin-left:-449px;
  width:878px;
  text-align:center;font-weight:bold;
  background: url("http://www.zipen.tii.dk/design/topm.gif");
}

#tspc {height:196px;width:100%;}







p {margin:0;}

    #menuarea
    {
    border:0px solid #ff0000;
    float:left;
    width:160px;
    background-color:#FFCC33;
    }
     
        #menu1
        {
        background-color:#a2a2a2;
        }
        #menu2
        {
        background-color:#c2c2c2;
        } 
     
        #menu3
        {
        background-color:#c2c2c2;
        }
     
        #menu4
        {
        background-color:#e2e2e2;
        }
        #menu5
        {
        background-color:#e2e2e2;
        }
        #menu6
        {
        background-color:#e2e2e2;
        }
        #menu7
        {
        background-color:#e2e2e2;
        }
        #menu8
        {
        background-color:#e2e2e2;
        }
        #menu9
        {
        background-color:#e2e2e2;
        }
        #menu10
        {
        background-color:#e2e2e2;
        }

    #mainarea
    {float:right;width:596px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:436px;
        background-image: url("design/baggrund.jpg");
        }

        #mainright
        {
        float:right;
        width:160px;
        background-color:#FFCC33;
        }





.clearer {clear:both;height:20px;overflow:hidden;}





</style>
</head><body>

<div id="bodyen">
    <div id="outer"><div id="tspc"></div>

    <div id="menumain">
      <div id="menuarea">
        <div id="menu1"><b>&nbsp;&nbsp;Zipen</b></div>
        <div id="menu2">&nbsp;&nbsp;Nyheder</div>
        <div id="menu3">&nbsp;&nbsp;Artikler</div>
      <div id="menu4">&nbsp;&nbsp;Redaktionen</div>
      <div id="menu5">&nbsp;&nbsp;Konkurrencer</div>
      <div id="menu6"><b>&nbsp;&nbsp;Habbo</b></div>
      <div id="menu7">&nbsp;&nbsp;Galleri</div>
      <div id="menu8">&nbsp;&nbsp;Guides</div>
      <div id="menu9">&nbsp;&nbsp;Diverse</div>
      <br><br><br>
      <div id="menu9">&nbsp;&nbsp;Login<form action="comm.php?mode=login" method="post">
    "<table>
  <tbody><tr><td>&nbsp;&nbsp;B:</td>
  <td><input style="width: 100px;" name="user" class="field" type="text"></td></tr>
  <tr><td>&nbsp;&nbsp;P:</td>
  <td><input style="width: 100px;" name="pass" class="field" type="password"></td></tr>
    <tr><td></td><td><input value="Login" type="submit"> <input name="auto" value="true" type="checkbox">Autologin</td></tr>
    </tbody></table></form><br>aaaaaaaaaaaaaa

   
    <a href="http://www.zipen.tii.dk/comm.php?mode=opret">&nbsp;&nbsp;Opret bruger</a><br></div>
   
</div>
      <div id="mainarea">
        <div id="main"><p>main</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>slut</p>
        </div>
        <div id="mainright">
          <p>mainright</p>
          </div>
      </div>



<div class="clearer"></div>


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


<div id="bannerarea"></div>
<div id="toparea">Velkommen til Zipen!</div>
<div id="lb"></div>
<div id="rb"></div>
<div id="copy">Copyright by Zipen.dk - All rights reserved! Optimeret til Firefox og Internet Explore!</div>

</body></html>
Avatar billede lylover Nybegynder
16. maj 2007 - 15:38 #57
Hey.. Nu har jeg arbejdet rigtig rigtig hårdt på det..
Og jeg vender tilbage med resultatet:
http://www.zipen.dk/test.php

Har bare et problem som jeg ikke kan få løst, den gule mellem main'en og menuen skal lidt væk, sådan at mainen kommer tættere på menuen.. Istedet for når jeg udvider main'en at den ikke kun går til den ene side men også den anden? Hvordan gør jeg det?

Btw, sig lige til hvis i skal have koden..

Og mclemens - Glemte vist lige de points..
Avatar billede lylover Nybegynder
16. maj 2007 - 15:38 #58
Men jeg opretter lige en tråd med dem når du er opmærksom på det..
Avatar billede mclemens Nybegynder
16. maj 2007 - 17:14 #59
Husk at udvide width på det omsluttende element (#mainarea)
samtidig med at du øger width på det indvendige element (#main)

Eksempel:

    #mainarea
    {float:right;width:705px;
    background-color:#FFCC33;
    }

        #main
        {
        float:left;

        width:675px;padding:0 20px 0 10px;
        background-image: url("../design/baggrund.jpg");
        }


... Læg også mærke til den padding 10px left og 20px right jeg
kastede på, det gør at teksten starter lidt inde i elementet og at
teksten ikke ryger helt ud til højre så det er skjult bagved bladene.
( fjern evt. padding og øg width hvis det ikke er ønsket - mere for
at give det forslag om padding samtidig med jeg lagde kommentaren )
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