Hallo,
ich habe echt schon fast überall geschaut, wo man nur schauen kann, ich verstehe es trotzdem nicht ganz!
Ich möchte eine Runde Box mit CSS erstellen.
Mit Photoshop habe ich vier Viertelkreise erstellt jedes dieser Viertelkreise ist 40px * 40px. Hintergrundfarbe #0d2b40.
Ich habe meinen Versuch hochgelden.
Hier der das CSS und INDEX
Ich würde gerne eine 600px breite und 500px hohe Box mit runden Ecken erstellen was muss ich verändern oder ergänzen?
Liebe Grüße
Billbos
Code
@charset "utf-8";
/* CSS djw_LAYOUT */
#box {
margin: 0;
}
.lt {
background: url(../bilder_rohdatein/box-kanten/left-top.png) top left no-repeat;
}
.rt {
background: url(../bilder_rohdatein/box-kanten/right-top.png) top right no-repeat;
}
.bl {
background: url(../bilder_rohdatein/box-kanten/left-bottom.png) bottom left no-repeat;
}
.br {
background: url(../bilder_rohdatein/box-kanten/right-bottom.png) bottom right no-repeat;
}
.inhalt {
width: 250px;
border: 1px solid;
}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daniel Jannes Weiner</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/LAYOUT.css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="container">
<div id="box">
<div class="lt">
<div class="lt">
<div class="bl">
<div class="br">
<div class="inhalt">
Hallo das ist eine Box</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>