Autor Tema: [Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!  (Leído 1071 veces)

Desconectado soyyo

  • PHPerit@
  • *
  • Mensajes: 12
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« en: 13 de Junio de 2011, 20:38:40 pm »
Buenas!

¿Que tal estan amigos?

Necesitaba ayuda de ustedes! miren estoy programando mi pagina web de mi banda y necesito ayuda

en lo que es la maquetacion

Se ve en pantallas de distinta resolucion de manera distinta..y he probado de todo y no se que hacer..

bueno yo como es solo una pagina web de mi grupo no necesito meter php ni mysql ni nada..

Asi que simplemente meti javascript,css y html nada mas

Les dejo el codigo para que me ayuden y me digan que puedo hacer para que en todas las pantallas

con distinta resolucion se vea igual en todas!

Código: [Seleccionar]
<center>
<title>Secretcall - Website</title>
<body background=back1.jpg>
<link href="normalizar.css" rel="stylesheet" type="text/css" />





<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no,

resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>


<div align=left style='position:absolute;  bottom:0px; clear:both'><img width=80 style="border: 0px solid

; display: inline;" alt="contador secretcall"
src="http://contador-de-visitas.com/hit.php?id=878647&counter=37"><br /></div>



<div style='position:absolute; left:100px; top:60px; width:800px; margin:4px auto;'>
<img src=princi.jpg border=8  border=0 height=300 width=450>
</div>

<div style='position:Absolute; top:-140px; left:90px; width:800px; margin:4px auto; '>
<img src=secretcall.png  width=800 height=425>
</div>
<div id="preview" style='position:absolute; left:410px; top:450px; font-size:14px; width=400 margin:4px

auto; font-color:black;'><img src=entrada.png border=0 width=180 height=100></div>
<div id="preview1" style='position:absolute; left:410px; top:450px; font-size:14px; width=400 margin:4px

auto; font-color:black;'></div>
<div id="preview2" style='position:absolute; left:410px; top:450px; font-size:14px; width=400 margin:4px

auto; font-color:black;'></div>

<div style='position:Absolute; top:370px; left:330px; margin:4px auto;'>
<img src=bio.png width=110 height=60 onclick="document.getElementById('preview2').innerHTML = '';

document.getElementById('preview').innerHTML = '';  document.getElementById('preview1').innerHTML = '<img

src=bioinf.png width=200 height=1000>'"  onmouseover="this.src='bio2.png'"

onmouseout="this.src='bio.png'">
</div>

<div style='position:absolute; top:370px; left: 430px;  margin:4px auto;'>
<img src="lyrics.png"  width=110 height=60 onmouseover="this.src='lyrics2.png'"

onmouseout="this.src='lyrics.png'" onclick="document.getElementById('preview1').innerHTML = '';

document.getElementById('preview').innerHTML = ''; document.getElementById('preview2').innerHTML =

'<script>alert(`Mantenimiento`)'">
</div>

<div style='position:absolute; top:370px; left: 530px;  margin:4px auto;'>
<img src="contact.png" width=110 height=60 border=0 onmouseover="this.src='contact2.png'"

onmouseout="this.src='contact.png'">
</div>

<div style='position:absolute; top:160px; left:20px; margin:4px auto;'>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0

src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMDY2MzQ1ODgxMjUmcHQ9MTMwNjYzNDU5OTM

xMiZwPTI3MDgxJmQ9cHJvX3BsYXllcl9maXJzdF9nZW4mZz*xJm89/NTU*M2VhYWRjZDQ*NGFiZDkyMGJhNTljMTk5OWQ5OTMmb2Y9MA==

.gif" /><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="220" height="200"><param

name="movie" value="http://cache.reverbnation.com/widgets/swf/40/pro_widget.swf?

id=artist_1536074&posted_by=&skin_id=PWAS1008&font_color=606060&auto_play=true&shuffle=false"></param><par

am name="allowscriptaccess" value="always"></param><param name="allowNetworking"

value="all"></param><param name="allowfullscreen" value="true"></param><param name="wmode"

value="transparent"></param><param name="quality" value="best"></param><embed

src="http://cache.reverbnation.com/widgets/swf/40/pro_widget.swf?

id=artist_1536074&posted_by=&skin_id=PWAS1008&font_color=606060&auto_play=true&shuffle=false"

type="application/x-shockwave-flash" allowscriptaccess="always" allowNetworking="all"

allowfullscreen="true" wmode="transparent" quality="best" width="220" height="200" margin:4px

auto;></embed></object><br/><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0

src="http://www.reverbnation.com/widgets/trk/40/artist_1536074//t.gif" />
</div>


<!-- Twitter secretcall  --!>



<table><br><br><br>
<td style='position:Absolute; top:0px; left:30px; margin:4px auto;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="130" width="176" align=right>
 <br>

<param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
 

<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
  <param name="wmode"

value="transparent" />
  <param name="flashvars" value="color1=0&type=user&id=311692498" />
  <param

name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never"

allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="130" width="176" 

wmode="transparent" flashvars="color1=0&type=user&id=311692498" quality="high" />
</object></table></td><div style='position:absolute; top:0px; left:-50px; margin:4px auto;'>
<img src=secret_call.png border=0>
</div>

<!-- Twitter Manu yllesca --!>
<div style='position:absolute; top:70px; left:785px; margin:4px auto;'>
<img src="manuyllesca.png" border=0>
</div>
<table>
<td style='position:Absolute; top:100px; left:770px; margin:4px auto;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="140" width="176" align=right>
  <param

name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param

name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
  <param name="wmode"

value="transparent" />
  <param name="flashvars" value="color1=0&type=user&id=256398646" />
  <param

name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never"

allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="140" width="176" 

wmode="transparent" flashvars="color1=0&type=user&id=256398646" quality="high" />
</object></td>

<!-- Twitter alvarito pd: si lees esto es porque eres cotilla, pd. soy manu --!>

<div style='position:absolute; top:270px; left:785px; margin:4px auto;'>
<img src="alvarosecret.png" border=0>
</div>
<table>
<td style='position:Absolute; top:300px; left:770px; margin:4px auto;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="140" width="176" align=right>
  <param

name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param

name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
  <param name="wmode"

value="transparent" />
  <param name="flashvars" value="color1=0&type=user&id=195480107" />
  <param

name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never"

allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="140" width="176" 

wmode="transparent" flashvars="color1=0&type=user&id=195480107" quality="high" />
</object></td>


<div style='position:absolute; top:470px; left:785px; margin:4px auto;'>
<img src="mikelsecret.png" border=0>
</div>
<table>
<td style='position:Absolute; top:500px; left:770px; margin:4px auto;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="140" width="176" align=right>
  <param

name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param

name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
  <param name="wmode"

value="transparent" />
  <param name="flashvars" value="color1=0&type=user&id=207492301" />
  <param

name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never"

allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="140" width="176" 

wmode="transparent" flashvars="color1=0&type=user&id=207492301" quality="high" />
</object></td>


<div style='position:absolute; top:670px; left:785px; margin:4px auto;'>
<img src="rodrisecret.png" border=0>
</div>
<table>
<td style='position:Absolute; top:700px; left:770px; margin:4px auto;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="140" width="176" align=right>
  <param

name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param

name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
  <param name="wmode"

value="transparent" />
  <param name="flashvars" value="color1=0&type=user&id=207674844" />
  <param

name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never"

allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="140" width="176" 

wmode="transparent" flashvars="color1=0&type=user&id=207674844" quality="high" />
</object></td>


PD: Lo se , soy muy desordenado con mi code!

Bueno muchas gracias a todas esas ayudas que me brindan! =)

Comunidad PHPeros

[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« en: 13 de Junio de 2011, 20:38:40 pm »

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #1 en: 13 de Junio de 2011, 21:05:30 pm »
Nunca pero nunca trabajes con las propiedades top y left para hacer divs flotantes. Ejemplo, Puede que algunas resoluciones que tengan 800 de ancho el medio sea 400, pero para los que tienen 1200 o mas no es el punto medio, no se si me entiendes.

Saludos.
Twitter: @JoakoM010



Desconectado soyyo

  • PHPerit@
  • *
  • Mensajes: 12
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #2 en: 13 de Junio de 2011, 21:18:45 pm »
Perfectamente te entiendo!

Entonces que me recomiendas dime,dime! =)

PD: el resultado de lo que vez: www.secretcallmusic.com

ahi esta lo que estoy haciendo y en resoluciones como dices de 1200 se ve no de forma correcta porque

el centro no son los 400 medios,.. entiendo perfectamente

pero dime envez de left  y top que me recomiendas?

Desconectado -Pituko-

  • PHPero Experto
  • *****
  • Mensajes: 954
  • Karma: 20
  • Sexo: Masculino
  • ¡Hala Madrid!
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #3 en: 14 de Junio de 2011, 00:31:34 am »
Nunca pero nunca trabajes con las propiedades top y left para hacer divs flotantes. Ejemplo, Puede que algunas resoluciones que tengan 800 de ancho el medio sea 400, pero para los que tienen 1200 o mas no es el punto medio, no se si me entiendes.

Saludos.
La unica forma de confiar en left y top es cuando position tiene como valor relative y estas usando pixele
Perfectamente te entiendo!

Entonces que me recomiendas dime,dime! =)

PD: el resultado de lo que vez: www.secretcallmusic.com

ahi esta lo que estoy haciendo y en resoluciones como dices de 1200 se ve no de forma correcta porque

el centro no son los 400 medios,.. entiendo perfectamente

pero dime envez de left  y top que me recomiendas?
Puedes utilizar top y left pero no en porcentaje porque eso es lo que falla al cambiar de resolución.

Desconectado soyyo

  • PHPerit@
  • *
  • Mensajes: 12
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #4 en: 14 de Junio de 2011, 00:52:14 am »
Ok, entonces descargo left y top porque no uso relative sino absolute,

y como dices no uso en left y top en porcentajes sino en pixels..

"Puedes utilizar top y left pero no en porcentaje porque eso es lo que falla al cambiar de resolución."

Eso dijiste, quisiste decir que podia usarlo en porcentajes?

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #5 en: 14 de Junio de 2011, 04:01:49 am »
Nunca uses porcentajes (a menos de que tengas un div contenedor que los mantenga en un lugar...) La mejor forma de maquetar con css es usando pixeles con los atributos:

width
height
float:left;
float;right; etc... Por que no ves el tutorial que hay en el foro? lo realizo OmaarV. Esta bien explicado y no es tan dificil de entender...

Desconectado soyyo

  • PHPerit@
  • *
  • Mensajes: 12
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #6 en: 14 de Junio de 2011, 07:12:59 am »
Uhum, muchas gracias!

El tutorial de Omaarv esta muy bien!

Algun aporte o dato mas? gracias!

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #7 en: 17 de Junio de 2011, 07:20:08 am »
Una duda, mire tu pagina y todavía tienes el problema o ya se resolvió?

Desconectado soyyo

  • PHPerit@
  • *
  • Mensajes: 12
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #8 en: 17 de Junio de 2011, 12:05:46 pm »
Omar, si sigue el problema.. en pantallas superiores a 1024 :S

A muchos ordenadores como portatiles les pasa :S

y no mola nada..

Omar, vi tu tutorial pero te falta especificar mas.. en tu tutorial lo aplique todo pero falta que lo hagas mas largo y con mas materia..

:S


Intenta porfavor rellenarlo un poco mas tu tutorial o algo.. un saludo y haber quien me ayuda! =)

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:[Pagina web] Errores y consejos! Sobretodo ayuda en la maquetacion!
« Respuesta #9 en: 20 de Junio de 2011, 08:33:23 am »
Explica exactamente tu error porfavor, y dejame ver el tutorial que dices, por que no recuerdo nada del el xD