Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von peak7810, 23. Januar 2008 .

  1. 23. Januar 2008
    ich hab bissl mit Dreamweaver gebastelt, aber eigentlich keinen schimmer davon.


    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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Unbenanntes Dokument</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
     <!--
     body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
     padding: 0;
     text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
     color: #000000;
     }
     .oneColElsCtr #container {
     width: 46em;
     background: #FFFFFF;
     margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
     border: 1px solid #000000;
     text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
     }
     .oneColElsCtr #mainContent {
     padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div-Box. */
     }
     -->
     </style></head>
    
    <body class="oneColElsCtr"><img src="../hintergrundbild.jpg" width="1024" height="768" />
    
     
     </body>
    </html>

    ich würde gern einen button, welchen ich schon als button.png auf dem server liegen, und dieser soll, wenn er geklickt werden auf das interne forum weiterführen.

    ich weiß nicht wie man das macht.

    der button soll mittig unten plaziert sein, notfalls auch oben.


    kann mir da mit dem dem code helfen, und nein, ich möchte jetzt nicht von grund auf html lernen, da ich mit anderen projekten vollkommen ausgelastet bin, würde es aber benötigen.

    danke schonmal, und wer die lösung hat, bekommt ne bw, is klar.
     
  2. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    Okay, ich würde das Hintergrundbild noch in den css Teil oben einbauen, also würde der body oben ungefähr so aussehen:
    HTML:
     body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #66666 url(../hintergrundbild.jpg) fixed; /* Hier am besten die absolute URL einfügen, also zB /image/hintergundbild.jpg */
     background-position: center 50%;
     background-repeat: no-repeat;
     margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
     padding: 0;
     text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
     color: #000000;
     }
    Dann kannst du das Bild zB oben einbinden:
    HTML:
    <div align="center">
    <a href="interne_forum.html"><img src="button.png" border="0" alt="internes Forum" /></a>
    </div>
    
    Um das Bild unten einzubinden, würde ich einfach eine Tabelle zwischen <body> und </body> einbinden:
    HTML:
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" valign="bottom">
    <a href="interne_forum.html"><img src="button.png" border="0" alt="internes Forum" /></a>
    </td>
    </tr>
    </table>
    Hoffe das funktioniert so, ansonsten einfach nochma melden.
     
  3. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    es funktioniert fast.

    der button wird in beiden fällen unterhalb des hintergrundbildes angezeigt.

    kannst du mir das so abändern, daß der button oben zu sehen ist, aber eben nicht oberhalb des Hintergrundbildes, sondern überlappend, also beides oben bei der selben y koordinate anfängt, weißt du wie ich das meine?
     
  4. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    *mhh* Also du meinst, dass das Hintergrundbild im Vordergrundsein soll (Stichwort: z-index), scheint mir zwar ungewöhnlich, aber gut ...
    Denke man müsste die gleichen z-indizes zuordnen.
    Also im css-body-tag noch eine Zeile hinzufügen:
    HTML:
    z-index: 1;
    & dann in den div-tag zur Ansicht oben:

    HTML:
    <div style="text-align: center; z-index:1;"><a href="internes_forum.html"><img src="button.png" border="0" alt="internes Forum" /></a>
    </div>
    Hoffe es klappt.
     
  5. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    an welche stelle muss der div-tag?


    und das andere auch?

    kannst du den kompletten code bitte posten, wäre lieb weil ich hab von alledem keinen schimmer, habs nur aus dreamweaver hierher kopiert.


    BW haste bekommen.


    edit: was bedeutet das hier: "alt="internes Forum""
     
  6. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    Okay:
    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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Unbenanntes Dokument</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
     <!--
     body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #66666 url(../hintergrundbild.jpg) fixed; /* Hier am besten die absolute URL einfügen, also zB /image/hintergundbild.jpg */
     background-position: center 50%;
     background-repeat: no-repeat;
     z-index: 1;
     margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
     padding: 0;
     text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
     color: #000000;
     }
     .oneColElsCtr #container {
     width: 46em;
     background: #FFFFFF;
     margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
     border: 1px solid #000000;
     text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
     }
     .oneColElsCtr #mainContent {
     padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div-Box. */
     }
     -->
     </style></head>
    
    <body class="oneColElsCtr">
    <div style="vertical-align: bottom; text-align: center; z-index: 1;"> <a href="interne_forum.html"><img src="button.png" border="0" alt="internes Forum" /></a>
    </div>
    </html>
    alt bedeutet "Alternative", ALSO:
    wenn das Bid nicht auf dem Server gefundet wird, wird dieser Text angezeigt. Wird für valides HTML benötigt.

    So long,
     
  7. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    funktioniert nicht.

    wenn ich den code übernehme, wird nur der button oben mittig angezeigt, sonst nichts.

    wenn ich den unteren teil korrigiere(du hast das hintergrundbild vergessen) dann wird der button wieder unten angezeigt.

    Code:
    [COLOR=#000080]<body class=[COLOR=#0000FF]"oneColElsCtr"[/COLOR]>[/COLOR]
    [COLOR=#000080]<div style=[COLOR=#0000FF]"vertical-align: bottom; text-align: center; z-index: 1;"[/COLOR]>[/COLOR] [COLOR=#008000]<a href=[COLOR=#0000FF]"interne_forum.html"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"button.png"[/COLOR] border=[COLOR=#0000FF]"0"[/COLOR] alt=[COLOR=#0000FF]"internes Forum"[/COLOR] />[/COLOR][COLOR=#008000]</a>[/COLOR]
    [COLOR=#000080]</div>[/COLOR]
    [COLOR=#000080]</html>[/COLOR]

    der richtige code, oder?

    Code:
    <body class="oneColElsCtr"><img src="../hintergrundbild.jpg" width="1024" height="768" />
    
     <div style="vertical-align: bottom; text-align: center; z-index: 1;"> <a href="interne_forum.html"><img src="button.png" border="0" alt="internes Forum" /></a> </div> </html>
    dort ist der button wieder unten!
     
  8. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    Denke nicht, der ist oben im css-tag im Body drin, daher wird das Hintergundbild auch, wie der Name sagt im hintergrund angezeigt, muss vermutlich nur die url anpassen, wo die Datei liegt.

    Worauf willst du denn nun hinaus?
    Ein großes Hintergrundbild & darüber oder doch darunter der Button mit dem weiterführenden Link?
    Lieber oben oder unten?
    Oder was meinst du mit überlappen? Dann sieht man ja von einem der beiden nix =(

    Bei dem unteren hast du übrigens den </body> Tag vor </html> vergessen.

    So long,
     
  9. 23. Januar 2008
    AW: Button mit Weiterleitung in Dreamweaver oder per Hand einfügen

    also ein hintergrundbild, und oben mittig den button.

    der button soll aber auf dem hintergund liegen oben.


    und das hintergrundbild wird nicht angezeigt, auch wenn ich die url komplett angebe, hast ma ne pn
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.