Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Puntoinfinito en 28 Julio 2012, 23:23 pm



Título: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 28 Julio 2012, 23:23 pm
Buenas a tod@s.

Bueno veréis, quiero hacer en mi web un diseño de margenes con photoshop y añadirlo a mi web de fondo con CSS. Y luego añadirle margenes al texto también con CSS... La cosa esta en que depende el tamaño del monitor que visite la web, porque se le repetirá el fondo y quedara mal, y el texto, también se le ajustara, por lo que quedara desconfigurado.

Los códigos que añadiría, serian los siguientes;

De fondo:
Código
  1. <body background="fondo" bgproperties="fixed">

Y de ajustes de margen:
Código
  1. .p { margin-top:10px ; margin-bottom:10px; margin-left:10px;
  2. margin-right:10px;}

Y luego añadirlo a cada texto, no se si se entenderá, espero que si, cualquier cosa decírmelo.

Saludos  ;-)


Título: Re: Margenes adaptables al monitor
Publicado por: robertito_prado en 29 Julio 2012, 16:00 pm
No entendí muy bien lo que quieres hacer pero puedes simplificar esto:

.p { margin-top:10px ; margin-bottom:10px; margin-left:10px;
margin-right:10px;}

y dejarlo así, ya que todos los margenes son 10 px:

.p { margin:10px;}

Saludos!


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 29 Julio 2012, 16:31 pm
Gracias, pero eso no es lo que necesito. Lo más importante es el fondo, este esta estático y tiene un fondo más o menos así; (http://img718.imageshack.us/img718/1812/web1i.jpg) (http://imageshack.us/photo/my-images/718/web1i.jpg/)

Dentro de lo rojo sería de un color diferente al blanco, allí entraría el texto, y lo blanco es el margen, donde no va nada. Lo que me refiero, es que si el monitor que lo visita es grande el fondo se repetirá y quedara mal con las letras des-configuradas, saliendo-se del marco y etc.

Espero que quede más claro. Un ejemplo de lo que digo, seria esta web: http://www.comocreartuweb.com/
Sea como sea el monitor, el texto siempre esta dentro de la zona donde ha de estar, y la imagen de fondo se estira o se hace corta, para que todo quede bien...

Eso es lo que quiero.

Saludos


Título: Re: Margenes adaptables al monitor
Publicado por: Spider-Net en 29 Julio 2012, 17:37 pm
Código
  1. body{
  2.    background: repeat-y center url(tuimagen);
  3. }


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 29 Julio 2012, 22:51 pm
Dentro de etiqueta body no chuta...


Título: Re: Margenes adaptables al monitor
Publicado por: #!drvy en 29 Julio 2012, 22:59 pm
Podrías dar el código css + html que usas ?

Debería "chutarte" perfectamente xD

Saludos


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 29 Julio 2012, 23:02 pm
www.infiniter.vacau.com

Ahí esta todo el codec que implemento


Título: Re: Margenes adaptables al monitor
Publicado por: Spider-Net en 29 Julio 2012, 23:06 pm
Me recuerda a mi primera web en Geocities xD. Y debería "chutarte" como tú dices, simplemente copiando lo que te he puesto dentro de las etiquetas <style></style>


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 29 Julio 2012, 23:15 pm
Jaja, es mi primera web, pero esta, echa manualmente xDD

Con http://htmledit.squarefree.com/ no me da buena respuesta...

Saluuudos  ;-)


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 29 Julio 2012, 23:17 pm
Que tonto soy... claro, no es imagen del hosting


Título: Re: Margenes adaptables al monitor
Publicado por: Spider-Net en 29 Julio 2012, 23:24 pm
No uses esa ***** para hacer tu web xD. Antes que usar eso puedes usar el notepad++. Y si quieres ayudas para auto-completar y para el diseño usa DreamWeaver.

Saludos.


Título: Re: Margenes adaptables al monitor
Publicado por: robertito_prado en 29 Julio 2012, 23:55 pm
Gracias, pero eso no es lo que necesito. Lo más importante es el fondo, este esta estático y tiene un fondo más o menos así; (http://img718.imageshack.us/img718/1812/web1i.jpg) (http://imageshack.us/photo/my-images/718/web1i.jpg/)

Dentro de lo rojo sería de un color diferente al blanco, allí entraría el texto, y lo blanco es el margen, donde no va nada. Lo que me refiero, es que si el monitor que lo visita es grande el fondo se repetirá y quedara mal con las letras des-configuradas, saliendo-se del marco y etc.

Espero que quede más claro. Un ejemplo de lo que digo, seria esta web: http://www.comocreartuweb.com/
Sea como sea el monitor, el texto siempre esta dentro de la zona donde ha de estar, y la imagen de fondo se estira o se hace corta, para que todo quede bien...

Eso es lo que quiero.

Saludos

Vamos a ver, tu como le estas dando las medidas?
Con pixeles o con porcentajes?
Si se lo das con pixeles, el tamaño no variara de un monitor a otro. Si se lo das con porcentajes, te cojera el porcentaje de la pantalla... me explico?


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 30 Julio 2012, 11:31 am
No uses esa ***** para hacer tu web xD.

Nono, ¡un cojon hago con eso mi web! Escribo el código en gedit, eso es solo para probar cosas que aprendo...
Saludos


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 30 Julio 2012, 11:32 am
Vamos a ver, tu como le estas dando las medidas?
Con pixeles o con porcentajes?

Lo hago con pixels :P


Título: Re: Margenes adaptables al monitor
Publicado por: robertito_prado en 30 Julio 2012, 13:21 pm
Pues por lo he que he entendido, tienes que darle el tamaño al div "container" con porcentajes, para que si pones letras o lo que sea dentro de el, y lo miras con una pantalla mayor, se amplie el div tambien y no se salgan las letras.
Saludos!


Título: Re: Margenes adaptables al monitor
Publicado por: Spider-Net en 30 Julio 2012, 15:17 pm
No, el fondo tiene un tamaño fijo y no debe repetirse horizontalmente, para eso se usa repeat-y, para que solo se repita de forma vertical y no de forma horizontal. Se usa center para que el fondo quede centrado al centro de la pantalla (tenga el tamaño que tenga). Por lo tanto el div container debe tener un tamaño fijo en píxeles, que debe ser aproximadamente el tamaño de la zona en la que él quiere que aparezca el texto.


Título: Re: Margenes adaptables al monitor
Publicado por: robertito_prado en 30 Julio 2012, 15:34 pm
Ya, pero si el div container tiene un tamaño fijo en pixeles, se mostrará siempre igual, sin adaptarse al tamaño de la pantalla... Y eso es precisamente lo que no quiere el creo yo...
Saludos!


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 30 Julio 2012, 15:44 pm
Entonces, este no sirve.... ;
Código
  1. body{
  2.    background: repeat-y center url(tuimagen);
  3. }


Título: Re: Margenes adaptables al monitor
Publicado por: Spider-Net en 30 Julio 2012, 16:17 pm
A ver, que yo sepa lo que tiene que adaptarse es el fondo, no el container. Y el código que te puse funciona perfectamente, no es más fácil que lo pruebes en local y veas que funciona tío?

http://rubenban.es/elhacker.net/

A ver si así dejáis de ser tan tercos.. xD


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 30 Julio 2012, 16:27 pm
Sí, funciona a la perfección, lo probé en local. Lo que digo es esto.

Imaginemos que tengo un fondo como el ejemplo que he puesto. Y lo añado mediante esto código:

Código
  1.  
  2. <style>
  3. body{
  4.    background: repeat-y center url(tuimagen);
  5. }
  6. </style>
  7. ...

Y luego, pongo un tipo de letra con los margenes añadidos:

Código
  1. <style>
  2. .margen { margin:10px;}
  3. [code]
  4.  
  5. Y teóricamente ahora esto queda todo bien en mi ordenador, es decir el texto queda dentro. Pero eso a mi pantalla. ¿Pero luego, depende del monitor quedaría o no quedaría cuadrado? Es que no me lo habéis dejado claro xD
  6.  
  7. Saludos expertos CSSEROS
[/code]


Título: Re: Margenes adaptables al monitor
Publicado por: Puntoinfinito en 30 Julio 2012, 16:29 pm
Oh, perfecto, acabo de ver el link y se me han abierto los ojos lelelele

Bueno voy a ver que tal, cualquier cosa, informo!!

Saludos