✔ Objekt an anderem ausrichten

Status
Nicht offen für weitere Antworten.
G

gilldex

Mitglied
Hallo zusammen

Ich habe das folgende Problem:

Ich möchte Objekte, in meinem Fall jetzt Schatten als Bilder an einem DIV Container ausrichten, bekomme das aber nicht richtig hin. Um alles besser zu testen habe ich mal eine neue CSS Datei und eine neue HTML Datei angelegt.

CSS Datei:

HTML: 
#box{
	width: 600pt;
	min-height: 600pt;
	margin-left: auto;
	margin-right: auto;
	height: 600pt;
	background-color:#FF0000;
}
#block{
	background-color:#FFFF00;
	width: 565pt;
	height: 565pt;
	margin:auto;
}
#sh_oben{
}
#sh_unten{
}
#sh_rechts{
float: right;
margin:none;
}
#sh_links{
float: left;
margin:none;
}

HTML Datei:

HTML: 
<head>
				<link rel="stylesheet" href="rstmain_css.css" />
</head>

<div id="box">
	<div id="sh_oben"><img src="layout/shadow_oben.png" alt="" title=""></div>
	<div id="sh_rechts"><img src="layout/shadow_rechts.png" alt="" title=""></div>
	<div id="sh_links"><img src="layout/shadow_links.png" alt="" title=""></div>
		<div id="block"></div>
			<div id="sh_unten"><img src="layout/shadow_unten.png" alt="" title=""></div>
</div>
	</body>
</html>

Das Ergebnis könnt ihr hier ansehen: http://www.rustafellaz.ch/hp1.1/

Der obere und untere Schatten liegen perfekt am gelben Block an, nur nicht der linke und der rechte Schatten. Kann mir jemand helfen bei meinem Problem?

Danke schon mal.
 
Hi!

Also dein linker und rechter Schatten sind in div-containern. Ich würde es statt div mit span probieren, diese erzeugen keinen Umbruch sind ansonsten aber das gleiche wie div.

Obs hilft weiss ich nicht, aber vielleicht wirds dadurch etwas besser.

Außerdem hast du für #box als margin "auto" eingestellt. Ändere das mal auf "none" ab.
 
Zuletzt bearbeitet:
Danke dir für deine Antwort, aber leider ist das noch nicht die Lösung die ich suche, denn nun ist es auf eine andere Richtung verzogen.
 
Hi,

dass die äußeren Grafiken nicht sauber am inneren Block sitzen liegt wohl daran, dass du die Boxendimensionen nicht mit "px", sondern mit "pt" definiert hast, was zu Ungenauigkeiten führt, da die Grafiken in "px" dimensioniert sind.

Versuch mal, den Schattenwurf a là Onion Skinned Drop Shadows zu konstruieren.

Das würde dann so aussehen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rusta Fellaz</title>
<link rel="stylesheet" type="text/css" href="rstmain_css.css">
</head>
<body>

<div id="box">
     <div id="sh_links">
          <div id="sh_rechts">
               <div id="sh_oben">
                    <div id="sh_unten">
                         <div id="block">block</div>
                    </div>
               </div>
          </div>
     </div>
</div>

</body>
</html>
Code: 
#box{
        width: 790px;
        min-height: 790px;
        height:auto !important;
        height: 790px;
        margin-left: auto;
        margin-right: auto;
        background-color:#FF0000;
}
#block{
        background-color:#FFFF00;
        width: 764px;
        height: 764px;
        margin:auto;
}
#sh_links{
background:url(layout/shadow_links.png) repeat-y left top;
}
#sh_rechts{
background:url(layout/shadow_rechts.png) repeat-y right top;
}
#sh_oben{
background:url(layout/shadow_oben.png) no-repeat left top;
padding-top:12px;
}
#sh_unten{
background:url(layout/shadow_unten.png) no-repeat left bottom;
padding-bottom:12px;
}
Zudem möchte ich euch beide darauf aufmerksam machen, dass es den Wert "none" für die margin-Eigenschaft nicht gibt.
 
Hi,

ich reiche dir dieses modifizierte Stylesheet nach ;-)

Code: 
#box{
        width:790px;
        min-height:790px;
        height:auto !important;
        height:790px;
        margin-left:auto;
        margin-right:auto;
        background-color:#FF0000;
}
#block{
        background-color:#FFFF00;
        height:766px;
}
#sh_links{
background:url(layout/shadow_links.png) repeat-y left top;
padding-left:13px;
}
#sh_rechts{
background:url(layout/shadow_rechts.png) repeat-y right top;
padding-right:19px;
}
#sh_oben{
background:url(layout/shadow_oben.png) no-repeat left top;
padding-top:12px;
}
#sh_unten{
background:url(layout/shadow_unten.png) no-repeat left bottom;
padding-bottom:12px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück