Problemas al colocar botones en la página

Tengo algunas preguntas con el siguiente código.

1) Fui al sitio de Twitter para obtener el código para incrustar un botón "Tweet", pero tengo dos problemas: a) el botón solo aparece como un enlace yb) el texto que había cargado previamente en el cuadro de tweet no aparece

2) Me gustaría que los dos botones amarillos estén centrados en la página, uno al lado del otro. ¿Alguien puede ayudar con el posicionamiento?

3) ¿Puedo deshacerme del hipervínculo en el texto dentro del botón? En este momento, el enlace solo funciona si hace clic en el texto (me gustaría que funcione si hace clic en cualquier parte del botón).

Realmente aprecio la ayuda. Gracias.

<!-- doc type declaration lets browser know which xhtml doc type declaration we are using -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>SAMPLE TEXT</title>
</head>

<style type="text/css">


#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px}

#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px; 
font-style: italic;}

#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}

#credit 
{
    font-family: "helvetica"; 
    font-size: 20%; 
    color: black; 
    }

#button1 {padding-left:20px;}

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0      rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:absolute;top:100px; left:50px}

</style>


<body>

<div id="wtf_title" >
<center>sample text<br/>
</div>

<hr noshade size=8 width="53%">

<div id="intro_text" >
<center>Sample text
</div>

<button>
<center><a href="" class="button1">sample text</a>
</button>

<button>
<a target="_blank" href="http://www.americanbar.org" class="button2">sample text</a>    
</button>

<div id="twitter-share-button"; style="position: absolute; top: 2px;" >
<a href="https://twitter.com/share" class="twitter-share-button" data- url="http://www.whatthefuckhaslebronjamesdone.com" data-text="Check this out:" data- count="none" data-hashtags="WTFLBJ">Tweet</a>
<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.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
    type="text/javascript">
</script>
</div>


<div id="credit"; style="position: absolute; bottom: 5px; left: 32%;" >
This site was created by <a href="http://www.twitter.com/varunsshetty">Varun Shetty</a> and    <a href="http://www.twitter.com/bcfromblo">Bobby Corp</a>. Inspired by LBJ and <a href="http://www.whatthefuckhasobamadonesofar.com">WTF Obama</a>. Bobby loves Lebron; Varun loves the idea of Lebron.
</div>

</body>

</html>

preguntado el 12 de junio de 12 a las 14:06

No estoy seguro de si esto está causando su problema específico, pero no puede tener nada por encima del elemento. Esto hará que el navegador muestre la página en modo peculiar, y luego pueden ocurrir todo tipo de locuras. -

1 Respuestas

Su HTML no es válido en muchos lugares, realmente necesita pasar su HTML por un validador WC3 antes de publicarlo aquí, le ahorraría mucho tiempo y esfuerzo.

Aquí hay un jsfiddle para comenzar: http://jsfiddle.net/RPc95/

Para hacer que se pueda hacer clic en todo el botón, debe crear un elemento de envío / botón adecuado o diseñar un href para que parezca un botón.

Respondido el 12 de junio de 12 a las 15:06

su solución funcionó para poner los botones en el medio de la página, pero tuvo el extraño efecto secundario de incluir tres caracteres aleatorios en la página también de los que parece que no puedo deshacerme: una a minúscula con un signo de intercalación sobre ella , un símbolo del euro y un corchete. - varun shetty

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.