Photoshop-Cafe.de :: Dein Photoshop-Forum - Web-Design Verzerrung bei abgeflachte Kanten und Relief

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)

- -

Verzerrung bei abgeflachte Kanten und Relief (https://www.photoshop-cafe.de/forum/showthread.php?t=5573)

Verzerrung bei abgeflachte Kanten und Relief

Hallo,

in der Anlage habe ich folgende Graphik, welche ich in vier Teile zerschnitten habe. Die Linien kennzeichnen meine Aufteilung. Die Auflösung der gesamten Bildfläche ist 2000 x 2000 px. Wenn ich die Graphik nach folgendem Tutorial in CSS definiere
http://www.andreas-kalt.de/webdesign...ls/runde-ecken

kommt bei mir folgendes Ergebnis heraus
http://netcs.de/
kann mir jemand sagen warum?

Hab's mal dahin verschoben, wo's hin gehört ;)

habe da mal noch den html-code

Code:

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>JK</title>

<link href="css/jk.css" rel="stylesheet" type="text/css" />

</head>



<body>

<div id="wrapper">

<div class="or">

 <div class="ol">

  <div class="ur">

   <div class="ul">

    <div class="inhalt">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no

      jadklsfjadlf<br />

      jadklsfjadlf<br />

      jadklsfjadlf<br />

      jadklsfjadlf<br />

      jadklsfjadlf<br />

      jadklsfjadlf<br />adklsfjadlf<br />

      

      </p>

    </div>

   </div>

  </div>

 </div>

</div>

</div>

</body>

</html>

und den css-code:

Code:

div#wrapper {

height: 800px;

width: 600px;

margin:0 auto;

        

}





.or {

background:url(../images/or.gif) top right no-repeat;

margin:0;

padding:0;

 }

  

.ol {

background:url(../images/ol.gif) top left no-repeat;

margin:0;

padding:0;

}

  

.ur {

background:url(../images/ur.gif) bottom right no-repeat;

margin:0;

padding:0;

}

 

.ul {

background:url(../images/ul.gif) bottom left no-repeat;

margin:0;

padding:0;

}



.inhalt {

 margin:0;

 padding:2.0em;

}

 

.inhalt p {

margin:0; padding:0;

}

vielleicht kann mir jemand sagen warum ich so ein merkwürdiges ergebnis bekomme, also warum ich an der linken seite so einen grauen Streifen bekomme?
http://netcs.de/

hier noch die einzelnen Graphiken bzw. Ecken

Hey, ich wollte dich mal eben kurz aufbauen. Das ist nämlich gar nicht mal so schlecht was du hier tust... immerhin lieferst du die html & css codes, zeigst die Bilder...das ist schon ne ganze Menge Material mit dem man arbeiten und dir sicherlich gut helfen kann.

Ich wollte dich allerdings um ein wenig Geduld bitten. Nicht dass du jetzt denkst: "Toller Moderator...verschiebt mein Thema aber hilft mir nicht!"
Das liegt daran, weil ich hauptsächlich für die Stock-Galerie zuständig bin und von html und css kaum etwas verstehe. Aber wir haben hier einige erfahrene Leute, die sich damit bestens auskennen. Hab also ein wenig Geduld, bis jemand auf dieses Thema aufmerksam wird und eine Lösung für dein Problem weiß. ;)

Schönen Gruß,

Garion

überhaupt kein Problem. Ich warte sehr gerne und überhaupt finde ich das Forum klasse.

hat niemand einen Tipp für mich, was ich an den Graphiken falsch gemacht habe? Habe die Graphiken mit Freistell-Werkzeug erstellt!
bzw. warum bekomme ich an der linken Seite eine graue Schattierung?
http://www.netcs.de

die Breiten- und Höhenangaben stimmen aber? Also in CSS das gleiche wie in JPG/GIF/PNG?