webdesign - Hjælp til "height" - Udvikleren.dk - Programmering, webdesign og grafik

Tags: webdesign

<< < 1 2 > >>

Bruger #17390 @ 14.02.13 15:26

Hey

Er ved at kode et template til et CMS (webspell), men er igen igen gået i stå

Har problemer med min heigh et eller andet sted, ville jeg tro.
Men bruger position:absolute; til positionering af diverse ting, og ved ikke om dette kan være problemet.

Men har f.eks på min #contentarea en height, men når jeg så f.eks skal kommentere på en test nyhed, så fylder test nyheden mere end hvad der er plads til "Se billede: LINK TIL BILLEDE

Det kan måske også være pga. jeg bruger position:absolute på min footer osv?

HTML kode

 <?php
 include("_mysql.php");
 include("_settings.php");
 include("_functions.php");
 $_language->read_module('index');
 $index_language = $_language->module;
 ?>
 
 <!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=utf-8" />
 <link rel="stylesheet" type="text/css" href="style/style.css"/>
 <title><?php echo PAGETITLE; ?></title>
 <link href="_stylesheet.css" rel="stylesheet" type="text/css">
 <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
 </head>
 <body>
     <div id="wrapper">
         <div id="headertop">
             <div id="topwelcome">
             </div>
             <div id="headerlogin">
             <?php include("login.php"); ?>
             </div>
         </div>
         <div id="headerimg">
         </div>
         <div>
             <div>
             <a href="index.php" target="_self" id="navhome">HOME</a>
             </div>
             <div>
             <a href="index.php?site=members" target="_self" id="navmembers">MEMBERS</a>
             </div>
             <div>
             <a href="index.php?site=clanwars" target="_self" id="navmatches">MATCHES</a>
             </div>
             <div>
             <a href="index.php?site=forum" target="_self" id="navforum">FORUM</a>
             </div>
             <div>
             <a href="index.php?site=sponsors" target="_self" id="navsponsors">SPONSORS</a>
             </div>
             <div>
             <a href="index.php?site=files" target="_self" id="navdownloads">DOWNLOADS</a>
             </div>
             <div>
             <a href="index.php?site=gallery" target="_self" id="navmedia">MEDIA</a>
             </div>
             <div>
             <a href="index.php?site=contact" target="_self" id="navcontactus">CONTACTUS</a>
             </div>
               <div id="navrest">
             </div>
             </div>
             <div id="navunderline">
             </div>
             
             <div id="contentbg">
                 <div id="contentbar">
                     <div id="contentarea">
                     <?php
                     if(!isset($site)) $site="news";
                     $invalide = array('\\','/','//',':','.');
                     $site = str_replace($invalide,' ',$site);
                     if(!file_exists($site.".php")) $site = "news";
                     include($site.".php");
                     ?>
                     </div>
                 </div>
                
                 <div id="latestnewsbg">
                     <div id="latestnewsbar">
                     </div>
                     <div id="latestnewscontent">
                     <?php include("sc_headlines.php"); ?>
                     </div>
                 </div>
                 
                 <div id="latestmatchesbg">
                     <div id="latestmatchesbar">
                     </div>
                     <div id="latestmatchescontent">
                     <?php include("sc_results.php"); ?>
                     </div>
                 </div>
                 
                 <div id="latestforumthreadsbg">
                     <div id="latestforumthreadsbar">
                     </div>
                     <div id="latestforumthreadscontent">
                     <?php include("latesttopics.php"); ?>
                     </div>
                     
                 <div id="sponsorsbg">
                   <div id="sponsorsbar">
                 </div>
                 <div id="sponsorscontent">
                 <?php include("sc_sponsors.php"); ?>
                 </div>
                 
             </div> 
         </div>
     <div id="footerbg">
         <div id="footerbar">
             <div id="copyright">
             </div>
             <div id="author">
                 <a href="http://ufrag.net/" target="_blank" id="author2">UFRAG</a
             ></div>
             <div>
             <ul id="ulfooter">
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">Contact</a></li>
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">|</a></li>
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">Imprint</a></li>
              </ul>
             </div>
         </div>
     </div>
     
     </div>
 </body>
 </html>

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 *{
       margin:0px;
       padding:0px;
 }
 
 body{
     background-image:url(/banjows/images/template/bg2.jpg);
 }
 
 #wrapper{
     width:1000px;
     height:100%;
     position:relative;
     margin:auto;
 }
 
 #headertop{
     width:1000px;
     height:40px;
     background-image:url(/banjows/images/template/headertop.jpg);
     position:absolute;
     top:0px;
     left:0px;
 }
 
 #topwelcome{
     width:189px;
     height:9px;
     background-image:url(/banjows/images/template/welcome.png);
     position:absolute;
     top:16px;
     left:15px;
 }
 
 #headerlogin{
     position:absolute;
     top:10px;
     left:300px;
 }
 
 #headerimg{
     width:1000px;
     height:200px;
     background-image:url(/banjows/images/template/headercsgo2.jpg);
     position:absolute;
     top:40px;
     left:0px;
 }
 
 #navhome{
     width:76px;
     height:40px;
     background-image:url(/banjows/images/template/navhome.jpg);
     position:absolute;
     top:240px;
     left:0px;
     text-indent:-9999px;
 }
 
 #navmembers{
     width:95px;
     height:40px;
     background-image:url(/banjows/images/template/navmembers.jpg);
     position:absolute;
     top:240px;
     left:76px;
     text-indent:-9999px;
 }
 
 #navmatches{
     width:93px;
     height:40px;
     background-image:url(/banjows/images/template/navmatches.jpg);
     position:absolute;
     top:240px;
     left:171px;
     text-indent:-9999px;
 }
 
 #navforum{
     width:81px;
     height:40px;
     background-image:url(/banjows/images/template/navforum.jpg);
     position:absolute;
     top:240px;
     left:264px;
     text-indent:-9999px;
 }
 
 #navsponsors{
     width:101px;
     height:40px;
     background-image:url(/banjows/images/template/navsponsors.jpg);
     position:absolute;
     top:240px;
     left:345px;
     text-indent:-9999px;
 }
 
 #navdownloads{
     width:114px;
     height:40px;
     background-image:url(/banjows/images/template/navdownloads.jpg);
     position:absolute;
     top:240px;
     left:446px;
     text-indent:-9999px;
 }
 
 #navmedia{
     width:77px;
     height:40px;
     background-image:url(/banjows/images/template/navmedia.jpg);
     position:absolute;
     top:240px;
     left:560px;
     text-indent:-9999px;
 }
 
 #navcontactus{
     width:110px;
     height:40px;
     background-image:url(/banjows/images/template/navcontactus.jpg);
     position:absolute;
     top:240px;
     left:637px;
     text-indent:-9999px;
 }
 
 #navrest{
     width:253px;
     height:40px;
     background-image:url(/banjows/images/template/navrest.jpg);
     position:absolute;
     top:240px;
     left:747px;
     text-indent:-9999px;
 }
 
 #navunderline{
     width:1000px;
     height:8px;
     background-image:url(/banjows/images/template/navunderline.jpg);
     position:absolute;
     top:280px;
     left:0px;
 }
 
 #contentbg{
     width:1000px;
     height:933px;
     background-color:#242424;
     position:absolute;
     top:288px;
     left:0px;
 }
 
 #latestnewsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:0px;
     left:730px;
 }
 
 #latestnewsbar{
     width:268px;
     height:40px;
     background-image:url(/banjows/images/template/latest_news_bar.jpg);
     position:absolute;
     top:1px;
     left:1px;
 }
 
 #latestnewscontent{
     width:268px;
     height:155px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#FFF;
 }
 
 #latestmatchesbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:730px;
 }
 
 #latestmatchesbar{
     width:268px;
     height:40px;
     background-image:url(/banjows/images/template/latest_matches_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestmatchescontent{
     width:268px;
     height:155px;
     background-color:#FFF;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #latestforumthreadsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:394px;
     left:730px;
 }
 
 #latestforumthreadsbar{
     width:268px;
     height:40px;
     background-image:url(/banjows/images/template/latest_forumthreads_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestforumthreadscontent{
     width:268px;
     height:155px;
     background-color:#FFF;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #sponsorsbg{
     width:270px;
     height:342px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:0px;
 }
 
 #sponsorsbar{
     width:268px;
     height:40px;
     background-image:url(/banjows/images/template/sponsors_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #sponsorscontent{
     width:268px;
     height:300px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#FFF;
 }
 
 #contentbar{
     width:728px;
     height:12px;
     background-image:url(/banjows/images/template/Content_bar.jpg);
 }
 
 #contentarea{
     width:728px;
     height:921px;
     background-color:#FFF;
     position:absolute;
     top:12px;
     left:0px;
 }
 
 p.contentarea{
     margin-left:10px;
     margin-right:10px;
 }
 
 #footerbg{
     width:1000px;
     height:80px;
     background-color:#FFF;
     position:absolute;
     top:933px;
     left:0px;
 }
 
 #footerbar{
     width:998px;
     height:79px;
     background-image:url(/banjows/images/template/footer_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #copyright{
     width:279px;
     height:13px;
     position:absolute;
     background-image:url(/banjows/images/template/copyright.png);
     top:27px;
     left:12px;
 }
 
 #author2{
     width:306px;
     height:13px;
     background-image:url(/banjows/images/template/author.png);
     position:absolute;
     top:42px;
     left:12px;
     display:block;
     text-indent:-9999px;
 }
 
 #ulfooter{
     position:absolute;
     top:27px;
     left:885px;
     list-style-type:none;
 }
 
 #lifooter{
     float:left;
     padding-left:4px;
 }
 
 a.lifooterstyle:link, a.lifooterstyle:visited, a.lifooterstyle:hover, a.lifooterstyle:active{
     font-family:Arial, Helvetica, sans-serif;
     font-weight:bold;
     font-size:12px;
     color:#FFF;
     text-decoration:none;
 }
 
 /*Style for Logged.html*/
 
 #ul_logged_login{
     list-style-type:none;
 }
 
 #il_logged_login{
     float:left;
     margin:4px;
 }
 
 a.logged_style:link, a.logged_style:visited, a.logged_style:hover, a.logged_style:active{
     font-family:Arial, Helvetica, sans-serif;
     font-size:10px;
     font-weight:bold;
     color:#FFF;
     text-decoration: none;
     text-transform:uppercase;
     display:block;
 }
 
 /*END of Logged.html*/
 
 /*Style of login.php*/
 
 #admin{
     font-family:Arial, Helvetica, sans-serif;
     font-size:10px;
     font-weight:bold;
     color:#FFF;
     text-decoration: none;
     text-transform:uppercase;
     display:block;
 }
 
 /*END of login.php*/
 
 /*Style login.html*/
 
 #login1{
 }
 
 #login1 .userfield{
  width:160px;
  height:14px; 
  border:solid 1px #6699ff;
  background-color:transparent;
  position:absolute;
  top:2px;
  left:198px;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  font-weight:bold;
 }
 
 #login1 .pwdfield{
  width:160px;
  height:14px;
  border:solid 1px #6699ff;
  background-color:transparent;
  position:absolute;
  top:2px;
  left:366px;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  font-weight:bold;
 }
 
 #login1 .loginbutton{
     position:absolute;
     left:538px;
     top:1px;
 }
 
 #login1 .register{
     width:51px;
     height:9px;
     background-image:url(/banjows/images/template/login/login_register.png);
     position:absolute;
     top:7px;
     left:577px;
     display:block;
     text-indent:-9999px;
 }
 
 #login1 .lostpassword{
     width:52px;
     height:9px;
     background-image:url(images/template/login/login_lostpw.png);
     position:absolute;
     top:7px;
     left:636px;
     display:block;
     text-indent:-9999px;
 }
 
 input[type=password]{
     padding-left:4px;
 }
 
 input[type=text]{
     padding-left:4px;
 }

Håber at der er nogle kloge hoveder

Har kun haft med css at gøre i omkring et par uger

13 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #8884 @ 14.02.13 15:45

300

Når du sætter footeren til absolute og bottom:0px vil den altid være i bunden af vinduet, altså den vil ikke være i bunden af dit dokument hvis du forstår.

Hvis du altid vil have footeren vist kan du vælge at give den position:fixed og bottom:0px.

Ellers tag et kig her: http://www.cssstickyfooter.com

Jeg er ikke helt sikker på jeg forstår dit spørgsmål, så hvis det ovenstående ikke var svar nok så må du lige skrive igen. :-)

Bruger #17390 @ 14.02.13 16:29

Altså på min hjemmeside(som pt lige er nede pga. nyt system og backup osv) der har jeg et område som er til nyheder osv. I det cms jeg bruger, der vil den automatisk udvide jo mere som den har brug for. Skal jeg så bare sætte "contentarea" med height:100%; og bruge sticky footer?

hvis det er sådan jeg forstår det?

Bruger #8884 @ 14.02.13 16:46

300

Hvis dit problem er at footeren er halvejs oppe på din side ville jeg læse det link jeg skrev. Ellers forstår jeg ikke dit problem. :-)

Bruger #17390 @ 15.02.13 00:03

Hvis dit problem er at footeren er halvejs oppe på din side ville jeg læse det link jeg skrev. Ellers forstår jeg ikke dit problem. :-)

Hmm, hvis jeg forstår artiklen ret, som du sendte mig. Tror jeg ikke engang at jeg behøver at lave en sticky footer.

Jeg har mine nyheder i #contentarea, men jeg kunne evt. bare sæte den til height:100%; ?

også smide min footer undenfor min wrapper, istedet for indenfor?

Bruger #8884 @ 15.02.13 01:20

300

Sticky footer er nødvendig hvis du har sider hvor indholdet ikke er højt nok og du stadig vil beholde footeren i bunden.

Som jeg kan se er din footer allerede ude af content wrapperen. Sådan som jeg plejer at lave det er ved at have en wrapper der har hele siden inde i sig undtagen footeren og så sætte den wrapper til at være height:100% - Hvis du sætter contentarea til 100% vil den være højere end siden, forstået på den måde, at den måler hvor langt der er helt fra toppen og helt til bunden og ikke fra hvor den starter og så til bunden.

Jeg håber ikke det svar var for kryptisk.

Bruger #17390 @ 15.02.13 07:21

Har fået uploadet hele cmset og siden op igen.

http://kh4zy.net23.net/index.php

Footeren er ude af wrapperen og har prøvet med sticky footer, så den står som den gør var før.

HTML kode

 <!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=utf-8" />
 <link rel="stylesheet" type="text/css" href="style/style.css"/>
 <title>webSPELL v4 - News</title>
 <link href="_stylesheet.css" rel="stylesheet" type="text/css">
 <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
 </head>
 <body>
     <div id="wrapper">
         <div id="headertop">
             <div id="topwelcome">
             </div>
             <div id="headerlogin">
             <div id="login1">
 <form method="post" name="login" action="checklogin.php">
 <input name="ws_user" type="text" class="userfield" value="Username" onfocus="this.value=''" />
 <input name="pwd" type="password" class="pwdfield" value="Password" onfocus="this.value=''" />
 <input type="image" class="loginbutton" src="images/template/login/login_go.png" name="submit" value="" />
 <a href="index.php?site=register" target="_self" class="register">register now</a>
 <a href="index.php?site=lostpassword" target="_self" class="lostpassword">lost password?</a>
 </form>
 </div>
             </div>
         </div>
         <div id="headerimg">
         </div>
         <div>
             <div>
             <a href="index.php" target="_self" id="navhome">HOME</a>
             </div>
             <div>
             <a href="index.php?site=members" target="_self" id="navmembers">MEMBERS</a>
             </div>
             <div>
             <a href="index.php?site=clanwars" target="_self" id="navmatches">MATCHES</a>
             </div>
             <div>
             <a href="index.php?site=forum" target="_self" id="navforum">FORUM</a>
             </div>
             <div>
             <a href="index.php?site=sponsors" target="_self" id="navsponsors">SPONSORS</a>
             </div>
             <div>
             <a href="index.php?site=files" target="_self" id="navdownloads">DOWNLOADS</a>
             </div>
             <div>
             <a href="index.php?site=gallery" target="_self" id="navmedia">MEDIA</a>
             </div>
             <div>
             <a href="index.php?site=contact" target="_self" id="navcontactus">CONTACTUS</a>
             </div>
               <div id="navrest">
             </div>
             </div>
             <div id="navunderline">
             </div>
             
             <div id="contentbg">
                 <div id="contentbar">
                     <div id="contentarea">
                     <h2>News</h2>
  <input type="button" onclick="MM_goToURL('parent','index.php?site=news&amp;action=archive');return document.MM_returnValue;" value="Archive" /><hr /><table width="100%" border="0" cellspacing="0" cellpadding="2">
   <tr bgcolor="#333333">
     <td class="title">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td><a href="index.php?site=news&amp;show=Newstest" style="padding:1px;background-color:#E6E6E6;"><small>Newstest</small></a> &nbsp;<a class="titlelink" href="index.php?site=news_comments&amp;newsID=2">Test 2</a> </td>
         <td align="right"></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr><td bgcolor="#E6E6E6"></td></tr>
   <tr bgcolor="#FFFFFF">
     <td align="center" valign="top"><img src="images/news-rubrics/1.jpg" border="0" alt="" /></td>
   </tr>
   <tr>
     <td bgcolor="#FFFFFF" valign="top">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td valign="top" align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.<br />
 <br />
 Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.<br />
 <br />
 Donec eu metus sed lorem auctor vehicula. Fusce dolor. Nulla iaculis congue leo. Mauris risus velit, pulvinar ut, dignissim non, sagittis in, leo. Phasellus aliquet mi vel metus. Maecenas vestibulum lorem at velit. Morbi consequat metus a tellus. Nullam quis dui. Sed enim odio, bibendum at, ultricies et, ullamcorper sit amet, neque. Curabitur porttitor dolor. Vivamus vulputate. Donec sit amet augue eu risus rutrum vestibulum. Etiam pede. In hac habitasse platea dictumst. Vivamus non erat. Vivamus congue vehicula ante.</td>
       </tr>
       <tr>
         <td valign="top" align="right"></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr>
     <td bgcolor="#E6E6E6">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td><span>Links</span>: n/a<br /><span>written by <a href="index.php?site=profile&amp;id=1"><b>kh4zy</b></a> - 14.02.2013 - 17:45</span></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr>
     <td>
     <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td><span style="overflow:hidden;"><a href="index.php?site=news_comments&amp;newsID=2">no comments</a></span></td>
       </tr>
     </table>
     </td>
   </tr>
 </table>
 <br /><br /><table width="100%" border="0" cellspacing="0" cellpadding="2">
   <tr bgcolor="#333333">
     <td class="title">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td><a href="index.php?site=news&amp;show=Newstest" style="padding:1px;background-color:#E6E6E6;"><small>Newstest</small></a> &nbsp;<a class="titlelink" href="index.php?site=news_comments&amp;newsID=1">TEST</a> </td>
         <td align="right"></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr><td bgcolor="#E6E6E6"></td></tr>
   <tr bgcolor="#F2F2F2">
     <td align="center" valign="top"><img src="images/news-rubrics/1.jpg" border="0" alt="" /></td>
   </tr>
   <tr>
     <td bgcolor="#F2F2F2" valign="top">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td valign="top" align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.<br />
 <br />
 Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.<br />
  <br />
 Donec eu metus sed lorem auctor vehicula. Fusce dolor. Nulla iaculis congue leo. Mauris risus velit, pulvinar ut, dignissim non, sagittis in, leo. Phasellus aliquet mi vel metus. Maecenas vestibulum lorem at velit. Morbi consequat metus a tellus. Nullam quis dui. Sed enim odio, bibendum at, ultricies et, ullamcorper sit amet, neque. Curabitur porttitor dolor. Vivamus vulputate. Donec sit amet augue eu risus rutrum vestibulum. Etiam pede. In hac habitasse platea dictumst. Vivamus non erat. Vivamus congue vehicula ante.</td>
       </tr>
       <tr>
         <td valign="top" align="right"></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr>
     <td bgcolor="#E6E6E6">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td><span>Links</span>: n/a<br /><span>written by <a href="index.php?site=profile&amp;id=1"><b>kh4zy</b></a> - 14.02.2013 - 17:40</span></td>
       </tr>
     </table>
     </td>
   </tr>
   <tr>
     <td>
     <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td><span style="overflow:hidden;"><a href="index.php?site=news_comments&amp;newsID=1">no comments</a></span></td>
       </tr>
     </table>
     </td>
   </tr>
 </table>
 <br /><br />                    </div>
                 </div>
                
                 <div id="latestnewsbg">
                     <div id="latestnewsbar">
                     </div>
                     <div id="latestnewscontent">
                     <table width="100%" cellspacing="0" cellpadding="2"><tr>
     <td bgcolor="#FFFFFF"><small>14.02.2013 - 17:45</small> <br />
     &#8226; <a href="index.php?site=news_comments&amp;newsID=2&amp;lang=uk">Test 2</a></td>
 </tr><tr>
     <td bgcolor="#F2F2F2"><small>14.02.2013 - 17:40</small> <br />
     &#8226; <a href="index.php?site=news_comments&amp;newsID=1&amp;lang=uk">TEST</a></td>
 </tr></table>                    </div>
                 </div>
                 
                 <div id="latestmatchesbg">
                     <div id="latestmatchesbar">
                     </div>
                     <div id="latestmatchescontent">
                                         </div>
                 </div>
                 
                 <div id="latestforumthreadsbg">
                     <div id="latestforumthreadsbar">
                     </div>
                     <div id="latestforumthreadscontent">
                                         </div>
                     
                 <div id="sponsorsbg">
                   <div id="sponsorsbar">
                 </div>
                 <div id="sponsorscontent">
                                 </div>
                 
             </div> 
         </div>
 </div>
 
 <div id="footerbg">
         <div id="footerbar">
             <div id="copyright">
             </div>
             <div id="author">
                 <a href="http://ufrag.net/" target="_blank" id="author2">UFRAG</a
             ></div>
             <div>
             <ul id="ulfooter">
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">Contact</a></li>
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">|</a></li>
                 <li id="lifooter"><a href="index.html" target="_self" class="lifooterstyle">Imprint</a></li>
              </ul>
             </div>
         </div>
     </div>
 </body>
 </html>
 
 <!-- Hosting24 Analytics Code -->
 <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
 <!-- End Of Analytics Code -->

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 *{
       margin:0px;
       padding:0px;
 }
 
 body{
     background-image:url(../images/template/bg2.jpg);
 }
 
 #wrapper{
     width:1000px;
     height:1600px;
     position:relative;
     margin:auto;
 }
 
 #headertop{
     width:1000px;
     height:40px;
     background-image:url(../images/template/headertop.jpg);
     position:absolute;
     top:0px;
     left:0px;
 }
 
 #topwelcome{
     width:189px;
     height:9px;
     background-image:url(../images/template/welcome.png);
     position:absolute;
     top:16px;
     left:15px;
 }
 
 #headerlogin{
     position:absolute;
     top:10px;
     left:300px;
 }
 
 #headerimg{
     width:1000px;
     height:200px;
     background-image:url(../images/template/headercsgo2.jpg);
     position:absolute;
     top:40px;
     left:0px;
 }
 
 #navhome{
     width:76px;
     height:40px;
     background-image:url(../images/template/navhome.jpg);
     position:absolute;
     top:240px;
     left:0px;
     text-indent:-9999px;
 }
 
 #navmembers{
     width:95px;
     height:40px;
     background-image:url(../images/template/navmembers.jpg);
     position:absolute;
     top:240px;
     left:76px;
     text-indent:-9999px;
 }
 
 #navmatches{
     width:93px;
     height:40px;
     background-image:url(../images/template/navmatches.jpg);
     position:absolute;
     top:240px;
     left:171px;
     text-indent:-9999px;
 }
 
 #navforum{
     width:81px;
     height:40px;
     background-image:url(../images/template/navforum.jpg);
     position:absolute;
     top:240px;
     left:264px;
     text-indent:-9999px;
 }
 
 #navsponsors{
     width:101px;
     height:40px;
     background-image:url(../images/template/navsponsors.jpg);
     position:absolute;
     top:240px;
     left:345px;
     text-indent:-9999px;
 }
 
 #navdownloads{
     width:114px;
     height:40px;
     background-image:url(../images/template/navdownloads.jpg);
     position:absolute;
     top:240px;
     left:446px;
     text-indent:-9999px;
 }
 
 #navmedia{
     width:77px;
     height:40px;
     background-image:url(../images/template/navmedia.jpg);
     position:absolute;
     top:240px;
     left:560px;
     text-indent:-9999px;
 }
 
 #navcontactus{
     width:110px;
     height:40px;
     background-image:url(../images/template/navcontactus.jpg);
     position:absolute;
     top:240px;
     left:637px;
     text-indent:-9999px;
 }
 
 #navrest{
     width:253px;
     height:40px;
     background-image:url(../images/template/navrest.jpg);
     position:absolute;
     top:240px;
     left:747px;
     text-indent:-9999px;
 }
 
 #navunderline{
     width:1000px;
     height:8px;
     background-image:url(../images/template/navunderline.jpg);
     position:absolute;
     top:280px;
     left:0px;
 }
 
 #contentbg{
     width:1000px;
     height:933px;
     background-color:#242424;
     position:absolute;
     top:288px;
     left:0px;
 }
 
 #latestnewsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:0px;
     left:730px;
 }
 
 #latestnewsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_news_bar.jpg);
     position:absolute;
     top:1px;
     left:1px;
 }
 
 #latestnewscontent{
     width:268px;
     height:155px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#FFF;
 }
 
 #latestmatchesbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:730px;
 }
 
 #latestmatchesbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_matches_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestmatchescontent{
     width:268px;
     height:155px;
     background-color:#FFF;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #latestforumthreadsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:394px;
     left:730px;
 }
 
 #latestforumthreadsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_forumthreads_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestforumthreadscontent{
     width:268px;
     height:155px;
     background-color:#FFF;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #sponsorsbg{
     width:270px;
     height:342px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:0px;
 }
 
 #sponsorsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/sponsors_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #sponsorscontent{
     width:268px;
     height:300px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#FFF;
 }
 
 #contentbar{
     width:728px;
     height:12px;
     background-image:url(../images/template/Content_bar.jpg);
 }
 
 #contentarea{
     width:728px;
     height:921px;
     background-color:#FFF;
     position:absolute;
     top:12px;
     left:0px;
 }
 
 p.contentarea{
     margin-left:10px;
     margin-right:10px;
 }
 
 #footerbg{
     width:1000px;
     height:80px;
     background-color:#FFF;
     position:absolute;
     top:933px;
     left:0px;
 }
 
 #footerbar{
     width:998px;
     height:79px;
     background-image:url(../images/template/footer_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #copyright{
     width:279px;
     height:13px;
     position:absolute;
     background-image:url(../images/template/copyright.png);
     top:27px;
     left:12px;
 }
 
 #author2{
     width:306px;
     height:13px;
     background-image:url(../images/template/author.png);
     position:absolute;
     top:42px;
     left:12px;
     display:block;
     text-indent:-9999px;
 }
 
 #ulfooter{
     position:absolute;
     top:27px;
     left:885px;
     list-style-type:none;
 }
 
 #lifooter{
     float:left;
     padding-left:4px;
 }
 
 a.lifooterstyle:link, a.lifooterstyle:visited, a.lifooterstyle:hover, a.lifooterstyle:active{
     font-family:Arial, Helvetica, sans-serif;
     font-weight:bold;
     font-size:12px;
     color:#FFF;
     text-decoration:none;
 }
 
 /*Style for Logged.html*/
 
 #ul_logged_login{
     list-style-type:none;
 }
 
 #il_logged_login{
     float:left;
     margin:4px;
 }
 
 a.logged_style:link, a.logged_style:visited, a.logged_style:hover, a.logged_style:active{
     font-family:Arial, Helvetica, sans-serif;
     font-size:10px;
     font-weight:bold;
     color:#FFF;
     text-decoration: none;
     text-transform:uppercase;
     display:block;
 }
 
 /*END of Logged.html*/
 
 /*Style of login.php*/
 
 #admin{
     font-family:Arial, Helvetica, sans-serif;
     font-size:10px;
     font-weight:bold;
     color:#FFF;
     text-decoration: none;
     text-transform:uppercase;
     display:block;
 }
 
 /*END of login.php*/
 
 /*Style login.html*/
 
 #login1{
 }
 
 #login1 .userfield{
  width:160px;
  height:14px; 
  border:solid 1px #6699ff;
  background-color:transparent;
  position:absolute;
  top:2px;
  left:198px;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  font-weight:bold;
 }
 
 #login1 .pwdfield{
  width:160px;
  height:14px;
  border:solid 1px #6699ff;
  background-color:transparent;
  position:absolute;
  top:2px;
  left:366px;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  font-weight:bold;
 }
 
 #login1 .loginbutton{
     position:absolute;
     left:538px;
     top:1px;
 }
 
 #login1 .register{
     width:51px;
     height:9px;
     background-image:url(../images/template/login/login_register.png);
     position:absolute;
     top:7px;
     left:577px;
     display:block;
     text-indent:-9999px;
 }
 
 #login1 .lostpassword{
     width:52px;
     height:9px;
     background-image:url(../images/template/login/login_lostpw.png);
     position:absolute;
     top:7px;
     left:636px;
     display:block;
     text-indent:-9999px;
 }
 
 input[type=password]{
     padding-left:4px;
 }
 
 input[type=text]{
     padding-left:4px;
 }

Som du kan se på mit link ovenfor. Så har jeg et content med nyheder, hvor den altid skal udvide sig, men footer skal altid beholde sig i bunden af contentområdet.

Jeg fik prøvet det med sticky footer, men det virkede ikke

Bruger #17081 @ 15.02.13 07:39

1.258

Hvis du lod være med, at absolute position ALT kunne det være det ville virke. Jeg syntes du skal revurdre den måde du pladsere dine elementer på. Det er ihvertfald svært, at få til, at virke hvis du bruger absolute positioning på alle dine elementer.

Desuden syntes jeg også du skal overveje den måde du opbygger dine artikler på... tabeller er "so last century"

Indlæg senest redigeret d. 15.02.2013 07:42 af Bruger #17081

Bruger #17390 @ 15.02.13 11:48

Hvis du lod være med, at absolute position ALT kunne det være det ville virke. Jeg syntes du skal revurdre den måde du pladsere dine elementer på. Det er ihvertfald svært, at få til, at virke hvis du bruger absolute positioning på alle dine elementer.

Desuden syntes jeg også du skal overveje den måde du opbygger dine artikler på... tabeller er "so last century"

Bruger slet ikke tabeller men ren divs

Bruger #17081 @ 15.02.13 11:58

1.258

Inspection tool siger noget andet

http://cl.ly/image/2p2I1w3Q150E

Bruger #17390 @ 15.02.13 13:15

Der er table på når jeg viewer sourcen i chrome men har ik brugt table :p kan lige smiden den rigtige index her når jeg kommer hjem

men hvordan skal jeg ellers placere ting præcist uden at bruge position absolute?

<< < 1 2 > >>

Hjælp til "height"

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler