Foros del Web » Creando para Internet » CSS »

Buenas de vuelta...

 Estas en el tema de Buenas de vuelta... en el foro de CSS en Foros del Web. Para los que me siguen o nó, estoy haciendo un proyecto web personal, sin previos conocimientos de css. Ahora vengo antes uds. para haber si ...
  #1 (permalink)  
Antiguo 14/03/2011, 19:17
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Pregunta Buenas de vuelta...
Para los que me siguen o nó, estoy haciendo un proyecto web personal, sin previos conocimientos de css. Ahora vengo antes uds. para haber si pueden dar una mano con el tema (texto). Yo lo hice de esta forma:

este es el CSS de INDEX.CSS

#main {
background-color: #333333;
height: 1024px;
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#contenedor1 {
height: 230px;
width: 768px;
margin-bottom: 15px;
float: left;
}
#logo {
background-image: url(../../imagenes/index/logo1.png);
background-repeat: no-repeat;
height: 200px;
width: 768px;
float: left;
}

#mainmenu {
height: 30px;
width: 768px;
float: left;
}

#contenedor2 {
height: 600px;
width: 768px;
float: left;
}
#noticiasindex {
background-image: url(../../imagenes/index/contenidosnoticias.png);
background-repeat: no-repeat;
height: 400px;
width: 384px;
float: left;
}
#videosindex {
background-image: url(../../imagenes/index/contenidosvideos.png);
background-repeat: no-repeat;
float: right;
height: 400px;
width: 384px;
}
#fotosindex {
height: 200px;
width: 768px;
background-image: url(../../imagenes/index/contenidosfotos.png);
background-repeat: no-repeat;
float: left;
}
#contenedor3 {
height: 178px;
width: 768px;
background-color: #006666;
float: left;
}
#publicidad {
float: left;
height: 140px;
width: 768px;
}

#copyright {
background-color: #999999;
height: 40px;
width: 768px;
background-image: url(../../imagenes/index/copyright.png);
}
/*TEXTO QUE VA EN LA IMAGEN IZQUIERDA: ULTIMAS NOTICIAS */

.textoizq{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-left: 100px;
margin-top: 87px;
margin-bottom: 14px;

}
.textoizq2{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-top: 5px;
margin-left: 100px;
margin-bottom: 14px;
margin-right: 0px;

}
.textoizq3{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-top: 40px;
margin-left: 100px;
float: none;

}
/*TEXTO QUE VA EN LA IMAGEN DE LA DERECHA: ULTIMOS VIDEOS*/
.textoder{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-left: 100px;
margin-top: 87px;
margin-bottom: 14px;

}
.textoder2{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-top: 5px;
margin-left: 100px;
margin-bottom: 14px;
margin-right: 0px;

}
.textoder3{
font-family: "Tahoma", Arial, Impact;
font-size: 11px;
font-weight:bold;
color:#000000;
height: 80px;
width: 278px;
margin-top: 40px;
margin-left: 100px;
float: none;

}

================================================== =======

Como se puede ver aca eh definido .textizq, 2 y3 y lo mismo para textoder, 2 y3.
Si alguno de uds. puede aconsejarme de como definir mejor estas reglas, y para el texto termine en donde termine la caja de cada imagen (NOTICIAS y VIDEOS, porque solo va ahi el texto).
Si pueden explicarme como se definen, <p>, <span>.

Desde ya muchas gracias. A todos los que me han venido ayudando.
  #2 (permalink)  
Antiguo 14/03/2011, 19:22
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 3 meses
Puntos: 64
Respuesta: Buenas de vuelta...
me gustaria ver el html tambien, para ver como esta
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 14/03/2011, 19:45
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 22 años
Puntos: 11
Respuesta: Buenas de vuelta...
Antes de nada, recomendarte, que si vas a poner trozos de código CSS los metas dentro de las etiquetas [HIGHLIGHT="CSS"] y cierres el código con[/HIGHLIGHT] para mejor visualización y comprensión para todos en la página.

Respecto a <p> y <span> simplemente con:

Código CSS: 
Ver original
  1. p { contenido }
  2. span { contenido }

Tu otra pregunta no la comprendo bien, lo siento.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #4 (permalink)  
Antiguo 15/03/2011, 09:01
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
La página se puede ver en http://acceso-directo.net23.net

cual es la diferencia entre p y span; porque yo eh visto la siguiente expresión: <p span="" Texto </span></p>. Creo que era asi.

Cuando enter para empezar en la siguiente linea me deja un espacio de la ostia.
  #5 (permalink)  
Antiguo 15/03/2011, 09:14
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
<< 1 2 3 |4| >> como se hace una pÁgina con varias pÁginas. La idea la tengo.
  #6 (permalink)  
Antiguo 15/03/2011, 09:52
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 22 años
Puntos: 11
Respuesta: Buenas de vuelta...
<p> Es un párrafo con punto y aparte al terminar.
<span> Puedes darle estilo a la sección de un texto.

Por ejemplo para poner el número cuatro de los números que has puesto, en negrita, tendrías que poner por ejemplo:

Código HTML:
<p><<< 1 2 3 <span class="negrita">| 4 |</span> >>></p>
Lo que te mostraría algo así:

<<< 1 2 3 | 4 | >>>

Así, que si lo que quieres marcar un estilo en concreto a una parte del texto, podrías usar span, y crear un estilo.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #7 (permalink)  
Antiguo 15/03/2011, 10:37
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
En la seccion videos quiero hacer un menu como está pero al hacer click despliegue Vacaciones 2011. Tengo entendido que se hace con la etiqueta <span>. Desde ya gracias.


http://acceso-directo.net23.net - - - Voy resubiendo los archivos a medida que hago. Gracias
  #8 (permalink)  
Antiguo 15/03/2011, 11:08
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 22 años
Puntos: 11
Respuesta: Buenas de vuelta...
Lo que quieres es hacer que cada sección del menú se despliegue? no sería buena idea usar la función float?
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #9 (permalink)  
Antiguo 15/03/2011, 11:41
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Si que se despliegue. Usar la funcion float - - - Pero no tiene tres parametros left, right, inherit.
Última edición por jmb0286; 15/03/2011 a las 11:55
  #10 (permalink)  
Antiguo 25/03/2011, 16:28
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Hola de vuelta, si fijan en esta dirección eh colocado las cajas de texto. Pero tengo 2 problemas

1. Cuando quiero escribir sigue de largo, el cursor. Contenido Noticias. Link 1. (jkhdfjhsdfjkhsdjklflsfhlkjfhlkjsfhlskdfjhlsdjkfhl sdfhlksd) sigue de largo.
2. Cuando quiero dar un salto de linea se me val a coraca, el cursor.

Gracias. La página se ve ||| http://acceso-directo.net.23.net ||| Si me pueden ayudar o decirme porque pasa esto.
  #11 (permalink)  
Antiguo 25/03/2011, 21:45
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Capaz que es muy básico lo que pido. Pero me estanco, con este problema. Ayudaaaaaaaaa.
  #12 (permalink)  
Antiguo 25/03/2011, 21:46
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Código CSS: 
Ver original
  1. #main {
  2.     background-color: #333333;
  3.     height: 845px;
  4.     width: 768px;
  5.     margin-top: 0px;
  6.     margin-right: auto;
  7.     margin-bottom: 0px;
  8.     margin-left: auto;
  9. }
  10. #contenedor1 {
  11.     height: 230px;
  12.     width: 768px;
  13.     margin-bottom: 15px;
  14.     float: left;
  15. }
  16. #logo {
  17.     background-image: url(../../imagenes/index/logo1.png);
  18.     background-repeat: no-repeat;
  19.     height: 200px;
  20.     width: 768px;
  21.     float: left;
  22. }
  23.  
  24. #mainmenu {
  25.     height: 30px;
  26.     width: 768px;
  27.     float: left;
  28. }
  29.  
  30. #contenedor2 {
  31.     width: 768px;
  32.     float: left;
  33.     height: 600px;
  34. }
  35. #noticiasindex {
  36.     background-image: url(../../imagenes/index/contenidosnoticias.png);
  37.     background-repeat: no-repeat;
  38.     height: 400px;
  39.     width: 384px;
  40.     float: left;
  41. }
  42. #videosindex {
  43.     background-image: url(../../imagenes/index/contenidosvideos.png);
  44.     background-repeat: no-repeat;
  45.     float: right;
  46.     height: 400px;
  47.     width: 384px;
  48. }
  49. #fotosindex {
  50.     height: 200px;
  51.     width: 768px;
  52.     background-image: url(../../imagenes/index/contenidosfotos.png);
  53.     background-repeat: no-repeat;
  54.     float: left;
  55. }
  56. #contenedor3 {
  57.     height: 40px;
  58.     width: 768px;
  59.     background-color: #80A7A8;
  60.     float: left;
  61. }
  62.  
  63. #copyright {
  64.     background-color: #999999;
  65.     height: 40px;
  66.     width: 768px;
  67.     background-image: url(../../imagenes/index/copyright.png);
  68. }
  69. /*TEXTO QUE VA EN LA IMAGEN IZQUIERDA: ULTIMAS NOTICIAS   */
  70.  
  71. .textoizq{
  72.     font-family: "Tahoma", Arial, Impact;
  73.     font-size: 11px;
  74.     font-weight:bold;
  75.     color:#000000;
  76.     height: 80px;
  77.     width: 278px;
  78.     margin-left: 100px;
  79.     background-color: #09F;
  80.     margin-top: 88px;
  81.     margin-bottom: -73px;
  82.     text-align: left;
  83.     display: block;
  84.     font-style: normal;
  85.     clear: both;
  86.     padding: 0px;
  87.     
  88.     
  89. }
  90. .textoder{
  91.     font-family: "Tahoma", Arial, Impact;
  92.     font-size: 11px;
  93.     font-weight:bold;
  94.     color:#000000;
  95.     height: 80px;
  96.     width: 278px;
  97.     margin-left: 100px;
  98.     background-color: #09C;
  99.     margin-top: 88px;
  100.     margin-bottom: -73px;
  101.     clear: both;
  102.     display: block;
  103.     
  104.     
  105. }
  #13 (permalink)  
Antiguo 26/03/2011, 17:03
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Please, nadie me va a responder. Please help me.
  #14 (permalink)  
Antiguo 26/03/2011, 20:12
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Buscando y buscando. Encontré esto y esta forma de definirlo.

Código CSS: 
Ver original
  1. /*TEXTO QUE VA EN LA IMAGEN IZQUIERDA: ULTIMAS NOTICIAS; IMAGEN DERECHA: ULTIMOS VIDEOS   */ parte del css index
  2.  
  3. .textoizq{
  4.     font-family: "Tahoma", Arial, Impact;
  5.     font-size: 11px;
  6.     font-weight:bold;
  7.     color:#000000;
  8.     height: 80px;
  9.     width: 278px;
  10.     margin-left: 100px;
  11.     background-color: #09F;
  12.     margin-top: 88px;
  13.     margin-bottom: -73px;
  14.     text-align: left;
  15. }
  16. .textoder{
  17.     color:#000000;
  18.     height: 80px;
  19.     width: 278px;
  20.     margin-left: 100px;
  21.     background-color: #09C;
  22.     margin-top: 88px;
  23.     margin-bottom: -73px;
  24.     clear: both;
  25.     display: block;
  26. }
  27.  
  28. br{
  29.     font-family: "Tahoma", Arial, Impact;
  30.     font-size: 11px;
  31.     font-weight:bold;
  32.     color:#000000;
  33. }
  34. en el html
  35. <p br class="textoizq">Contenido Noticias. Link 1.</p>

Entonces lo que me hace sigo hasta donde me de el renglón cuando baja como la otra linea sigue de largo aprieto la flecha abajo y me hace un enter.


Está bien aplicado se hace así.

http://acceso-directo.net23.net
  #15 (permalink)  
Antiguo 26/03/2011, 20:17
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Porfavor alguna ayuda de como solucionar este problema.
  #16 (permalink)  
Antiguo 28/03/2011, 18:02
jmb0286
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Buenas de vuelta...
Gracias gente, muchas gracias.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:43.