me ayudan a crear un albun de fotos

nesesito ayuda nesesito crear un album de fotos pero que sea lindo y formal y no se por donde empezar si alguien me puede ayudar estaria muy agradecido no se po un pekeño tutorial o algo

Ps hombre... es una pregunta muy........ esque pa crear un album de fotos creas una web y pones las fotos....

krisalith escribió:nesesito ayuda nesesito crear un album de fotos pero que sea lindo y formal y no se por donde empezar si alguien me puede ayudar estaria muy agradecido no se po un pekeño tutorial o algo

Hola:
Hay varias formas de tener un album de imagenes o una galería de imagenes, existen programas hechos que funcionan desde el servidor con bonitos formatos de galerias.
Yo no soy muy adepto a ellos, ya que prefiero hacerlas personalmente, quizás no serán tan lindas y formales como usted dice que quiere (lo de ,lindas y formales es un poco subjetivo).
Si usted desea para ir familiarizándose como se puede hacer una galería de imagenes en su web, sin tener que depender en gran medida del servidor, le podría dar algunas sugerencias, y así de paso podría usted entender un poco y a la vez dominar el como hacer una galería de imagenes
Si le interesa , lo dice, pero si prefiere ya algo hecho, tendría que buscar programas predefinidos
Saludos

si adelante toda ayuda es bien recibida **

puedes hacer una que la imagen cambie cada ciertos segundos o minutos y puedes añadir que los usuarios puedan subir :wink:

0.o.0Alexito0.o.0 escribió:Ps hombre... es una pregunta muy........ esque pa crear un album de fotos creas una web y pones las fotos....

Voy a suponer, (basándome en el curso Paso a Paso)
que tenemos una carpeta en nuestro escritorio que se llama "mis-web", y que dentro de esa carpeta tenemos la carpeta llamada "web-ejemplo-cctw" que es donde tenemos nuestra web.
Por tanto dentro de esa carpeta que se llama "web-ejemplo-cctw" en que dentro de ella tenemos una página index.html, una página plantilla.html una hoja de estilo.css una hoja de estilo-general.css y una carpeta llamada objetos, y dentro de esa carpeta objetos tenemos algunas imagenes como por ejemplo el logotipo de nuestra web, que en teoría queremos que aparezca en la cabecera de todas las páginas que hagamos.

Por tanto ya que tenemos eso claro.

La idea es crear una galería de imagenes en una pagina, pero que esa pagina mantenga el formato general de nuestra web, o sea , que tenga la capa cabecera y dentro de ella el logotipo, que tenga la capa de navegacion, que tenga la capa pie con sus enlaces, y que tenga la capa "contenido"
Es en la capa "contenido" en la que trataremos de crear una galeria de imagenes

Por tanto lo que haremos será crear dentro de la carpeta "web-ejemplo-cctw" una carpeta a la que le pondremos como nombre galeria-1.
Luego haremos una copia de la página plantilla (o abriremos nuestra página plantilla y la guardaremos como galeria.html, y pondremos esa página llamada galeria.html dentro de la carpeta llamada galeria-1

Luego iremos a la hoja de estilo-general, la abriremos y la guardaremos como estilo-galeria.css, (O sencillamente hacemos una copia de la hoja de estilo-general.css y le cambiamos el nombre a estilo-galeria.css)
Y ponemos esa hoja de estilo-galeria.css dentro de la carpeta galeria-1

Luego elegimos varias imagenes que tengamos en nuestro ordenador o computadora (unas doce) y las ponemos dentro de esa carpeta llamada galeria-1.

Resumiéndo:

En esa carpeta galeria-1 que está dentro de la carpeta "wen-ejemplo-cctw" debemos tener una hoja de estilo llamada estilo-galeria.css, una pagina llamada galeria.html
y doce imagenes.
Hasta acá llego con la primera parte de la explicación

Ya dirá usted

Saludos

ya amigo hize lo ke me dijo ahora ke es lo ke tengoo ke hacer ahora

krisalith escribió:ya amigo hize lo ke me dijo ahora ke es lo ke tengoo ke hacer ahora

Hola:
Ordeno un poco y le sigo explicándo

Saludos

Raulyure escribió:

krisalith escribió:ya amigo hize lo ke me dijo ahora ke es lo ke tengoo ke hacer ahora

Hola:
Ordeno un poco y le sigo explicándo

Saludos

Hola:
Ahora haremos otra pequeña parte, solo trabajaremos en la pagina galeria.html y en la hoja estilo-galeria.css

Como podrá ver (si todo está correcto) en la página galeria.html no aparecen las cosas muy bien, por eso lo que haremos será relacionar esa página con su hoja de estilo.

Tenga en cuenta que iremos poco a poco modificándo algunas cosas, y es posible que mientras tanto no se vea bien lo que se está haciéndo.

Por eso abriremos la pagina galeria.html (logicamente en vista código para poder escribir códigos)
y como entre el <head< y el </head> existe un <link rel="stylesheet" href="estilo-general.css etc.etc. etc.

lo que cambiaremos será donde dice estilo-general.css, así que borramos estilo-general.css (solo borramos donde dice estilo-general.css, y en su lugar escribimos estilo-galeria.css

Con eso nuestra página galeria.html queda relacionada con la hoja de estilo estilo-galeria.css. O sea esa página ya podrá recibir órdenes de esa hoja de estilo.

Guardamos los cambios, cerramos y volvemos a abrir nuestra página, y ahora nos vamos a la capa logotipo, (o donde está el logotipo) el que se supone que al pulsar nos lleva a la pagina index.
Imagino que usted más o menos lo tiene así:

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

Como podemos ver, el logotipo está dentro de la carpeta objetos, pero claro, la página en la que trabajamos ahora está dentro de una carpeta que se llama galeria-1, por tanto lo que tenemos que hacer para poner el logotipo en esta página sería "salir" de esta página y entrar a la carpeta objetos para tomar de allí la imagen del logotipo, para eso lo que haremos será poner justo antes de la palabra objetos, dos puntos y una barra oblicua

Como queremos que también la imagen del logotipo nos sirva de enlace para ir de esa página a la pagina index, también le pondremos dos puntos y una barra oblicua justo antes de la palabra index
La cuestión es que nos quede así:




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

Con todo esto, ya podemos tener el logotipo en esa página y a la vez si pulsamos en el, nos llevará a la página index.



Ahora, aprovechándo de que estamos en la página galeria.html, lo que haremos será eliminar la capa menu con todo lo que lleva dentro.

Es que vamos a ocupar la capa contenido para poner allí la galería, por eso vamos a la capa menu, y eliminamos por ejemplo todo esto:

<div id="menu">
<h1>Título de Sección 1</h1>
<ul>

Enlace 1

Enlace 2

Enlace 3

Enlace 4
</div>

La cuestión es que hay que eliminar desde que empieza la capa menu, hasta el cierre de la capa menu.

Así que después de hacer eso, guardamos o salvamos y cerramos.

Ahora nos vamos a la hoja de estilo-galeria.css.
La abrimos para escribir los códigos
Y como de la página habíamos eliminado la capa menu con todo lo que lleva dentro, pues de la hoja de estilo también tendremos que eliminarla.

así que en nuestra hoja de estilo-galeria.css donde dice #menu{etc. etc. etc.} Eliminamos todo eso
como más abajo habrá algo que dice #menu li{etc. etc.}, pues también lo eliminamos
Y donde dice #menu h1{etc. etc.}, también lo eliminamos
como ejemplo le pongo acá lo que hay que eliminar

#menu {background-color:orange ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior-1.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior-1.gif) }

Luego guardamos, o salvamos y cerramos esa hoja de estilo

¿Qué hemos hecho por ahora?

Hemos puesto la imagen del logotipo en esa página, manteniéndola como enlace hacia la pagina index, también hemos relacionado la pagina con su hoja de estilo para que pueda recibir órdenes de ella
Y hemos eliminado la capa menu con la lista que llevaba dentro para poder hacer espacio en la capa contenido
El texto que queda en la capa contenido, aún no lo eliminaremos, porque por ahora nos hace falta

Lo que haremos en la próxima explicación, será modificar ya la capa contenido de esa página para que vaya tomándo forma

Si se aburre me lo dice

saludos

ahora ke es lo sieguiente que de bo hacer

krisalith escribió:ahora ke es lo sieguiente que de bo hacer

Bueno, ya veo que aún no se aburre, pero ya nos queda poco.
Recordaré que la idea principal es que queremos mantener el formato general de la página y la galería ponerla dentro de la capa que hasta ahora se llama contenido
Y espero no estar dejándome cosas en el tintero
Por eso ahora vamos a la hoja de estilo-galeria.css, y donde está la capa que se llama #contenido{etc. etc.}
le cambiamos el nombre, así que borraremos la palabra contenido y pondremos en su lugar la palabra migaleria
cosa que nos quede así.
#migaleria{etc. etc.}
Solo borraremos la palabra contenido y ponemos en su lugar la palabra migaleria (no utilice acentos)
ahora justo abajo hay una capa que se llama #contenido p{etc. etc. etc.}

Esa capa que se llama #contenido p{etc. etc. etc.} la eliminamos completamente,
Seguramente dirá algo como

#contenido p{padding:5px 10px 5px 10px;text-indent:15px;}
Pues eliminamos todo eso, con diretiva y todo

Y en su lugar, o sea justo debajo de la capa #migaleria{etc. etc.}
ponemos esto

#migaleria li{}

Y debajo de ella ponemos esta otra
#migaleria h3{}
Más adelante le pondremos directivas entre las llaves a esas capas.

Así que guardamos o salvamos y cerramos nuestra hoja de estilo-galeria.css y abrimos nuestra página galeria.html

Y donde dice <div id="contenido">
Borramos esa palabra contenido (solo la palabra contenido) y escribimos en su lugar la palabra migaleria

Lo que hemos hecho ha sido cambiar el nombre a la capa contenido, y ponerle como nombre migaleria

Usted no se preocupe si se le desmonta algo ya que vamos poco a poco modificándo las cosas de esa página, en especial la capa contenido que ahora ha pasado a llamarse migaleria

Así que ahora guardamos o salvamos y cerramos esa página y nos vamos nuevamente a la hoja de estilo-galeria.css
La abrimos y donde dice #migaleria{etc. etc.}

Borramos lo que hay encerrado entre las llaves {} y escribiremos propiedades y valores dentro de las llaves, cosa que esa capa quede así:

#migaleria{float:left;background-color:#000000;width:800px;}Y en la línea de abajo, donde está esa #migaleria li{}, pondremos las siguientes propiedades y sus valores, cosa de que quede así:

(Esta es muy importante, ya que acá estarán las propiedades y los valores que le darán cuerpo a la galería)



#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 1px;border-bottom:#FF0000; solid 1px;}

Y en la línea de abajo, la que dice #migaleris h3{}
La ponemos así:

#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}

Ahora guardamos o salvamos y cerramos nuestra hoja de estilo-galeria.css y vemos una vista previa de nuestra página galeria.html, para ver como está quedando.

Seguramente ahora la capa que antes se llamaba contenido y que ahora se llama migaleria, estará de color negro, y como todavía tiene texto escrito allí, este no se verá porque también es negro, pero lo que si se podrá ver es algún título de color azul (espero)

Aún no borraremos el texto que hay en esa capa porque es posible que si lo hacemos se nos "achique" tanto esa capa , que se nos pierda por el camino.

Bueno, como se supone que estamos basándonos en el curso Paso a Paso, seguramente falta por poner las curvas que van arriba de la página y la curva inferior. ¿O ya lo habíamos hecho?. Es que no me acuerdo
Por si no lo hicimos antes, lo haremos ahora

Así que vamos otra vez a nuestra hoja de estilo-galeria.css
y en la capa #curva-superior{etc. etc.}

Lo ponemos así o sea los típicos dos puntos más la barra oblicua antes de la carpeta objetos

#curva-superior{background-image:url(../objetos/curva-superior.gif);background-repeat:no-repeat;width: 800px;height:12px;overflow: hidden }

En la capa curva-inferior hacemos lo mismo, le ponemos antes de la palabra objetos, los dos puntos más la barra oblicua.

Vuelvo a decir, creo que esto de las curvas ya se lo expliqué.

Acá le dejo como debiera de estar quedándo en su página esa capa que antes se llamaba contenido y que ahora se llama migaleria

<div id="migaleria">

<h1>Esta será la zona principal de la web</h1>


Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>

En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>

</div>
<div id="pie">

Y acá le dejo como debiera de estar quedándo su hoja de estilo-galeria.css

#migaleria{float:left;background-color:#000000;width:800px;}
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}


Bueno, más tarde terminamos ya para poner de una vez las imagenes que hay que poner en esa página

saludos

ya maestro ahora ke tengo ke hacer
voy bn al momento todo en orden


ahora ke mas ago

Espero que como dice, las cosas estén funcionando.


Bueno, vamos a abrir la página galeria.html y borraremos todo el texto que hay dentro de la capa contenido, perdón, verdad que ahora se llama migaleria, borramos todo lo que hay dentro de la capa migaleria, por ejemplo, si la tenemos más o menos así:

Acá le dejo como debiera de estar quedándo en su página esa capa que antes se llamaba contenido y que ahora se llama migaleria

<div id="migaleria">

<h1>Esta será la zona principal de la web</h1>


Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>

En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>

</div>

Le borramos todo lo que sea texto y la dejamos así:

<div id="migaleria">

</div>

O sea la hemos vaciado, si guardamos o salvamos y cerramos la página, veremos que esa capa más que desaparecer, se nos ha convertido en una raya justo debajo de la capa navegación, claro si le hemos quitado todo lo que la llenaba.

Por eso ahora la vamos a llenar.

Lo que vamos a hacer es una lista parecida a la que teníamos en el menu de la izquierda, solo que más larga y con más cosas, o sea que empezará con <ul> y terminará con , y dentro de esos <ul> y
irán los

bla bla bla
Las imágenes que yo pondré tendrán formato jpg, ya que si son fotos es un buen formato para las fotos.
Yo les e puesto como nombre a cada imagen
uno.jpg
dos.jpg
tres.jpg etc. etc. ...... doce.jpg

Así que vamos a por esa capa migaleria
Bien, en la página pondremos entre el <div id="migaleria> y el </div>
estos códigos, cosa de que nos quede así:



<div id="migaleria"><h1>Mi Galeria de Fotos</h1>
<ul>

<a href="../galeria-1/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="../galeria-1/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="../galeria-1/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="../galeria-1/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="../galeria-1/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="../galeria-1/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="../galeria-1/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="../galeria-1/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="../galeria-1/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="../galeria-1/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="../galeria-1/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="../galeria-1/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>


</div>

Desde que comienza un

hasta que cierra ese póngalo todo seguido en una línea, o sea una línea de códigos para cada imagen

Esto es lo que tiene que poner en la capa migaleria.
Lógicamente usted debe poner el nombre de las imágenes que usted tiene en la carpeta galeria-1

Fíjese bien que entre

y donde está puesta cada imagen, el nombre de la imagen aparece dos veces, una casi al principio y la otra un poco más adelante.



Eso es para que la imagen aparezca en la capa migaleria de la página galeria.html, (y en tamaño pequeño) y la otra es para que cuando se pulse en la imagen, esta aparezca en una ventana diferente y del tamaño real

Si usted desea que las imagenes pequeñas aparezcan un poco más ancha, puede cambiar en todas las imagenes donde dice width="126px" y ponerle en vez de 126 un 150, No le recomiendo más de eso en el ancho

Claro que si le cambia allí en la página a las imágenes de 126 a 150px de ancho, también debiera de cambiarle en la hoja de estilo-galeria.css.
así que tendría que ir a la hoja de estilo-galeria.css, abrirla y donde dice :

#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}

Cambiar el 126 del width y ponerle también 150

Sea como sea que las quiera poner, no pase de 150 de ancho.

Creo que aún nos queda arreglar la capa pie que si no me equivoco, debe de estar un poco separada hacia abajo o por lo menos seguramente no se le ven los bordes izquierdo ni derecho

Así que en nuestra hoja de estilo-galeria.css iremos a la capa pie, y le agregaremos a todo lo que hay, una propiedad nueva que se llama clear:both

O sea la capa pie debiera de quedarnos así:

#pie{border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px;clear:both;}

Luego guarde o salve y cierre y vea si ya la cosa está por buen camino, en todo caso le sugiero que cuando pueda

ponga acá en un mensaje todo lo que tenga en su hoja de estilo-galeria.css y todo lo que tenga en su pagina galeria.html para ver si se me ha olvidado algo y hubiese que modificar alguna cosa

Saludos

mira salio tdo bn pero lo ke pasa es ke en la vista preeliminar salen todas ordenadas hac ia abajo i yo kieor ke keden asi horizontalmente o sea por lo menos asi en una misma corrida 3 fotos abajo 3 mas y asi susesivamente

mira te dejo mi hoja de estilo-galeria.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#minigaleria {float:left;background-color:#000000;width:800px; }
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#pie { border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px;clear:both}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}



y esta es mi hoja de galeria-fotografica.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>galeria fotografica de la empresa</title>
<link rel="stylesheet" href="estilo-galeria.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</a></div>

</div>
<div id="navegacion">
<ul>

portada

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<div id="minigaleria"><h1> GALERIA DE FOTOS</h1>
<ul>

<a href="objetos/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="objetos/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="objetos/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="objetos/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="objetos/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="objetos/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="objetos/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="objetos/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="objetos/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="objetos/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="objetos/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="objetos/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>


</div>


</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">INGIENERIA EN TRANSPORTES DE CARGA PESADA Y SOBREDIMENSION</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>


ojala me puedas ayudar espero respuesta

de antemano muchas gracias

krisalith escribió:mira salio tdo bn pero lo ke pasa es ke en la vista preeliminar salen todas ordenadas hac ia abajo i yo kieor ke keden asi horizontalmente o sea por lo menos asi en una misma corrida 3 fotos abajo 3 mas y asi susesivamente

mira te dejo mi hoja de estilo-galeria.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#minigaleria {float:left;background-color:#000000;width:800px; }
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#pie { border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px;clear:both}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}



y esta es mi hoja de galeria-fotografica.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>galeria fotografica de la empresa</title>
<link rel="stylesheet" href="estilo-galeria.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</a></div>

</div>
<div id="navegacion">
<ul>

portada

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<div id="minigaleria"><h1> GALERIA DE FOTOS</h1>
<ul>

<a href="objetos/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="objetos/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="objetos/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="objetos/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="objetos/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="objetos/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="objetos/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="objetos/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="objetos/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="objetos/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="objetos/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="objetos/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>


</div>


</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">INGIENERIA EN TRANSPORTES DE CARGA PESADA Y SOBREDIMENSION</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>


ojala me puedas ayudar espero respuesta

de antemano muchas gracias

Hola:

Bueno, la cosa ha salido un poco mejor de lo esperado, no lo digo porque usted se haya equivocado en unas cuantas cosas, lo digo porque se ha equivocado en menos de las esperadas.

Primero, veo que su hoja de estilo se llama estilo-galeria.css
Usted a su página le ha puesto de nombre galeria-fotografica.html
La capa que le dije que creara en su hoja de estilo-galeria.css tenía que llamarse migaleria .


Ahora vamos viendo los pequeños detalles de errores
Si usted abre su página, se dará cuenta que a la capa que debiera de llamarse migaleria, usted le ha puesto como nombre minigaleria.

Le sugiero que le cambie el nombre y le ponga migaleria.

Luego guarde o salve y cierre.

Ahora vamos a la hoja de estilo-galeria.css
La abrimos y revisamos que donde dice
#migaleria li{etc. etc.} está bien

Vemos donde dice
#migaleria h3{etc. etc.} También está bien

Pero donde dice #minigaleria{etc. etc.}
Vemos que debiera de decir
#migaleria{etc. etc.}

Recordatorio:

Los nombres que usted le pone a las capas en su hoja de estilo-galeria.css deben coincidir con los nombres de las capas en su pagina galeria-fotografica.html

También veo que en su hoja de estilo-galeria.css no ha eliminado esa capa que dice
#contenido p{etc. etc. etc.}
Debe eliminarla
------------------------
Ahora, en su hoja de estilo-galeria.css, usted tiene arriba, una directiva para el body, que dice:


body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}

................................................
Pero luego más abajo, tiene otra directiva para otro body
body {text-align: center }
..............................................................
No puede en su hoja de estilo, sea la que sea tener dos bodys, así que lo que tendría que hacer es eliminar ese body{text-align:center}

Y poner ese text-align:center (solo el text-align:center en el body que tiene arriba en su hoja de estilo-galeria.css

Cosa de que le quede así:

body {text-align:center;background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}.

Luego que haga todo eso (y no se preocupe que son errores comunes que se suelen tener)

Como le digo, luego que haga todo eso, pégue otra vez acá, los códigos de su página galeria-fotografica.html, y los códigos de su hoja de estilo-galeria.css
Para seguir arreglándo lo de las imagenes.

Dígame también que nombre le puso a la carpeta donde debiera de tener las imagenes que van en la galeria, ya que es en esa carpeta que si mal no recuerdo, le dije que le pusiera por nombre galeria-1, es allí donde debiera de tener las imagenes que serán su galeria

Saludos

mire a la parte de la simagenes le borre los 2 puntos y la barra caida ia ke en la pagina la tengo en carpetas diferentes y cada una con carpeta de objetos en el caso de la galeria le puse a la carpeta galeria-1(ahi le cambie el nombre como me lo pidio ute)

ia mire presenta el problema ke las imagenes salen al lado isquierdo de l a pantalla y keda muy vacio el resto de la pag tambie la parte del menu latera aparece contactenos abajo de portada i mas menos era algo asi el menu lateral

portada servicios galeria-fotografica enlaces-relacionados contactenos


y me aparece asi

portada servicios galeria-fotografica enlaces-relacionados
contactenos


eso ia mire mi hoja de estilo-galeria.css es

text-align:center;background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#minigaleria {float:left;background-color:#000000;width:800px; }
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}
#pie { border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px;clear:both}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}



y mi galeria-fotografica.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>galeria fotografica de la empresa</title>
<link rel="stylesheet" href="estilo-galeria.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</a></div>

</div>
<div id="navegacion">
<ul>

portada

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<div id="minigaleria"><h1> GALERIA DE FOTOS</h1>
<ul>

<a href="../galeria-1/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="../galeria-1/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="../galeria-1/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="../galeria-1/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="../galeria-1/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="../galeria-1/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="../galeria-1/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="../galeria-1/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="../galeria-1/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="../galeria-1/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="../galeria-1/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="../galeria-1/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>

</div>


</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">INGIENERIA EN TRANSPORTES DE CARGA PESADA Y SOBREDIMENSION</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>


eso es

de antemano muxas gracias

luis

Hola:

Vamos a seguir arreglándo algunas cosas, en el spot anterior le comenté que usted en la página galeria-fotografica.html, le tiene como nombre a la capa algo así:
<div id="minigaleria">.
Le sugerí que le cambiara el nombre y le pusiera <div id="migaleria">.

Luego en el hoja de estilo, hay una cosa que debe comprender.
Si usted crea una capa con un nombre, y a esa capa le quiere poner dentro una lista de imagenes, y que los nombres de las imagenes aparezcan debajo de esas imagenes, y que esos nombres sean unos subtitulos, significa que debe crear una capa que tenga un nombre, y crear una lista para esa capa, pero que esa lista pertenezca al nombre de esa capa y si le vamos a poner a cada imagen un subtítulo para que aparezca debajo de cada imagen, y si para ese subtítulo lo vamos a hacer con la etiqueta h3, entonces también esa etiqueta h3 debe pertenecer a esa capa.
Por eso la capa que crea en la hoja de estilo-galeria.css debe llamarse
#migaleria{etc. etc.}

Y la lista para esa galeria debe llamarse

#migaleria li{etc. etc.}

Y los subtítulos h3 para esa capa debe llamarse

#migaleria h3{etc. etc.}

¿Qué significa todo eso?

Que en la hoja de estilo-galeria.css, se debe tener una capa llamada migaleria, una lista llamada migaleria li, y unos subtítulos llamado migaleria h3
Todo eso pertenece a esa capa.

Usted en la hoja de estilo estilo-galeria.css tiene que poner exactamente esto:

....................................
#migaleria {float:left;background-color:#000000;width:800px; }
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}
.....................................

Y en su página galeria-fotografica.htmlexactamente esto:

<div id="migaleria"><h1> GALERIA DE FOTOS</h1>
<ul>

<a href="../galeria-1/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="../galeria-1/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="../galeria-1/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="../galeria-1/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="../galeria-1/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="../galeria-1/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="../galeria-1/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="../galeria-1/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="../galeria-1/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="../galeria-1/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="../galeria-1/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="../galeria-1/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>

</div>
...............................

Por tanto resumiéndo, en su hoja de estilo llamada estilo-galeria.css debe tener los códigos de esta manera, y en el mismo orden que se lo pongo acá:

Esto es todo lo que tiene que tener en su hoja de estilo llamada estilo-galeria.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}

body{text-align:center;background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}

#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }

#migaleria {float:left;background-color:#000000;width:800px; }
#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}
#migaleria h3{font-size:1.1em;color:red;font-weight:bold;text-decoration:none;text-align:center;}
#pie { border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px;clear:both}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
.......................................................

Para que todo esto funcione según las explicaciones que le he estado dando, usted debe tener dentro de la carpeta migaleria-1, la pagina llamada galeria-fotografica.html, la hoja de estilo llamada estilo-galeria.css, y las doce imagenes.

Esas imagenes que serán parte de la galeria, no tiene que ponerlas dentro de ninguna otra carpeta, solo dentro de la carpeta galeria-1.
................................
Por tanto, su página llamada galeria-fotografica.html debiera de tenerla así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>como CCTW</title>
<link rel="stylesheet" href="estilo-galeria.css" type="text/css" media="all">

</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</div>
</div>
<div id="navegacion">
<ul>

Portada

Servicios

Galeria F

Enlaces R

Contactenos

</div>
<div id="migaleria"><h1>Mi Galeria de fotos</h1>
<ul>

<a href="../galeria-1/uno.jpg"target="_blank">[contenido no disponible]
<span>Uno</span></a>

<a href="../galeria-1/dos.jpg"target="_blank">[contenido no disponible]
<span>Dos</span></a>

<a href="../galeria-1/tres.jpg"target="_blank">[contenido no disponible]
<span>Tres</span></a>

<a href="../galeria-1/cuatro.jpg"target="_blank">[contenido no disponible]
<span>Cuatro</span></a>

<a href="../galeria-1/cinco.jpg"target="_blank">[contenido no disponible]
<span>Cinco</span></a>

<a href="../galeria-1/seis.jpg"target="_blank">[contenido no disponible]
<span>Seis</span></a>

<a href="../galeria-1/siete.jpg"target="_blank">[contenido no disponible]
<span>Siete</span></a>

<a href="../galeria-1/ocho.jpg"target="_blank">[contenido no disponible]
<span>Ocho</span></a>

<a href="../galeria-1/nueve.jpg"target="_blank">[contenido no disponible]
<span>Nueve</span></a>

<a href="../galeria-1/diez.jpg"target="_blank">[contenido no disponible]
<span>Diez</span></a>

<a href="../galeria-1/once.jpg"target="_blank">[contenido no disponible]
<span>Once</span></a>

<a href="../galeria-1/doce.jpg"target="_blank">[contenido no disponible]
<span>Doce</span></a>


</div>
<div id="pie">
<div id="pieuno">
<ul>

Foro

Contactos

Nos Enlazan

</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web
</div>
</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>
.........................................

Cuando tenga todo eso , ya veremos lo de la capa navegacion, porque yo no sabía que usted tenía algunas paginas dentro de otras carpetas

Saludos

solo tengo otros problemas lo que pasa que esta pagina ia esta en la red pero tengo un problema al enlazar esto o sea en el menu lateral MIRE LAS KE TENGO PROBLEMA
SON

PERO MEJOR VEALO USTED MISMO I ME DICE LUEGO LO VEMOS POR PARTES

http://transviejoroble.medianewsonline.com

AHI VEALO IA KE KIERO TENERLA PERFECTA PARA DESPUES SUBIRLA A UN DOMINIO PAGADO


DE ANTEMANO GRACIAS

krisalith escribió:solo tengo otros problemas lo que pasa que esta pagina ia esta en la red pero tengo un problema al enlazar esto o sea en el menu lateral MIRE LAS KE TENGO PROBLEMA
SON

PERO MEJOR VEALO USTED MISMO I ME DICE LUEGO LO VEMOS POR PARTES

http://transviejoroble.medianewsonline.com

AHI VEALO IA KE KIERO TENERLA PERFECTA PARA DESPUES SUBIRLA A UN DOMINIO PAGADO


DE ANTEMANO GRACIAS

Hola:

Bueno, yo la veo bien, solo hay que hacer un pequeño ajuste en la hoja de estilo.
Por ejemplo en la capa navegacion usted tiene cinco enlaces, el último creo que se llama "contacto", y ese se sale de la capa navegacion, pero es porque al tener cinco enlaces en esa capa, esos cinco enlaces ocupan más ancho que la capa y por eso el enlace "contacto" se va hacia abajo.

Así que lo que debe hacer es ir a la hoja de estilo-galeria.css y donde dice :#navegacion ul{margin-left:180px} Cambiar esos 180 y poner 150, para que todos los enlaces le quepan bien en esa capa navegacion
.........................
Cosa de que le quede así:

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 150px }
......................................
Luego, usted en la lista de las imágenes les puso en la pagina galeria-fotografica.html un width:150px
Pero en la hoja de estilo-galeria.css tiene puesto un width de 126px.
eso hace que las imagenes en la pagina se vean más anchas que los bordes rojos que tienen que tener por el lado derecho

así que debiera de ir a su hoja de estilo-galeria.css y cambiar donde dice :

#migaleria li{display:inline;float:left;width:126px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}


Y ponerle.
#migaleria li{display:inline;float:left;width:150px;padding:5px;margin:15px;text-align:center;border-right:#FF0000 solid 2px;border-bottom:#FF0000 solid 2px;}

Luego guarde o salve y cierre

Ahora, volviendo a esos cinco enlaces que tiene en la capa navegacion, seguramente debe tener el mismo problema en su hoja de estilo-general, así que debiera de ir a su hoja de estilo-general.css , y en la capa navegacion de esa hoja de estilo también ponerle a navegacion ul un width:150px.

Ahora en lo que tiene que ver con el enlace del menu lateral, la palabra correcta en el enlace que tiene que ver con enlaces-relacionados debiera de ser <a href="etc. etc.
solo que usted creo que tiene puesto <a ref="etc. etc.

Usted haga esos cambios, y me comenta los resultados

Saludos

krisalith escribió:solo tengo otros problemas lo que pasa que esta pagina ia esta en la red pero tengo un problema al enlazar esto o sea en el menu lateral MIRE LAS KE TENGO PROBLEMA
SON

PERO MEJOR VEALO USTED MISMO I ME DICE LUEGO LO VEMOS POR PARTES

http://transviejoroble.medianewsonline.com

AHI VEALO IA KE KIERO TENERLA PERFECTA PARA DESPUES SUBIRLA A UN DOMINIO PAGADO


DE ANTEMANO GRACIAS

Hola:
Se me olvidaban dos cosas,

Una son los dos puntos y la barra que hay que poner en la lista que tiene en su página, pero eso lo veremos después que haga los cambios que le dije en el anterior spot.
Y la otra cosa es que usted el enlace del logotipo que tiene en su página, y que seguramewnte lo tendrá en todas sus páginas incluyéndo la plantilla es que usted lo tiene así:

<div id="logotipo">
<a href="index.html">
[contenido no disponible]</div>
........

Y debiera de tenerlo así:

<div id="logotipo">
<a href="index.html">
[contenido no disponible]</a></div>

O sea, tiene que cerrarlo con ese cierre de a, porque si no lo cierra, entonces le abarca toda la capa publicidad como parte del enlace

Saludos

pero lo que le decia es ke algunos enlaces no funcionan(del menu lateral el otro menu funciona correctamente en cada una de las partes de la pag ) o sea por ej

estoy en contactenos y an pinxar ahi para servicios no pasa nada y me deriva a algo del hosting que es un error o algo asi

veamos primero lo del menu lateral del servicios y el de contactenos
(por si akaso cada uno de las partes de las pag estan en diferentes carpetas
por eso en algunas d elas direcciones de enlaces sale el ../)

esta es contactenos.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CONTACTENOS</title>
<link rel="stylesheet" href="estilo-contactenos.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</a></div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</a></div>

</div>
<div id="navegacion">
<ul>

portada

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<div id="contenido">

<div id="menu">
<ul><h1>MENU PRINCIPAL</h1>

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<h1>contacte con nosotros </h1>


a traves de nuestro telefono de nuestra oficina </p>


(02)8521776</p>


a nuestro correo electronico</p>


[correo eliminado] [correo eliminado]</p>


o puede dirigirse a nuestra oficina ubicada en las acacias 2765 comuna la pintana ciudad santiago</p>


Con gusto sera atendido por nuestro personal en dicha direccion antes mencionada</p>

[contenido no disponible]
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">INGIENERIA EN TRANSPORTES DE CARGA PESADA Y SOBREDIMENSION</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>

este es el estilo-contactenos.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: NavajoWhite ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;
height: 65px}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}

este es servicios.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>servicios</title>
<link rel="stylesheet" href="estilo-servicios.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]</a></div>
<div id="publicidad">BIENVENIDOS A LA PAGINA DE TRANSPORTES VIEJO ROBLE</a></div>

</div>
<div id="navegacion">
<ul>

portada

servicios

galeria-fotografica

enlaces-relacionados

contactenos

</div>

<div id="contenido">

<div id="menu">
<ul><h1>MENU PRINCIPAL</h1>

servicios

galeria-fotografica

enlaces-relacionados

<a ref="../contactenos/contactenos.html">contactenos</a>

</div>

<h1>NUESTROS SERVICIOS</h1>


La metodología de trabajo de nuestra organización se compromete a tener segura su carga, para esto nuestro personal especializado inspeccionara la carga antes de el carguio para desarrollar una serie de inspecciones y así decidir el equipo adecuado para su carga</p>
<h1>TRANSPORTE ESPECIAL PARA CARGAS SOBREDIMENSIONADAS INDIVISIBLES</h1>


El Transporte en cama baja simple es un medio donde su carga, ya sea maquinaria de cualquier tipo, estructuras metálicas, estanques, etc. sean transportado a 60 cms. como mínimo del suelo, esto hace que su carga con sobre dimensión se apoye en una base de 3.20 mts de ancho y quede lo mas bajo posible, para asi ser trasladado sin problemas al transitar por tuneles, pasos bajo nivel, pasarelas u otras complicaciones que pueda tener la ruta.

La ventaja de una cama baja tipo palote es lograda por su mínima altura desde el suelo a 5 cms. como mínimo y menos, esto lo hace un medio de transporte seguro para las maquinarias pesadas ya que el transporte se hace mas solido como si todo fuera una sola pieza, lo que destaca a este medio es que la maquina se toma desde el chasis o entre orugas y se levanta a una altura adecuada para el desplazamiento.</P>



*Hasta 50 Toneladas de peso.</P>


*Servicio de apoyo logístico si fuera necesario.</P>


*ademas ofrecemos servicios de montajes de maquinarias</P>

[contenido no disponible]
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">INGIENERIA EN TRANSPORTES DE CARGA PESADA Y SOBREDIMENSION</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>


esta es la hoja ed estilo-servicion.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(../objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: NavajoWhite ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;
height: 65px}
#pieuno {float:left ; width:150px }
#pie li {list-style: none ; font-size: 12px}
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(../objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.jpg) ; background-repeat: no-repeat ; background-position: center center}


amigo es solo lo del menu lateral que no funcionan algunas partes
usted vea bn las partes ke son en la pag la direccion es
http://transviejoroble.medianewsonline.com/ se la dejo de nuevo por si akaso

de antemano gracias
l uis

Hola:

Esto de la desinformación, a veces nos hace doler la cabeza, lo digo porque no sabía que usted había hecho una hoja de estilo para cada página, por ejemplo para la pagina servicios, para la contactenos etc.

Por lo menos, la galeria de imagenes, (aunque un poco artesanal) ya está hecha.
Lo de embellecerla ya es para más adelante.

Así que la cosa ahora va de enlaces a las diferentes paginas que están en diferentes carpetas y que cada pagina tiene su propia hoja de estilo.

Así que para no liarnos con lo que yo le diga que tiene que hacer suponiéndo yo que usted tiene esto o lo otro, creo que la mejor forma de ir solucionando el problema, es que partamos desde el principio.

Y el principo normalmente es, cuando uno dice "Pégue acá los códigos de su página y los de su hoja de estilo, etc. etc.".

Pero como los códigos de enlace de páginas que están en diferentes carpetas, requieren un poco de cuidado para que funcionen, lo que vamos a hacer, para así que otros foreros puedan aportar ideas o sugerencias es que primero, nos diga lo siguiente, (ya que así podremos ver mucho mejor qué clase de arreglos hay que hacer para que los enlaces de las páginas funcionen.

Porque si empezamos sin saber qué es lo que usted tiene, solo vamos a estar adivinando

Primero:
Nombre de la Carpeta del escritorio en que guarda toda la web que pertenece a transviejoroble, y los archivos y carpetas que tiene dentro de esa carpeta
Quiero decir que cuando usted le hace doble click a esa carpeta del escritorio, ¿qué es lo que directamente ve en ella?.
..................................................................................
Por ejemplo, suponiendo que yo estoy haciendo esa web
voy a mi carpeta del escritorio que se llama "viejoroble", le hago doble click, y lo que veo dentro de ella es
una pagina llamada index.html
una página llamada plantilla.html
una hoja de estilo llamada estilo.css
una hoja de estilo llamada estilo-general.css
una carpeta llamada objetos
una carpeta llamada servicios
una carpeta llamada enlaces-relacionados
una carpeta llamada contactenos
una carpeta llamada galeria-1 o galeria-fotografica

Todo eso tengo en esa carpeta "viejoroble"

Ahora, ¿qué tengo dentro de la carpeta servicios?
una pagina llamada servicios.html
una hoja de estilo llamada estilo-servicios.css

Ahora ¿qué tengo dentro de la carpeta llamada enlaces-relacionados?
una pagina llamada enlaces-relacionados.html
una hoja de estilo llamada estilo-enlaces-relacionados.css

Ahora ¿Qué tengo dentro de la carpeta contactenos?
una pagina llamada contactenos.html
una hoja de estilo llamada estilo-contactenos.css

Ahora ¿Qué tengo en la carpeta galeria-1 o galeria-fotografica?
una pagina llamada galeria.html
una hoja de estilo llamada estilo-galeria.css

Ahora ¿Qué tengo dentro de la carpeta objetos? (la que se supone tiene el logotipo)
una imagen llamada logotipo.jpg
una imagen llamada curva-superior.gif
una etc. etc. etc.
otra etc. etc. etc.
..................................................................

Estas anteriores, son las cosas que necesitamos saber, para poder definir como hay que poner los enlaces en cada página.
No significa que tenga que tenerlas como las he puesto yo acá, queremos saber como las tiene puestas usted allí, y que cosa tiene dentro de que cosa.

Después que nos diga todo eso, le iremos pidiéndo los códigos de tal o cual página y de tal o cual hoja de estilo

Saludos

mire lo que pasa que esto lo ingrese desde el notebook d emi pap lo subi y todo y el notebook perdio la informacion o sea lo estoy arreglando desde los archivos en la red me entiende

mire estan ordenados asi





l---carpeta objetos
l---estilo-contactenos.css
l-----carpeta contactenos l---contactenos.html
l
l l---carpeta objetos
l-----carpeta enlaces-relacionadosl---enlaces-
l l relacionados.html
l l---estilo-enlaces.css

carpeta viejoroblel
l----carpeta galeria fotografical--carpeta galeria-1
l l--estilo-galeria.css
l l--galeria-
fotografica.html
l----carpeta objetos
l
l l--carpeta objetos
l----carpeta contactenos l--contactenos.html
l l--estilo-contactenos.css
l
l----estilogeneral.css
l----estilo.css
l----index.html
l----plantilla.html




bueno es asi koo lo tengo klaro ke en kada karpeta de objetos tengo los archivos ke estan dentro kde kada parte de la pagina no lo koloke por ke no lo enkontre nesesario hacerlo

eso es po ustedes diran ahora


de antemano muchas gracias

se desordeno todo al kolokarlo ahi era komo un mapa konceltual lo are de otra forma mejor


carpeta viejo robles
1-index html
2-plantilla html
3-estilo-general.css
4-estilo.css
5-carpeta objetos
6-carpeta contactenos dentro de ella ahi
6.1-carpetta objetos
6.2-contactenos.html
6.3-estilo-contactenos.css
7-carpeta enlaces-relacionados(dentro de ella ahi)
7.1-carpeta objetos
7.2-enlaces-relacionados.html
7.3-estilo-enlaces.css
8-carpeta galeria fotografica (dentro de ella ahi)
8.1-carpeta galeria-1
8.2-galeria-fotografica.html
8.3-estilo-galeria.css
9 carpeta servicios
9.1- carpeta objetos
9.2-servicios.html
9.3-estilo-servicios.css

o sea en pokas palabras cada una de las partes de mi web estan en carpetas separadas con su propia hoja de estilos y su carpeta de onjetos
pero como les decia ia no tengo los archivos solo trato de arreglarlos desde la red ya les explique cual era la razon

de antemano gracias

krisalith escribió:se desordeno todo al kolokarlo ahi era komo un mapa konceltual lo are de otra forma mejor


carpeta viejo robles
1-index html
2-plantilla html
3-estilo-general.css
4-estilo.css
5-carpeta objetos
6-carpeta contactenos dentro de ella ahi
6.1-carpetta objetos
6.2-contactenos.html
6.3-estilo-contactenos.css
7-carpeta enlaces-relacionados(dentro de ella ahi)
7.1-carpeta objetos
7.2-enlaces-relacionados.html
7.3-estilo-enlaces.css
8-carpeta galeria fotografica (dentro de ella ahi)
8.1-carpeta galeria-1
8.2-galeria-fotografica.html
8.3-estilo-galeria.css
9 carpeta servicios
9.1- carpeta objetos
9.2-servicios.html
9.3-estilo-servicios.css

o sea en pokas palabras cada una de las partes de mi web estan en carpetas separadas con su propia hoja de estilos y su carpeta de onjetos
pero como les decia ia no tengo los archivos solo trato de arreglarlos desde la red ya les explique cual era la razon

de antemano gracias

Hola:
Bueno,

Cuando lo desee le doy todas las paginas con los códigos de como debiera de tenerlos en cada página, y los códigos de las hojas de estilo y el como debiera de tenerlos.

No le voy a decir que debe tener cuidado con los caracteres, ya que es muy fácil poner una coma en vez de un punto.
Tampoco le voy a decir que ponga los códigos exactamente como yo se los daré, pero trate de hacerlo, porque me ha costado un ojo de la cara y me ha dejado colgándo el otro.

Me imagino que esas imagenes que se llaman sonrisa, (esas que son grandes) las que hay en cada página, por ejemplo las que están en servicios, las que están en contactenos etc., las pondrá en las carpetas objetos que hay en cada carpeta que le corresponde a esa página que llevará esa imagen.

Por eso a esas imagenes no les he puesto los dos puntos con la barra, ya que como le digo me imagino que las pondrá en cada carpeta objetos que le corresponda a esa página, ya que en la carpeta objetos (la del logotipo) allí deben estar solamente por ahora las curva-superior, la curva inferior, la menu parte superior, y la menu parte inferior, y no me acuerdo más.

Ya me dirá

Saludos