# abgerundete Boxen mit DIV & CSS



## the_black_hawk (10. November 2007)

Hallo Leute, 

wie das Thema schon sagt, interessiert mich wie ich abgerundete navBoxen mit DIV und CSS erstellen kann, ohne dass mein restliches DIV-Layout beeinflusst wird.

Hoffe ihr könnt mir weiterhelfen

greez hawk


----------



## Maik (10. November 2007)

Hi,

Stu Nicholls demonstriert mit Snazzy Borders und More Snazzy Borders abgerundete CSS-Boxen.

Inwiefern die Technik Einfluss auf dein übriges Layout haben soll, kann ich jetzt nicht nachvollziehen, spontan würd ich sagen: überhaupt nicht.

Oder worauf willst du hinaus?


----------



## Zack (11. November 2007)

He,
also nach meinem Wissen ist es mit CSS2 Standart leider noch nicht möglich runde Ecken zu erstellen. Aber du kannst das auch anders machen, mithilfe von Tabellen und hintergründen.
Hier ein Bsp:
http://zack.uttx.net/bsp/

Die Index Seite:

```
<html>
<head>
	<title>bsp</title>

	<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
 <center>
	<div id="gesamt">
		<table border="0px" width="100%" height="100%" cellspacing="0" cellpadding="0">
		 <colgroup>
		 	<col width="20px">
		 	<col>
		 	<col width="20px">
		 </colgroup>
			<tr>
				<td height="20px" background="ecke.oben.links.png"> </td>
				<td height="20px" background="bg.png"> </td>
				<td height="20px" background="ecke.oben.rechts.png"> </td>
			</tr>
			<tr>
				<td background="bg.png"> </td>
				<td> </td>
				<td background="bg.png"> </td>
			</tr>
			<tr>
				<td height="20px" background="ecke.unten.links.png"> </td>
				<td height="20px" background="bg.png"> </td>
				<td height="20px" background="ecke.unten.rechts.png"> </td>
			</tr>
		</table>
	</div>
 <center>
</body>
</html>
```

css:

```
#gesamt
{
  width: 200px;
  height: 500px;
}
```

mfg Ra7or


----------



## Maik (11. November 2007)

Hi.


Ra7or hat gesagt.:


> also nach meinem Wissen ist es mit CSS2 Standart leider noch nicht möglich runde Ecken zu erstellen.


Dann solltest du dein Wissen auf den neusten Stand bringen, denn meine genannten Links nutzen sehr wohl den "CSS2-Standard", und anstelle eines Tabellenkonstrukts, lassen sich auch DIVs direkt mit grafischen abgerundeten Ecken erzeugen, wie es beispielsweise das Layout in diesem Forum demonstriert - siehe hierzu auch den Thread Css Grafiken wie hier die Boxen ?, in dem nach der Umsetzung unseres "v6"-Layouts gefragt wurde.

Oder studier das Tutorial Runde und andere Ecken von Andreas Kalt, oder den "A List Apart"-Artikel CSS Design: Creating Custom Corners & Borders.

Und diese Methoden basieren ebenfalls auf dem "CSS2-Standard".

Übrigens wird in den HTML-Attributen width und height keine Einheit *px* angegeben.


----------



## Tetrikus (3. Dezember 2007)

> Dann solltest du dein Wissen auf den neusten Stand bringen, denn meine genannten Links nutzen sehr wohl den "CSS2-Standard", und anstelle eines Tabellenkonstrukts, lassen sich auch DIVs direkt mit grafischen abgerundeten Ecken erzeugen, wie es beispielsweise das Layout in diesem Forum demonstriert...



Ra7or hat natürlich recht, mit CSS2 ist es noch *nicht* möglich, direkt abgerundete Divs zu erstellen, diese Funktion ist erst in CSS Level 3 enthalten (auch wenn sie von wenigen Browsern bereits unterstütz wird), und dieser Standart wird heute und morgen leider noch nicht verabschiedet..! Das kann gut noch ein paar Jährchen dauern.
Natürlich kann aber ein normales, eckiges Div erstellt werden (wie Maik das erklärt..) und dazu abgerundete Grafiken verwendet werden, dann scheinen die Ecken auch rund zu sein..


----------

