Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag27.08.2013 um 09:37 (UTC)    
Titel: [erledigt] Clean: Rahmen um Buttons

Hallo zusammen,

Ich benutze das Design Clean und wollte meine Buttons und evtl. den Text davor einrahmen. Aber das funktioniert nicht mit den Codes, die ich im Internet gefunden habe. Die Buttons können damit nicht eingerahmt werden, nur Texte. Confused
Deshalb wollte ich wissen, ob das geht oder nicht?!
______________
mit freundlichen Grüßen

P.S. Wer Rechtschreibfehler findet, darf sie behalten Smile


Zuletzt bearbeitet von Nightfall-sf11game am 30.08.2013, 16:42, insgesamt einmal bearbeitet
Beitrag27.08.2013 um 12:09 (UTC)    
Titel:

um alle buttons mit css zu designen um z.b. einen Rahmen drum-rum zu machen, sollte dieser css-code funktionieren:
Zitat:
<style type="text/css"><!--
input[type=submit],input[type=reset],button{
border:2px solid green;
}
//-->
</style>
(erzeugt einen 2px dicken, durchgezogenen, grünen rahmen um ALLE Buttons)
______________
Alles über 3D-Druck | Heimsteuerung mit Rapberry PI | Kontakt - über mich
FAQ YOU!!! - Ich biete keinen Support über PN an!!! - bitte schreibt im Forum
Homepage-Tools: HTML-Grundkurs | Farbtabelle | Mi† Soиdεrzeichen schreiЬen
CSS-Tuturials: CSS-Grundkurs | Transparente Elemente | Farbverläufe | Boxschatten | CSS-Rahmen | Textschatten | Hintergrundbilder
Javascript-Tuturials
Beitrag27.08.2013 um 12:43 (UTC)    
Titel:

hehe.... das ist jetzt aber nur um "seite drucken"
(das sieht aber auch nicht schlecht aus Smile)

es sind facebook, twitter und google button, also kein so ein Button wie du vielleicht meintest... Smile

ich habe es aber anderst gemeind, dass alle in einem rahmen sind. Außer der "Seite Drucken"-Button
______________
mit freundlichen Grüßen

P.S. Wer Rechtschreibfehler findet, darf sie behalten Smile
Beitrag29.08.2013 um 08:28 (UTC)    
Titel:

Ich habe mir mal den Quellcode deiner Startseite angeschaut. Dort steht ganz unten:
Code:
<u><span style="font-size: medium;"><span style="font-family: Arial;"><br>
</span></span></u><strong><sup><big><span style="font-family: Arial;"><span style="font-size: medium;">Weitersagen auf:</span></span></big></sup></strong><sup><em><big><span style="font-family: Arial;"><span style="font-size: medium;"> &nbsp;</span></span></big></em><big><span style="font-family: Arial;"><span style="font-size: medium;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></span></big></sup><big><span style="font-family: Arial;"><span style="font-size: medium;">&nbsp;&nbsp;</span></span></big><iframe src="http://www.facebook.com/plugins/like.php?href=http://nightfall-sf11game.de.tl&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" style="border:none; overflow:hidden; width:150px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<div id="google_button" style="display:inline;"><!-- Fügen Sie dieses Tag an der Stelle ein, an der die +1-Schaltfläche erscheinen soll. -->
<div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?bsv=o&amp;usegapi=1&amp;size=medium&amp;hl=de&amp;origin=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;url=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.de.RVDIN-lIdS8.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOtPWbVgXVmORlHJWgwBGRTqvSn_A#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&amp;id=I0_1377761164237&amp;parent=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;pfname=&amp;rpctoken=25231418" name="I0_1377761164237" id="I0_1377761164237" vspace="0" tabindex="0" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div>
<!-- Fügen Sie dieses Tag nach dem letzten +1-Schaltfläche-Tag ein. -->  <script type="text/javascript">
window.___gcfg = {lang: 'de'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<div id="twitterbutton" style="display:inline;"><iframe data-twttr-rendered="true" title="Twitter Tweet Button" style="width: 131px; height: 20px;" class="twitter-share-button twitter-count-horizontal" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1377761164479&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=de&amp;original_referer=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;size=m&amp;text=tweete%20uns%20%3Cimg%20src%3D&amp;url=nightfall-sf11game.de.tl" allowtransparency="true" frameborder="0" scrolling="no"></iframe> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<a title="Bewertungen und Erfahrungen zu Websites" href="http://www.webwiki.de/" target="_blank"><img src="http://www.webwiki.de/images/webwikibutton.gif" alt="Webwiki Button"> <br>
<br>
<br>
</a>
<div style="text-align: center;"><button onclick="window.print()">-&gt; Seite drucken &lt;-<br>
</button>


Diesen Code ersetzt du einfach durch:

Code:
<style type="text/css"><!--#buttons *{border:2px solid green}#buttons a, #buttons center{border:0px}//--></style>
<div id="buttons" style="font-size: medium;">Weitersagen auf: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<iframe src="http://www.facebook.com/plugins/like.php?href=http://nightfall-sf11game.de.tl&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" style="overflow:hidden; width:150px; height:20px;" allowtransparency="true" scrolling="no"></iframe>
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?bsv=o&amp;usegapi=1&amp;size=medium&amp;hl=de&amp;origin=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;url=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.de.RVDIN-lIdS8.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOtPWbVgXVmORlHJWgwBGRTqvSn_A#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&amp;id=I0_1377761164237&amp;parent=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;pfname=&amp;rpctoken=25231418" name="I0_1377761164237" id="I0_1377761164237" vspace="0" tabindex="0" style="position: static; top: 0px; width: 90px; margin: 0px; left: 0px; visibility: visible; height: 20px;" marginwidth="0" marginheight="0" hspace="0" scrolling="no" width="100%"></iframe>
<iframe data-twttr-rendered="true" title="Twitter Tweet Button" style="width: 131px; height: 20px;" class="twitter-share-button twitter-count-horizontal" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1377761164479&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=de&amp;original_referer=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;size=m&amp;text=tweete%20uns%20%3Cimg%20src%3D&amp;url=nightfall-sf11game.de.tl" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<a title="Bewertungen und Erfahrungen zu Websites" href="http://www.webwiki.de/" target="_blank"><img src="http://www.webwiki.de/images/webwikibutton.gif" alt="Webwiki Button"></a>
<br><br><br><center><button onclick="window.print()">-&gt; Seite drucken &lt;-<br></button></center></div>
<script type="text/javascript">
window.___gcfg = {lang: 'de'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


nun hast du um jeden button in diesem Bereich einen 2px breiten, grünen Rahmen
______________
Alles über 3D-Druck | Heimsteuerung mit Rapberry PI | Kontakt - über mich
FAQ YOU!!! - Ich biete keinen Support über PN an!!! - bitte schreibt im Forum
Homepage-Tools: HTML-Grundkurs | Farbtabelle | Mi† Soиdεrzeichen schreiЬen
CSS-Tuturials: CSS-Grundkurs | Transparente Elemente | Farbverläufe | Boxschatten | CSS-Rahmen | Textschatten | Hintergrundbilder
Javascript-Tuturials
Beitrag29.08.2013 um 16:39 (UTC)    
Titel:

Danke für die Antwort Smile

Aber eigentlich wollte ich einen Rahmen und dem alle button sind, inklusive der Text davor. Aber so sieht es auch nicht schlecht aus wie jetzt Smile
Ich denke ich lasse es so, außer es gibt eine gute Lösung
______________
mit freundlichen Grüßen

P.S. Wer Rechtschreibfehler findet, darf sie behalten Smile
Beitrag29.08.2013 um 18:11 (UTC)    
Titel:

Ich habe das Script noch ein mal umgeschrieben, jetzt sollte ein einziger 2 px breiter, grüner, durchgezogener Rahmen um alle Buttons sein
Zitat:
<style type="text/css"><!--
#buttons{border:2px solid green;font-size:1em;font-weight:bold}
#buttons iframe{width:120px;height:20px;border:0px;overflow:hidden}
#google_like{width:80px;padding-left:30px;}
//--></style>
<div id="buttons">Weitersagen auf: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<iframe id="fb_like" src="http://www.facebook.com/plugins/like.php?href=http://nightfall-sf11game.de.tl&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" allowtransparency="true"></iframe>
<iframe id="google_like" title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?bsv=o&amp;usegapi=1&amp;size=medium&amp;hl=de&amp;origin=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;url=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.de.RVDIN-lIdS8.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOtPWbVgXVmORlHJWgwBGRTqvSn_A#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&amp;id=I0_1377761164237&amp;parent=http%3A%2F%2Fnightfall-sf11game.de.tl&amp;pfname=&amp;rpctoken=25231418" vspace="0" tabindex="0" hspace="0"></iframe>
<iframe id="twitter_follow" data-twttr-rendered="true" title="Twitter Tweet Button" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1377761164479&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=de&amp;original_referer=http%3A%2F%2Fnightfall-sf11game.de.tl%2F&amp;size=m&amp;text=tweete%20uns%20%3Cimg%20src%3D&amp;url=nightfall-sf11game.de.tl" allowtransparency="true"></iframe>
<a title="Bewertungen und Erfahrungen zu Websites" href="http://www.webwiki.de/" target="_blank"><img src="http://www.webwiki.de/images/webwikibutton.gif" alt="Webwiki Button"></a>
<br><br><br><center><button onclick="window.print()">-&gt; Seite drucken &lt;-<br></button></center></div>
<script type="text/javascript">
window.___gcfg = {lang: 'de'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Beitrag30.08.2013 um 13:24 (UTC)    
Titel:

das hat gut funktioniert Smile
danke
______________
mit freundlichen Grüßen

P.S. Wer Rechtschreibfehler findet, darf sie behalten Smile
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de