Anzeige
Anzeige

Am Puls von Microsoft

Anzeige

Frage HTML - ein Bild in einen Rahmen einfügen - wie geht das?

vivala

vivala

nicht mehr wegzudenken
Hallo,
ich möchte ja jetzt eine eigene Webside machen, Layout ist auch fast fertig, muss nur noch 1 Bild einfügen, das möchte ich aber über die Schrift, im Rahmen haben(Siehe Anhang!).
Jetzt weiß ich net weiter, ich brauche Eure Hilfe!!!

MfG vivala
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    62,3 KB · Aufrufe: 939
Anzeige
Hallo,
schon mal Danke, für deine Antwort, aber aus dem text werde ich auch net so richtig schlauer...
Gibt es denn hier nicht wenigstens eine Person, die mir das beschreiben kann???

MfG
 
stell bitte mal den Quelltext deiner Datei hier rein, dann gibt es mehr als genug Leute hier, die dir helfen können
 
Ok,
aber jetzt habe ich´s schon hingekriegt, aber der Rahmen ist immer ein bsichen größer, als das Bild, egal wie groß ich den Rahmen bzw. das Bild mache!
Also hier ist der Ausschnitt:
"
<table align="center" width="740" cellspacing="0" cellpadding="0" border="0" id="top" >
<tr>

<td valign="top" id="hpname">kostenlose-software.<span style="color:#fff482">lima-city.</span>de<br>
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo und Herlich Willkommen!</span>
<img src="surfer.jpg" align="center" width="740" border="0" alt="">
</td>
</tr>
<tr>
"

MfG
 
Da du das Orignalbild nicht angehangen hast, habe ich mir eins aus dem Internet geholt mit den Maßen 640x350px

Erstelle eine style.css mit folgenden Inhalt.

Code: 
TD.boCenter{
	background-image: url(surfer.jpg);
}

TABLE {
	border: 1px solid #000000;
}

das Bild sollte da im gleichen Ordner liegen wie die html-Datei, ansonsten url() ändern.


html-Datei:

Code: 
<html>
<head>
<title>Test</title>
 <link href="style.css" rel="STYLESHEET" type="text/css" />
</head>
<body>
<table align="center" width="640" cellspacing="0" cellpadding="0" border="0" id="top" >
<tr>

<td valign="top" id="hpname" class="boCenter"  height="350">kostenlose-software.<span style="color:#fff482">lima-city.</span>de<br />
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo und Herlich Willkommen!</span>
</td>
</tr>
</table>
</body>
</html>


Test
 
mal davon abgesehen, dass ein Layout heute nicht mehr mit einer Tabelle realisiert werden sollte, wäre es einen Versuch wert der betreffenden Zelle die gewünschte Breite zuzuordnen

Code: 
[I]<table align="center" width="740"  cellspacing="0"  cellpadding="0"  border="0"  id="top"   >
<tr>

<td valign="top" id="hpname"[/I][I] [COLOR=Navy][B]width="740"[/B][/COLOR][/I][I]>kostenlose-software.<span  style="color:#fff482">lima-city.</span>de<br>
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo  und Herlich Willkommen!</span>
<img src="surfer.jpg" align="center" width="740" border="0"  alt="">
</td>
</tr>
<tr>[/I]
 
Jim Duggan schrieb:
Trotzdem wird die Schrift über dem Bild eingefügt, er wollte sie ja im Bild haben. ;)
Zum Vergrößern anklicken....

So hatte ich das nicht verstanden.

Wenn das Bild im Hintergrund erscheinen soll, dann muss es auch als Hintergrund eingebunden werden. In diesem Fall muss dass Bild in der richtigen Größe vorliegen.

Code: 
<table align="center" width="740"  cellspacing="0"  cellpadding="0" border="0"  id="top"
style="background-image:surfer.jpg; background-repeat:no-repeat; background-position:center;">
<tr>
<td valign="top" id="hpname" width="740">kostenlose-software.<span  style="color:#fff482">lima-city.</span>de<br>
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo  und Herlich Willkommen!</span>
</td>
</tr>
<tr>

PS: @ Jim Duggan
verdammt, ich hatte völlig übersehen, dass du gleichzeitig mit mir gepostet hattest.
 
Jim Duggan schrieb:
Er will es doch nicht in der ganzen Tabelle. Schau doch im Post #6 da steht doch die Lösung
Zum Vergrößern anklicken....

Einwandfrei gelöst, wenn auch mit ekliger Layout-Tabelle:crazy

Ich empfehle da noch mal 2 besonders gute Links:

CSS 4 You - The Finest in Stylesheets

SELFHTML

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
 <link href="http://hacksaw.de/wbboard/snf/style.css" rel="STYLESHEET" type="text/css">
</head>
<body>
<table align="center" width="640" cellspacing="0" cellpadding="0" border="0" id="top" >
<tr>
<td valign="top" id="hpname" class="boCenter"  height="350">kostenlose-software.<span style="color:#fff482">lima-city.</span>de<br>
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo und Herzlich Willkommen!</span>
</td>
</tr>
</table>
</body>
</html>

Siehe korrekt validierendes Testdokument mit korrektem Doctype für HTML 4.01 Transitional.

ot:
Jim, auch ein kleines HTML Test Dokument erfordert immer einen korrekten Doctype, damit ein Browser das Teil im Standardkonformen Modus rendern kann und überhaupt weiß, welches HTML (HTML 4 oder XHTML1 oder HTML5 usw.) da dargestellt werden soll. Macht man das nicht, können erhebliche Unterschiede und Probleme im Design auftreten. Und ne Menge Fehler beim validieren gibts auch noch gratis dazu.

Siehe: SelfHtml Artikel über das Dokumenten-Grundgerüst
 
Zuletzt bearbeitet:
Hallo,
Danke, für diese wirklich vielebn Antworten, aber ich kriege das immernoch net hin...
Jetzt hänge ich mal das Bild als Anhang unten drunter und auch, wie es im Moment noch aussieht...

MfG
 

Anhänge

  • surfer.jpg
    surfer.jpg
    52,8 KB · Aufrufe: 316
  • Unbenannt.jpg
    Unbenannt.jpg
    65,7 KB · Aufrufe: 271
Ändere deine format.css so, oder erstelle einen Ordner images, in denen du alle Bilder einfügst. ;)

Code: 
body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #6a95e0;
}

table,td {font-size: 11pt;line-height: 1.5em;
font-family: georgia,verdana, "times new roman", serif;color:#000;
}


h2{ font-family:georgia,  verdana,'Lucida Grande', Helvetica, verdana, sans-serif;
color:#fff;
margin-bottom:24px;font-size: 14pt;
border-bottom:solid 0px #746b64;
padding-bottom:4px;
font-style:normal;
letter-spacing:-1px;
font-style:italic;

}


.li {
width:24px;
background-image:url(ra1.jpg);
background-repeat:repeat-y;
vertical-align:top;
border-right:solid 1px #fff;
}


.re {
width:24px;
background-image:url(ra2.jpg);
background-repeat:repeat-y;
border-left:solid 1px #fff;}


/* hauptgerüst */

#main {
border-bottom:solid 1px #fff;
border-right:solid 0px #fff;border-left:solid 0px #fff;

}

#top {background-image:url(surfer.jpg);
height:515px;
border-top:solid 1px #fff;
border-right:solid 0px #fff;border-left:solid 0px #fff;
color:#2A3C22;
}

#hpname {height:36px;padding-left:10px;padding-top:10px;text-align:left;color:#fff;
letter-spacing:3px;
font-family: georgia,arial, helvetica, verdana, tahoma, sans-serif;
font-size:22px;
}

.comment{
width:160px;
float:left;
line-height:28px;
letter-spacing:-3px;
text-align: right;
color:#E6E8FF;
margin-top:20px;
margin-bottom:10px;
margin-right:20px;
padding-bottom:10px;
font-family:'Lucida Grande', Helvetica, sans-serif;
font-size: 24px;

}

/* menue oben */

.buleiste {
-moz-opacity: 0.70;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity: 0.70;
background-color:#9cbaeb;
height:36px;
}

#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
color:#000;


text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;
padding-left: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 1px #fff;
border-bottom:solid 1px #fff;
border-top:solid 1px #fff;
line-height:36px;
text-align:center;

}


#menu2 a:hover {background-color:#3f6b8e;color:#fff; text-decoration:none ;

border:solid 1px #fff;
}




#sp1 {text-align:justify; padding-left: 20px;padding-right:20px;padding-top: 30px;padding-bottom: 30px;
background-color:#9cbaeb;width:100%;
background-image:url(bgmain.jpg);
background-repeat:repeat-x;


}

#sp2 {text-align:justify; padding-left: 0px;padding-right:10px;padding-top: 30px;padding-bottom: 30px;
background-color:#3f6b8e;

background-repeat:repeat-y;
background-position:top left;border-left:solid 0px #fff;

}


#fussb {font: normal 11px verdana, sans-serif; color: #000;
height:60px;
background-color:#6e98e2;
text-align:center;
border-top:solid 1px #333333;
background-image:url(schatten1.jpg);
background-repeat:repeat-x;
background-position:0% -4px
}

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #737b66; scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #737b66; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}




/* menue  */

#menu01 {
width:170px;
margin: 0px;
padding:0px;
border: dashed 0px #fff;
float:right;

text-align: left;

margin-top:0px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
padding-bottom:10px;
}

#menu01 ul, #menu01 li {
list-style-type: square;
margin-left:10px;
padding: 0px;
color:#fff482
}
#menu01 li a:link, #menu01 li a:visited, #menu01 li a:active {display:block;
        border-bottom: dashed 0px #C2631D;
        color:#fff;text-decoration:none;
        font-size: 12px;georgia, verdana, arial, helvetica, verdana, tahoma, sans-serif;
        height: 16px;
line-height: 16px;
}

#menu01 li a:hover { background:TRANSPARENT;
                color:#fff482;
        text-decoration:underline;
        letter-spacing:1px
}


/* allgemeine links im text */

a:link, a:visited, a:active{ font-size: 11pt;line-height: 1.5em;
font-family: georgia, verdana, arial, helvetica, verdana, tahoma, sans-serif;color:#000}

a:hover{ text-decoration:none;background-color:#3f6b8e;
color:#fff;}

HTML-Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->

<!-- Hinweis:
Ein Verkauf der Vorlage oder das Anbieten dieser Vorlage ist untersagt.
Die Vorlage kann privat (kostenlos) und kommerziell (gegen Bezahlung) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite www.on-mouseover.de/templates/
bitte die Nutzungsbedingungen nach.
-->

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


</head>
<body>
<table width="768" align="center"  cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="right" class="li"><img src="pixelspace.gif" width="14" height="1" border="0" alt=""></td><td><!--ende aussentab-->

<table align="center" width="740" cellspacing="0" cellpadding="0" border="1" id="top">
<tr>
<td valign="top" id="hpname">kostenlose-software.<span style="color:#fff482">lima-city.</span>de<br>
<span style="color:#c3d3f4;font-size:16px;font-style:italic">Hallo und Herzlich Willkommen!</span>
</td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td width="100%" valign="bottom" class="buleiste"><!--menü oben-->
<table id="menu2" width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="14%"><a href="http://kostenlose-software.lima-city.de/" onfocus="this.blur()">Home</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Gästebuch</a></td>
<td width="14%"><a href="http://kostenlose-software.lima-city.de/html/Ueber_diese_Webside" onfocus="this.blur()">Über diese Webside</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Downloads</a></td>
</tr>
</table>
<!-- ende menü oben-->
</td>

</tr>
</table>
<!--ende oben-->
<table align="center"  width="100%"  id="main"   border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(schatten1.jpg);" height="27" > </td>
<td width="28" style="background-image:url(schatten2.jpg);" height="27" ><img src="schatten2.jpg" width="28" height="27" border="0" alt=""></td>
<td style="background-image:url(schatten3.jpg);" height="27"> </td>
</tr>
<tr>
<td width="100%" valign="top" id="sp1">
<div class="comment">
<br>
Willst Du kostenlose Downloads??? - Dann bist Du hier genau richtig!
<br>
</div><h2>Beschreibung</h2>

Diese Webside dient dazu, kostenlose Downloads anzubieten. Ein Beispiel: Mozilla Firefox 3.6 - Falls Du Mängel gefunden hast oder villeicht sogar Verbesserungen vorschlagen willst, wende Dich doch an folgende E-Mail-Adresse: kostenlose-software@web.de! Da ich leider auch nur ein Mensch bin, kann es auch schon mal ein paar Tage dauern, bis eine Antwort folgt, aber feststeht, das auf jeden Fall eine Antwort gegeben wird!
<br><br>
Oben ist die Navigation miteingebaut, klicke einfach auf "Downloads" und Du kommst zur Download Seite. Dort kannst Du dich dann auch entscheiden, was für ein Programm Du runterladen möchtest!
<br>
<br>
Oder Du klickst auf "Gästebuch", dann gelangst Du, logischer weise zum Gästebuch! Dort kannst Du ja eine nette Nachricht hinterlassen, zum Beispiel "Hallo, wie gehts Euch denn so?" oder ähnliches. :D
<br>
<br>
<br>
<!-- ende inhalt--></td>
<td style="background-image:url(linebg.jpg);" width="28" height="100%" valign="top"><img src="line.jpg" width="28" height="499" border="0" alt=""></td><td valign="top" id="sp2">
<!--MENU 01 - rechte seite -->
<div id="menu01">
<ul>
<li><a href="index.html"  onfocus="this.blur()">Schreibe uns eine E-Mail</a></li>
</ul>
</div>
<!--MENU 01 ENDE-->
</td>

</tr>
<tr>
<td colspan="3"  id="fussb"  width="100%" >
    MIKE MUSTER GMBH & Co. KG  <br>
 Maschweg 2<br>
 28201 Bremen
</td>
</tr>
</table>
<td class="re"><img src="pixelspace.gif" width="14" height="1" border="0" alt=""></td><!-- aussentab-->
</tr>
</table>
<script src="http://layer.lima-city.de/support_layer.php" type="text/javascript"></script></body>
</html>

So sollte es aussehen
 
Zuletzt bearbeitet:
@ Jim:

Schön, dass Du Dir so viel Arbeit gemacht und das Problem gut gelöst hast! ;) (y) Der Code validiert jetzt.

Aber: @vivala:

Sche*** ist der Code der Seite trotzdem leider immer noch.

Warum ist das so?

Der Doctype ist immer noch nicht korrekt und so wird die Seite immer noch im Quirks-Mode (Kompatibilitätsmodus) angezeigt. Nachteile unter anderem siehe Link Quirks-Mode.

Der dort im leider grottenschlechten Template von
Code: 
http://www.on-mouseover.de/templates/
verwendete Doctype zeigt dem Browsern erstens ein völlig veraltetes HTML 4.0 an und zweitens ist er unvollständig.

Tausche daher diesen Part:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

gegen den korrekten Doctype für HTML 4.01 Transitional aus.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

Schlimm genug, das heutzutage noch völlig veralteter Tabellenlayoutcode verwendet wird, was mittlerweile auch gigantische Nachteile mit sich bringt (erheblich schlechteres Ranking bei Google und somit schlechtere Auffindbarkeit).

Wenn sich schon mit solchen Müll nicht im Entferntesten an Webstandards gehalten wird, so sollte man doch darauf achten, dass man wenigstens die Grundbegriffe des Webdesigns drauf hat. Kann man von jedem Hobby-Autoschrauber / Koch / Bäcker auch erwarten.

Der zweite Punkt ist hier im Code eindeutig die mittlerweile absolut unzeitgemäße Zeichencodierung ISO-8859-1. Das macht man so auch bereits seit einigen Jahren nicht mehr, weil es besonders bei Seiten die auch Formulare nutzen erhebliche Nachteile mit sich bringt. Mein Testdokument oben war nicht umsonst in UTF-8 codiert. Das Martin diese Seite in ISO-8859-1 anbietet, heisst noch lange nicht, dass das auch gut so ist. ;) Martins Firmenseite, welche ich für ihn gemacht habe ist daher auch in UTF-8 codiert.

Nicht alle Texteditoren können übrigens UTF-8 speichern. Phase 5 kann es nicht, Notepad++ jedoch kann. Muss aber eingestellt werden.

Übrigens bietet SelfHTML auch fertige; zum Teil Webstandards kompatible CSS-XHTML Layouts (Templates) an. Layout Nr.10 z.B. ist da so übel nicht. Mit ein bißchen Arbeit am Design...

P.S.:

Kleiner Nachtrag und Tipp vom Profi: Webseiten entwickelt man heute mit dem Firefox, weil er sehr Webstandardgetreu anzeigt und weil man ihn mit vielen nützlichen Erweiterungen wie der Webdeveloper-Toolbar (deutsch) bestücken kann, die einem sofort zeigt, ob sich eine Webseite im Standard- oder Kompatibilitätsmodus befindet.
 
Zuletzt bearbeitet:
Hallo,
Tausend Dank, für Eure große Mühe!
Leider muss ich Euch dennoch enttäuschen, das Bild wird immernoch noch nicht angezeigt!
Ich habe alle Schritte befolgt, die Ihr mir netterweise hingeschrieben habt!
Alles genauso, wie es eurer meinung ruichtig ist, und jetzt zeigt es immernoch kein Bild an :wand
Unten im Anhang seht Ihr es, wie es aussieht...
Aber ich glaube immernoch fest daran, das Ihr meine Retter seid :D
Naja, und falls Ihr überhaupt noch Lust habt, mir eine antwort zu geben, mache ich mich schon mal an die nächste Seite...;)

MfG
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    25,3 KB · Aufrufe: 199
vivala schrieb:
....
Ich habe alle Schritte befolgt, die Ihr mir netterweise hingeschrieben habt!
....

MfG
Zum Vergrößern anklicken....

Nein hast du nicht. ;) Wenn der Eintrag in der format.css lautet:

background-image:url(images/surfer.jpg);

dann sollte das Bild auch in dem Ordner images liegen.

oder du öffnest die format.css und entfernst bei allen Vorkommen das images/

also: background-image:url(images/surfer.jpg);
wird zu background-image:url(surfer.jpg);

mach das bitte bei allen Vorkommen in der format.css weil da mehrere Grafiken zum Style aufgeführt werden.
 
Hallo,
als ich es zuerst prbiert hatte, war immernoch kein Bild, dann musste ich kurz weg, jetzt habe ich es nochmal probiert, und jetzt ist das Bild da, Tausend Dank, an alle, die mir dabei geholfen haben!!!!!:)

Aber nun zu einer andren Frage: Ich möchte da ja Software anbieten, wie poste ich diese auf eine Seite???
Also, damit man die dann runterladen kann???

MfG
 
vivala schrieb:
Aber nun zu einer andren Frage: Ich möchte da ja Software anbieten, wie poste ich diese auf eine Seite???
Also, damit man die dann runterladen kann???
Zum Vergrößern anklicken....

Also, der schönste Dank für uns wäre ein Befolgen unserer Ratschläge. Dazu gehört im gewissen Sinne auch das Lesen der Links, die wir gepostet haben.

Das haben wir nämlich nicht getan, weil wir grad ein Freizeitproblem haben...

Also, das Ganze ist nichts weiter als ein Link, ein sogenanntes Anker-Element.

Sieht ungefähr so aus:

HTML: 
<a href="downloads/deine-software.dateiendung">Hier Software downloaden</a>
Wobei "downloads" wieder der Ordner ist, in dem sich die Software befindet.

Das packst Du dann in eine weitere Tabellenzeile Deines Codes. Siehe SELFHTML.

Genauer erkläre ich es nicht mehr, es soll schliesslich auch ein Lerneffekt bei Dir eintreten und wir machen hier kein kostenfreies Webdesign für Dich. ;)

P.S.: Wenn Du die Software, die Du anbieten möchtest nicht selbst geschrieben hast (was ich grad irgendwie bezweifle) könntest Du mitunter gegen Lizenzbestimmungen verstoßen, was sehr teuer für Dich werden kann. Also Vorsicht, hm?:D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Anzeige
Oben