Schatten verschiebt sich nach Float-Befehl

A

AhoiNobbi

Grünschnabel
Hallo,

nach erfolgloser Suche im Forum mache ich nun doch einen neuen Thread auf.

Ich bastele momentan an einer Website... Habe mir ein Template runtergeladen und es meinen Wünschen entsprechend angepasst - immer schön nach der try-and-error-Methode und Zuhilfenahme von selfhtml und anderen Seiten...

Nun habe ich jedoch folgendes Problem, bei dem ich nicht weiterkomme:

aus einem weiteren Template habe ich den Befehl für einen Schatten, der sich per Befehl aus der style.css der Bildgröße anpasst, entnommen und in die CSS und HTML-Datei eingefügt...

Nun wollte ich jedoch, dass ein Bild rechts steht und der Text links herum fließt...

Ansich kein Problem mit dem Float-Befehl, allerdings muss ich bei copy-and-paste was übersehen haben, denn es verändert sich nur der Schatten und das Bild bleibt links...

Das sieht dann wiefolgt aus:
fehler-schatten.jpg


Der Code in der style.css sieht so aus:
div.shadow, div.shadow2, div.shadow3, div.shadow4, div.shadow5 {
padding: 1px;
border-radius: 10px;
-moz-border-radius: 10px;
}
div.shadow {
background-color: #8e8e8e;
border: 1px solid #959595;
margin: 0px;
}
div.shadow2 {
background-color: #aaa;
border: 1px solid #bebebe;
margin: 0;
}
div.shadow3 {
background-color: #d1d1d1;
border: 1px solid #e1e1e1;
margin: 0;
}
div.shadow4 {
background-color: #ededed;
border: 1px solid #f6f6f6;
margin: 0;
}
div.shadow5 {
float: left;
background-color: #fcfcfc;
border: 1px solid #fff;
margin: 0.7em 1em;

}
Zum Vergrößern anklicken....

Und so hab ich's in der HTML eingefügt:

HTML: 
<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">

<img src="wk/2010bhm1.jpg" width="200" height="132" border="0" alt="" style="border:solid 4px #fff;">

 </div></div></div></div></div>


Liegt das daran, dass das gesamte HTML angewiesen ist, sich auf die style.css zu beziehen? Kann ich das per Befehl in der HTML aussetzen?

Danke für eure Antworten!
 
Eines ist bis hierher soweit schon mal sicher: die Ursache steckt überhaupt nicht in diesem Quellcode-Ausschnitt ;-)

imgShadow.png
-Hiermit für den produktiven Einsatz wieder freigegeben- :suspekt:
 
Zuletzt bearbeitet:
Dies ist der ganze Code der Seite. Habe es als Zitat eingefügt, da mit dem HTML-Code-Befehl trotz Zeilenumbruchs immer nach rechts gescrollt werden müsste...

Wäre toll wenn jemand mal rüberschauen könnte...

(BTW: Hier hab ich die einzelne Seite schonmal auf meinen Server geladen - http://www.ospa-dragons.de/OSPAWEB/chronik2010bhm.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>OSPA-Dragons - Chronik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<link href="ie_style.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>
<div class="tail-right"></div>
<div class="tail-top">
<div class="tail-bottom">
<div id="main">
<!-- header -->
<div id="header">
<div class="row-1">
<ul class="nav">

<li><a href="home.html">Home</a></li>

<li><a href="team.html">Team</a></li>

<li><a href="chronik2010bhm.html" class="first">Chronik</a></li>

<li><a href="erfolge.html">Erfolge</a></li>

<li><a href="information.html">Information</a></li>



</ul>
<ul class="top-links">
<li><a href="contact_us.html"><img alt="" src="http://www.tutorials.de/images/icon2.gif" /></a></li>
<li><a href="home.html"><img alt="" src="http://www.tutorials.de/images/icon1.gif" /></a></li>
</ul>
</div>
<div class="row-2"><a href="#"><img alt="" src="http://www.tutorials.de/images/logo.jpg" /></a></div>
</div>
<!-- content -->
<div id="content">
<div class="wrapper">
<div class="aside">
<div class="section">
<!-- box1 begin -->
<div class="box1">
<div class="border-right">
<div class="border-bot">
<div class="border-left">
<div class="right-bot-corner">
<div class="left-bot-corner">
<div class="top-bg">
<div class="inner">
<h3>Wettk&auml;mpfe</h3>
<h5><a href="chronik2011.html">2011</a></h5>
<h5>2010</h5>
<p><a href="chronik2010pf.html">Pfaffenteich</a>
<br><a href="chronik2010wm.html">Warnem&uuml;nde</a>
<br><a href="chronik2010fs.html">Fauler See</a>
<br>Halbmarathon Berlin
<br><a href="chronik2010ic.html">IndoorCup Rostock</a></p>
<h5><a href="chronik2009.html">2009</a></h5>
<h5><a href="chronik2008.html">2008</a></h5>
<h5><a href="chronik2007.html">2007</a></h5>
<h5><a href="chronik2006.html">2006</a></h5>
<h5><a href="chronik2005.html">2005</a></h5>
<h5><a href="chronik2004.html">2004</a></h5>
<h5><a href="chronik2003.html">2003</a></h5>
<h5><a href="chronik2002.html">2002</a></h5>
<h5><a href="chronik2001.html">2001</a></h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- box1 end -->
</div>
<!-- box begin -->
<div class="box">
<div class="border-top">
<div class="border-right">
<div class="border-bot">
<div class="border-left">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="right-bot-corner">
<div class="left-bot-corner">
<div class="inner">
<h3>Bestzeiten</h3>
<h5>250m</h5>
<p>00:57:16 min</p>

<h5>500m</h5>
<p>02:08:91 min

<h5>2000m</h5>
<p>09:03:37 min
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- box end -->
</div><div class="inner_copy">More <a href="http://www.templates.com/">Website Templates</a> @ Templates.com!</div>
<div class="mainContent">
<div class="indent">
<div class="section">
<p><p>

<span style="font-size:15px"><b><i>Berlin, K&ouml;penick - 2. Halbmarathon - 17.04.2010</span></b></i>
<p></p>


<p>Text...Mit 10 eigenen Kr&auml;ften und 10 weiteren Rostocker Paddlern starteten wir als Team "SV Breitling".</p>
<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">

<img src="wk/2010bhm1.jpg" width="200" height="132" border="0" alt="" style="border:solid 4px #fff;">

</div></div></div></div></div>
<p>Vom denkbar...Text...in den Kanal einfuhren und uns dort gegenseitig das Wasser abgruben.
<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">

<img src="wk/2010bhm2.jpg" width="200" height="150" border="0" alt="" style="border:solid 4px #fff;">

</div></div></div></div></div>
Die einzeln vorfahrenden Boote...TextEnde</p>


<p></p>


</div>
</div>

</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="indent">
<div class="fleft">Copyright - Type in Your Name</div>
<div class="fright">Designed by: &nbsp;<a href="http://www.templates.com/"><img alt="website templates" title="templates.com - website templates provider" src="http://www.tutorials.de/images/t-com_logo.gif" /></a> &nbsp;Your provider of &nbsp;<a href="http://www.templates.com/">Website Templates</a></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Zum Vergrößern anklicken....





Und dies hier die style.css
* {margin:0;padding:0}
html, body {height:100%}
body {background:#0184d4;font-family:Tahoma, Geneva, sans-serif;font-size:100%;line-height:1.125em;color:#565656}
img {border:0;vertical-align:top;text-align:left}
object {vertical-align:top;outline:none}
ul, ol {list-style:none}
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.col-1, .col-2, .col-3 {float:left}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.container {width:100%}
/* GLOBAL */
#main {width:1000px;margin:0 auto;background:url(images/main-bg.jpg) no-repeat left top;font-size:.75em;position:relative}
#header {height:319px}
#content {padding:0 20px 38px 30px}
#content .aside {float:left;width:273px;margin-right:40px}
#content .mainContent {float:left;width:635px;padding-top:101px}
#footer {height:71px}
/* tailings */
.tail-top {background:url(images/tail-right.gif) left top repeat-x #fff}
.tail-bottom {background:url(images/tail-bottom.gif) left bottom repeat-x}
.tail-right {background:url(images/tail-top.jpg) left top repeat-x;position:absolute;left:0;top:0;width:50%;height:411px}
/* forms parameters */
input, select, textarea {font-family:Tahoma, Geneva, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
/* other */
.img-indent {margin:0 20px 0 0;float:left;}
.img-box {width:100%;overflow:hidden;padding-bottom:20px}
.img-box img {float:left,right;margin:0 20px 0 0}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:9px}
.p2 {margin-bottom:18px}
.p3 {margin-bottom:27px}
/* txt, links, lines, titles */
a {color:#ff7600;outline:none}
a:hover{text-decoration:none}
h1 {font-size:34px;line-height:1.2em;color:#0083d4;font-weight:normal;text-transform:uppercase;letter-spacing:-1px;margin-bottom:17px}
h2 {font-size:24px;line-height:1.2em;color:#cc0000;text-transform:uppercase;margin-bottom:15px}
h3 {font-size:20px;line-height:1.2em;color:#fff;font-weight:normal;text-transform:uppercase;margin-bottom:37px}
h4 {}
h5 {font-size:1em;color:#ff0000;margin-bottom:6px}
h5 a {color:#ff0000;text-decoration:none}
h5 a:hover {color:#ff0000;text-decoration:underline}
h6 {font-size:1em;margin-bottom:7px}
.link1 {display:block;float:left;background:url(images/link1-bgd.gif) left top repeat-x;color:#fff;text-decoration:none}
.link1:hover {text-decoration:underline}
.link1 em {display:block;background:url(images/link1-left.gif) no-repeat left top}
.link1 b {display:block;background:url(images/link1-right.gif) no-repeat right top;padding:2px 15px 2px 15px;font-weight:normal; font-style:normal}
/* boxes */
.box {background:#fff;width:100%}
.box .border-top {background:url(images/border-top1.gif) repeat-x left top}
.box .border-bot {background:url(images/border.gif) repeat-x left bottom}
.box .border-left {background:url(images/border.gif) repeat-y left top}
.box .border-right {background:url(images/border.gif) repeat-y right top}
.box .left-top-corner {background:url(images/left-top-corner1.gif) no-repeat left top}
.box .right-top-corner {background:url(images/right-top-corner1.gif) no-repeat right top}
.box .left-bot-corner {background:url(images/left-bot-corner.gif) no-repeat left bottom}
.box .right-bot-corner {background:url(images/right-bot-corner.gif) no-repeat right bottom}
.box .inner {padding:16px 26px 27px 34px}
.box1 {width:100%}
.box1 .border-bot {background:url(images/border.gif) repeat-x left bottom}
.box1 .border-left {background:url(images/border.gif) repeat-y left top}
.box1 .border-right {background:url(images/border.gif) repeat-y right top}
.box1 .left-bot-corner {background:url(images/left-bot-corner.gif) no-repeat left bottom}
.box1 .right-bot-corner {background:url(images/right-bot-corner.gif) no-repeat right bottom}
.box1 .top-bg {background:url(images/box-bg-alt.jpg) no-repeat left top;width:100%}
.box1 .inner {padding:16px 26px 27px 34px}
.box2 {background:url(images/box2-bg.gif) no-repeat right top #f0f8fc}
.box2 .inner {padding:24px 26px 30px 34px}
/* header */
#header .row-1 {height:50px}
#header .nav {float:left;padding:14px 0 0 20px}
#header .nav li {display:inline}
#header .nav li a {float:left;background:url(images/divider.gif) no-repeat left 2px;padding:0 38px 0 38px;font-size:16px;line-height:1.2em;color:#fff;text-decoration:none;text-transform:uppercase}
#header .nav li a:hover {text-decoration:none;color:#ff7f0a}
#header .nav li a.first {background:none}
#header .top-links {float:right;padding:16px 0 0 0}
#header .top-links li {float:right;padding:0 38px 0 0}
#header .row-2 {padding:62px 0 0 7px}
/* content */
div.shadow, div.shadow2, div.shadow3, div.shadow4, div.shadow5 {
padding: 1px;
border-radius: 10px;
-moz-border-radius: 10px;
}
div.shadow {
background-color: #8e8e8e;
border: 1px solid #959595;
margin: 0px;
}
div.shadow2 {
background-color: #aaa;
border: 1px solid #bebebe;
margin: 0;
}
div.shadow3 {
background-color: #d1d1d1;
border: 1px solid #e1e1e1;
margin: 0;
}
div.shadow4 {
background-color: #ededed;
border: 1px solid #f6f6f6;
margin: 0;
}
div.shadow5 {
float: left;
background-color: #fcfcfc;
border: 1px solid #fff;
margin: 0.7em 1em;

}
#content .section {padding:0 0 24px 0}
#content .mainContent .indent {padding:0 10px 0 10px}
#content .inner_copy {border:0;color:#fff;float:left;width:50%!important;margin:-100px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}
.img-list li {width:100%;overflow:hidden;padding-bottom:2px}
.img-list li.last {padding-bottom:0}
.img-list li img {float:left}
.img-list li img {float:right}
.img-list li h5 {padding-top:10px}
.list1 li {width:100%;overflow:hidden;padding-bottom:17px}
.list1 li.last {padding-bottom:0}
.list1 li img {float:left;margin-right:20px}
.list2 {padding-bottom:18px}
.list2 li {background:url(images/arrow1.gif) no-repeat left 7px;padding:0 0 0 12px;position:relative}
.list2 li a {color:#0083d4}
/* footer */
#footer .indent {padding:27px 140px 0 70px;color:#fff}
#footer img {position:relative;top:-3px}
#footer a {color:#fff}
/* forms */
#poll-form fieldset {border:none}
#poll-form label {display:block;vertical-align:top;width:100%;overflow:hidden;padding-bottom:2px}
#poll-form input.radio {width:14px;height:14px;margin-right:5px}
#contacts-form {clear:right;width:100%;overflow:hidden;color:#ff7600}
#contacts-form fieldset {border:none;float:left}
#contacts-form .field {clear:both}
#contacts-form label {float:left;width:107px;line-height:18px;padding-bottom:6px;font-weight:bold}
#contacts-form input {width:270px;padding:1px 0 1px 3px;background:none;border:1px solid #e5e5e5;color:#616161;float:left}
#contacts-form textarea {width:502px;height:325px;padding:1px 0 1px 3px;background:none;border:1px solid #e5e5e5;color:#616161;margin-bottom:12px;overflow:auto;float:left}
/* */
Zum Vergrößern anklicken....



Für mich ist der Großteil davon trotz guter Englischkenntnisse noch ein böhmisches Dorf... :rolleyes:
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück