Nicht mehr ganz neu hier
Hallo Community,
ich versuche ein rundes CSS-Layout hinzubekommen, was aber nicht so funktioniert, wie ich es mir vorstelle.
Das ganze soll 100% breit sein und halt an allen Ecken diese runden Eckpunkte (vier Bilder) und an allen vier Seiten einen Rahmen haben, welcher mithilfe von vier Bildern realisiert wird.
Das zum Rand, der bereitet mir ja schon Probleme.
Nun zum Innenbereich. Ich brauche zwei Bereiche, wovon einer 20% und der andere 80% breit sein soll.
Links ein Menü und rechts der Inhalt.
Das Problem ist jetzt, wenn ich die zwei oberen Ecken platziere und dann dazwischen den Rand positioniere, welcher ja 100% sein soll, bekomme ich arge Probleme mit dem rechten Eckstück. Es umfließt einfach den oberen Rahmen und positioniert sich unter ihm.
Mein bisheriger Quellcode:
HTML:
CSS:
Es sollte vom Grundprinzip aussehen wie die neue phpBB Admin-Oberfläche:
Und die Rahmen- und Eckbilder:
ich versuche ein rundes CSS-Layout hinzubekommen, was aber nicht so funktioniert, wie ich es mir vorstelle.
Das ganze soll 100% breit sein und halt an allen Ecken diese runden Eckpunkte (vier Bilder) und an allen vier Seiten einen Rahmen haben, welcher mithilfe von vier Bildern realisiert wird.
Das zum Rand, der bereitet mir ja schon Probleme.
Nun zum Innenbereich. Ich brauche zwei Bereiche, wovon einer 20% und der andere 80% breit sein soll.
Links ein Menü und rechts der Inhalt.
Das Problem ist jetzt, wenn ich die zwei oberen Ecken platziere und dann dazwischen den Rand positioniere, welcher ja 100% sein soll, bekomme ich arge Probleme mit dem rechten Eckstück. Es umfließt einfach den oberen Rahmen und positioniert sich unter ihm.
Mein bisheriger Quellcode:
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../system/ewpf/stylesheets/cp-main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Expression Arts Element Web Control Panel: Startseite</title>
</head>
<body>
<div id="header"></div>
<div id="top-menu"></div>
<div id="main">
<div class="edge-left-top"></div>
<div class="border-top"></div>
<div class="edge-right-top"></div>
<div id="left-menu"></div>
<div id="content"></div>
<div id="footer">Copyright © 2007 Expression Arts. Alle Rechte vorbehalten.</div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0 RC8</div></body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body, html {
background-color: #E0DEDB;
color: #333333;
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
margin: 10px;
}
a:link {
color: #0099FF;
text-decoration: none;
}
a:visited {
color: #0099FF;
text-decoration: none;
}
a:hover {
color: #CC0000;
text-decoration: underline;
}
a:active {
color: #CC0000;
text-decoration: none;
}
h1 {
color: #999999;
font-size: 14px;
}
h2 {
color: #999999;
font-size: 13px;
}
h3 {
color: #FF0000;
font-size: 12px;
}
h4 {
color: #00CC00;
font-size: 12px;
}
#header {
background-image: url(../images/header/header-cp.png);
background-repeat: no-repeat;
height: 33px;
width: 450px;
}
#main {
margin-top: 5px;
width: 99%;
}
div.edge-left-top {
background-image: url(../images/edge/edge-left-top.png);
background-repeat: no-repeat;
float: left;
height: 12px;
width: 12px;
}
div.border-top {
background-image: url(../images/border/border-top.png);
background-repeat: repeat-x;
float: left;
height: 2px;
margin-top: 1px;
width: 98.525%;
}
div.edge-right-top {
background-image: url(../images/edge/edge-right-top.png);
background-repeat: no-repeat;
float: right;
height: 12px;
width: 12px;
}Und die Rahmen- und Eckbilder:
