Anzeige

Div automatisch anpassen.

Div automatisch anpassen. | PSD-Tutorials.de

Erstellt von seecretum, 18.05.2009.

  1. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Div automatisch anpassen.
    Hab es schon oft hier gelesen, klappt bei mir aber trotzdem nicht, ich habe einen Slice für den header einen für die Navi einen für den Content, dann habe ich einen "erweiterer" und eine spiegelung. Der Contentbereicht soll vom Erweiterer erweitert werden. Stell mal CSS und Body rein. Vielen Dank schonmal! Achja hier ein Video in dem zu sehen ist wie es funzen soll... http://tv.adobe.com/#vi+f1594v1010 Leider sieht man den Code nicht im DW und da FW auch nicht optimal exportiert möchte ich es selber einstellen...

    body {
    background-color: #000000;
    margin:0px;
    padding:0px;
    background-image: url(bilder/back1.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position:center;
    border:#FFF;
    border:thin;
    }
    .p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
    }
    p {
    padding-top:0px;
    margin-top:0px;
    overflow:visible;
    }
    img {
    border:0px;
    }
    }
    /*div {
    margin:0px;
    padding-top:20px;
    font-family:arial; font-size:14px;*/
    }
    .AbsWrap {
    width: 100%;
    position: relative;
    }
    .rowWrap {
    width: 100%;
    }
    .clearfloat {
    clear:both;
    height:0px;

    }
    a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
    }
    /* Eigener Code ab hier */
    #alles {
    margin:auto;
    position:relative;
    width:1024px;
    }
    #img2 {
    border:0px;
    float:right;
    padding-left:20px;
    }
    #img3 {
    border:0px;
    margin:auto;
    float:none;
    padding-top:10px;

    }
    #t1 {
    margin:0px;
    padding-top:20px;
    font-family:arial;
    font-size:14px;
    }
    #t1w {
    margin:0px;
    padding-top:20px;
    font-family:arial;
    font-size:14px;
    color:#FFF;
    }
    #header {
    position:absolute;
    left:36px;
    top:36px;
    width:960px;
    height:298px;
    background-image: url(bilder/headerindex.jpg);
    }
    #headerflash {
    position:absolute;
    width:943px;
    height:272px;
    padding-left:17px;
    padding-top:17px;
    }
    #navbereich {
    position: absolute;
    left:36px;
    top:325px;
    width:960px;
    height:86px;
    background-image: url(bilder/navbereichindex.jpg);
    }
    #navtabelle {
    position: relative;
    padding-left: 16px;
    }
    #navtabelleunten {
    position:relative;
    padding-left: 16px;
    padding-top: 0px;
    }
    #leftside {
    position:relative;
    left:36px;
    top:411px;
    width:639px;
    height:544px;
    background-image: url(bilder/leftsideindex.jpg);
    }
    /*#contentleftside{
    position:relative;
    left:36px;
    top:411px;
    width:960px;
    height:544px;
    background-image: url(bilder/leftsideindex.jpg);
    overflow:visible;
    } */
    #content {
    position:absolute;
    left:36px;
    top:411px;
    width:960px;
    height:193px;
    background-image: url(bilder/content.png);
    }
    #erweiterer {
    position:absolute;
    width:960px;
    left:36px;
    top:604px;
    background-image:url(bilder/erweiterer1px.png);
    background-repeat:repeat;
    height:1px;

    }
    #spiegelung {
    position:absolute;
    top:605px;
    left:36px;
    width:960px;
    height:166px;
    background-image: url(bilder/spiegelung.png);
    }
    #h1 {
    margin:0px;
    padding:0px;
    font-size: 24px;
    font-family: arial;
    text-decoration:underline;
    text-align: left;
    color: #000;

    }
    #h2 {
    margin:0px;
    padding-top:20px;
    font-size: 20px;
    font-family: arial;
    text-align: left;
    color: #000;

    }
    #h1w {
    margin:0px;
    padding:0px;
    font-size: 24px;
    font-family: arial;
    text-decoration:underline;
    text-align: left;
    color: #fff;

    }
    #h2w {
    margin:0px;
    padding-top:20px;
    font-size: 20px;
    font-family: arial;
    text-align: left;
    color: #fff;
    }
    #lefttext {
    position: relative;
    padding-top:40px;
    padding-left:45px;
    width:565px;
    }
    #contenttext {
    position:relative;
    padding-top:40px;
    padding-left:45px;
    width:870px;
    }
    #rightside {
    position: absolute;
    left:675px;
    top:411px;
    width:321px;
    height:544px;
    margin-bottom:0px;
    background-image: url(bilder/rightsideindex.jpg);
    overflow:hidden;

    }
    #righttext {
    position: relative;
    padding-top:40px;
    padding-left:20px;
    width:275px;
    height:544px;

    BODY

    <div id="alles">
    <div id="header">
    <div id="headerflash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="926" height="280" id="FlashID" title="Animierter Header">
    <param name="movie" value="flash/finalhead.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie d ieses Tag. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash/finalhead.swf" width="926" height="280">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
    <div>
    <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>
    </div>
    </div>
    <div id="navbereich">
    <div id="navtabelle">
    <!--The following section is an HTML table which reassembles the sliced image in a browser.-->
    <!--Copy the table section including the opening and closing table tags, and paste the data where-->
    <!--you want the reassembled image to appear in the destination document. -->
    <!--======================== BEGIN COPYING THE HTML HERE ==========================-->
    <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="926">
    <!-- fwtable fwsrc="blabla.png" fwpage="Seite 1" fwbase="navbar.gif" fwstyle="Dreamweaver" fwdocid = "824790995" fwnested="0" -->
    <tr>
    <!-- Shim row, height 1. -->
    <td><img src="bilder/spacer.gif" width="133" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="131" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="131" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="2" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="130" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="2" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="131" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="129" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="3" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="131" height="1" border="0" alt="" /></td>
    <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
    <!-- row 1 -->
    <td><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c1','','bilder/navbar_r1_c1_f2.gif',1);"><img name="navbar_r1_c1" src="bilder/navbar_r1_c1.gif" width="133" height="50" border="0" id="navbar_r1_c1" alt="" /></a></td>
    <td colspan="2"><a href="autor.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c2','','bilder/navbar_r1_c2_f2.gif',1);"><img name="navbar_r1_c2" src="bilder/navbar_r1_c2.gif" width="132" height="50" border="0" id="navbar_r1_c2" alt="" /></a></td>
    <td colspan="2"><a href="chronist.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c4','','bilder/navbar_r1_c4_f2.gif',1);"><img name="navbar_r1_c4" src="bilder/navbar_r1_c4.gif" width="132" height="50" border="0" id="navbar_r1_c4" alt="" /></a></td>
    <td colspan="2"><a href="infektion.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c6','','bilder/navbar_r1_c6_f2.gif',1);"><img name="navbar_r1_c6" src="bilder/navbar_r1_c6.gif" width="132" height="50" border="0" id="navbar_r1_c6" alt="" /></a></td>
    <td colspan="2"><a href="kurzgeschichte.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c8','','bilder/navbar_r1_c8_f2.gif',1);"><img name="navbar_r1_c8" src="bilder/navbar_r1_c8.gif" width="133" height="50" border="0" id="navbar_r1_c8" alt="" /></a></td>
    <td colspan="2"><a href="pressestimmen.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c10','','bilder/navbar_r1_c10_f2.gif',1);"><img name="navbar_r1_c10" src="bilder/navbar_r1_c10.gif" width="130" height="50" border="0" id="navbar_r1_c10" alt="" /></a></td>
    <td colspan="2"><a href="books.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar_r1_c12','','bilder/navbar_r1_c12_f2.gif',1);"><img name="navbar_r1_c12" src="bilder/navbar_r1_c12.gif" width="134" height="50" border="0" id="navbar_r1_c12" alt="" /></a></td>
    <td><img src="bilder/spacer.gif" width="1" height="50" border="0" alt="" /></td>
    </tr>
    <!-- This table was automatically created with Adobe Fireworks -->
    <!-- Adobe -->
    </table>
    <!--========================= STOP COPYING THE HTML HERE =========================-->
    </div>
    <div id="navtabelleunten">
    <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="265">
    <!-- fwtable fwsrc="blabla.png" fwpage="Seite 1" fwbase="imprintbar.gif" fwstyle="Dreamweaver" fwdocid = "1246012515" fwnested="0" -->
    <tr>
    <td><img src="bilder/spacer.gif" alt="" name="undefined_2" width="132" height="1" border="0" /></td>
    <td><img src="bilder/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
    <td><img src="bilder/spacer.gif" alt="" name="undefined_2" width="132" height="1" border="0" /></td>
    <td><img src="bilder/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
    </tr>
    <tr>
    <td><a href="Impressum.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('imprintbar_r1_c1','','bilder/imprintbar_r1_c1_f2.gif',1);"><img name="imprintbar_r1_c1" src="bilder/imprintbar_r1_c1.gif" width="132" height="30" border="0" id="imprintbar_r1_c1" alt="" /></a></td>
    <td bgcolor="#000000"><img src="bilder/spacer.gif" alt="" name="undefined_2" width="1" height="30" border="0" /></td>
    <td><a href="Haftungsausschluss.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('imprintbar_r1_c3','','bilder/imprintbar_r1_c3_f2.gif',1);"><img name="imprintbar_r1_c3" src="bilder/imprintbar_r1_c3.gif" width="132" height="30" border="0" id="imprintbar_r1_c3" alt="" /></a></td>
    <td><img src="bilder/spacer.gif" alt="" name="undefined_2" width="1" height="30" border="0" /></td>
    </tr>
    </table>

    </div>
    </div>
    <div id="content">
    <div id="contenttext">
    <div id="h1">
    Startseite
    </div>
    <div id="h2">
    Tief im Wald und unter der Erde n
    </div>
    <div id="t1">
    <p>Es lebt tief im Wald. Es verfolgt dich. Und es tötet</div>
    </div>
    </div>
    <div id="erweiterer"></div>
    <div id="spiegelung"></div>

    </div>
     
    Zuletzt bearbeitet: 18.05.2009
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Div automatisch anpassen.
    AW: Div automatisch anpassen.

    gelich eingangs im Video wird erwähnt, dass ein auberes html/css Design wichtig für den Prozess der Layoutgestaltung ist. In deinem Code verwendest du allerdings teilweise Tabellen für das Layout, was die Sache unnötig verkompliziert.

    der Hauptgrund für das Misslingen der erweiterungen liegt darin, dass du für diese Element absolute Positionierungen verwendest. Am ende des Viedos wird auch nochmal deutlich gesagt "wir haben einen gut strukturierten Code mit floats statt absoluter Positionierungen."

    divs mit einer Klasse h1 für die Überschrift sind völlig ungeeignet - Überschriften fasst man besser in das dafür vorgesehene tag <h1> (was sich übrigens auch bei richtiger Verwendung in der Suchmaschinenbewertung auswirkt)
     
    #2      
  3. seecretum

    seecretum Aktives Mitglied

    Dabei seit:
    09.12.2008
    Beiträge:
    984
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    CS4 MC, c4d r11.5
    Kameratyp:
    5d Mark II, 24-105, 50 1.2,
    Div automatisch anpassen.
    AW: Div automatisch anpassen.

    Ja stimmt is meine erste CSS Seite :p deswegen gibts wohl noch ein bisschen durcheinander... so nochmal der Code... hab jetzt alles mit relativier postition! Nochmal ich möchte den Container Content erweitern indem sich der Container Erweiterer erweitert!

    CSS:

    body {
    background-color: #000000;
    margin:0px;
    padding:0px;
    background-image: url(bilder/back1.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position:center;
    }
    .p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
    }
    p {
    padding-top:0px;
    margin-top:0px;
    overflow:visible;
    }
    img {
    border:0px;
    }
    }
    /*div {
    margin:0px;
    padding-top:20px;
    font-family:arial; font-size:14px;*/
    }
    .AbsWrap {
    width: 100%;
    position: relative;
    }
    .rowWrap {
    width: 100%;
    }
    .clearfloat {
    clear:both;
    height:0px;

    }
    a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
    }
    /* Eigener Code ab hier */
    #alles {
    top: 36px;
    margin:auto;
    position:relative;
    width:960px;
    }
    #img2 {
    border:0px;
    float:right;
    padding-left:20px;
    }
    #img3 {
    border:0px;
    margin:auto;
    float:none;
    padding-top:10px;

    }
    #t1 {
    margin:0px;
    padding-top:20px;
    font-family:arial;
    font-size:14px;
    }
    #t1w {
    margin:0px;
    padding-top:20px;
    font-family:arial;
    font-size:14px;
    color:#FFF;
    }
    #header {
    position:relative;
    width:960px;
    height:289px;
    background-image: url(bilder/headerindex.jpg);
    }
    #headerflash {
    position:relative;
    width:925px;
    height:275px;
    padding-left:17px;
    padding-top: 15px;
    overflow:hidden;
    }
    #navbereich {
    position:relative;
    width:960px;
    height:102px;
    background-image: url(bilder/navbereichindex.jpg);
    }
    #navtabelle {
    position: relative;
    padding-left: 16px;
    padding-top: 7px;
    }
    #navtabelleunten {
    position:relative;
    padding-left: 16px;
    padding-top: 0px;
    height: 30px;
    overflow: visible;
    }
    #leftside {
    position:relative;
    left:36px;
    /*top:411px;*/
    width:639px;
    height:544px;
    background-image: url(bilder/leftsideindex.jpg);
    float:left;
    }
    /*#contentleftside{
    position:relative;
    left:36px;
    top:411px;
    width:960px;
    height:544px;
    background-image: url(bilder/leftsideindex.jpg);
    overflow:visible;
    } */
    #content {
    position:relative;
    width:960px;
    height:193px;
    background-image: url(bilder/content.png);
    }
    #erweiterer {
    position:relative;
    width:960px;
    background-image:url(bilder/erweiterer1px.png);
    background-repeat:repeat-y;
    overflow: visible;
    }

    #spiegelung {
    position:relative;
    width:960px;
    height:166px;
    background-image: url(bilder/spiegelung.png);
    }
    #h1 {
    margin:0px;
    padding:0px;
    font-size: 24px;
    font-family: arial;
    text-decoration:underline;
    text-align: left;
    color: #000;

    }
    #h2 {
    margin:0px;
    padding-top:20px;
    font-size: 20px;
    font-family: arial;
    text-align: left;
    color: #000;

    }
    #h1w {
    margin:0px;
    padding:0px;
    font-size: 24px;
    font-family: arial;
    text-decoration:underline;
    text-align: left;
    color: #fff;

    }
    #h2w {
    margin:0px;
    padding-top:20px;
    font-size: 20px;
    font-family: arial;
    text-align: left;
    color: #fff;
    }
    #lefttext {
    position: relative;
    padding-top:40px;
    padding-left:45px;
    width:565px;
    }
    #contenttext {
    position:relative;
    padding-top:40px;
    padding-left:45px;
    width:870px;
    }
    #rightside {
    position: absolute;
    left:675px;
    /*top:411px;*/
    width:321px;
    height:544px;
    margin-bottom:0px;
    background-image: url(bilder/rightsideindex.jpg);

    }
    #righttext {
    position: relative;
    padding-top:40px;
    padding-left:20px;
    width:275px;
    height:544px;
    }
    #leftandright {
    position:relative;
    top:36px;
    }


    HTML:

    <div id="alles">
    <div id="header">
    <div id="headerflash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="926" height="279" id="FlashID" title="Animierter Header">
    <param name="movie" value="flash/finalhead.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie d ieses Tag. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash/finalhead.swf" width="926" height="280">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
    <div>
    <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>
    </div>
    </div>
    <div id="navbereich">
    </div>
    <div id="content">
    <div id="contenttext">
    <div id="h1">
    Startseite
    </div>
    <div id="h2">
    Tief im Wald und unter der Erde
    </div>
    <div id=t1>
    Es lebt tief im Wald. Es verfolgt dich. Und e
    </div>
    </div>
    </div>
    <div id="erweiterer"></div>
    <div id="spiegelung"></div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    //-->
    </script>
     
    #3      
Seobility SEO Tool
x
×
×