Entrar

Que estoy haciendo mal, para que mi pagina se vea mal?

atino · · Solicitar retirada
Hola tengo un problema con la pagina, tenia una estructura terminada que se veía perfectamente en la red, estuve modificando algunas cosas y al subirla de vuelta para actualizarla se ve fatal en todos los servidores, y solo he modificado parrafos y botones, lo que es la estructura de la pagina no, por supuesto en mi red local se ve asi:

[contenido no disponible]

y en la red mirad aqui. www.atinoproducciones.com

Mi HTML 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>atinoproducciones</title>
<link rel="stylesheet" href="estilosdos.css"type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="borde-superior"></div>
<div id="cabecera">
<div id="logotipo">
<img src="objetosdos/logo.png" width="270" height="170"
alt="Haz clic aqui para volver a ver la pagina de inicio";>
</div>
<div id="publicidad"><img src="objetosdos/foto-camara.png"width="270" height="170" >
</div>
</div>
<div id="navegacion"><ul>
<li><a href="videos/videos.html"><p><b class="ID">Videos</b></p></a></li><li><a href="fotografia/fotografia.html"><p><b class="ID1">Fotografia</b></p></a></li><li><a href="contacto/contacto.html"><p><b class="ID2">Equipo Tecnico</b></p></a></li><li><a href="equipo_tecnico/equipo_tecnico.html"><p><b class="ID3">Contacto</b></p></a></li>
</ul>
</div>
<h1>ATINOPRODUCCIONES</h1>
<p class="centrado" "texto-color" >Bienvenidos a atinoproducciones, soy operador de cámara y fotógrafo.</p>

<p class="centrado" "texto-color">También editor de video, fotografía e iluminación de espacios escénicos.</p>

<p class="centrado" "texto-color">Mas de cinco años de experiencia en grabación y montaje de piezas informativas,
actos institucionales,eventos, reportajes culturales y sociales entre otros.</p>

<p class="centrado" "texto-color">Les invito a que visiten mi página, en ella encontraran algunos
de los trabajos que he realizado y los tipos de cámaras y programas de edición
con los que trabajo.
</p>

<p class="centrado"><iframe width="425" height="349" src="http://www.youtube.com/embed/p_y5K2obZCU" frameborder="0" allowfullscreen></iframe></p>

<div id="pie">
<div id="pieuno"><ul>
<li><a href="http://www.facebook.com" target="_blank"><img src="objetosdos/logo-face-espejo.png"width="30" height="30" ></a></li>
</ul>
</div>
<div id ="piedos" class="texto-color">www.atinoproducciones.com</div>
<div id="pietres"><ul>
<li><a href="http://www.youtube.com/user/atinoproducciones" target="_blank"><img src="objetosdos/you-tube-logo-espejo.png"width="50" height="30"></a></li>
</ul>
</div>
</div>

<div id="borde-superior"></div>
</div>

</body>
</html>

Y mi CSS es:

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;background-color:black;background-image:url(objetosdos/lente.png);background-repeat:no-repeat;background-position:center center;}
img {border-style:none;}
#global {width:800px; margin:4px auto;}
#cabecera { border-left:black 1px solid;border-right:black 1px solid; height:85px;}
#borde-superior {background-image:url(objetosdos/borde-superior.png);background-repeat:no-repeat; width:800px; height:12px;}
background-repeat:no-repeat;}
h1 {font-size:2em; color:#B22222; font-weight:bold; text-decoration:none; text-align:center;margin:0px 10px 50px 10px}
.texto-color {color:white;}
.parrafouno { font-family:Tahoma,Arial,Helvetica,sans-serif ;}
.centrado {text-align:center;}
p {text-align:justify;font-size:0.5cm}
p { margin: 10px 10px 10px 10px; color:white;}
td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }
#logotipo {width:200px; float:left;}
#publicidad {width:518px; float:right;}
#navegacion { background-color:black; border:black 1px solid; height:160px;}
#navegacion li {float:left; list-style:none;margin:40px 3px 0px 3px;}
#navegacion ul { margin-left:5px }
#navegacion a {background-image:url(objetosdos/boton-por-fuera-vacio.png);width:180px;height:50px;text-decoration:none;margin:15px 3px 10px 0px;padding:15px 3px 10px 0px}
#navegacion a:hover {background-image: url(objetosdos/boton-por-dentro-vacio.png);width:180px;height:50px;text-decoration:none;margin:15px 3px 11px 0px;padding:15px 3px 10px 0px}
#contenido {background-color:orange;}
#pie {border-left:black 1px solid; border-right:black 1px solid;border-top:black 40px solid; height:10px;}
#pie li {list-style:none;font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px; background-color:black;}
#pietres {float:left; width:150px;}
#borde-inferior {background-image:url(objetosdos/borde-superior.png);background-repeat: no-repeat ;width:800px ; height: 12px}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: none;}
a:active {}
.ID{text-indent:55px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.ID1{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin: 0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.ID2{text-indent:30px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.ID3{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
.ID4{margin:40px 0px 40px 197px;}

Muchas gracias, saludos
Yaneth · · Solicitar retirada
y... para entretenernos mejor
puedes mostrarme una cpatura de pantalla de lo que tienes en la red???
incluyendo el contenido de la carpeta objetos jeje
saludos
Yaneth · · Solicitar retirada
hola
esto tienes en el css

#navegacion a {background-image:url(objetosdos/boton-por-fuera-vacio.png)
pero.. en la captura que me muestras... no veo esa imagen!!!!
la subiste???? seguro??????
atino · · Solicitar retirada
Si las subi ahora mismo despues de ver mi propia captura, me faltavan los dos png fuera y dentro actualize todo lo de la red pero igual se sigue viendo mal.saludos
la pagina es atinoproducciones.com
Yaneth · · Solicitar retirada
ok, ya lo vi
por ahora me tengo que ir
pero si nadie mas te responde, mañana le seguimos
ok?????

hasta pronto
atino · · Solicitar retirada
ok muchisimas gracias, otra cosa en el iexplore se ve bien ya queda una menos jeje. Saludos compañera
victor5atodogas · · Solicitar retirada
En chrome los botones se reptien, añade a:
#navegacion a

en : bakground-image: ....... no-repeat

K mas fallos hay?
atino · · Solicitar retirada
Buenas Vcitor con lo que me has dicho esta solucionado los botones, ahora lo que esta mal es que falta el titulo que aparece en la imagen que puse primera y las letras de los botones estan desalineadas no como en la imagen local. la pagina es atinoproducciones.com. muchas gracias
victor5atodogas · · Solicitar retirada
Ok, a la propiedad .id que tienes en el .css elimina el margin y coloca:
text-align: center
margin-top: -5px;

Con eso tendras alineado el texto, con el margin-top haras k el texto suba 5px para arriba, ajusta ese margen de 5 hasta donde creas necesario (10, 20....) ok?


Supongo que con eso ya estara todo solucionado.

Un saludo.
atino · · Solicitar retirada
pues no sigue viéndose mal. y tambien sigue sin verse el titulo:

[contenido no disponible]

Uploaded with ImageShack.us

cuando en realidad quiero que se vea asi:

[contenido no disponible]

y la parte de abajo que tendria que quedar asi:

[contenido no disponible]

pero esta asi:

[contenido no disponible]

Uploaded with ImageShack.us

Te paso de vuelta mi CSS:

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;background-color:black;background-image:url(objetosdos/lente.png);background-repeat:no-repeat;background-position:center center;}
img {border-style:none;}
#global {width:800px; margin:4px auto;}
#cabecera { border-left:black 1px solid;border-right:black 1px solid; height:85px;}
#borde-superior {background-image:url(objetosdos/borde-superior.png);background-repeat:no-repeat; width:800px; height:12px;}
h1 {font-size:2em; color:#B22222; font-weight:bold; text-decoration:none; text-align:center;}
.texto-color {color:white;}
.parrafouno { font-family:Tahoma,Arial,Helvetica,sans-serif ;}
.centrado {text-align:center;}
p {text-align:justify;font-size:0.5cm}
p { margin: 10px 10px 10px 10px; color:white;}
td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }
#logotipo {width:200px; float:left;}
#publicidad {width:518px; float:right;}
#navegacion { background-color:black; border:black 1px solid; height:160px;}
#navegacion li {float:left; list-style:none;margin:40px 3px 0px 3px;}
#navegacion ul { margin-left:5px }
#navegacion a {background-image:url(objetosdos/boton-por-fuera-vacio.png);background-repeat:no-repeat;width:180px;height:50px;text-decoration:none;margin:15px 3px 10px 0px;padding:15px 3px 10px 0px}
#navegacion a:hover {background-image: url(objetosdos/boton-por-dentro-vacio.png);background-repeat:no-repeat;width:180px;height:50px;text-decoration:none;margin:15px 3px 11px 0px;padding:15px 3px 10px 0px}
#contenido {background-color:orange;}
#pie {border-left:black 1px solid; border-right:black 1px solid;border-top:black 40px solid; height:10px;}
#pie li {list-style:none;font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px; background-color:black;}
#pietres {float:left; width:150px;}
#borde-inferior {background-image:url(objetosdos/borde-superior.png);background-repeat: no-repeat ;width:800px ; height: 12px}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: none;}
a:active {}
.ID{text-indent:55px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -5px;}
.ID1{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -5px;}
.ID2{text-indent:30px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;tmargin-top: -5px;}
.ID3{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -5px;}
.ID4{margin:40px 0px 40px 197px;}

Y mi HTML:

<!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>atinoproducciones</title>
<link rel="stylesheet" href="estilosdos.css"type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="borde-superior"></div>
<div id="cabecera">
<div id="logotipo">
<img src="objetosdos/logo.png" width="270" height="170"
alt="Haz clic aqui para volver a ver la pagina de inicio";>
</div>
<div id="publicidad"><img src="objetosdos/foto-camara.png"width="270" height="170" >
</div>
</div>
<div id="navegacion"><ul>
<li><a href="videos/videos.html"><p><b class="ID">Videos</b></p></a></li><li><a href="fotografia/fotografia.html"><p><b class="ID1">Fotografia</b></p></a></li><li><a href="contacto/contacto.html"><p><b class="ID2">Equipo Tecnico</b></p></a></li><li><a href="equipo_tecnico/equipo_tecnico.html"><p><b class="ID3">Contacto</b></p></a></li>
</ul>
</div>
<h1>ATINOPRODUCCIONES</h1>
<p class="centrado" "texto-color" >Bienvenidos a atinoproducciones, soy operador de cámara y fotógrafo.</p>

<p class="centrado" "texto-color">También editor de video, fotografía e iluminación de espacios escénicos.</p>

<p class="centrado" "texto-color">Mas de cinco años de experiencia en grabación y montaje de piezas informativas,
actos institucionales,eventos, reportajes culturales y sociales entre otros.</p>

<p class="centrado" "texto-color">Les invito a que visiten mi página, en ella encontraran algunos
de los trabajos que he realizado y los tipos de cámaras y programas de edición
con los que trabajo.
</p>

<p class="centrado"><iframe width="425" height="349" src="http://www.youtube.com/embed/p_y5K2obZCU" frameborder="0" allowfullscreen></iframe></p>

<div id="pie">
<div id="pieuno"><ul>
<li><a href="http://www.facebook.com" target="_blank"><img src="objetosdos/logo-face-espejo.png"width="30" height="30" ></a></li>
</ul>
</div>
<div id ="piedos" class="texto-color">www.atinoproducciones.com</div>
<div id="pietres"><ul>
<li><a href="http://www.youtube.com/user/atinoproducciones" target="_blank"><img src="objetosdos/you-tube-logo-espejo.png"width="50" height="30"></a></li>
</ul>
</div>
</div>

<div id="borde-superior"></div>
</div>

</body>
</html>

MUCHAS GRACIAS compañeros
victor5atodogas · · Solicitar retirada
Para el color del titulo debes añadir al .css:

h1 {
color: red;
}

para el pie:

#piedos
{
float: left;
width: 498px;
}

#pie {
border-left: black 1px solid;
border-right: black 1px solid;
border-top:  60px solid;
height: 10px;
}

#pieuno {
float: left;
width: 150px;
margin-top: 20px;
}
#piedos {
float: left;
width: 150px;
margin-top: 20px;
}

p {
text-align: justify; (elimina esto)
font-size: 0.5cm;
}

Y el margin que te habia dicho debe ser asi: margin-top: -10px (con el - para que suba hacia arriba).

Un saludo.

Consejos (puesto que tienes un background en el body quitaria estas cosas):

#navegacion {
background-color: black; ELIMINAR
border: black 1px solid; ELIMINAR
height: 160px;
}
#cabecera {
border-left: black 1px solid; ELIMINAR
border-right: black 1px solid; ELIMINAR
height: 85px;
}


#pie {
border-left: black 1px solid; ELIMINAR EL BLACK
border-right: black 1px solid; ELIMINAR EL BLACK
border-top: black 40px solid; ELIMINAR EL BLACK
height: 10px;
}
victor5atodogas · · Solicitar retirada
Por cierto, no hace falta que copies el codigo o capturas (de copiar el codigo usa la etiqueta code) ya que lo puedo ver con el Chrome perfectamente.
atino · · Solicitar retirada
Buenas Victor mira he cambiado todo lo que me dijistes, y el titulo se ve, los textos de los botones se centraron pero siguen debajo y el pie sigue descuadrado, luego si te fijas en la pagina www.atinoproducciones.com al pasar el raton por los botones el titulo ATINOPRODUCCIONES, se desplaza asi un lado u otro y no se porque es, te dejo el css modificado:

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;background-color:black;background-image:url(objetosdos/lente.png);background-repeat:no-repeat;background-position:center center;}
img {border-style:none;}
#global {width:800px; margin:4px auto;}
#cabecera {height:85px;}
#borde-superior {background-image:url(objetosdos/borde-superior.png);background-repeat:no-repeat; width:800px; height:12px;}
h1 {font-size:2em; color:#B22222; font-weight:bold; text-decoration:none; text-align:center;}
.texto-color {color:white;}
.parrafouno { font-family:Tahoma,Arial,Helvetica,sans-serif ;}
.centrado {text-align:center;}
p {}
p { margin: 10px 10px 10px 10px; color:white;}
td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }
#logotipo {width:200px; float:left;}
#publicidad {width:518px; float:right;}
#navegacion { height:160px;}
#navegacion li {float:left; list-style:none;margin:40px 3px 40px 3px;}
#navegacion ul { margin-left:5px }
#navegacion a {background-image:url(objetosdos/boton-por-fuera-vacio.png);background-repeat:no-repeat;width:180px;height:50px;text-decoration:none;margin:15px 3px 10px 0px;padding:15px 3px 10px 0px}
#navegacion a:hover {background-image: url(objetosdos/boton-por-dentro-vacio.png);background-repeat:no-repeat;width:180px;height:50px;text-decoration:none;margin:15px 3px 11px 0px;padding:15px 3px 10px 0px}
#contenido {background-color:orange;}
#pie {border-left:1px solid; border-right: 1px solid;border-top: 60px solid; height:10px;}
#pie li {list-style:none;font-size:12px;}
#pieuno {float:left; width:150px;margin-top: 20px;}
#piedos {float:left; width:498px; margin-top: 20px;}
#pietres {float:left; width:150px;}
#borde-inferior {background-image:url(objetosdos/borde-superior.png);background-repeat: no-repeat ;width:800px ; height: 12px}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: none;}
a:active {}
.ID{text-indent:55px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -10px;}
.ID1{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -10px;}
.ID2{text-indent:30px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;tmargin-top: -10px;}
.ID3{text-indent:45px;font-size:0.4cm;color:black;text-decoration:none;font-weight:0;word-spacing: 0mm; text-align:center;margin-top: -10px;}
.ID4{margin:40px 0px 40px 197px;}

Yanteh tu que piensas?

Gracias compañeros
atino · · Solicitar retirada
Ya lo solucione compañeros muchas gracias ahora abriré un nuevo tema para que me la critiquen un poco asi continuo
victor5atodogas · · Solicitar retirada
Por curiosidad, como solucionaste los fallos que tenias? Ya que acabao de leer la respuesta, entro en tu pagina y se ve bien!jeje

Un saludo.
atino · · Solicitar retirada
Buenas mucho me a costados perolo logre el problema estav en que al texto de los botoens tenia pusto <p> y se modificaba con el texto de los otros parrafos, tuve tambien que quitar el margin y padding y centrarlos y la parte de abajo a un video tambien tuve que centrarlo y se coloco bien.

lo que yo me pregunto es el tema de los margin y padding porque me descolocaban todo si solo tenia la funcion en un video?
victor5atodogas · · Solicitar retirada
porque quizas (sin darte cuenta) tenias puesto algun margin o padding al body o a alguna capa global, no obstante, me alegro de que se haya solucionado.

Un saludo.