psd --> html --> hintergrund-problem

Alada · 13.08.2012

hi leute, ich schon wieder.
ich komme ja immer weiter mit meiner seite, die ich tatsächlich mal mit dem editor aufgebaut habe.
die einzelnen divs sind jetzt sogar richtig positioniert. nun mein problem. die divs am rand haben einen schatten, damit der inhalt der webseite etwas erhaben wirkt.
nun habe ich einen hintergrund gebastelt, der sich auf der seite mit repeat-x wiederholt. das problem ist, dass der footer ja verrutscht, wenn die seite mehr inhalt hat und dann passt dieser mit seinem schatten überhaupt nicht mehr mit dem hintergrund zusammen.
ausserdem ist der hintergrund um 1px verschoben. gibt es eine lösung, wie ich den hintergrund mit den schatten um den inhalt einbauen kann, ohne so viel zu basteln?

hier mal zur veranschaulichung:

der footer ist dann im roten bereich

MyBad · 13.08.2012

AW: psd --> html --> hintergrund-problem

Kann man sich das Ganze eventuell schon online anschauen? Ein Screenshot hilft hier recht wenig. Um das Problem analysieren zu können wäre zumindest dein Quelltext + CSS von Nöten.

Myhar · 13.08.2012

AW: psd --> html --> hintergrund-problem

Für diesen doch recht simplen Aufbau brauchst du keine Hintergrundgrafiken basteln. Dafür reicht CSS vollkommen aus, dann passt sich auch alles in der Höhe an.
Hinweis, falls es bei dir Schwierigkeiten im Aufbau gibt: Der Footer (komplette rote Bereich) wird als verschachtelung von div(s) realisiert. Mit z-index und negativem Margin solltest du den Bereich unter den Hauptcontent bringen. Solltest deshalb, weil ich es nicht getestet habe und es immer wieder Probleme mit negativem margin/z-index geben kann. (Und ich das deshalb auch recht selten verwende und keine 100% klare Aussage dazu treffen kann)

Alada · 13.08.2012

AW: psd --> html --> hintergrund-problem

ist leider nicht online bisher, aber hier der code für das stylesheet:

Code:

* {
margin: 0; padding: 0; border: none;
}

body {
    background-color: #fffff;
    font-size: 0.8em;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:grey;
    padding:0;
    margin:0;
    background: url(images/background.png) repeat-x #eeeeee;

}

a {color: #000000;text-decoration:none;}
a:visited {color:#grey;}
a:hover {text-decoration:underline;}
a:active { color:#000000;}

h1 {
    background: url("http://www.psd-tutorials.de/forum/images/aufzaehlung.png") no-repeat 2px;
    padding-left:1.5em;
    margin-top:12px;
    font-size: 16px; 
    font-weight: normal;
}

h2 {
    padding-left:1.5em;
    font-size: 14px; 
    font-weight: normal;
}

/* ----------container zentriert das layout-------------- */

#container {
    width: 808px;
    margin: 0 auto;
    padding: 0;
    background-color: #ffffff;
}

/* ----------banner-------------- */
#banner {
    margin: 0;
    padding: 0;
    height:70px;
    width:518px;
    background: #fff url(images/logo.png) no-repeat;
    float:left;
}


#suche {
    margin: 0;
    padding: 0;
    height:70px;
    width:290px;
    background #fff url(images/suche.png) no-repeat;
    float:left;
    clear:right;
}

#suche form {
    padding-left:60px;
    padding-top:30px;
}
.feld-form 
{
    font-family: Verdana, Geneva, sans-serif;
    background-color: #ffff;
    border: 1px solid #ddd;
    width:140px;
}

#mainnavi {
    clear:both;
    height:39px;
    width:808px;
    margin: 0;
    padding: 0;
background: url(images/background-horizontal.gif) repeat-y;
padding-left:45px;

}

img {
    border:0;
}

#subnavi {
    clear:both;
    height:30px;
    width:808px;
    margin: 0;
    padding: 0;
    background-color: #fffff;
}

/* -----------------Header--------------------- */
#header {
    clear:both;    
    margin: 0;
    padding: 0;
    height:219px;
    width:808px;
    background: #fff url(images/main-image.png) no-repeat;
    color:#ffffff;
}

#header ul{
    list-style-type: none ;
    list-style-image: url(images/aufzaehlung.png);
    padding-left:80px;
    margin: 0;
}

#header li {
    font-size: 12px;
    text-decoration:none; 
    padding-top:25px;
}

#header li a {
    font-size: 12px;
    text-decoration:none; 
    color:white;
}


/* -----------------Linke Seite--------------------- */

#links {
    margin: 0;
    padding: 0;
    width:230px;
    position:relative;
    left:0;
    min-height:600px;
    background: #fff url(images/background-links.gif) repeat-y;
    float:left;

}

/* -----------------Inhalt--------------------- */
#content {
    float:right;    
    padding: 0;
    margin: 0;    
    min-height:600px;
    width:578px;
    background: #fff url(images/background-rechts.gif) repeat-y right;

}

.datum {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #00AEDB;
    margin: 3px 3px 0 50px;
    padding: 3px 3px 0 20px;
    font-weight: bold;
background: #fff url(images/kalender-icon.png) no-repeat left;
}

.datum-header{
    padding: 10px 3px 0 50px;
    font-size:16px;

}
.news-eintrag{
    margin: 10px 0 0 50px;
    border-bottom:1px dotted #000000;
}
/* -----------footer--------------------------- */
#footer {
    clear:both;    
    padding: 0;
    margin: 0;
    height:40px;
    background: #fff url(images/footer.png) repeat-y;
}

und hier die html-seite:

HTML:

<!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>

<link type="text/css" href="2.css" rel="stylesheet" media="screen" />
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="navigation.css">
</head>

<body>

<div id="container">
    
<div id="banner">
</div>

<div id="suche">
    <form method="get" id="searchform" action="">
    <input type="text" value class="feld-form">
    <input type="image" src="http://www.psd-tutorials.de/forum/images/go-small.png"             id="search_submit" value="Suchen">
    </form>
</div>

<div id="mainnavi" >
<nav>
      <ul>
        <li><a href="template.html" class="icon home"><span>Home</span></a></li>
        <li class="dropdown">
          <a href="ueberuns.html">Über uns</a>
          <ul>
            <li><a href="index.html">Unternehmen</a></li>
            <li><a href="index.html">Team</a></li>
            <li><a href="index.html">Kontakt</a></li>
            <li><a href="index.html">Karriere</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="index.html">Produkte</a>
          <ul class="large">
            <li><a href="index.html">IST-Aufnahme</a></li>
            <li><a href="index.html">Lastenheft</a></li>
            <li><a href="index.html">Pflichtenheft</a></li>
            <li><a href="index.html">Sonstiges</a></li>
            
          </ul>
        </li>
        <li class="active"><a href="index.html">Lösungen</a></li>
        <li><a href="index.html">Kontakt</a></li>
      </ul>
    </nav>
         

</div>

<div id="subnavi">
    <img src="http://www.psd-tutorials.de/forum/images/sub-header.png" style=float:left;>
    <a href="#">
    <img src="http://www.psd-tutorials.de/forum/images/karriere.png"style=float:left;></a>
    <a href="#">
    <img src="http://www.psd-tutorials.de/forum/images/support.png"style=float:left;></a>        <a href="#">
    <img src="http://www.psd-tutorials.de/forum/images/news.png"></a>
</div>

<!-- begin header-->

<div id="header">

<ul class="borderbottom">
        <li><a href="#">IST-Aufnahme</a></li>
    <li><a href="#">Lastenheft</a>
    <li><a href="#">Ausschreibungen</a></li>
    </ul>
</div>

<div id="links">
<p class=datum-header>Aktuelle News</p>
<p class=datum>10.08.2012</p>
<p class=news-eintrag> Die neue Webseite ist on</p>

</div>

<div id="content">

<h1>Willkommen auf der Seite</h1>

<h2>...Ihrem Loesungs-Anbieter</h2>



</div>

<div id="footer">

<table><tr><td>Home<br>Produkte<br>Lösungen<br>Kontakt</td><td>Anfahrt<br>impressum</td></tr>
</div>
</body>
</html>

cebito · 13.08.2012

AW: psd --> html --> hintergrund-problem

Validiere bitte zuerst dein HTML http://validator.w3.org/, vorher solltest du gar nicht erst anfangen dir Gedanken um die Darstellung zu machen. Und benutze dafür einen strict-doctype, transitional verzeiht zwar einige Fehler, aber wenn du eine ordentliche und einheitliche Darstellung am Ende anstrebst ist es kontraproduktiv.

Alada · 13.08.2012

ok, das habe ich gemacht - es waren einige fehler drin, aber das änderte am layout erstmal nix.
bin jetzt beim umbauen auf ein weiteres problem gestoßen: ich habe ein hintergrund-bild in psd erstellt, dieses wird in allen divs korrekt mit transparenten bereichen angezeigt, außer bei zwei divs. ich werd noch verrückt. die divs sind nicht mit background #fff angegeben oder so, hab tausend mal drüber geguckt. am bild kann es ja auch nicht liegen, das geht ja überall.
hier mal ein div der NICHT geht:

Code:

#links {
    margin: 0;
    padding: 0;
    width:223px;
    position:relative;
    left:0;
    min-height:600px;
    background: url(images/background-horizontal.gif) repeat-y left;
    float:left;

weiß keiner eine lösung?

Myhar · 16.08.2012

AW: psd --> html --> hintergrund-problem

Wenn du eine aktualisierte Version deines HTML Codes posten würdest, dann hätte vielleicht jemand eine Lösung. Aber nur der Ausschnitt deines CSS ist zu wenig.
So kann man dir nur raten: Nimm Firebug und untersuche die Seite (das fehlerhafte div im Besonderen) nach den Eigenschaften und was hier nicht passt.