abgerundete Boxen mit DIV & CSS

Status
Nicht offen für weitere Antworten.
T

the_black_hawk

Erfahrenes Mitglied
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
 
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?
 
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:
PHP: 
<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:
PHP: 
#gesamt
{
  width: 200px;
  height: 500px;
}

mfg Ra7or
 
Hi.
Ra7or hat gesagt.:
also nach meinem Wissen ist es mit CSS2 Standart leider noch nicht möglich runde Ecken zu erstellen.
Zum Vergrößern anklicken....
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.
 
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...
Zum Vergrößern anklicken....

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..
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück