Hi Leute,
nachdem ich es dann gestern endlich mal geschafft hatte, die Sidebar rechts floaten zu lassen, habe ich heute versucht, den Banner, welcher ja schon ziemlich groß ist, in mehrere kleine Stücke zu slicen, um diese dann mittels CSS auf der Page einzubauen. Und wie so vieles auch im Webdesign, klappte das natürlich nicht.
In der header.php habe ich zuerst folgende Änderungen durchgeführt:
<div id="page">
<div id="header">
<div id="flogo"></div>
<div id="fnavi">
<img src='images/froopz_navi_left.jpg' width='211' height='68' alt='Navi Left'>
<img src="images/froopz_navi_home.jpg" width="67" height="68" alt="Home">
<img src="images/froopz_navi_design.jpg" width="68" height="68" alt="Design">
<img src="images/froopz_navi_net.jpg" width="70" height="68" alt="Net">
<img src="images/froopz_navi_froopz.jpg" width="72" height="68" alt="Froopz">
<img src="images/froopz_navi_right.jpg" width="210" height="68" alt="Navi Right">
</div>
<div id="fnavbtm"></div>
</div>
</div>Der Logo Teil sollte nen Hintergrund bekommen, da es sich ja nicht wie bei den Linkgrafiken um ein aktives Element handelt.
Die Navigation schloß ich in einem Div ein
Und der untere Teil der Navigation "fnavbtm" sollte auch ein Hintergrundbild bekommen.
Die dazugehörige CSS Style Definition schaut folgendermaßen aus:
* {
padding: 0;
margin: 0;
}
body {
background: #fff url(images/froopz_bground.jpg) repeat-x;
color: #000;
font: normal 75%/1.4em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
a, a:link
{
font-family: georgia, times, "times new roman", serif;
color: #9cf;
text-decoration: none;
}
a:visited
{
color: #600;
}
a:hover, a:active
{
color: #fff;
background-color: #B52C07;
}
input {
margin: 10px 0;
border: 1px solid #000;
background-color: #fff;
}
hr{
display: none;
}
/*IDS*/
#wrapper {
width: 760px;
margin: 0px auto;
overflow: hidden;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
}
#header
{
margin: 0 auto;
height: 279px;
}
#flogo{
position: relative;
width: 698;
margin: 0;
background: url(images/froopz_header.jpg) no-repeat 0 0;
}
#fnavi {
position: relative;
width: 698px;
margin-top: 120px;
background-color: red;
}
#fnavbtm {
width: 698px;
margin: 0;
background: transparent url(images/froopz_navi_btm.jpg) no-repeat 0 0;
}
#content {
margin: 20px 10px;
float: left;
width: 500px;
background-color: transparent;
}
#sidebar {
background-color: #ff9;
height: 100%;
border-left: 1px solid #c5c877;
margin: 20px 10px 10px 550px;
}
#sidebar ul {
margin-left: 20px;
list-style-type: none;
line-height: 150%;
}
#sidebar li h2 {
color: #f93;
margin: 10px 0;
}
#footer {
width: 764px;
height: 27px;
margin: 0 auto;
clear: both;
text-align: center;
}
/*Classes*/
.copyright {
font: normal 0.8em/1.6em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
p.postmetadata {
text-align: right;
font-size: 75%;
}
Wenn ich nun die Seite aufrufe erhalte ich gerade mal den hübschen Alt Text der Bilder, die Bilder an sich seh ich aber leider nicht