Ayuda con barra de Google

B

[Borrado] #1 Mar '14

Buenas,

Estoy aprendiendo HTML en clase de informática, por lo que estoy haciendo una web de inicio personalizada en la que hay una barra de Google.

La cosa es que al lado de la barrita de Google no puedo poner las redes sociales ...

Un amigo me ha dicho que con CSS sí se puede, pero no tengo ni idea de CSS ni quiero ponerme, primero quiero manejarme en HTML.

¿Es posible hacerlo solo con HTML?

Gracias!

Código HTML:

<html>
	<head>
<html>
<style type="text/css">
body {cursor: url("http://4umi.com/image/icon/cursor/bluepointer.gif");}
</style>
</head>
	<body background="http://www.digitalrevolutions.biz/wp-content/uploads/2009/07/blue_line_background.jpg" style="background-repeat:no-repeat">
	</body>
</html>
<link href="/images/mifavicon.png" rel="icon" type="image/png" />
<body background="http://www.digitalrevolutions.biz/wp-content/uploads/2009/07/blue_line_background.jpg" style="background-repeat:no-repeat">
	<center>
		<h2>
			<img src="http://i.imgur.com/XiZ7MzS.png" /></h2>
		<h1>
			Acceso r&aacute;pido</h1>
		<p>
			<a href="#ancla1">Redes sociales y b&uacute;squeda </a></p>
		<p>
			2. Noticias</p>
		<p>
			&nbsp;</p>
	</center>
	<p>
		&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="ancla1"></a> <img alt="" src="http://i.imgur.com/g2oUVGp.png" style="width: 320px; height: 70px;" />&nbsp; &nbsp;&nbsp;</p>
	<center>
		<form action="http://www.google.com/search" method="GET">
			<p>
				<a href="http://www.twitter.com" style="text-align: start;"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Twitter_icon.png/60px-Twitter_icon.png" /></a><a href="http://www.tuenti.com" style="text-align: start;"><img src="http://iapps.scenebeta.com/archivos/iapps/resize/Icon0Tuenti-60x60.png" /></a><a href="http://www.facebook.com" style="text-align: start;"><img src="http://radioaeroestereo.uphero.com/images/facebook_icon.png" /></a></p>
			<p>
				&nbsp;</p>
			<table bgcolor="">
				<tbody>
					<tr>
						<td>
							<a href="http://www.google.com/"> <img align="absmiddle" alt="Google" border="0" src="http://www.colectivosdecompras.com/images/logos/google.png" /></a> <input maxlength="255" name="q" size="31" type="text" value="" /> <input name="hl" type="hidden" value="es" /> <input name="btnG" type="submit" value="Busqueda Google" /></td>
					</tr>
				</tbody>
			</table>
		</form>
	</center>
	<p>
		&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>
</body>

Jotauvece #2 Mar '14

Si quieres aprender bien CSS es lo que necesitas, hoy en día casi siempre html va acompañado por su CSS

B

[Borrado] #3 Mar '14

Aprende CSS, que menuda chapuza has hecho.

spoiler

5 1 respuesta

LLoid #4 Mar '14

La mala noticia: no puedes hacer eso sin CSS
La buena noticia: ya usas CSS, por ejemplo en "style="background-repeat:no-repeat"

Si quieres poner los iconos de las redes sociales al lado del botón de google busca información sobre la propiedad CSS float y mételo en style=... igual que has hecho antes

B

[Borrado] #5 Mar '14

Bueno venga me pondré xD

#3 ¿Cómo lo pongo de otra forma? jajajjaj, con que sirva me vale

1 respuesta

B

[Borrado] #6 Mar '14

#5 Con div y CSS.

Aqui tienes cosas para empezar, http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/ Archivos con extension .css, para añadir en un html, dentro del head :

<link rel="stylesheet" type="text/css" href="fichero.css">

1 1 respuesta

DarkSoldier #7 Mar '14

CSS es lo que buscas!

1 respuesta

B

[Borrado] #8 Mar '14

#6 Vale, muchas gracias!

#7 Tu y yo nos entendemos.

1

eXtreM3 #9 Mar '14

lol

Aprende CSS, por cierto tampoco es recomendable usar los

<br/>

para los saltos de línea (no los has usado, pero lo harás)

1 1 respuesta

B

[Borrado] #10 Mar '14

Usando esto ya he podido colocar la imagen donde he querido (aunque es un poco cutre)

<style> 
#img {position:absolute; top:20px} 
#img {position:absolute; bottom:20px} 
#img {position:absolute; left:20px} 
#img {position:absolute; right:20px} 
</style> 

<img id="img" src="imagen.gif" alt="" width="100" height="100" />

#9 Ok gracias.

1 respuesta

eXtreM3 #11 Mar '14

#10 ese código puedes simplificarlo así

<style> 
#img {position:absolute; top:20px; bottom:20px; right:20px; left:20px} 
</style>

Todo lo que englobe la misma id (en este caso img) puedes meterlo dentro de las mismas {}

1

Ayuda con barra de Google

Usuarios habituales

Tags