✔ Hintergrundproblem!

Status
Nicht offen für weitere Antworten.
F

FXSR

Mitglied
Hallo, kurz eine Frage:

Ich will ein Bild als Hintergrund im Dreamweaver Cs3 erstellen...
Wie lautet der Code (wo muss ich diesen Hischreiben) dazu, oder wie kann ich dieses Bild einbinden?
Dann sollte es noch in der mitte Zentriert sein und nicht mehr auf der rechten Seite abgebildet sein als auf der linken:)
Hier ist mein Code, noch nicht viel da ich nicht weiß wie man das macht:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<body background="../../Desktop/go-faster.de/_hintergrundbsp.jpg"
</body>
</html

vielen Dank schonmal:suspekt:
 
Teste mal so:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body background="../../Desktop/go-faster.de/_hintergrundbsp.jpg">

Hypertext

</body>
</html>

<body> sollte man immer nur 1mal angeben und den > hast du vergessen ;)

Tip: verwende immer nach möglichkeit "sinvolle absolute Pfade" die man auch später auf dem Webserver verwenden kann und nicht ../Desktop. . . . .
 
Zuletzt bearbeitet:
Hi,

hier ist eine Definition per CSS weitaus geeigneter, als mit dem proprietären background-HTML-Attribut, da sich auch die gewünschte Position des Hintergrundbildes festlegen lässt:

Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
body {
background: url(../../Desktop/go-faster.de/_hintergrundbsp.jpg) no-repeat center top;
}
</style>

</head>
<body>

foobar

</body>
</html>
Siehe hierzu auch das Kapitel Hintergrundfarben und -bilder.

mfg Maik
 
uiiiiiiiiiiiiiiiiiiii supi danke dem letzterem, hat funktioniert.:eek::eek:
Aber was ist CSS Eigentlich?
und warum muss imCode unten Foobar Drinstehen?
das sehe ich nämlich auf der Fertiggestellten Seite
lg FXSR
 
habe leider ein weiteres Problem.
Wenn ich die Erstellte Seite in der Miniaturansicht im IE7 ansehe, verschieben sich die Button untereinander.
Ich will aber das diese in Einer Reihe bleiben und man das Fenster größer machen muss,
um alle zu sehen,

lg

ach ja hier ist der Code
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to www.GO-FASTER.de</title>

<style type="text/css">
body {
background: url("bsp Kopie.jpg") no-repeat center top;
}
</style>

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Button, Header/Catamaran_gelb.gif','Button, Header/Class One_gelb.gif','Button, Header/Home_gelb.gif','Button, Header/Kontakt_gelb.gif','Button, Header/Über uns_gelb.gif','Button, Header/V-Rumps_gelb.gif','Button, Header/Yacht.gif')">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Catamaran','','Button, Header/Catamaran_gelb.gif',1)"><img src="Button, Header/Catamaran.gif" alt="Catamaran" name="Catamaran" width="150" height="35" border="0" id="Catamaran" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Class-One','','Button, Header/Class One_gelb.gif',1)"><img src="Button, Header/Class One.gif" alt="Class-One" name="Class-One" width="150" height="35" border="0" id="Class-One" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Button, Header/Home_gelb.gif',1)"><img src="Button, Header/Home.gif" alt="Home" name="Home" width="150" height="35" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Button, Header/Kontakt_gelb.gif',1)"><img src="Button, Header/Kontakt.gif" alt="Kontakt" name="Kontakt" width="150" height="35" border="0" id="Kontakt" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Über uns','','Button, Header/Über uns_gelb.gif',1)"><img src="Button, Header/Über uns.gif" alt="Über uns" name="Über uns" width="150" height="35" border="0" id="Über uns" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('V-Rumpf','','Button, Header/V-Rumps_gelb.gif',1)"><img src="Button, Header/V-Rumpf.gif" alt="V-Rumpf" name="V-Rumpf" width="150" height="35" border="0" id="V-Rumpf" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Yacht','','Button, Header/Yacht.gif',1)"><img src="Button, Header/Yacht.gif" alt="Yacht" name="Yacht" width="150" height="35" border="0" id="Yacht" /></a> </p>
</body>
</html>
 
CSS (Cascading Stylesheets) ist eine Formatierungssprache zum Gestalten von HTML-Elementen.

Wenn du den Zeilenumbruch der Links beim Runterskalieren der Fenstergröße vermeiden möchtest, solltest du sie in ein Element mit Breitenangabe einbetten, wie z.B. in einem CSS-Listenmenü.

mfg Maik
 
Code: 
<style type="text/css">
body {
background: url("bsp Kopie.jpg") no-repeat center top;
}

ul#menu {
margin:0 auto;
width:1050px;
padding:0;
list-style:none;
}

ul#menu li {
float:left;
}
</style>
Code: 
<body onload="MM_preloadImages('Button, Header/Catamaran_gelb.gif','Button, Header/Class One_gelb.gif','Button, Header/Home_gelb.gif','Button, Header/Kontakt_gelb.gif','Button, Header/Über uns_gelb.gif','Button, Header/V-Rumps_gelb.gif','Button, Header/Yacht.gif')">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul id="menu">
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Catamaran','','Button, Header/Catamaran_gelb.gif',1)"><img src="Button, Header/Catamaran.gif" alt="Catamaran" name="Catamaran" width="150" height="35" border="0" id="Catamaran" /></a></li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Class-One','','Button, Header/Class One_gelb.gif',1)"><img src="Button, Header/Class One.gif" alt="Class-One" name="Class-One" width="150" height="35" border="0" id="Class-One" /></a></li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Button, Header/Home_gelb.gif',1)"><img src="Button, Header/Home.gif" alt="Home" name="Home" width="150" height="35" border="0" id="Home" /></a></li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Button, Header/Kontakt_gelb.gif',1)"><img src="Button, Header/Kontakt.gif" alt="Kontakt" name="Kontakt" width="150" height="35" border="0" id="Kontakt" /></a>    </li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Über uns','','Button, Header/Über uns_gelb.gif',1)"><img src="Button, Header/Über uns.gif" alt="Über uns" name="Über uns" width="150" height="35" border="0" id="Über uns" /></a>    </li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('V-Rumpf','','Button, Header/V-Rumps_gelb.gif',1)"><img src="Button, Header/V-Rumpf.gif" alt="V-Rumpf" name="V-Rumpf" width="150" height="35" border="0" id="V-Rumpf" /></a> </li>
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Yacht','','Button, Header/Yacht.gif',1)"><img src="Button, Header/Yacht.gif" alt="Yacht" name="Yacht" width="150" height="35" border="0" id="Yacht" /></a> </li>
</ul>

</body>
Übrigens solltest du den Verzeichnisnamen "Button, Header" umändern, da ein Komma (Satzzeichen) und Leerzeichen auf dem Webserver zu Problemen führen kann.

mfg Maik
 
danke funktiuoniert schon, nur ist meine menüleiste Waagrecht und nicht Senkrecht, was muss ich dann verändern?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück