kostenloser Webspace werbefrei: lima-city

Div Design

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

absolut positionierten objekten auto bereich boxen code design hintergrund http image kombination letzten box position problem relativ positionierten objekten test text uhr url
  1. Autor dieses Themas

    w***********s

    23:24, 5.6.2010
    Habe mir mal ein neues Design gemacht. hat auch ganz gut geklappt aber jetzt hab icjh ein Problem.
    Und zwar:

    Warum bekommt der text bereich keine scrollbalken? Die Boxen sind ja größer als der text bereich.
    Und warum steht das zhkghjkfu da wo es steht und nicht da wo es eig. sein sollte? unter der letzten box?

    http://website-of-as.lima-city.de/test/style/blog1.php

    Die die Codes:

    blog.php:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>test</title>
  <link rel="StyleSheet" href="style/style.css" type="text/css">
  <link rel="StyleSheet" href="style/blog.css" type="text/css">
 </head>
 <body>
  <div id="div1">

     <div  id="div2"></div>
     <div id="contet">
          <h1 >contet</h1>
          <div id="contethintergrund">
               <div id="text">
               
               <div id="blogcontet">
    <div id="blogtitelleiste">
      <div id="blogtitel">

<b>test</b>
      </div>
      <div id="blogdatum">
<b>30.04.2010 // 13:30 Uhr</b>
      </div>
    </div>
    <div id="bloghintergrund">
       <div id="blogtext">
         zhzhzoojkzophjkrt
         thrf


         hd
         fg
         fdg
         f
         dg
         r
         g <br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

       </div>
              <div id="blogunten"></div>
    </div>
  </div>
  

               <div id="blogcontet">
    <div id="blogtitelleiste">
      <div id="blogtitel">
<b>test</b>

      </div>
      <div id="blogdatum">
<b>30.04.2010 // 13:30 Uhr</b>
      </div>
    </div>
    <div id="bloghintergrund">
       <div id="blogtext">
         zhzhzoojkzophjkrt
         thrf


         hd
         fg
         fdg
         f
         dg
         r
         g <br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

       </div>
              <div id="blogunten"></div>
    </div>
  </div>
   jzhkghjkfuzkj
   jh
   fgjh
   ghj
   gh
   j
   fg
               </div>
          </div>
          <div id="contetunten"></div>
     </div>

     <div id="menue">
          <h1>Menü</h1>
          <div id="menuehintergrund">
               <div id="links">

               </div>
          </div>
          <div id="menueunten"></div>
     </div>

     <div id="fußzeile">
fußzeile
     </div>
    </div>
  </body>
</html>


    style.css:

    *  {
     margin: 0px;
     padding: 0px;
     width: 100%;
}

a:link {
color:#00CD00;
}
a:visited {
color:#00CD00;
}
a:hover {
color:#00CD00;
}

body  {
     background-color: #000000;
     color: #ffffff;
     width: 100%;

}

#div1  {
     background-image: url(hintergrund.png);
     background-repeat: no-repeat;
     width: 950px;
     margin: auto;
     margin-top:0;
     position:relative;

     }

#div2   {

     background-image: url(logo.png);
     width: 950px;
     height: 150px;

}



#contet  {

     margin: 0px 50px 0px 0px;
     width: 700px;
     height: 380px;

}

#contet h1 {

     background-image: url(contetueberschrift.png);
     background-repeat: repeat-x;
     width: 700px;
     height: 25px;
     font-size: 20px;
     color: #00CD00;
     font-family: Arial;
     text-align: center;

}

#contethintergrund {
     background-image: url(contethintergrund.png);
     width: 700px;
     height: 330px;

}

#text {
     width: 670px;
     height: 320px;
     color: #00CD00;
     font-family: Arial;
     padding: 4px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 5px;

}

#contetunten {
     background-image: url(contetunten.png);
     width: 700px;
     height: 10px;

}


#menue  {

     margin: 150px 0px 0px 615px;
     width: 225px;
     height: 376px;
     position:absolute;
     top:0;
     right:0;
     color: #00CD00;
     font-family: Arial;
     text-align: center;
}

#menue h1 {

     background-image: url(menueueberschrift.png);
     background-repeat: repeat-x;
     width: 225px;
     height: 25px;
     font-size: 20px;

}

#menuehintergrund {
     background-image: url(menuehintergrund.png);
     width: 225px;
     height: 376px;

}

#links {
     width: 195px;
     height: 366px;
     overflow: auto;
     text-align: center;
     padding: 4px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 5px;
}

#menueunten {
     background-image: url(menueunten.png);
     width: 225px;
     height: 1px;

}


#fußzeile  {
     background-image: url(fußzeile.png);
     background-repeat: repeat-x;
     margin: 0px 4px 0px 0px;
     width: 700px;
     height: 25px;
     border: solid 0px;
     clear: both;
     color: #00CD00;
     font-family: Arial;
     text-align: center;
     font-size: 17px;
}


    blog.css:

    body  {
     color: #ffffff;
     width: 100%;
}

#blogcontet  {
     border: solid 0px;
     margin: 0px 85px 0px 85px;
     width: 500px;
     height: 200px;

}

#blogtitelleiste {

     background-image: url(blogtitel.png);
     background-repeat: repeat-x;
     border: solid 0px;
     position:absolute;
     margin: 0px 0px 0px 0px;
     width: 500px;
     height: 25px;
     border: solid 0px;
}

#blogtitel {

     border: solid 0px;
     position:absolute;
     margin: 2px 0px 0px 10px;
     width: 310px;
     height: 25px;

}

#blogtitel h1 {

     font-size: 20px;
     text-align: right;
     color: #00CD00;
     font-family: Arial;

}

#blogdatum {

     border: solid 0px;
     position:absolute;
     margin: 2px 0px 0px 320px;
     width: 180px;
     height: 25px;
}

#blogdatum h1 {

     font-size: 20px;
     text-align: right;
     color: #00CD00;
     font-family: Arial;

}

#bloghintergrund {

     border: solid 0px;
     margin: 25px 0px 0px 0px;
     position:absolute;
     background-image: url(bloghintergrund.png);
     width: 500px;


}

#blogtext {
     margin: 10px 3px 3px 10px;
     border: solid 0px;
     width: 485px;
     overflow: auto;
}



#blogunten {

     background-image: url(blogunten.png);
     position:absolute;
     width: 500px;
     height: 10px;

}

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. nerdinator

    Kostenloser Webspace von nerdinator, auf Homepage erstellen warten

    nerdinator hat kostenlosen Webspace.

    23:43, 5.6.2010
    Wie ich das sehe braucht #text ein mal overflow: auto und blogcontent ein mal position:relative;

    Ich hoffe, das ist, was du meinst.

    Die Kombination von absolut-positionierten Objekten mit relativ positionierten objekten ist natürlich böse. Dadurch kommt das mit dem Text unten.
  4. Autor dieses Themas

    w***********s

    0:47, 6.6.2010
    Also:

    text hat jetzt zwar einen scrollbalken wo das zhkghjkf ganz unten ist, aber der Blog klebt immer noch so drauf wie vorher.

  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!