terminar mi pagina

chrispawn · 22 Mar 2011, 17:55 · Solicitar retirada

Hola! soy nueva en el foro y es mi primera pagina. Antes que nada muchas gracias por toda esta ayuda, es realmente excelente.
Obviamente tengo muchas dudas, pero la principal es que en el html-kit yo veo que aparenta estar todo bien pero cuando pongo mi url (babaupanties.com) no sale terminada. ( espero que no sea una exageracion todo lo que puse)
Te adjunto los codigos
La plantilla es

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>BIENVENIDOS A BABAU</title>
<link rel="stylesheet" href="estilo-general.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"><img src="objetos/PERRITOSOLO.jpeg" width="198"
height="165" alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a BABAU</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>

<div id="contenido">

<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>

<h1>BOMACHAS SANITARIAS CON ABROJO</h1>
<p>practicas y bonitas</p>

<h2>para celo o incontonencia urinaria</h2>

<p>modelos exclusivos hechos con materiales de calidad, estas bombachas se adaptan a cualquier raza de perros y gatos!!</p>
<p>para mayor comodidad, proteccion y durabilidada se utilizan con un protector femenino.</p>
<p>Todos los talles!</p>
</div>

<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li></ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li></ul>
</div>
</div>

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

El estilo general

* {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: 60px }
#contenido {background-color:white ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color:white; 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 ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif)}
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none; font-size: 12px }

#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px ; background-color:white}
#pietres {float:left ; width:150px }
#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}
#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{}
logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

y el index


<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/PERRITOSOLO.jpeg" width="198"
height="165" alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a BABAU</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">portada</a></li><li><a href="para nenas/para nenas.html">para nenas</a></li><li><a href="para nenes/para nenes.html">para nenes</a></li><li><a href="fotos de nuestros amiguitos/fotos de nuestros amiguitos.html">fotos de nuestros amiguitos</a></li></ul>
</div>

<div id="contenido">



<h1>BOMBACHAS SANITARIAS CON ABROJO</h1>
<p>practicas y bonitas</p>

<h2>para celo o incontonencia urinaria</h2>

<p>modelos exclusivos hechos con materiales de calidad, estas bombachas se adaptan a cualquier raza de perros y gatos!!</p>
<p>para mayor comodidad, proteccion y durabilidada se utilizan con un protector femenino.</p>
<p>Todos los talles!</p>
</div>

<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li></ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li></ul>
</div>
</div>

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

Por supuesto que todavia no esta como quiero, pero no puedo lograr que este completa.
Por favor si alguien me ayuda estare muy agradecida
Besos a todos y gracias nuevamente

Yaneth · 22 Mar 2011, 18:05 · Solicitar retirada

hola

ya subiste los cambios de nuevo?????

el codigo que pegas aqui, no es el mismo que tienes en la red?????
vuelve a subir todo de nuevo

saludos y no olvides votar por cctw, en mi firma está el enlace

chrispawn · 22 Mar 2011, 18:20 · Solicitar retirada

Gracias Yaneth, lo hice pero vuelvo a intentar (tengo que subir todas las carpetas?
Gracias otra vez
Saludos

chrispawn · 22 Mar 2011, 18:45 · Solicitar retirada

ya subi todo y la portada se ve bien, pero cuando toco un enlace no encuentra la pagina.
Perdon por moletar, imagino que estas full con el foro

Yaneth · 22 Mar 2011, 19:04 · Solicitar retirada

hola
no es ninguna molestia,

mira lo que tienes en la plantilla, tu logotipo mide 165 px de altura,

<div id="logotipo"><a href="index.html"><img src="objetos/PERRITOSOLO.jpeg" width="198"
height="165" alt="Haz clic aquí para volver a la página de inicio">

ahora mira lo que tienes en el css, cuanto mide de altura la cabecera????
#cabecera {background-color:white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
debe ser igual o mayor, que el logotipo

yy
recuerda que no debes dejar espacios en blanco en los nombres de nada
tienes un documento que se llama "para nenas.html" deberia decir "para-nenas.html"
ya subiste tooodo???
muestrame una captura de pantalla con la carpeta azul abierta y todas las subcarpetas abiertas tambien

saludos, y no olvides votar por cctw en mi firma está el enlace, con la ayuda de todos seguro que jorgens ganará este concurso

chrispawn · 22 Mar 2011, 22:05 · Solicitar retirada

crispawn otra vez.je
no se como hacer una captura de la pantalla para mostrarte mis carpetas, y ya lei y relei
como activar los enlaces del menu horizontal pero no hay forma, esta a punto de reventarme el cerebro.
Cuantas veces se pude votar?
mi nuevo index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>PAGINA OFICIAL BABAU</title>
<link rel="stylesheet" href="estilo-general.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"><img src="objetos/PERRITOSOLO.jpeg" width="198"
height="165" alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a BABAU</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">portada</a></li><li><a href="para-nenas/para-nenas.html">para nenas</a></li><li><a href="para-nenes/para-nenes.html">para nenes</a></li><li><a href="fotos-de-nuestros-amiguitos/fotos-de-nuestros-amiguitos.html">fotos de nuestros amiguitos</a></li>
</ul>
</div>

<div id="contenido">



<h1>BOMBACHAS SANITARIAS CON ABROJO</h1>
<p>practicas y bonitas</p>

<h2>para celo o incontonencia urinaria</h2>

<p>modelos exclusivos hechos con materiales de calidad, estas bombachas se adaptan a cualquier raza de perros y gatos!!</p>
<p>para mayor comodidad, proteccion y durabilidada se utilizan con un protector femenino.</p>
<p>Todos los talles!</p>
</div>

<div id="pie">
<div id="pieuno">
<ul><li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li></ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li></ul>
</div>
</div>

<div id="curva-inferior"></div>
</div>
</body>
</html>
mi nuevo 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}
#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:175px}
#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: 60px }
#contenido {background-color:white ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color:white; 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 ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif)}
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none; font-size: 12px }

#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px ; background-color:white}
#pietres {float:left ; width:150px }
#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}
#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{}
logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
para nenas,etc, es igual que el index pero en ciertos lugares tiene ../
gracias , gracias y gracias Yaneth!!

chrispawn · 23 Mar 2011, 02:17 · Solicitar retirada

creo que pude pegar las carpetas (perdon por no haber leido antes sobre la captura de imagenes). sigo sin poder ver los enlaces del menu horizontal

[contenido no disponible]

Uploaded with ImageShack.us
gracias por la ayuda, son magnificos!!

Yaneth · 23 Mar 2011, 17:05 · Solicitar retirada

hola

aun no cambias lo que te dije, de que no debes tener espacios en blanco
cambiale el nombre a los documentos y carpetas que lo tengan

para nenas.html
para nenes.html

ahora, si te fijas, en tu carpeta local, tienes una carpeta que se llama
para nenas, y otra carpeta que se llama para nenes, dentro de estas carpetas tienes documentos e imágenes

estas carpetas no las tienes en la carpeta azul (internet) debes crearla ahi primero, para luego subir dentro de cada una de ellas
lo que tienes en local

debe ser todo exactamente igual en local que en internet

saludos, y puede ser un voto diario por cctww,
hasta pronto

chrispawn · 23 Mar 2011, 18:39 · Solicitar retirada

hola Yaneth!, hice todo como me dijiste, pero ahora tengo un problema mas grave, quise comenzar de cero y borre la carpeta internet (solo esa ), y luego me di cuenta que la carpeta local del workspace no tiene nada, pero la del escritorio esta completa (por suerte).
Entonces me pregunto : y ahora como vuelvo a meter todo en la carpeta local?? Creo que voy a llorar, Help!!!
infitinas gracias nuevamente
[contenido no disponible]

Uploaded with ImageShack.us

Yaneth · 23 Mar 2011, 19:32 · Solicitar retirada

jejeje

cierra el programa html-kit

y vuelvelo a abrir

ya me contarás que sucede

chrispawn · 24 Mar 2011, 04:04 · Solicitar retirada

otra vez por aqui..., no Yaneth cerre el programa y desaparecio la carpeta, pero se me prendio la lamparita y logre recuperar todo (seguramente debe ser facil pero no para mi), tambien solucione lo de los enlaces.
Pero ahora tengo otras dudas: como cambio la fuente de las letras? lo intente en EDIT/ PREFERENCES pero me cambia la letra de toda la plantilla y no el parrafo que quiero, tambien intente cambiar en la hoja de estilos.css en donde dice por ejemplo h1..... font-weight: bold, no se, cambiar bold por arial por ejemplo.
Y lo ultimo quisiera centrar la imagen que puse en el contenido WWW.BABAUPANTIES.COM
Me gustaria tu opinion
Gracias, y realmente tendriamos que hacerte un monumento!!!!

Yaneth · 24 Mar 2011, 16:28 · Solicitar retirada

hola
muchas gracias por tus comentarios, es un placer poder ayudarte
te cuento un secreto????' no sabia que existia eso que ofreces en tu página para animalitos
jajajajaja me quedé asombrada cuando lo vi.... jajajajaja

bueno, de tu pregunta te sugiero que te leas el curso de css que viene en la web, aclararás muchas dudas que seguro tienes
y en este apartado
http://www.comocreartuweb.com/curso-de-estilo-css/css-leccion-i-las…
te dice como cambiar el tipo de letra

lo de centrar imágenes, dime algo...
si vas a insertar una imágen porque la pones con las etiquetas <p> como si fuera texto??? esa es para texto solamente,
quitale <p> a las imágenes qe deseas centrar y verás como se ajusta

saludos

chrispawn · 24 Mar 2011, 17:00 · Solicitar retirada

Gracias Yaneth, cuando la termine vas a ver que lindas son! espero que la pagina quede linda tambien.
Respecto a las etiquetas <p> lei lo que preferia Jorgens, textualmente dice:

Dónde insertar la imagen.
Si creamos la línea de código Html en cualquier parte dentro del Body, ésta aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas, verdad?

Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir, entre palabras, como este ejemplo y sin que el párrafo se corte, o bien como una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre encerrada entre <p> y </p>.

Pero quiza como ya estoy mareada y sueño con muchas {:# <div>,etc, quiza interprete mal.
En un rato comienzo a leer el curso css y luego seguramente andare por aqui otra vez preguntando
No me canso de darte las gracias

Yaneth · 24 Mar 2011, 20:03 · Solicitar retirada

si, eso está bien
solo que tambien en el curso te dice que pongas algo asi
en el css

#contenido p {text-align:justify}

para que el texto salga justificado, es decir ocupe todo el ancho del div
y si encierras la imagen entre las etiquetas de parrafo, que pasa???, exacto, lo mueve a la derecha para darle la alineacion que pusiste en el css
me explico????

saludos

chrispawn · 26 Abr 2011, 17:50 · Solicitar retirada

Hola Yaneth!!. Estoy de vuelta
Pregunta: Como hago para poner una foto al lado de la otra, y cada foto la tengo que reducir antes o le puedo cambiar las dimensiones en el html?? (para que veas a que me refiero :www.babaupanties.com ----diseños


<div id="menu">
<h1>tipos</h1>
<ul><li><a href="para-nenas.html">para nenas</a></li><li><a href="para-nenes.html">para nenes</a></li></ul>
</div>

<h1>BOMBACHAS SANITARIAS CON ABROJO</h1>
<p></p>

<h2>para celo o incontonencia urinaria</h2>
<p><img src="objetos/perritojean.jpg" width="456px" height="342px" alt="Bienvenidos Babau"></p>

<p><img src="objetos/jeanabierta.jpg" width="456px" height="342px"</p><p><img src="objetos/jean.jpg" width="456px" height="342px"</p>
<p>Todos los talles!</p>
</div>

Yaneth · 26 Abr 2011, 18:03 · Solicitar retirada

hola
el menu del div contenido se desplaza a la derecha, esto por el div navegacion
agregale un salto de linea asi
a todos los documentos para que se ajusten
<div id="contenido"> <br>

si deseas poner las imágenes una al lado de la otra, debes quitarle la etiqueta <p>, ya que esa es para parrafos, y un parrafo, tiene salto de linea
puedes encerrar las dos imágenes juntas en un solo <p></p>

lo de las imágenes yo te sugiero redimensionarlas antes de meterlas a la carpeta objetos, pesarán menos, y no corres riesgo que se distorcionen

saludos