Hallo ich habe wieder einmal ein Problem
und zwar habe ich ein rundes div (das workaround mit mehreren divs damit ich runde ecken erhalte [link]) nun würde ich gerne in der mitte die faux colums (glaube mal das das so heißt) drinnen haben. Ich habe eine Hintergrundgrafik (1px höhe) welche ich ständig wiederhole, da ich nun zwei Spalten haben will habe ich mir 2 divs gemacht (.left und .right) diese nebeneinander positioniert.
Wenn nun ein div länger als das andere ist dann wird die untere ecke des runden divs eingerückt und es passt nicht mehr.
Seht selbst: Seite
Hier wäre noch der Code direkt dazu:
CSS:
HTML:
und zwar habe ich ein rundes div (das workaround mit mehreren divs damit ich runde ecken erhalte [link]) nun würde ich gerne in der mitte die faux colums (glaube mal das das so heißt) drinnen haben. Ich habe eine Hintergrundgrafik (1px höhe) welche ich ständig wiederhole, da ich nun zwei Spalten haben will habe ich mir 2 divs gemacht (.left und .right) diese nebeneinander positioniert.
Wenn nun ein div länger als das andere ist dann wird die untere ecke des runden divs eingerückt und es passt nicht mehr.
Seht selbst: Seite
Hier wäre noch der Code direkt dazu:
CSS:
PHP:
/*
* Globale Definitionen
*/
html, body {
width: 960px;
margin: 0 auto;
padding: 0;
font-size: 90%;
font-family: Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
/*
* Anfang der Hauptbühne (content) Box(en)
*/
.inhaltbox h1, .zsnazzy h1 {
margin:0;
font-size:1.4em;
padding:0 10px 5px 10px;
border-bottom:1px solid #8FCDBC;
}
.inhaltbox p, .zsnazzy p {
margin:0;
padding:5px 10px;
}
.inhaltbox {
font-size: 1em;
font-family: Tahoma, Verdana, Arial, sans-serif;
background: #8FCBDC;
width:960px;
float:left;
margin:0 3px;
}
.boxtop, .boxbottom {
display:block;
background: #FFF;
font-size:1px;
}
.box1, .box2, .box3, .box4 {
display:block;
overflow:hidden;
}
.box1, .box2, .box3 {
height:1px;
}
.box2, .box3, .box4 {
background: #8FCBDC;
border-left:1px solid #8FCDBC;
border-right:1px solid #8FCDBC;
}
.box1 {
margin:0 5px;
background: #8FCDBC;
}
.box2 {
margin:0 3px;
border-width:0 2px;
}
.box3 {
margin:0 2px;
}
.box4 {
height:2px;
margin:0 1px;
}
.faux {
display: block;
background: #FFF;
background: url("images/bg2.gif") repeat-y;
margin: 10px;
width: 940px;
}
.left {
display: block;
float: left;
width: 150px;
border: 1px solid black;
margin-right: 10px;
}
.right {
display: block;
width: 780px;
margin-left: 160px;
border: 1px solid green;
}
.clear {
clear: all;
}HTML:
PHP:
<!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" xml:lang="de">
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Written by hand" />
</head>
<body>
</div>
<div class="inhaltbox">
<!-- oberen runden Ecken -->
<b class="boxtop">
<b class="box1"></b>
<b class="box2 titelfarbe"></b>
<b class="box3 titelfarbe"></b>
<b class="box4 titelfarbe"></b>
</b>
<!-- oberen runden Ecken -->
<!-- Der Inhalt -->
<div class="inhaltsbox">
<b class="clear"></b>
<div class="faux">
<div class="left">
links<br>
links<br>
links<br>
links<br>
links<br>
links<br>
</div>
<div class="right">
rechts<br>
rechts<br>
rechts<br>rechts<br>
rechts<br>
</div>
</div>
</div>
<!-- Ende Inhalt -->
<!-- unteren runden Ecken -->
<b class="boxbottom">
<b class="box4"></b>
<b class="box3"></b>
<b class="box2"></b>
<b class="box1"></b>
</b>
<!-- unteren runden Ecken -->
</div>
<div id="footer">
</div>
</body>
</html>
)
