Antworten auf deine Fragen:
Neues Thema erstellen

Div automatisch anpassen.

seecretum

seecretum

Aktives Mitglied

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:

sokie

sokie

Mod | Web

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)
 
seecretum

seecretum

Aktives Mitglied

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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 256 (Mitglieder: 4, Gäste: 252)
Robots: 999

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben