• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button als Link auf Share-Point Seite

R

Rayman

Neues Mitglied
Ich arbeite auf einer Vordefinierten SharePoint Seite (d.h. ich kann keinen SharePoint Designer anschmeißen oder irgendwelche Dateien in die Seite einbinden (CSS?)), bin also auf pures HTML beschränkt, wobei allerdings .js snippets einbindbar sind.
Das eigentliche Problem: Ich habe Buttons per HTML definiert und eine Sprungmarke (Bookmark) namens #Generic auf selben Seite. Ich möchte nun also einfach bei Klick auf den Button zu dieser Position springen. Ich weiß nicht, wo genau ich z.B. das href="#Generic" einbinden soll. Ich habe es so in folgender Button Definition versucht, aber es passiert nichts beim Klick.:

<p>
<button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;">
<a href="#Generic">
<span>
<strong>
<span class="ms-rteThemeForeColor-1-0">Generic</span></strong></span></a></button> </p>
<p>

Könnt ihr mir da helfen? Braucht ihr mehr Infos?
Viele Grüße,
Ramon
 
Werbung:
Also das "href="#Generic" kannst du in allen <a> Tags einbinden (was du ja auch gemacht hast).
Was ich in deinem Code nicht sehe, ist der Punkt, wo die Seite dann auch hinspringt.
Diese definiert man mit einer id.
Also z.B.
HTML: 
<a href="#spring_dahin">
...
...
...
<div id="spring_dahin">test</div>

Ich kenn mich mit SharePoint Designern nicht aus. Aber wenn du kein CSS-File einbinden kannst, dann setze doch wenigstens alles in den <style> im Head-Bereich anstatt alles inline in den Tag zu schreiben.
 
Hi,
ja der Bookmark ist so definiert:
<h2>
<a name="#Generic" id="#Generic" href="#Generic">Generic</a></h2>

Den Head-Bereich kann ich nicht direkt, sondern nur in einem bereitgestelltem Editor bearbeiten, da dies ein eingebetteter Teil auf einer SharePoint-Seite (funktioniert hier als Wiki) ist. Ich kann hier also nur den Inhalt bearbeiten, die Seite selbst ist vom Design her vordefiniert.
Was mich wundert ist, dass ich einen "normalen" Text-Link auf eine solche Sprungmarke erzeugen kann (die auch funktioniert) aber innerhalb einer Buttondefinition scheint das nicht zu funktionieren, auch der Mouseover zeigt nur auf die URL der Seite ohne das Ende mit ...#Generic.
Ich habe es jetzt auch noch einmal nach Deiner Struktur umgebaut, hilft aber leider nicht:
<p>
<a href="#Generic">
<button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;">
<span> <strong> <span class="ms-rteThemeForeColor-1-0">Generic</span></strong></span></a></button> </p>

Ich befürchte, ich muss die Buttons in BMPs umbauen und dann dort die Links hinterlegen...

Viele Grüße,
Ramon
 
Werbung:
Nein BMPs werden hier nicht benötigt. Du hast es nur falsch gemacht/nicht verstanden.
Was du im Moment machst ist:

Du hast einen Mutter(Container)-Tag <a> dem hast du den Attribut href="#Generic" gegeben. Wenn ich also hier rauf klicke:
HTML: 
<a href="#Generic">
...
Dann springt die Seite zu der id "#Generic". Hier ist dein Problem:
Wo ist denn dein Object, auf das er springen soll???
Ich sehe nämlich keine id.
Hier mal kurz ein Beispielcode.
HTML: 
<p>
    <a href="#Generic">
        <button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;">
            <span>
                <strong>
                    <span class="ms-rteThemeForeColor-1-0">Generic
                    </span>
                </strong>

            </span>
        </button>
    </a>
</p>
<div>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>   
</div>
<div id="Generic" style="font-size: 40px; background-color: black; color: white;">
    HIER IST DER LINK, AUF DEN ER SPRINGEN SOLL
</div>
<div>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>
    Platzhaltertext<br>   
</div>



Und hier gleich noch ein Problem ;)
HTML: 
<p>
    <a href="#Generic">
        <button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;">
            <span>
                <strong>
                    <span class="ms-rteThemeForeColor-1-0">Generic
                    </span>
                </strong>

            </span>
    </a>
</button>
</p>
Das hier ist dein aktueller Code geordnet.
Fällt dir was auf? Wenn nicht dann mach ich nochmal das <strong> und so in dem button weg:
HTML: 
<a href="#Generic">
     <button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;">            
</a>
</button>

Jetzt klingelt's oder? Der button ist ein Tochter-Element von <a>. Du schließt aber das <a> vor dem <button>.
 
Danke Aaron, hat geklingelt,:D
aber auch mit der Korrektur will der Herr SharePoint nicht.

HTML: 
  <a href="#Generic"><button style="color: #ffffff; font-family: arial; font-size: 16px; background-color: #63a3cf;"><span><strong><span class="ms-rteThemeForeColor-1-0">Generic</span></strong></span></button></a>

Ich habe auch schon einen Button, der genauso eine Codierung hat:
HTML: 
 <a href="#Generic">
      <img alt="Generic.bmp" src="/.../Generic.bmp" style="margin: 0px 5px;"/> </a>
Und der springt auch zu dem Eintrag mit der id... (der war oben etwas versteckt nach dem <h2>-Eintrag, sorry, ich war leider noch nicht vertraut mit dem Einfügen von Code-Schnipseln).

Daher :(...
 
Also benutzt du jetzt BMPs. Halte ich für eine schlechte Idee. Dann sind styles ja unmöglich. Hast du mal einen Link zur Seite oder irgendeine Möglichkeit, dass ich mir die anschauen kann?
 
Werbung:
Die BMPs sind genaue Abbilder der Buttons, die ich per HTML schon generiert hatte.
Daher gibt es optisch keine Unterschiede, ich bin nur recht unflexibel, was spätere Änderungen angeht.
Die Seite liegt innerhalb eines Intranets, daher gibt es leider keine Chance, außer vielleicht, sich live per WebEx draufzuschalten. Ich möchte aber echt nicht Deine Zeit damit verschwenden, da gibt es sicherlich wichtigeres.
Dank Deiner Beiträge bin ich aber trotzdem schlauer geworden und sehr sicher, dass hier mal wieder eine Grenze des Machbaren (auf diesem beschränktem SharePoint) erreicht wurde.
Vielen herzlichen Dank also für Deine Hilfe!
 
Ok, ich glaube aber, dass ich hier kein CSS anwenden kann. Allerdings ist das für mich absolutes Neuland. So, wie ich das verstanden habe, wird der css-code in einer eigenen Datei namens.css auf dem Verzeichnis abgelegt und dann per HTML aufgerufen, oder?
 
Ah, ich hab's verstanden. Habe eben mit einem CSS Button-Generator den Button nachgebildet und diesen dann aufgerufen. Und der Seiteneditor erlaubt dann auch das Hinzufügen eines Links, und es funktioniert.
Für interessierte:
Code: 
<style><span id="ms-rterangecursor-start"></span><span id="ms-rterangecursor-end"></span>
.button {
background-color:#63a3cf;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
text-indent:0;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
height:40px;
width:100px;
text-decoration:none;
text-align:center;
}

.button:hover {
background-color:#80b5ea;
}
</style>
...
<p>&#160;
   <a class="button" href="#Generic" style="width: 100px; height: 27px;">Generic</a></p>

musste die Höhe nochmal nachjustieren, da sich der Text höhenmäßig nicht Mittig angesiedelt war.

Ooh, jetzt kann ich alle Seiten richtig cool gestalten, uiuiuiui!

Danke an alle beide!
 
Werbung:
Denke daran, dass du auch buttons verschiedene Klassen geben kannst. Die Class deines buttons muss nicht class="button" sein, sondern kann beliebig heißen. Das kannst du im CSS ändern:
.classname {}
(Punkt nicht vergessen)
 
Ja, habe ich schon probiert und geht auch ganz gut. Nur der Editor haut mir dauernd irgendwelche "<span...." dazwischen, die ich jedesmal, wenn ich diesen aufrufe, löschen muss. So siehts aus:
<style>
.button {
background-color:#63a3cf;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
text-indent:0;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
height:40px;
width:100px;
text-decoration:none;
text-align:center;
}

.button:hover {
background-color:#80b5ea;
}
</style><style>
.button2 {
background-color:#85C2F2;
margin-left: 2cm;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
text-indent:0;
display:inline-block;
color:#000000;
font-family:Arial;
font-size:16px;
font-weight:normal;
height:40px;
text-decoration:none;
text-align:center;
}

.button2:hover {
background-color:#80b5ea;}
</style>

<p>
<a class="button" href="#Generic" style="width: 100px; height: 27px;">Generic</a></p>
<p>
<a class="button2" href="#Colors" style="width: 100px; height: 27px;">Colors</a></p>
und so weiter.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben