Runde Ecken ohne Grafiken

Status
Nicht offen für weitere Antworten.

fUnKuCh3n

Erfahrenes Mitglied
Hallo,

ich habe ein wenig gesucht und nun folgenden Code zusammen:

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>Unbenanntes Dokument</title>
<style type="text/css">
<!--

.box { 
	width: 770px;
	height: 500px;
	background: #939393;
	position:absolute;
	left:75px;
	top:50px;
	z-index:1;

}
.box h1, .box p {
	margin: 0 10px;
}
.box h1 {
	font-size:150%; 
	color:#ffffff; 
}
.box .top, .box .bottom {
	display:block;
	background: #434343;
}
.box .top b, .box .bottom b {
  display:block;
  height: 1px; 
  overflow: hidden; 
  background: #939393;
}
.box .r1 {
	margin: 0 5px;
}
.box .r2 {
	margin: 0 3px;
}
.box .r3 {
	margin: 0 2px;
}
.box .top .r4, .box .bottom .r4 {
	margin: 0 1px;
	height: 2px;
}
body {
	background-color: #434343;
}

-->
</style>
</head>

<body>
<div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
  <h1>Runde Ecken</h1>
  <p>Runde Ecken ohne Bilder.</p>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
</body>
</html>

Aber wenn man sich das nun so ansieht scheinen die runden Ecken nur für den Bereich zu gelten in dem Text steht, wie bekomme ich es jedoch hin, dass die Ecken über die komplette Höhe (hier z.b. 500px) gehen?

Lg Sascha
 
Hi,

pack den Inhalt in ein weiteres DIV .boxcontent, und zeichne dieses mit der gewünschten Höhe aus:

Code:
<div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
  <div class="boxcontent"> 
    <h1>Runde Ecken</h1>
    <p>Runde Ecken ohne Bilder.</p>
  </div>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
Code:
.boxcontent {
        height: 500px;
}
 
Status
Nicht offen für weitere Antworten.
Zurück