Hallo seit geraumer Zeit sitze ich nun vor diesem Problem um komme einfach nicht weiter.
Ich versuche in den links und rechts neben meinem Content einen anderen Hintergrund einfließen zulassen aber alle Versuche scheiterten und endeten darin das ich dann nur den neuen Hintergrund gesehnen habe.
Kann mir wer weiterhelfen und mir sagen wo mein Denkfehler ist?
index.html
[HTML]<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>restaurant schwan</title>
<meta name="keywords" content="restaurant schwan" />
<meta name="description" content="restaurant schwan" />
<link href="schwan_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="reflection.js"></script>
</head>
<body>
<div id="all">
<div id="schwan_container">
<div class="schwan_topmenu">
<ul>
<li><a href="#" class="current">MAIN PAGE</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">MENUS</a></li>
<li><a href="#">DRINKS</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="schwan_topsection">RESTAURANT SCHWAN</div>
<div id="schwan_headersection"><img src="http://xhtmlforum.de/images/schwan_header_photo.jpg" class="reflect rheight20 ropacity25" alt="schwan.com" width="806" height="166" /></div>
<div id="schwan_content_section">
<h1>WELCOME TO OUR RESTAURANT</h1>
<p><img src="http://xhtmlforum.de/images/schwan_special.jpg" alt="schwan.com" width="206" height="159" /></p>
<h2>Today's SPECIAL!</h2>
</div>
<div id="schwan_footer"> © </div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
</body>
</html>[/HTML]
schwan_style.css
html {
background: url(images/schwan_html_bg.jpg) repeat;
}
body {
margin: 0;
padding:0;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 1.5em;
color: #b48842;
background: url(images/schwan_body_bg.jpg) repeat-x center top;
width: 100%;
display: table;
}
a:link, a:visited { color: #c89d59; text-decoration: none; }
a:active, a:hover { color: #FFFF00; text-decoration: none }
h1 {
font-size: 24px;
font-weight: bold;
text-decoration: underline;
color: #c89d59;
background-position: left;
padding-top: 20px;
}
h2 {
margin-top: 40px;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
color: #c89d59;
}
#schwan_container {
width: 806px;
margin: auto;
}
.schwan_topmenu{
margin: auto;
width: 700px;
position:relative;
}
.schwan_topmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.schwan_topmenu li{
display: inline;
}
.schwan_topmenu li a{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #beb052;
width: 103px;
height: 30px;
margin-left: 5px;
margin-right: 5px;
padding-top: 14px;
}
.schwan_topmenu li a:hover, .schwan_topmenu li .current{
color: #beb052;
background: url(images/schwan_button_hover.jpg) no-repeat;
}
#schwan_topsection {
float: left;
margin-top: 40px;
width: 806px;
height: 48px;
color: #c1b25d;
font-size: 24px;
font-weight: bold;
padding-top: 50px;
line-height: 1.6em;
text-align: center;
background: url(images/schwan_title_bg.jpg) no-repeat;
}
#schwan_headersection {
float: left;
width: 806px;
height: 252px;
}
#schwan_content_section {
float: left;
width: 750px;
text-align: justify;
padding-left: 30px;
}
#schwan_content_section img {
float: left;
padding-right: 20px;
}
.topmenu_about {
width:30px;
height:30px;
cursor:default;
text-indent:-9999px;
position:absolute;
right:0px;
top:10px;
}
#schwan_footer {
float: left;
margin: auto;
margin-top: 20px;
text-align: center;
padding-top: 35px;
width: 744px;
height: 50px;
background: url(images/schwan_footer.jpg) no-repeat;
background-position: top;
}Wie gesagt ich möchte eigentlich lediglich um die mittlere Box einen zusätzlichen Hintergrund legen der das ganze abrundet.
Das ist etwas verwirrend ohne mein versuch zu Posten.
ich habe es dann so versucht was leider scheiterte
html {
background: url(images/bg.jpg) repeat;
}
#schwan_container {
width: 806px;
margin: auto;
background: url(images/schwan_body_bg.jpg) repeat-x center top;
}So dachte ich mir das, aber lag da leider falsch. Hoffe das es so verständlich dargestellt ist ich versteh es beim lesen zum teil selber nicht.
Lg Ede