Foros del Web » Creando para Internet » CSS »

Mi primer diseño

Estas en el tema de Mi primer diseño en el foro de CSS en Foros del Web. Hola a todos....soy nuevo aqui y quiero saludarlos. hace aprox. un año empece desde cero(no tenia ni idea de programacion y diseño) a construir mi ...
  #1 (permalink)  
Antiguo 21/08/2011, 11:31
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Mi primer diseño

Hola a todos....soy nuevo aqui y quiero saludarlos.
hace aprox. un año empece desde cero(no tenia ni idea de programacion y diseño) a construir mi propia pagina web y he de decir que con aprendizaje de HTML,javascript y trabajo actualmente la tengo bastante avanzada en cuanto al diseño(85%),pero todavia tengo muchas dudas y una es referente a los estilos CSS.
La pagina esta basada en tablas HTML ya que son galerias de fotos y mi hoja de estilos externa(que creo que es mejor que incrustada en el documento) es la siguiente:

a:link
{color:#0000ff;
text-decoration:none;}
a:visited
{ color:#9900cc ;
text-decoration:none;}
a:hover
{color:#ffffff;}
body
{font-family:arial;
margin-top: 15px;
margin-bottom: 15px;
margin-left:5px;
margin-right:5px ;
color:#000000;}
table
{ border-left-color: #cc0000;
border-right-color: #cc0000;
border-top-color: #66ffcc ;
border-bottom-color: #66ffcc;}

el problema es que en table los bordes por ej. left y right me salen con distinto color pese a ser el mismo y lo mismo me pasa con los otros.
puede ser por que no tengo todavia enlazada la hoja de estilos mediante el atributo LINK en la cabezera?.....otro motivo?

bueno y despues del rollo salu2
  #2 (permalink)  
Antiguo 21/08/2011, 14:35
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Mi primer diseño

en la medida de los posible es recomendable no usar tablas para maquetar. cuanto mas que dices que estás creando una galería de imágenes. en su lugar usa div. llegado a este punto, siempre se ha de declarar el border-style antes de usar border-xxx-color ya que ha de tener borde antes de poder cambiarle el color
  #3 (permalink)  
Antiguo 21/08/2011, 16:22
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

en realidad la pagina la componen 13 galerias de imagenes en miniatura,12 de ellas iguales y creadas mediante tablas HTML, por que no es conveniente hacer las galerias asi?. muchas paginas estan creadas mediante anidamiento de tablas.

las galerias estan formadas por anidamiento de tablas con distinto grosor de borde,por lo que en los estilos no puedo poner un grosor estandar de borde (corrijeme si me equivoco).
  #4 (permalink)  
Antiguo 21/08/2011, 17:20
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 6 años, 1 mes
Puntos: 11
Respuesta: Mi primer diseño

No es aconsejable hacerlo asi, justamente por lo que decis, los problemas que tenes con los bordes, y por muchisimas razones mas, usa divs, que muchas paginas esten hechas con tablas no quiere decir que este bien, tampoco que este mal, lo que si es recomendable siempre maquetar con divs no con tablas.
  #5 (permalink)  
Antiguo 22/08/2011, 04:51
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

Cita:
Iniciado por maximilianojcelis Ver Mensaje
lo que si es recomendable siempre maquetar con divs no con tablas.
te refieres al uso de capas y no de tablas?....si es asi,para que me queden las galerias como las tengo ahora,tendre que crear una capa por cada miniatura, no?

otra cosa al ser galerias formadas por capas y todas iguales(excepto su posicionamiento en pantalla), puedo incluir un estilo general para todas ellas en la hoja de estilos?.
  #6 (permalink)  
Antiguo 22/08/2011, 05:13
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: Mi primer diseño

Lo que podrias hacer, usando capas claro... es, crear un capa general y dentro colocar las demas capas imagenes.

Algo asi.
Código HTML:
Ver original
  1. <div id="galery">
  2. <div class="imagen1">imagen 1</div>
  3. <div class="imagen2">imagen 2</div>
  4. <div class="imagen3">imagen 2</div>
  5. </div>


Y en la hoja de estilos crear los estilos para las capas imagenes de la siguiente forma...
Código CSS:
Ver original
  1. #galery div{width: 200px; height: 100px;float: left;}
Con esto llamas a los DIV que tienes dentro de la galery y le asignas sus estilos.

Y luego para cada imagen...
Código CSS:
Ver original
  1. .imagen{background-color: #fff;}
  2. .imagen2{background-color: #000;}
  3. .imagen3{background-color: #333;}

Asi nunca te perderás a la hora de modificar los estilos para cada capa imagen, ya que tendrás sus estilos generales dentro de la capa padre #galery.

Espero haberme explicado.
Saludos
  #7 (permalink)  
Antiguo 22/08/2011, 12:54
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

creo que te entendi....entonces como son trece galerias con 15 imagenes cada una,tendre que hacer trece capas generales y en cada una de ellas colocar las 15 capas imagen o una general para las trece y que afecte solo al BODY?. en cuanto al posicinamiento sera para cada capa general distinto e independiente...no?.

Última edición por joseka66; 22/08/2011 a las 13:13
  #8 (permalink)  
Antiguo 22/08/2011, 14:25
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Mi primer diseño

mejor así
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor1{
width: 900px;
margin: auto;
background: #fe0;
padding: 6px 6px 0 6px;
overflow: hidden;
}


#contenedor2{
width: 1146px;
}


#contenedor2 > div {
background: #cacaca;
width: 140px;
height: 105px;
float: left;
margin-right: 237px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div id="contenedor1" >
<div id="contenedor2" >

<div>FOTO1</div>
<div>FOTO2</div>
<div>FOTO3</div>
<div>FOTO4</div>
<div>FOTO5</div>
<div>FOTO6</div>
<div>FOTO7</div>
<div>FOTO8</div>

</div>
</div>
</body>
</html>
  #9 (permalink)  
Antiguo 23/08/2011, 05:28
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

bueno,entonces hare las galerias con divs....ya os ire comentando las posibles dudas que me surjan (espero que pocas).
  #10 (permalink)  
Antiguo 24/08/2011, 09:14
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

quiero que me queden las galerias con divs en la misma posicion que las tengo ahora con tablas....tengo que saber las cordenadas de cada una de las tablas,para que me queden exactamente igual?...
  #11 (permalink)  
Antiguo 24/08/2011, 10:38
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: Mi primer diseño

Nose como lo tendrás con tablas pero con los DIV puedes posicionarlos perfectamente con el ejemplo que te dejo IsaBelM.

Si te refieres al espacio que hay entre los div, bajale los pixeles a los margenes que deja,
Cita:
margin-right: 237px;

Saludos
  #12 (permalink)  
Antiguo 24/08/2011, 12:05
 
Fecha de Ingreso: julio-2006
Ubicación: sevilla
Mensajes: 251
Antigüedad: 10 años, 5 meses
Puntos: 5
Respuesta: Mi primer diseño

Hola

Sobre la cuestion de no usar tablas para maquetar es porque las tablas solo se deben de usar para mostrar datos tabulados, ya que esa es su finalidad, es decir las tablas se usan para mostrar datos como si fuera una hoja de excel.

Los div se emplean para estructurar el diseño de tu web para ver ejemplos tienes varios link al principio del foro.

Es normal que te iniciaras con tablas ya que mucho malos tutoriales que andan por internet las usan te recomiendo busques tutoriales de xhtml y css que aprenderas del correcto uso de las etiquetas y como maquetar, diseñar tanto semantica como visualmente tu web.
  #13 (permalink)  
Antiguo 24/08/2011, 15:25
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

Cita:
Iniciado por Batan Ver Mensaje
Nose como lo tendrás con tablas pero con los DIV puedes posicionarlos perfectamente con el ejemplo que te dejo IsaBelM.




Saludos
estoy haciendo pruebas de posicionamiento de las galerias y hay algo que debo hacer mal, porque las imagenes me salen continuas, pero en vertical y no en horizontal.
  #14 (permalink)  
Antiguo 24/08/2011, 15:28
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

Cita:
Iniciado por nevergame Ver Mensaje
Es normal que te iniciaras con tablas ya que mucho malos tutoriales que andan por internet las usan te recomiendo busques tutoriales de xhtml y css que aprenderas del correcto uso de las etiquetas y como maquetar, diseñar tanto semantica como visualmente tu web.
cuanta razon tienes....los tutoriales que he visto aconsejan el uso de tablas para diseñar paginas...debido a su facilidad y asi es como he creado mi web, pero con la ayuda de este foro la estoy cambiando.

saludos
  #15 (permalink)  
Antiguo 24/08/2011, 15:55
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: Mi primer diseño

Cita:
estoy haciendo pruebas de posicionamiento de las galerias y hay algo que debo hacer mal, porque las imagenes me salen continuas, pero en vertical y no en horizontal.
Puede que estes asignando valores de float: left; esto hará que todas las imagenes se alineen a la izquierda dentro de su contenedor, posicionandolas horizontalmente.
Pon tu código tal y como estas haciendolo para revisarlo.

Saludos
  #16 (permalink)  
Antiguo 25/08/2011, 23:41
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

cambiando atributos y demas, voy dando con la clave.....

gracias por la ayuda.

salu2.
  #17 (permalink)  
Antiguo 26/08/2011, 16:37
Avatar de joseka66  
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Mi primer diseño

batan..te pongo el codigo que llevo hasta ahora,para comentarte el problema que tengo.

CODIGO CSS:
<head>
<style type="text/css">
#contenedor1{
position:absolute;
width: 900px;
float: left;
}
#contenedor2{
width: 900px;
}
#contenedor2 > div {
width: 150px;
height: 220px;
float: left;
}
#contenedor3{
width: 900px;
}
#contenedor3 > div {
width: 150px;
height: 220px;
float: left;
}
</style>


</head>
CODIGO HTML
<body background="img.f/fondoweb.gif " >
<div id="contenedor1" >
<div id="contenedor3" >

<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM759 (111K)" src="PAGINASWEB/MET-ART/FOTOS%20ANCHAS/MET-ART_ _ 0551.jpg" height="220" width="300" border="0"/></div></div>
<div id="contenedor2" >
<div><img alt="CDM759 (111K)" src="PAGINASWEB/MET-ART/FOTOS%20ANCHAS/MET-ART_ _ 0551.jpg" height="220" width="300" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>
<div><img alt="CDM117 (131K)" src="PAGINASWEB/MET-ART/FOTOS%20ALTAS/met-art 0077.jpg" height="220" width="150" border="0"/></div>

</div>
</div>
</body>
</html>

la primera galeria me queda bien, pero en la segunda la foto que ocupa 300px y que tienes que ser la primera me ocupa la mitad con el consiguiente espacio al final.

se pueden combinar en una pagina tablas y divs?

Última edición por joseka66; 27/08/2011 a las 05:39

Etiquetas: diseño, html, primer
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




La zona horaria es GMT -6. Ahora son las 00:37.