Hintergrund wird zu weit angezeigt

yexxx · 28. Juni 2010

Hallo Forenfreunde, ich bin am verzweifeln. Ich habe eine Webseite in Planung, die sich grafisch aus einem Kopfteil, einem Hintergrund und einem Fussteil. Ich habe die Grafik so gestaltet, dass die Ecken abgerundet sind. Leider wird unten die Hintergrundgrafik genau um ein Höhe über die Fussgrafik hinaus angezeigt. Beim Kopfteil macht er das seltsamerweise nicht.

CSS

Code

* {
	margin: 0px;
	padding: 0px;
}




body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #cccccc;
}




#main-container {
	width: 880px;
	margin: 0px 0px 0px 100px;
	background: url("images/hintergrund.png") 0px 0px repeat-y;




}
#top_section {
background-color:rgb(255,255,255);
height:90px;
margin:0px;
padding:0px;
}




#fusszeile {
    clear:left;
    margin-top:0px;
    border-top: 1px dotted gray;
    text-align:center;
    padding:0px;
}




h1,h2,h3,p,ul,ol {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left:30px;
margin-right:30px;
}

Alles anzeigen

html

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Groß Schulzendorf</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="Lee Roe" content="Adobe GoLive" />
  <meta name="keywords" content="Groß Schulzendorf"/>
  	<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
</head>




<body>
<div id="main-container">
  <div id="top_section">
   <img src="images/kopf.png" alt="Kopfzeile" />
    </div>
          <div id="inhalt-haupt">




		          <h2>Willkommen auf unserer Seite</h2>		
                <p>Lorem ipsum .......</p>




                    </div>
  <div id="fuss">
    <img src="images/fuss.png" alt="Fussgrafik" />
        </div>




</div>




</body>




</html>

Alles anzeigen

Für Vorschläge wäre ich sehr dankbar.
yexxx

Sarkkan · 28. Juni 2010

Also ich verstehe irgendwie nicht was du von mir willst.. ._.

lauras · 28. Juni 2010

Das Problem ist, dass uns die Bilder nicht zur Verfügung stehen. Es wäre praktisch, wenn du das bei irgendeinem Freehoster hochladen könntest, dann kann man dort besser schauen

Auf jeden Fall fehlt deinem Code die Doctype-Deklaration, die solltest du als erstes hinzufügen. Dann mal validieren und die Fehler, die eventuell auftauchen korrigieren, so hat man schon mal grundlegende Fehler ausgeschaltet.

LG

yexxx · 28. Juni 2010

Sorry! Ich dachte, das angehängte Bild reicht.

Hier noch mal über ImageShack:

<a class="postlink" href="http://img823.imageshack.us/img823/8343/fuss.png">http://img823.imageshack.us/img823/8343/fuss.png</a>
<a class="postlink" href="http://img17.imageshack.us/img17/9729/hintergrundg.png">http://img17.imageshack.us/img17/9729/hintergrundg.png</a>
<a class="postlink" href="http://img204.imageshack.us/img204/682/kopff.png">http://img204.imageshack.us/img204/682/kopff.png</a>
<a class="postlink" href="http://img441.imageshack.us/img441/3962/webseite.jpg">http://img441.imageshack.us/img441/3962/webseite.jpg</a>

Beim letzten Bild sieht man, dass unten der Hintergrund um eine Zeile weiter geführt wird.

lauras · 28. Juni 2010

Hm.. also als erstes:

Doctype hinzufügen, wenn noch nicht passiert, dann validieren.

Zweitens: Warum bildest du die Bilder nochmal über img ein? Den Sinn verstehe ich nicht.. habe die Vermutung, dass es daran liegen könnte, also klär uns mal auf^^

LG

yexxx · 28. Juni 2010

Super, danke, es hat geklappt. Doctype war drin, hatte ich nur nicht mit ausgeschnitten. Seite ist validiert und in Ordnung.

Habe jetzt in der CSS folgenens:

Code

#fuss{
    margin-top:0px;
    background: url("images/fuss.png")0px 0px repeat-y;
}

Sobald ich das "repeat-y auf repeat-n setze, ist die Fussgrafik leider weg. Zudem muss ich irgendetwas in die Fusszeile schreiben, damit diese angezeigt wird. Geht das auch irgendwie ohne?

viele Grüße und vielen Dank nochmal

yexxx

lauras · 28. Juni 2010

Zitat von "lauras"

Zweitens: Warum bildest du die Bilder nochmal über img ein? Den Sinn verstehe ich nicht..

???

Du musst nichts reinschreiben, du musst nur Breite und Höhe angeben. Wobei sich in der Fußzeile Impressum-Links etc. immer ganz gut machen

LG

Sarkkan · 28. Juni 2010

Zitat von "yexxx"

Sobald ich das "repeat-y auf repeat-n setze, ist die Fussgrafik leider weg. Zudem muss ich irgendetwas in die Fusszeile schreiben, damit diese angezeigt wird. Geht das auch irgendwie ohne?

Was ist ein repeat-n?

Anonymous · 28. Juni 2010

Zitat von "yexxx"
Habe jetzt in der CSS folgenens:
Code
#fuss{
    margin-top:0px;
    background: url("images/fuss.png")0px 0px repeat-y;
}

so sieht es besser aus:

Code

#fuss{
    margin-top:0px;
    background: url(images/fuss.png) repeat-y;
}

Für das margin-top: opx; kannste auch am anfang einen universalselektor vergeben und ihm margin: 0; padding: 0; zuweisen

Code

* {margin: 0px; padding: 0;}

repeat-n wurde noch nicht erfunden und wird es sicherlich auch nicht :mrgreen:

Sarkkan · 29. Juni 2010

und ich dachte schon ich hätte etwas verpasst xD
Dann nimm das mal lieber raus

Wenn ich das richtig sehe muss dein Bild doch gar nicht nach y wiederholt werden, oder? Dann lass diese Angabe doch direkt weg

yexxx · 29. Juni 2010

Vielen, vielen Dank, mein Blutdruck hat sich normalisiert. Das mit den Abmessungen war es dann. Repeat-n? Ich meine damit wohl no-repeat>hust.

Jetzt ist die Seite rund. Yippi!

Hintergrund wird zu weit angezeigt

Jetzt mitmachen!

Teilen