• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit Bild einfügen

A

Amy

New member
Hallo!
Ich bin eine totale Anfängerin in Thema CSS und HTML..
Habe aber auch schon viele Tutorials gelesen.
Bin gerade daran eine Fanseite für das Habbohotel zu erstellen (Habbo ~ Home) (kennen warscheindlich die meisten hier nicht :D)
Ich habe jetzt mal versucht das Design zu machen und habe ein Problem mit einem Bild einzufügen..
Hier der Link zur Homepage:
Habbocolor :: Gibt dir die Farbe der Virtuellen Welt!

& der Code:

Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Habbocolor :: Gibt dir die Farbe der Virtuellen Welt!</title>

<style type="text/css">
.style1 {
	font-family: Verdana;
	font-size: xx-small;
}
</style>
</head>

<body background="bg.gif">

<div align="center">
  <center>
<table border="0" cellpadding="0" cellspacing="0" width="900" height="67">
    <tr>
      <td height="1"><img border="0" src="overone.PNG" width="900" height="7"></td>
    </tr>
    <tr>
      <td background="middlone.PNG" height="88">
        <div align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="880" height="106">
<tr>
              <td background="bgbanner.PNG" height="106">
				<a href="index.php">
	     </tr>		<img border="0" src="bgbanner.PNG" width="900" height="106"></a></td>
          </table>
        </div>
      </td>
    </tr>

    <tr>
      <td height="1"><img border="0" src="unterone.PNG" width="900" height="3"></td>
    </tr>
        

    <tr>
      <td height="1"><img border="0" src="middlone.PNG" width="900" height="60"></td>
   </tr>

  
 <tr>
      <td height="1"><img border="0" src="unterone.PNG" width="900" height="3"></td>
   </tr>

   <tr>
      <td height="1"><img border="0" src="middlone.PNG" width="900" height="500"></td>
   </tr>

   <tr>
      <td height="1"><img border="0" src="unteru.PNG" width="900" height="7"></td>
   </tr>

Jetzt, unter dem Banner hat es ja noch ein 60px grosses Kästchen. in dieses
wollte ich die Datei "fancenter.GIF" einfügen, doch wenn ich das getan habe wurde das Kästchen viel grösser..
Hab geschaut, aber war alles richtig eingestellt :(
Ich hoffe, ihr könnt mir helfen..

Und habe noch eine andere Frage.
Hab schon gesehen, dass eine Fanpage auch ein Bild als Navigation hatte, und wenn man mit der Maus auf das Bild ging, kam obendran so eine Blase mit dem Namen der Seite (z.B Community)
Ist das ein Javascript oder so etwas?
Weiss jemand wo es das gibt?

VLG Amy
 
hmm sieht für mich aus, als ob du die bilder einfach gerade nicht hochgeladen hast^^.
mal davon abegsehen.
grüde warum ein bild zu gross angezeigt wird:
es ist zu gross.
der bereich in den das bild soll ist zu klein.

lösung:
erstmal: ich war auch einmal neu, und das erste was mir gesagt wurde isst: pack alles was du kannst in die css.
dazu schreibst du oben in das html-doc vor </head> statt "<style type="text/css">" einfach <link rel="stylesheet" href="bla.css" type="text/css"/>.
als nächstes erstelle mit dem editor eine neue datei, die du "bla.css" nennst. da kannst du dann classen erstellen die du einfach .style1 nennst (so wie bei dir eben). im html schreibst du dann zb <div class="style1"> oder <a class="style1">. vorteil: WEITAUS übersichtlicherer (xD) und einfach praktisch. und du brauchst es für hoverbuttons.

nun zu deinem ersten problem:
das bild wird zu gross angezeigt. schau die pixesbreite+höhe des bildes nach und bearbeite sie falls nötig nach (mit gimp oder wenn dir das zu kompliziert is, nimm paint.net). dann grösse ändern un merken.
per css ne klasse definieren (zb.
.fancenter{
background:url('fancenter.GIF');
width:BREITEpx;
height:HÖHEpx;
}

und in die html: <div class="fancenter"></div>


für die aktivgen buttons im menu brauchst du 2 bilder (bzw 3)
eins für normal. eins for mouseover (wenn die maus sich über dem feld befindet) und eins (optional) wenn die maus gedrückt wird.

dazu erstmal in die css:
neue klasse zb:

.nav {
background:url('button.png');
width:139px;
height:24px;
display:block;
0}

.nav:hover {
background:url('buttonhover.png');
}

.nav:active {
background:url('buttonactive.png');
}

und dann in das navigations-menu:
<a class:nav href="daswohin du verlinken möchtest">TEXT</a>
statt "daswohin du verlinken möchtest" zb: "index.php?mod=board" oder "http://www.habbo.ch/" und statt "text" das was auf dem button stehen soll also zb: habbo.ch oder forum oder so
hoffe das war einigermassen verständlich. zur not kann ich icq/irc/ts support machen wenns net lang dauert :D

falls du das brauchst: pm an mich

greez
 
Zuletzt bearbeitet:
nun zu deinem ersten problem:
das bild wird zu gross angezeigt. schau die pixesbreite+höhe des bildes nach und bearbeite sie falls nötig nach (mit gimp oder wenn dir das zu kompliziert is, nimm paint.net). dann grösse ändern un merken.
per css ne klasse definieren (zb.
.fancenter{
background:url('fancenter.GIF');
width:BREITEpx;
height:HÖHEpx;
}

und in die html: <div class="fancenter"></div>
Zum Vergrößern anklicken....

Hmm.. irgendwie kann das gar nicht sein xD
Das Kästchen ist ja 60px hoch und 900px Breit
Das Bild das rein kommen sollte ist 32px Hoch und 37x Breit
??
 
frage: willst du das bild als background oder einfach als bild?
wenn als bild, dann lass den quatsch und schreib einfach in das kästchen <img src="url('fancenter.GIF')></img> müsste so funktionieren.
ich persönlich würds komplizierter machen:
neue classe per css definieren:
.bild {
background:url('fancenter.GIF');
width:BREITEpx;
height:HÖHEpx;
}
und ins html einfahc da wo das bild reinsoll: <div class="bild"></div>

is dir überlassen.
 
Code: 
    <tr>
      <td height="1"><img border="0" src="middlone.PNG" width="900" height="60"></td>
   </tr>

Dass war ja eig. mein Problem..
Wo muss ich das einfügen?

Wenn ich das so mache:

Code: 
    <tr>
      <td height="1"><img border="0" src="middlone.PNG" width="900" height="60"></td>
     <div class="bild"></div>
   </tr>

Dann geht das Bild zuoberst bei der Page in die Ecke hin -.-
 
problem: <td height="1"><img border="0" src="middlone.PNG" width="900" height="60"></td>

<td height="1"> height=höhe. du gibst ihm erstens einen wert ohne einheit. bei height/width sollte IMMER eine einheit dahinter stehen. und ein bild mit höhe 900 in ein feld mit der höhe 1 einzusetzten bringt eine erfolgschance von ca. 0.

also entweder px oder %als einhiet...
der ganze code is btw sehr.... umständlich. wenn du willst und zeit hast, schick mir die dateien (bilder+jetziger html-code) und ich machs dir morgen mal. is keine grosse sache aber fürn komplett einsteiger sehr umständlich.

wenn dus selber probieren willst:
ersetzte das hier

HTML: 
    <tr>
      <td height="1"><img border="0" src="middlone.PNG" width="900" height="60"></td>
   </tr>
mal durch
HTML: 
<tr>
      <td><img border="0" src="middlone.PNG" width="900px" height="60px"></td>
</tr>
und schreib überall einheiten dahinter....

(mal davon abgesehen dass <table><tr><td> veraltet is...... ich würds komplett neu aufsetzten)
 
Amy schrieb:
HTML: 
<tr>
      <td height="1"><img...>
Zum Vergrößern anklicken....
Wieso is'n die Zelle nur 1px hoch? Versuch mal hier für die Lösung anzusetzen...

[edit]gleicher Gedanke, war nur langsamer ;-)
Tja, ist halt nicht wirklich schönes (X)HTML, was Frontpage so produziert...
 
Zuletzt bearbeitet:
Code: 
   <tr> <td><img border="0" src="middlone.PNG" width="900px" height="60px"></td>
  <div class="bild"></div> </tr>

CSS:

Code: 
.bild {
background:url('fancenter.GIF');
width:32px;
height:37px;
}


Habs so gemacht.
Doch das Bild geht trotzdem in die Ecke..
..Ich glaube, ich schicks dir Morgen, sonst wird das glaub nix mehr xD..
 
Ah, hab das erst jetzt geseh'n, dass du das DIV nach dem schließenden Zellentag gesetzt hast. So nimmst du's ja aus dem Gerüst raus. Also, entweder muß es mit rein oder du mußt es absolut positionieren...

[edit] Übrigens: deine Seite sieht momentan so aus:
 

Anhänge

  • habbocolor.jpg
    habbocolor.jpg
    57,7 KB · Aufrufe: 4
Zuletzt bearbeitet:
Aber wenn ichs so mache:

<tr> <td><img border="0" src="middlone.PNG" width="900px" height="60px"><div class="bild"></div></td></tr>

Dann gibts einfach ne Lücke, und dort kommt dann das Bild rein..
oder meinst du's anders?
 
Also, mal abgesehen davon, dass die Hälfte des HTML-Codes der Seite fehlt (keine oder falsch schließende Tags vorhanden, z.B. </div>,</body>,</html>) herrscht da auch ziemliches Durcheinander und irgendwie stimmen die Größenangaben in den Tags auch nicht mit den tatsächlichen Größen der Bilder überein. Soll das so?
Benutz mal folgende korrigierte & ergänzte Codes für die...
index-Datei:
Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Habbocolor :: Gibt dir die Farbe der Virtuellen Welt!</title>

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

<body background="bg.gif">
<script type="text/javascript" src="http://www17.kilu.net/extra/a4/remote_changes.js.php?kilu_account=habbocolor"></script>

<div align="center">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="900" height="67">
  <tr>
  <td><img border="0" src="overone.PNG" width="900" height="7">
  </td>
  </tr>
  <tr>
  <td background="middlone.PNG" height="88">
  <div align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="880" height="106">
	<tr>
	<td background="bgbanner.PNG" height="106">
	<a href="index.php"><img border="0" src="bgbanner.PNG" width="900" height="106"></a>
	</td>
	</tr>
  </table>
  </div>
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unterone.PNG" width="900" height="3">
  </td>
  </tr>

  <tr>
  <td class="bild"><img border="0" src="fancenter.GIF" width="32" height="37">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unterone.PNG" width="900" height="3">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="middlone.PNG" width="900" height="500">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unteru.PNG" width="900" height="7">
  </td>
  </tr>

</table>
</center>

</div>

</body>

</html>
und design.css:
Code: 
.bild {
background:url('middlone.PNG');
width:900;
height:60;
}
Ich hab dir das mal etwas aufgeteilt, damit's übersichtlicher wird und du erkennen kannst, was zusammengehört. Kleiner Tipp: wenn du ein Tag öffnest, schreib sofort das schließende Gegenstück in die darunter liegende Zeile und versuch alles mit gleichen Abständen zum Zeilenanfang zu formatieren. So erhälst du eine Ebenenstruktur der zusammengehörigen Tags (siehe mein Bsp.), was sich bei einer evtl. Fehlersuche als äußerst hilfreich erweist.
Schau mal, ob das alles so nun eher deinem Wunsch entspricht...
 
Wow!
Hattest sicher seehr lang für das?
Vielen dank!!
Hmm.. aber dort wo jetzt das Bild ist (fancenter.GIF) wo ist dort der blaue hintergrund hin??
 
Der ist in die "design.css" ausgelagert in eine sog. Klasse namens "bild" (wird in CSS-Dateien immer beginnend durch einen Punkt definiert). Nee, hab eigtl. nicht lang gebraucht - ich bin nur parallel noch in 'nem anderen Forum tätig.
Kommst du denn jetzt weiter? Ansonsten ist für Anfänger SelfHTML ideal, da findest du (fast) alles verständlich mit Bsp. erklärt.
 
Wieso - wird doch angezeigt!? Es sei denn, die CSS-Datei wäre nicht richtig eingebunden. Bei mir sieht's so wie unten aus...
Darf ich mal fragen, welche Programme du so zum Webseiten basteln und testen benutzt?
 

Anhänge

  • habbocolor2.jpg
    habbocolor2.jpg
    74,7 KB · Aufrufe: 3
Ok. Hast du auch den Code für deine Index-Datei 1:1 übernommen oder hast du da was verändert?
Dass du deine Page auf kostenlosem Webspace hostest, war mir klar - kann man anhand deiner Domain ableiten und nachforschen. Und mit SmartFTP überträgst du die Dateien auf den Webspace - auch ok. Aber was ist dazwischen? Ich meine die Programme, mit denen du den HTML-Code schreibst (z.B. Editor, Frontpage, etc.) und welchen Browser du zum Testen benutzt, wie IE6/7/8, Firefox, Opera, etc. Wollt ich auch nur wissen, um evtl. Alternativen vorschlagen zu können...

[edit] wie heißt deine Index-Datei - index.html?
 
Zuletzt bearbeitet:
Ah, sry..
Ich verwende Opera und den normalen Editor der bei "Zubehör" ist.

Joa, hab das auch übernommen.
Hier noch mal alles:

HTML:
Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Habbocolor :: Gibt dir die Farbe der Virtuellen Welt!</title>

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

<body background="bg.gif">
<script type="text/javascript" src="http://www17.kilu.net/extra/a4/remote_changes.js.php?kilu_account=habbocolor"></script>

<div align="center">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="900" height="67">
  <tr>
  <td><img border="0" src="overone.PNG" width="900" height="7">
  </td>
  </tr>
  <tr>
  <td background="middlone.PNG" height="88">
  <div align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="880" height="106">
	<tr>
	<td background="bgbanner.PNG" height="106">
	<a href="index.php"><img border="0" src="bgbanner.PNG" width="900" height="106"></a>
	</td>
	</tr>
  </table>
  </div>
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unterone.PNG" width="900" height="3">
  </td>
  </tr>

  <tr>
  <td class="bild"><img border="0" src="fancenter.GIF" width="32" height="37">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unterone.PNG" width="900" height="3">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="middlone.PNG" width="900" height="500">
  </td>
  </tr>

  <tr>
  <td><img border="0" src="unteru.PNG" width="900" height="7">
  </td>
  </tr>

</table>
</center>

</div>

</body>

</html>

CSS:

Code: 
.bild {
background:url('middlone.PNG');
width:900;
height:60;
}

+ natürlich die Bilder

Das sind die momentanen Code meiner Page..


Ja, heisst index.html
 
Zuletzt bearbeitet:
Tja, sieht eigtl. gut aus. Dann fällt mir dazu nur noch ein, dass auch alle Dateien (ich hab insg. neun! mit den Bildern) im gleichen Verzeichnis liegen müssen...
Schau mal, in meinem Opera sieht's so aus:
 

Anhänge

  • habbocolor im opera.jpg
    habbocolor im opera.jpg
    74,9 KB · Aufrufe: 4
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben