CSS unregelmäßiger rand bei div-container

Skoell · 10. Februar 2009

hallo,

ich möchte einem div-container einen unregelmäßigen rand verpassen, damit er aussieht, als ob alles auf einen blatt papier stünde.
jetzt habe ich versucht, das via CSS und dem sliding door prinzip umzusetzen, allerdings funktioniert das nur bedingt.

das in der untersten ebene liegende bild schiebt sich unter den anderen hindurch, weshalb das ganze dann blöd aussieht - hat da jemand eine idee?

beten · 10. Februar 2009

Guten Abend.

Poste doch mal deinen Code dazu. Das würde die Sache einfacher machen

Gruß

luxactor · 11. Februar 2009

Ich würde sowas mit DIVs um den Intalt herum realisieren, wäre einfacher. Es gibt zwar "border-image", das ist aber Bestandteil von CSS3, und wird noch kaum unterstützt.

Hier ein Beispiel: http://stackoverflow.com/questions/282489/css-div-w-border-images

Skoell · 11. Februar 2009

so, hier der HTML-code

Code:

<!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" />
<link rel="stylesheet" type="text/css" href="css/body.css">
<title>Unbenanntes Dokument</title>
<style type="text/css"></style>
</head>

<body>
<div id="container">
	<div id="oben"><td class="mittig">Banner</td></div>
	<div id="header2"><img class="header2" src="grafik/sponsoren/haupt/Aenagross.jpg"  width="140" height="31" />  <img class="header2" src="grafik/sponsoren/haupt/logo_naseweis.jpg"  width="72" height="50" />
	</div>
		<div id="menu">
		<ul>
			<li>
			<h2>Home</h2>
				<ul>
					<li><a title="" href="">Startseite</a></li>
				</ul>
			</li>
		</ul>
		
		<ul>
			<li>
			<h2>Info</h2>
				<ul>
					<li><a title="" href="">Forum</a></li>
					<li><a title="" href="">Ort</a>
					<ul>
						<li><a title="" href="">Anfahrt</a></li>
						<li><a title="" href="">Lagepl&auml;ne</a></li>
						<li><a title="" href="">&Uuml;bernachtung</a></li>
					</ul>
					<li><a title="" href="">Tickets</a></li>
					<li><a title="" href="">Wichtiges</a>
					<ul>
						<li><a title="" href="">Rechte</a></li>
						<li><a title="" href="">Linkhaftung</a></li>
						<li><a title="" href="">FAQ</a></li>
					</ul>
					<li><a title="" href="">Shop</a></li>
					<li><a title="" href="">Kontakt</a></li>
					</li>
				</li>
			</ul>
			
		</ul>	
		<ul>
			<li>
			<h2>News</h2>
				<ul>
					<li><a title="" href="">Neuigkeiten</a></li>
					<li><a title="" href="">Newsletter</a></li>
				</ul>
			</li>
			
		</ul>
		<ul>
			<li>
			<h2>Programm</h2>
				<ul>
					<li><a title="" href="">Bands</a></li>
					<li><a title="" href="">Bogenturnier</a></li>
					<li><a title="" href="">B&uuml;hnepl&auml;ne</a></li>
					<li><a title="" href="">Kinder</a></li>
					<li><a title="" href="">Kleinkunst</a></li>
					<li><a title="" href="">Lager</a></li>
					<li><a title="" href="">Markt</a></li>
					<li><a title="" href="">Theater</a></li>
					<li><a title="" href="">Workshops</a></li>
				</ul>
			</li>
		</ul>	
			<ul>
			<li>
			<h2>Presse</h2>
				<ul>
					<li><a title="" href="">Pressestimmen</a></li>
					<li><a title="" href="">Galerien</a></li>
					<li><a title="" href="">R&uuml;ckblick</a></li>
					<li><a title="" href="">Material</a></li>
					<li><a title="" href="">Verlinkung</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
			<h2>Sponsoren</h2>
				<ul>
					<li><a title="" href="">Sponsoren</a></li>
					<li><a title="" href="">Freunde</a></li>
					<li><a title="" href="">Partnerveranstaltungen</a></li>
				</ul>
			</li>
		</ul>
		
		</div>
		<div id="innen">
			<div class="ro">
				<div class="lo">
					<div class="lu">
						<div class="ru">
							<div class="inhalt">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
							Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
							</p>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
							Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
							</p>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
							Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
							</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<div id="footer1">Spnsoren klein</div>
	<div id="footer2"><a href="impressum.html" class="link_footer2" target="_self">Impressum</a></div>
	<div id="footer3">Copyright 2007-2009</div>
</div>
	
</div>
</body>
</html>

und das dazugehörige CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #CCCCCC;
	font-family:sans-serif;
}

a.link_footer2:link {
	color: #666666;
	text-decoration: none;
}
a.link_footer2:visited {
	text-decoration: none;
	color: #CCCCCC;
}
a.link_footer2:hover {
	text-decoration: none;
	color: #333333;
}
a.link_footer2:active {
	text-decoration: none;
}

img.header1 { 
	display: block;
	vertical-align: middle;
	/*margin-left: auto;
    margin-right: auto;*/
	/*margin: 50px 10px 50px 10px;*/
}	

.ro {
	background:url("../../Bilder/hg/contentRO.gif") top right no-repeat;
	margin:0;
	padding:0;
}

.lo {
	background:url("../../Bilder/hg/contentLO.gif") top left no-repeat;
	margin:0;
	padding:0;
}

.ru {
	background:url("../../Bilder/hg/contentRU.gif") bottom right no-repeat;
	margin:0;
	padding:0;
}

.lu {
	background:url("../../Bilder/hg/contentLU.gif") bottom left no-repeat;
	margin:0;
	padding:0;
}

.inhalt {
	margin:0;
	padding:2.5em 2.5em 3.5em 2.5em;
}

.inhalt p {
	margin:0;
	padding:0;
}

	
#container {
background-color:#CCCCCC;
margin:0 auto;
padding:0;
width:90%;
}

#oben {
background-color:#B3C0F7;
margin:0;
text-align: center;
min-height:100px;
padding:0;
}

#header2{
background-color:#999999;
margin:0;
padding:5px 2px 5px 50px;
}

#navileiste {
background-color:#8DA2F3;
margin:0;

padding:0;
}

#innen {
background-color:#CCCCCC;
margin:3em 2em;
text-align: justify;
padding:0;
}

#footer1 {
background-color:#999999;
margin:0;
text-align: center;
padding:0;
}
#footer2 {

background-color:#BFBFBF;
margin:0;
color:#666666;
text-decoration: none;
text-align: center;
padding:0;
}


#footer3 {
background-color:#CCCCCC;
margin:0;
color:#666666;
text-align: right;
font-size:8px;
padding:0;
}

/*neues Menü*/

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
} 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
} 
</style>
<![endif]-->


#menu {
background:#EEEEEE none repeat scroll 0 0;
float:left;
width:100%;
}
#menu ul {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
width:10em;
}
#menu a, #menu h2 {
-x-system-font:none;
border-color:#CCCCCC #888888 #555555 #BBBBBB;
border-style:solid;
border-width:1px;
display:block;
font-family:arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:16px;
margin:0;
padding:2px 3px;
}
#menu h2 {
background:#000000 none repeat scroll 0 0;
color:#FFFFFF;
text-transform:uppercase;
}
#menu a {
background:#EFEFEF none repeat scroll 0 0;
color:#000000;
text-decoration:none;
}
#menu a:hover {
background:#FFFFFF none repeat scroll 0 0;
color:#AA0000;
}
#menu li {
position:relative;
}
#menu ul ul {
position:absolute;
z-index:500;
}
#menu ul ul ul {
left:100%;
position:absolute;
top:0;
}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {
display:none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
display:block;
}

ich kann die sachen auch mal hochladen, damit man ne vorstellung bekommt, was ich will

Suche

CSS unregelmäßiger rand bei div-container

Skoell

Lieutenant

beten

Lt. Junior Grade

luxactor

Lt. Junior Grade

Skoell

Lieutenant

Ähnliche Themen