kostenloser Webspace werbefrei: lima-city


Div Design

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

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

    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. 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

    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

Login zum Webhosting ohne Werbung!