Capas

teleibatin · 2 Feb 2008, 01:02 · Solicitar retirada

:lol: :lol: Hola, aqui estamos de nuevo mas contento que tortuga en patineta.-

Como se hace para poner un capa rodeada de texto como la publicidad google que esta en este sitio: http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-i… a la derecha. :oops: :oops:

Gracias............

pedrocuenca · 2 Feb 2008, 01:11 · Solicitar retirada

Esto es un ejemplo:

en plantilla html.

<div id="luna">[contenido no disponible]</div></p>

y en hoja de estilos:
#luna{float:right;margin:5px 10px 5px 10px}/div></p>

pedrocuenca · 2 Feb 2008, 01:12 · Solicitar retirada

Esto es un ejemplo:

en plantilla html.

<div id="luna">[contenido no disponible]</div></p>

y en hoja de estilos:
#luna{float:right;margin:5px 10px 5px 10px}

Perdon me equivoque al copiar, este es el bueno

Yaneth · 2 Feb 2008, 01:13 · Solicitar retirada

basta con darle una checada al codigo mira:
lo tiene asi:

Adem&aacute;s, te lo explicamos todo tan bien que sabr&aacute;s como personalizar tu p&aacute;gina  web a tu antojo. Una vez termines el tutorial podr&aacute;s cambiar los colores, la estructura, los menús, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podr&aacute;s hacer cualquier otro proyecto desde cero con lo que vas a aprender aqu&iacute;.</P>

<div id="google-flotante">

TODO LO QUE VA DENTRO DE AQUI ES EL CODIGO
DE GOOGLE
</DIV>
<H2>Qu&eacute; vamos a necesitar?</H2>


En principio solo conexi&oacute;n

ahora solo chequa la hoja de estilos, para que veas las caracteristicas de "google-flotante".

saludos

teleibatin · 2 Feb 2008, 20:35 · Solicitar retirada

Yaneht dice

Además, te lo explicamos todo tan bien que sabrás como personalizar tu página web a tu antojo. Una vez termines el tutorial podrás cambiar los colores, la estructura, los menús, etc, etc para adaptarla a tus gustos. Tras aprender todos los trucos podrás hacer cualquier otro proyecto desde cero con lo que vas a aprender aquí.</P>

<div id="google-flotante">

TODO LO QUE VA DENTRO DE AQUI ES EL CODIGO
DE GOOGLE
</DIV>
<H2>Qué vamos a necesitar?</H2>

En principio solo conexión

En esta ocasion soy yo que no interpreta tu mensaje.

Quiero pensar que en HTML pongo <div id="google-flotante">

Pero ¿como defino en estilo precisamente para que pueda ubicarse en cualquier parte de la margen derecha y con texto a su alrededor??

¿Podra ser un tutorial de esta etiqueta?

Atento

Yaneth · 2 Feb 2008, 20:49 · Solicitar retirada

asi, es
por eso te decía que le checaras la hoja de estilos a jorgens
y buscaras google-flotante

pero.......

te ayudaré a buscar

primero abro el codigo fuente para ver como se llama la hoja de estilos

tiene que estar por aqui

<head>
<title>Leccion 1 : Tutorial Html-Kit : Como Crear Tu Web</title>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content="Tutorial del programa Html-Kit. Lecciones detalladas para aprender a crear una página web desde cero y con recursos gratuitos en ComoCrerTuWeb." name="description">
<meta content="htmlkit, html, kit, css, curso, tutorial, tuto, gratis, lecciones, html-kit, descargar" name="keywords">
<LINK rel="shortcut icon" href="../favicon.ico">
<LINK rel="stylesheet" href="../comunes/estilovista.css" type="text/css" media="all">
<LINK rel="stylesheet" href="../comunes/estiloprint.css" type="text/css" media="print">
<style type="text/css">

en rojo creo que esa es la hoja de estilos, copio la url
y me dice que está en la carpeta de atras, dentro de comunes

../comunes/estilovista.css

entonces pongo estos datos en la barra de direcciones asi:

http://www.comocreartuweb.com/comunes/estilovista.css

y dentro de esa página tengo que buscar "google-flotante" para verle las caracteristicas que tiene

#google-flotante	{BORDER: 0; display:block ; float: right ;  margin-left: 10px }

ufff!!! mucho rollo verdad?????, hubiera sido mas facil, pegarte el codigo y listo, pero..... al menos te das una idea de como sacar codigos, tal ves te sirvan en el futuro

saludos

teleibatin · 2 Feb 2008, 22:00 · Solicitar retirada

Ahora que tengo una incipiente idea -muy minuscula- voy mirando el codigo fuente de algunas web para incitarme a ir conociendo el HTML, claro que por otro lado debo aprender a definir estilos.

Gracias Yaneht por tu invalorable ayuda que me da casi a diario.

Atento

teleibatin · 3 Feb 2008, 15:08 · Solicitar retirada

:roll: :roll: :roll: Mira Yaneth como lo interprete y lo que hago:

Estilos
Pego : #google-flotante {BORDER: 0; display:block ; float: right ; margin-left: 10px }

HTML
head
Pego: <LINK rel="stylesheet" href="../comunes/estilovista.css" type="text/css" media="all">

Pero asi no funciona.-No pasa absolutamente ningun efecto
Donde debo estar errándole es eso de Carpetas comunes aunque creo que no tiene nada que ver con mi planteo.

Usted dice:

Código:
../comunes/estilovista.css

entonces pongo estos datos en la barra de direcciones asi:

http://www.comocreartuweb.com/comunes/estilovista.css

Si esto abre la hoja de estilos de CCTW

Por favor dame luz sobre esto porque no lo interpreto. :idea: :idea: :idea:

Intente decifrar el codigo fuente de CCTW introducción y a decir verdad me enrede mas de lo que estaba

Otra cosa que ayuda a confundirme ¿que es eso de comunes? :roll: :roll: :roll:

Gracias amiga desde ya

davissbrocen · 3 Feb 2008, 18:02 · Solicitar retirada

creo que lo que quieres hacer es conseguir ese efecto pero con otra cosa no?
pues lo que deberías hacer es utilizar las propiedades de #google-flotante pero no tiene porqué llamarse google-flotante.
en tu hoja de estilos defines esa capa con esas propiedades y en tu plantilla o tu pagina creas un div que indique eso.
...TEXTO CODIGO...
<div id="google-flotante>
contenido del div
</div>
...MAS TEXTO Y MAS CODIGO.

en la hoja de estilos la propiedad indicada es float y border.

teleibatin · 3 Feb 2008, 21:42 · Solicitar retirada

Davissbrocen : mira lo que yo quiero es colocar una capa para anuncios google o para insertar una imagen ubicada en cualquier lado de la web (en el contenido y que el texto rodee a la imagen como lo puedes ver en éste ejemplo:

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-i… a la derecha

Sintéticamente, creo haberme explicado

Gracias

pedrocuenca · 3 Feb 2008, 21:55 · Solicitar retirada

Telebaiin, miraEsto es un ejemplo:

en plantilla html.

<div id="luna">[contenido no disponible]</div></p>

y en hoja de estilos:
#luna{float:right;margin:5px 10px 5px 10px}/div></p> para atrás que yo te lo explique con un ejemplo

pienso que está claro

davissbrocen · 4 Feb 2008, 20:08 · Solicitar retirada

claro debes indicar en el estilo el float y el margen para la separacion.

teleibatin · 4 Feb 2008, 20:39 · Solicitar retirada

:lol: :lol:
PedroCuenca copie el <div> y # como me indicaste y funciono con las consiguientes modificaciones para insertar en mi web pero hay un error.

Desde el margen superior de la imagen insertada hacia abajo, el texto del contenido se centraliza

Mira asi tengo definido en la hoja de estilo.css
#contenido {background-image: url(objetos/nubes.gif) ; width: 800px ; float:left ;border-left ; black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}

Aclaraciones de tu envio

en plantilla html.

<div id="luna">[contenido no disponible]</div></p>

Dime que funcion cumple alt="Amor eterno]"

y en hoja de estilos:

#luna{float:right;margin:5px 10px 5px 10px}/div></p>

Lo que esta en rojo ¿no sobra aqui?

Entonces faltaria ver porque se centraliza el texto

gracias

pedrocuenca · 4 Feb 2008, 21:40 · Solicitar retirada

Amigo Telebaitin, con lo del div tienes razón se metio allí no sé como.

El alt sería cuando pones el cursor encima de la imagen sale la frase que pones

Voy a mirar lo del texto

pedrocuenca · 4 Feb 2008, 22:19 · Solicitar retirada

Mira asi tengo definido en la hoja de estilo.css
#contenido {background-image: url(objetos/nubes.gif) ; width: 800px ; float:left ;border-left ; black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}

En el contenido has puesto padding, yo utilizo margin, y pues ir variando los px a tu gusto, a la separación que quieras

Cambia el padding por margin a ver

5px (sería el margen de arriba)10px(el margen derecho)5px(margen de abajo)10px(margen izquierdo)
Si tu vas a la pagina http://claraeisman.iespana.es/plantilla 5.html

esa foto que ves el sol y la luna es el ejemplo que te he puesto , mira como queda, yo he copiado mis codigos y se ve así

espero que vaya ahora bien

teleibatin · 5 Feb 2008, 14:23 · Solicitar retirada

#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
:cry: :cry:
A esta etiqueta la midifique asi

#contenido p {margin: 5px 10px 5px 400px ; text-indent: 15px}

Todo el contenido con menu lateral incluido se corrieron hacia la derecha, respetando el nuevo margen.

Es decir sigo con el problema de no poder mantener el contenido en los lados superior, inferior y lado izquierdo de la nueva imgen ,que no centralize el contenido como ya les explique.

Estoy navegando y desmenuzando el código fuente de este sitio
http://claraeisman.iespana.es/plantilla

Trato de sacar alguna conclusión ya que la primer página es lo que quiero hacer. Tu pagina en la parte izquierda tiene un titulo, yo quiero poner texto.

Veremos si podemos dar en la tecla de un problema que parece sencillo

pedrocuenca · 5 Feb 2008, 22:48 · Solicitar retirada

Telebaitin al no tenerlo todo a mano no lo veo claro, tu idea la tengo confusa, si encuentro algo te lo digo
saludos

teleibatin · 9 Feb 2008, 20:35 · Solicitar retirada

:lol: :lol: :lol:

Gracias a quienes colaboraron con estos problemas mios tan largamente conversado ya que fue solucionado con vuestra ayuda y algo de experimentar.

A ustedes