nicht angemeldet
Versuch's mal mit korrekt aufgebautem html und einer ausgelagerten css-Datei. In etwa so:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">
<title>untitled</title>
</head>
<body>
<div id="Frame">
<div id="Header">
<div id="HeaderLeft">
</div>
<!--<div id="Logo">
</div> -->
<div id="HeaderRight">
</div>
</div>
<div id="MainBlock">
<div id="MainLeft">
</div>
<div id="MainRight">
</div>
</div>
<div id="Footer">
<div id="FooterLeft">
</div>
<div id="FooterRight">
</div>
</div>
</div>
</body>
</html>
und so:
#Frame {
position:relative;
display:block;
width:100%;
min-width:740px;
min-height:400px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
z-index:10;
}
#Header {
display:block;
width:100%;
height:20px;
background-image:url('../media/1.gif');
background-repeat:repeat-x;
z-index:10;
}
#HeaderLeft {
display:inline;
display:inline-block;
width:20px;
height:20px;
background-image:url('../media/0.png');
background-repeat:no-repeat;
position:relative;
float:left;
z-index:10;
}
#HeaderRight {
display:inline;
display:inline-block;
width:20px;
height:20px;
background-image:url('../media/2.png');
background-repeat:no-repeat;
position:relative;
float:right;
z-index:10;
}
#MainBlock {
display:block;
width:100%;
height:100%;
min-width:400px;
min-height:410px;
padding-right:60px;
background-color:transparent;
z-index:20;
}
#MainLeft {
display:inline-block;
width:20px;
height:100%;
min-height:410px;
background-image:url('../media/7.gif');
background-repeat:repeat-y;
position:relative;
float:left;
z-index:40;
}
#MainRight {
display:inline-block;
width:20px;
height:100%;
min-height:410px;
background-image:url('../media/3.gif');
background-repeat:repeat-y;
position:relative;
float:right;
z-index:40;
}
#Footer {
display:block;
width:100%;
height:20px;
background-image:url('../media/5.gif');
background-repeat:repeat-x;
z-index:20;
}
#FooterLeft {
display:inline;
display:inline-block;
width:20px;
height:20px;
background-image:url('../media/6.png');
background-repeat:no-repeat;
position:relative;
float:left;
z-index:20;
}
#FooterRight {
display:inline;
display:inline-block;
width:20px;
height:20px;
background-image:url('../media/4.png');
background-repeat:no-repeat;
position:relative;
float:right;
z-index:20;
}
Des weiteren mußt du die Größe der einzelnen div's im css natürlich an das Format deiner Grafiken anpassen (hab' ich spaßeshalber schon 'mal für dich gemacht) und auch eine korrekte Deklaration des Doctype im Header kann nicht wirklich schaden.
Mit einer Änderung der Größenangaben für #Frame kannst du jetzt unterschiedlich große Kästchen erzeugen.
Guck' dir das Ganze in Ruhe an und frag' mich gerne, wenn du etwas nicht verstanden hast. Ich lerne auch ständig dazu hier und bin froh, auch 'mal 'was weitergeben zu können.
Gruß
dieselross
--
- life's for learning -
Ceterum censeo IE esse delendam
- life's for learning -
Ceterum censeo IE esse delendam
Der Martin
Gunnar Bittersmann