nicht angemeldet
Matthias Scharwies
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
JürgenB
Matthias Apsel
Gunnar Bittersmann
Hallo Zusammen
Gleich vorneweg ich bin absoluter Anfänger was die html-Programmierung betrifft. Ich habe eine eigentlich ganz einfache Seite auf der ausschliesslich eine pdf-Datei dargestellt wird.
<!DOCTYPE html>
<html lang="de-CH">
<head>
<link rel="shortcut icon" href="">
<TITLE> Tagesplan Mittwoch </TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="1800; URL=http:/xyz/">
<meta http-equiv="cache-control" content="no-cache">
</head>
<body>
<object
width="100%"
height="2600"
type="application/pdf"
data="Tageskalender_Mi.pdf">
</object>
</body>
</html>
Soweit funktioniert das auch ganz prima. Nun möchte ich auf dieser pdf-Datei (Object) "Buttons" darstellen, die einen Link aufrufen. Also insgesamt sieben Button, für jeden Wochentag einen. Nun habe ich schon diverses probiert, komme aber aus Mangel an Erfahrung immer wieder an die Grenze. Das Hauptproblem ist, dass ich zwar einen "Button" auf die pdf-Datei positioniert bekomme, sobald ich aber die Grösse ändere verschiebt sich alles zueinander. Nun meine Frage ist das überhaupt möglich das man Objecte so verbindet das sie bei einer Grössenänderung an der gleichen Stelle bleiben und wenn ja wie?
Für zweckdienliche Hinweise herzlichen Dank.
Gruss Warne
Servus!
Hallo Zusammen
Gleich vorneweg ich bin absoluter Anfänger was die html-Programmierung betrifft.
Herzlich willkommen!
Ich habe eine eigentlich ganz einfache Seite auf der ausschliesslich eine pdf-Datei dargestellt wird.
Das ist m.E. schon der Grund für Dein Problem.
Pdf ist ein Dokumentformat für elektronische Schriftstücke , das diese unabhängig vom ursprünglichen Anwendungsprogramm, vom Betriebssystem oder von der Hardwareplattform originalgetreu wiedergeben kann.
Da Webseiten aber auf vielen Geräten vom kleinen Handy zum großen 50''-Zöller Widescreen wiedergegeben werden, kannst du dort keine Buttons so platzieren, dass sie immer auf einer bestimmten Stelle sitzen.
Soweit funktioniert das auch ganz prima. Nun möchte ich auf dieser pdf-Datei (Object) "Buttons" darstellen, die einen Link aufrufen. Also insgesamt sieben Button, für jeden Wochentag einen. Nun habe ich schon diverses probiert, komme aber aus Mangel an Erfahrung immer wieder an die Grenze. Das Hauptproblem ist, dass ich zwar einen "Button" auf die pdf-Datei positioniert bekomme, sobald ich aber die Grösse ändere verschiebt sich alles zueinander. Nun meine Frage ist das überhaupt möglich das man Objecte so verbindet das sie bei einer Grössenänderung an der gleichen Stelle bleiben und wenn ja wie?
Übertrage den Inhalt in HTML und binde die Buttons entsprechend ein. PDFs werden im Webdesign nur verwendet, wenn Du eine Ausgabe, die nicht mehr verändert wird, ausgeben willst. - evtl. eine Vertrags- oder Bestellbestätigung.
Für zweckdienliche Hinweise herzlichen Dank.
Gruss Warne
Herzliche Grüße
Matthias Scharwies
Hallo Matthias
Vielen Dank für deine Antwort.
Es ist tatsächlich so, dass die pdf-Datei eine Ausgabe darstellt die nicht mehr verändert werden soll. Ursprung ist ein Excel Sheet was als pdf exportiert wird und dann zur Information im Intranet abrufbar ist. Von daher wüsste ich jetzt nicht wie ich das in HTML übertragen sollte. Wie gesagt Anfänger halt.
Gruss Warne
Hallo Warne,
<body>
<object> </object>
<a href=" " id="mo"> </a>
<!-- noch andere Links, die wie Buttons aussehen -->
</body>
ungetestet:
Folgendes CSS könnte zielführend sein
body {
position: relative;
}
a {
display: block;
position: absolute;
}
#mo {
top: 10%;
left: 10%;
}
Die Prozentangaben so verändern, dass es passt. Das a-Element wunschgemäß gestalten.
Siehe auch Wiki/position
Bis demnächst
Matthias
Hallo Matthias
Vielen dank für deine Hilfe.
Ich nehme an durch
<a href="http://xyz/" id="mo"> </a>
soll auf der Seite ein Button erscheinen, der dann mit dem Link verknüpft ist? Leider erscheint bei mir so kein Button.
Wenn ich
<a href="http://www.example.com"><input type="button" value="Foo"></a>
eingebe erscheint zwar der Button "Foo", aber den kann ich ja wiederum nicht mit der css-Datei formatieren. Was mache ich denn falsch?
Gruss Warne
Hallo Warne,
<a href="http://xyz/" id="mo"> </a>soll auf der Seite ein Button erscheinen, der dann mit dem Link verknüpft ist? Leider erscheint bei mir so kein Button.
a scheint mir in diesem Fall das richtige Element zu sein, denn du möchtest einen Link aufrufen, wie du im OP schriebst.
Es fehlt natürlich der Linktext. <a href="http://example.com" id="mo">Montagslink</a>, weil ich nicht wusste, wie der heißen kann. Dann ist mindestens der Text zu sehen. Diesen Textlink kannst du jetzt nach deinen Wünschen gestalten. Farben, Rahmen, was auch immer. Wenn du möchtest, dass er wie ein Button des Browsers aussieht und sich auch so verhält, kannst du folgendes schreiben.
a {
-webkit-appearance: button; /* Webkit-Browser und Edge */
-moz-appearance: button;
appearance: button;
}
/* geht nicht im IE11 */
Bis demnächst
Matthias
Hallo Matthias
Nochmals vielen Dank, hab es jetzt raus gefunden.
<a href="http://xyz.htm" <button type="button" id="mo">Montag</button> </a>
funktioniert es erstmal so, dass ich einen Button als Link auf der Seite sehe.
Gruss Warne
Das ging jetzt Schlag auf Schlag. Vielen Dank für deine Erklärungen.
Hallo Warne,
<a href="http://xyz.htm" <button type="button" id="mo">Montag</button> </a>funktioniert es erstmal so, dass ich einen Button als Link auf der Seite sehe.
Das geht so nicht, auch wenn die fehlende spitze Klammer nach dem Linkziel (für Beispiel-Domains verwende bitte example.com) wahrscheinlich ein Kopierfehler ist, dürfen button-Elemente nicht innerhalb von a-Elementen vorkommen. Beide lösen eine Benutzeraktion aus, und der Browser weiß in diesem Fall nicht, welche er auslösen soll.
Bis demnächst
Matthias
Hallo Matthias
Also im Firefox funktioniert das
<a href="http://example.com" <button type="button" id="mi">Mittwoch</button> </a>
so. Allerdings im Internet Explorer werden die Button wiederum nicht dargestellt.
Gruss Warne
Hallo Warne,
Also im Firefox funktioniert das
Du solltest es trotzdem nicht so machen.
Bis demnächst
Matthias
Also mit dem IE funktioniert es irgendwie nicht wirklich. Die Button werden nur bei der Aktualisierung kurz im Hintergrund sichtbar.
Kann man Button ohne CSS positionieren?
Ich hätte da zu Beispiel das hier:
<a href="http://example.com"><input type="button" value="Dienstag"></a>
Nun sollten davon mehrere neben einander erscheinen. Wie muss man das denn programmieren?
Also ich hab da folgendes gefunden
<div style="text-align: center;">
<input type="submit" name="submit" value="Montag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Dienstag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Mittwoch" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Donnerstag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Freitag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Samstag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
<input type="submit" name="submit" value="Sonntag" style='background-color:#6EC8FF;font-family:Bradley Hand ITC; font-size: 24;font-weight:bold'>
</div>
Damit hab ich sowohl im IE als auch im Firefox die Button immer oben in der Mitte. Wie muss ich denn jetzt den Link darin integrieren, sprich mir fehlt die Syntax und ob das überhaupt so geht?
Hallo Warne,
Wir waren uns doch schon einig, dass du a-Elemente verwendest.
Bis demnächst
Matthias
Hallo Matthias
Ja, aber das mit der Positionierung funktioniert nicht vernünftig. Durch die Prozentangabe in der CSS werden die Button bei verschiedenen Auflösungen immer verschoben. Abgesehen davon sehe ich die Button im IE so nicht. Durch diese "div-Geschichte" sind die Button im Firefox und im IE immer in der Mitte der Seite und die Auflösung spielt auch eine untergeordnete Rolle, sprich das fällt nicht ins Gewicht, weil sie ja immer oben in der Mitte sind. Ich bekomme es nur nicht hin, dass die mit "div" definierten Button einen Link aufrufen. Wenn das funktionieren würde wäre mein Problem vermutlich gelöst.
Gruss Warne
Hallo,
Ich bekomme es nur nicht hin, dass die mit "div" definierten Button einen Link aufrufen.
weil Buttons auch nicht dafür gemacht wurden, Links aufzurufen. Verwende das a-Element, also einen Link. Das darf auch in einem div stehen. Wenn es da auf der Seite angezeigt wird, wo du es erwartest, kannst du anfangen, dich um sein Aussehen zu kümmern. Da der IE11 (und älter) die Angabe „appearance“ nicht unterstützt, musst du den Link von Hand wie einen Button aussehen lassen. Stichworte für die Suche im CSS-Teil des Wikis sind border, text-decoration, color, background-color, padding.
Gruß
Jürgen
Hallo Jürgen
Wenn ich in der CSS
a {
display: block;
position: relative;
eintage, erscheinen die Links auch im IE, allerdings alle untereinander. Also jede Zeile ein Link. Kann man die Links nicht in einer Zeile nebeneinander anordnen?
Gruss Warne
Hallo Warne,
Kann man die Links nicht in einer Zeile nebeneinander anordnen?
Ja. Aber ich hatte dich so verstanden, dass du sie auf dem PDF an ganz verschiedene Stellen positionieren möchtest.
Bis demnächst
Matthias
Hallo Matthias
Ja ich wollte ursprünglich das die Links auf der pdf-Datei erscheinen, bloss die sind, je nach Auflösung, immer woanders. Jetzt habe ich eine Lösung gefunden, die sowohl im IE als auch im FF ganz ansprechend funktioniert.
In der HTML steht:
<!DOCTYPE html>
<html lang="de-CH">
<head>
<link rel="shortcut icon" href="">
<TITLE> Tagesplan Samstag </TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="1800; URL=http://example.com/">
<meta http-equiv="cache-control" content="no-cache">
<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href="#">Montg</a>
</li>
<li><a href="#">Dienstag</a>
</li>
<li><a href="#">Mittwoch</a>
</li>
<li><a href="#">Donnerstag</a>
</li>
<li><a href="#">Freitag</a>
</li>
<li><a href="#">Samstag</a>
</li>
<li><a href="#">Sonntag</a>
</li>
</ul>
</nav>
<object
width="100%"
height="2600"
type="application/pdf"
data="Tageskalender_Sa.pdf">
</object>
</body>
</html>
und in der CSS steht:
nav ul {
margin: 0;
padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: silver;
}
nav li {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
nav a,
nav span {
display: block;
width: 8em;
margin: 0.6em 0 0 0;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
border: 1px solid blue;
border-radius: 10px 10px 0 0;
box-shadow: 0px 5px 10px white inset;
color: gold;
background-color: royalblue;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav a:focus,
nav a:hover,
nav span {
color: royalblue;
background-color: gold;
}
nav a:focus,
nav a:hover {
margin-top: 0;
padding: 1em 0.4em 0.4em;
}
Noch eine Frage, gehört zwar nicht direkt in dieses Thema. Im IE werden die pdf-Dateien mit sehr viel leerem "Head" angezeigt. Kann man das dem IE abgewöhnen?
Vielen Dank nochmal und Gruss Warne
Hallo Warne,
Noch eine Frage, gehört zwar nicht direkt in dieses Thema. Im IE werden die pdf-Dateien mit sehr viel leerem "Head" angezeigt. Kann man das dem IE abgewöhnen?
Ohne eine konkrete Seite kann dir wohl keiner sagen, was da nicht so läuft, wie es soll.
Bis demnächst
Matthias
@@Warne
Ich bekomme es nur nicht hin, dass die mit "div" definierten Button einen Link aufrufen.
Verwirre dich mal nicht selbst. Du meinst keine Buttons, sondern Links. Auch wenn die Links vielleicht wie Buttons aussehen sollen, sind es doch keine Buttons, sondern Links.
Links dienen für Verweise zu anderen Seiten (bzw. anderen Stellen im aktuellen Dokument). Das ist das, was du willst: Links – a-Elemente.
Buttons dienen zur Ausführung von Aktionen auf einer Seite, bspw. dem Absenden eines Formulars. Das ist nicht das, was du willst. Du willst keine Buttons, d.h. keine input type="button" bzw. button-Elemente.
Und es gibt weder „mit div definierte Buttons“ noch mit div definierte Links. divs sind keine interaktiven Elemente. Da kann man keine Interaktion drauflegen.[1]
LLAP 🖖
Ja, ich weiß, kann man doch. Aber wenn man weiß wie, dann weiß man auch, dass man das nicht tun sollte. ↩︎
Entsprechend deiner Vorgabe
<a href="http://example.com" id="mo">Montag</a>
hab ich das soweit hinbekommen, dass es im Firefox funktioniert und auch recht ansprechend aussieht. Nur leider werden im IE die Button überhaupt nicht dargestellt!?
Hallo Warne,
hab ich das soweit hinbekommen, dass es im Firefox funktioniert und auch recht ansprechend aussieht. Nur leider werden im IE die Button überhaupt nicht dargestellt!?
Weil der IE appearance nicht kann. Für den musst du im CSS die Formatierungen selbst festlegen.
Bis demnächst
Matthias