Meliah_Rage: Flexibles Layout - Probleme?

SELF-Forum

Flexibles Layout - Probleme?

Meliah_Rage
– Informationen zu den Bewertungsregeln

Hallo,

hab leider wieder ein Problem an dem ich nicht so recht weiter komme, vielleicht könnt Ihr mir da helfen!!! Also ich hab ein HTML Layout entworfen aber leider, bekomme ich es nicht hin das sich das Layout an die Inhalte anpasst? Ich möchte das sich das Layout allen Inhalten flexibel anpasst und in allen Browsern einiger massen angezeigt wird, irgendwie komm ich aber nicht so recht weiter...

hier mal der Code:
font-size: 0.8em;
}
</style>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="leftcolumn">

<h2>Navigation</h2>

<div class="leftnav">
    <ul>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
    </ul>
   </div>

<h2>Test</h2>

<div class="news">

<div class="nnews">
    <h3>Test</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
    <a href="#">mehr...</a>
   </div>

<div class="nnews">
    <h3>Test 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
    <a href="#">mehr...</a>
   </div>
  </div>

<div class="ltext">
   <h2>Newsletter</h2>
    <img src="images/img1.gif" class="floatTL" alt="img 1" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>

</div>

<div id="rightcolumn">

<h1>Test</h1>

<div id="box">
   <div class="content_left">
    <h3>Test</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="#">mehr...</a>
   </div>

<div class="content_right">
    <h3>Test</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="#">mehr...</a>
   </div>
  </div>

<div class="righttext">
   <h2>Test</h2>
    <img src="images/img2.gif" class="floatTL" alt="img 1" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Ut wisi enim ad minim veniam </p>
  </div>

</div>

<div id="footer">
  <ul>
   <li><a href="#">Impressum</a></li>
   <li><a href="#">Über uns</a></li>
   <li><a href="#">AGB</a></li>
   <li><a href="#">Datenschutz</a></li>
   <li><a href="#">Hilfe</a></li>
  </ul>
 </div>

<div id="copyright">Copyright 2007 by :: Designed by ::</div>

</div>

</body>
</html>

Ist es möglich das Layout in der CSS so anzupassen das es sich an en Inhalt anpasst vergrößert/verkleinert ohne das Grundgerüst zu verschieben? Vielen Dank in voraus

MR

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Flexibles Layout - Probleme?

    Meliah_Rage
    – Informationen zu den Bewertungsregeln

    hab den CSS Code vergessen!?!

    HTML * {
     padding: 0px;
     margin: 0px;
    }

    body, p, div  {
     font-family: Verdana, Helvetica, Arial, sans-serif;
     color: black;
     font-size: 12px;
    }

    strong {
     font-weight: bold;
    }

    em {
     font-style: italic;
    }

    img {
     behavior: url(pngbehavior.htc);
    }

    img.floatTL {
     float: left;
     margin-right: 7px;
     margin-bottom: 2px;
     margin-top: 5px;
     margin-left: 5px;
    }

    #wrapper {
     margin: 0 auto;
     width: 800px;
    }

    #header {
     color: #fec51b;
     width: 595px;
     float: right;
     height: 175px;
     background: url(images/header.gif);
     background-repeat: no-repeat;
    }

    #header h1 {
     font-size: 2.1em;
     font-weight: lighter;
     letter-spacing: -1px;
     padding-left: 5px;
    }

    #header h2 {
     float: right;
     margin-top: 130px;
     font-size: 1.6em;
     font-weight: lighter;
     letter-spacing: -1px;
     padding-right: 10px;
    }

    #header a {
     color: #fec51b;
    }

    #leftcolumn {
     color: #333;
     height: auto;
     width: 195px;
     float: left;
     margin-bottom: 5px;
     margin-top: 0px;
    }

    #leftcolumn h2 {
     background-image: url(images/lctbg.gif);
     background-repeat: no-repeat;
     margin-left: 4px;
     margin-top: 0px;
     padding-left: 5px;
     padding-top: 2px;
     padding-bottom: 4px;
     font-size: 1.4em;
     font-weight: lighter;
     letter-spacing: -1px;
    }

    .leftnav {
     clear: both;
     text-align: left;
     color: #7D8085;
     padding: 15px 0em 0px 0px;
     margin-left: 5px;
     margin-right: 5px;
     }

    .leftnav li {
     font-weight: normal;
     margin: 0 0 8px 0;
     padding: 0em 0em 0em 10px;
     border-bottom: 1px solid #ddd;
     list-style-type: none;
    }

    .leftnav li a {
     color: #5c6470;
     text-decoration: none;
    }

    .leftnav li a:hover {
     color: #fec51b;
     text-decoration: none;
    }
    .news {
     padding: 8px;
     margin-top: 5px;
    }

    .news h3{
     font-size: 1em;
     padding-top: 3px;
    }

    .news p {
     font-size: .9em;
     line-height: 1em;
    }

    .news a {
     color: #5c6470;
     float: right;
     margin-top: -3px;
     padding-right: 2px;
     text-decoration: none;
    }

    .news a:hover {
     color: #fff;
     text-decoration: none;
    }

    .nnews {
     background-image: url(images/newsbg1.gif);
     background-repeat: repeat;
     margin-top: 5px;
     padding-left: 2px;
     padding-bottom: 19px;
    }

    .ltext {
     margin-top: 8px;
    }

    .ltext p {
     margin: 5px 5px 5px 5px;
    }

    #rightcolumn {
     float: right;
     height: auto;
     color: #333;
     height: auto;
     width: 595px;
     display: inline;
     margin-bottom: 5px;
    }

    #rightcolumn h1 {
     font-size: 1.5em;
     font-weight: lighter;
     letter-spacing: -1px;
     margin-top: 5px;
     padding-left: 5px;
     padding-top: 3px;
     padding-bottom: 3px;
     background-image: url(images/mth1bg.gif);
     background-repeat: no-repeat;
    }

    #box {
     margin-top: 15px;
     margin-bottom: 5px;
    }

    #box a {
     color: #5c6470;
     text-decoration: none;
    }

    #box a:hover {
     color: #fff;
     text-decoration: none;
    }

    .content_right {
     margin: 0 auto;
     display: inline;
     float: right;
     width: 275px;
     margin-right: 0px;
     padding: 5px;
     text-align: left;
     background-image: url(images/bbg.gif);
     background-repeat: repeat;
    }

    .content_left {
     margin: 0 auto;
     display: inline;
     float: left;
     width: 275px;
     margin-left: 0px;
     padding: 5px;
     text-align: left;
     background-image: url(images/bbg.gif);
     background-repeat: repeat;
    }

    .content_left h3 {
     font-size: 1em;
     margin-bottom: 5px;
    }

    .content_right h3 {
     font-size: 1em;
     margin-bottom: 5px;
    }

    .righttext {
     margin-top: 8px;
    }

    .righttext p {
     margin: 5px 5px 5px 5px;
    }

    #rightcolumn h2 {
     font-size: 1.5em;
     font-weight: lighter;
     letter-spacing: -1px;
     margin-top: 5px;
     padding-left: 5px;
     padding-top: 3px;
     padding-bottom: 3px;
     margin-top: 173px;
     background-image: url(images/mth1bg.gif);
     background-repeat: no-repeat;
    }

    #footer {
     background-image: url(images/footer.gif);
     background-repeat: no-repeat;
     width: 798px;
     height: 30px;
     clear: both;
     color: #333;
     text-align: right;
     padding: 8px 0px 0px 0px;
     font-size: .8em;
    }

    #footer p{
     padding-bottom: 5px;
    }

    #footer li {
     display: inline;
    }

    #footer a {
     font-size: 1.2em;
     color: #5c6470;
     text-decoration: none;
     margin: 0px;
     padding: 5px;
    }

    #footer a:hover {
     color: #fff;
    }

    #copyright {
     font-size: 0.8em;
    }

    MR

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flexibles Layout - Probleme?

      Engin Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      hast du schon Probiert, den jeweils betroffenen Div ein heigt:auto zu geben?

      Grüße,
      Engin
       GYRO

      --
      Dilated peoples|Team Vestax
      Gut ist der, der nach dem finden noch weiß, was er suchte.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Flexibles Layout - Probleme?

      Steel
      – Informationen zu den Bewertungsregeln

      Hi,

      Hm. Wenn Du moechtest, dass dein layout sich flexibel verhaelt, warum verbietest Du ihm das im CSS?

      Du gibst Deinen Elementen ziemlich klare Anweisungen, wieviel Pixel sie breit und hoch sein sollen. Jetzt trauen sie sich nicht mehr was anderes zu machen, weil sie angst haben du koenntest dauer werden.

      Sprich mal mit ihnen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln