Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

MacDan · 19.07.2010

Generell bin ich recht neu was css und xhtml angeht, also lese ich viele guides und bastel einiges nach um mir die Funktionen anzueignen.

Hab jetzt eine index.html welche in einige divs aufgeteilt ist.Habe von meinen Design den Hintergrund im Ordner images gespeichert. Habe eine style.css im Ordner css erstellt. diese css ist auch ordentlich im Head der index.html verlinkt.

Habe nun in der css stehen:

Code:

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

body {
  background: url(images/background.jpg) no-repeat top left;
  font-family: Arial, Helvetica, sans-serif;
  color: #73360d;
  text-align: justify;
}

rein theoretisch müsste er mir doch jetzt zumindest schon einmal den Hintergrund anzeigen oder?

Bin für jede Hilfe dankbar

regards
denny

Edit:

Habe jetzt mal weiterprobiert mit dem Logo und das so eingebunden

Code:

h1 {
  text-indent: -9999px;
  float: left;
}

h1 a {
  display: block;
  background: url(images/logo.png) no-repeat left top;
  float: left;
  height: 59px;
  width: 348px;
}

Habe einen Text den ich mit h1 gekennzeichnet habe auf der Logoposition. Die Höhen und Weiten werden richtig dargestellt, aber die Bilder nicht obwohl vorhanden.

Edit2:

Hier auch mal der Anfang meiner index.html

Code:

<head>
	<link href="css/style.css" rel="stylesheet" type="text/css"  />

</head>

<body>
	<div id="container">
	  	<div id="header">
        	<h1>Logo</h1>
            <h1>logounterschrift</h1>
            <div id="menu">
.
.
.

Konzertjunkie · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

Hi!
Versuche es doch mal mit:

Code:

background-image: url(../images/bg.gif);

Damit müsse es eigl. gehen

MacDan · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

Code:

body {
  background-image: url(../images/background.jpg) no-repeat top left;
  font-family: Arial, Helvetica, sans-serif;
  color: #73360d;
  text-align: justify;
}

geht leider auch nicht. kA was da los ist.

EDIT:

Code:

body {
  background-image: url(../images/background.jpg);
  font-family: Arial, Helvetica, sans-serif;
  color: #73360d;
  text-align: justify;
}

also ich muss no-repeat top left entferen dann stellt er die Bilder dar, nur hab ich dann das Problem das die irgendwo in der Weltgeschichte rumhüpfen. Komisch ist auch das ich hierfür zB ein Guide von sixrevision nutze, da müsste man sich doch eiglich auf ein bisschen Richtigkeit verlassen können.

Jemand ideen?

Momo22m · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

also ich bin auch neue aber das man ihn body top oder left schreibt ist mir neue lass das mal weg dann musste es gehen oder wen das Bild groß genoch ist dann mach das no repad rein wen nicht musste raus machen

so dein 2 edit sehe keine close tag mach auch mal die div zu die du auf machst
und wurde sagen gewohnt dir das mal an hinter seden div tag ein commet zu posten

ein bei spiel

<div id="test"
</div> 

so sieht du eine schroktur und wintes alles schneller

mfg Morris

cebito · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

MacDan schrieb:
Jemand ideen?

top left gibt die Position an, background-image aber nur den Pfad. Also entweder

Code:

body {
  background-image: url(../images/background.jpg);
  background-position: top left;
  background-repeat: no-repeat;
}

oder die Kurzform mit background ohne irgendwelche Zusätze

Code:

 body {
  background: url(../images/background.jpg) top left no-repeat;
}

hattest du ja schonmal so, nur das dein Pfad da nicht stimmte

MacDan · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

Code:

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

body {
  background: url(../images/background.jpg) no-repeat top left;
  font-family: Arial, Helvetica, sans-serif;
  color: #73360d;
  text-align: justify;
}

#container {
  width: 1008px;
  margin: 0px 0 0 165px;
  float: left;
}

#header {
  height: 95px;
  width: 927px;
  margin: 7px 0 0 24px
  float: left;
}

h1 {
  text-indent: -9999px;
  float: left;
}

h1 a {
  display: block;
  background: url(../images/logo.png) no-repeat top left;
display: block;  
height: 59px;
  width: 348px;
}

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>blub</title>
	<link href="css/style.css" rel="stylesheet" type="text/css"  />

</head>
<body>
	<div id="container">
	  	<div id="header">
        	               <h1><a href="#"> Logo</a></h1>
                          <h1>logounterschrift</h1>
                    <div id="menu">
            	<ul id="nav">
                
                <li><a href="#">home</a></li>
                <li><a href="#">blub1</a></li>
                <li><a href="#">blub2</a></li>
                <li><a href="#">blub3</a></li>
                     </ul>
                  </div><!-- end menu -->
		</div><!-- end header -->

So hier meine style.css und der Anfang meiner index.html (ja ich weis das da hintedran was fehlt, wäre ja unsinnig die ganze source zu posten)

So wird leider keine Grafik dargestellt, kA wieso...

regards denny

EDIT: Das logo wird jetzt angezeigt. Ich hatte das <a href="#"> im h1 tag vergessen.

MacDan · 19.07.2010

AW: Grundlegendes Problem mit CSS und meiner Hintergrundgrafik

Ok da leider keine Lösung kam, hab ich selbst etwas weiter probiert und bin jetzt drauf gekommen

Code:

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

Das musste ich entfernen, kA wieso naja immerhin funktioniert es jetzt.