Mi primer diseño

joseka66 · #1 (**permalink**) 21/08/2011, 10:31

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

IsaBelM · #2 (**permalink**) 21/08/2011, 13:35

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

joseka66 · #3 (**permalink**) 21/08/2011, 15:22

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).

maximilianojcelis · #4 (**permalink**) 21/08/2011, 16:20

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.

joseka66 · #5 (**permalink**) 22/08/2011, 03:51

Cita:

Iniciado por maximilianojcelis

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?.

Batan · #6 (**permalink**) 22/08/2011, 04:13

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<div id="galery">
<div class="imagen1">imagen 1</div>
<div class="imagen2">imagen 2</div>
<div class="imagen3">imagen 2</div>
</div>

Y en la hoja de estilos crear los estilos para las capas imagenes de la siguiente forma...

Código CSS:

Ver original#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.imagen{background-color: #fff;}
.imagen2{background-color: #000;}
.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

joseka66 · #7 (**permalink**) 22/08/2011, 11:54

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?.

IsaBelM · #8 (**permalink**) 22/08/2011, 13:25

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>

joseka66 · #9 (**permalink**) 23/08/2011, 04:28

bueno,entonces hare las galerias con divs....ya os ire comentando las posibles dudas que me surjan (espero que pocas).

joseka66 · #10 (**permalink**) 24/08/2011, 08:14

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?...

Batan · #11 (**permalink**) 24/08/2011, 09:38

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

nevergame · #12 (**permalink**) 24/08/2011, 11:05

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.

joseka66 · #13 (**permalink**) 24/08/2011, 14:25

Cita:

Iniciado por Batan

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.

joseka66 · #14 (**permalink**) 24/08/2011, 14:28

Cita:

Iniciado por nevergame

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

Batan · #15 (**permalink**) 24/08/2011, 14:55

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

joseka66 · #16 (**permalink**) 25/08/2011, 22:41

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

gracias por la ayuda.

salu2.

joseka66 · #17 (**permalink**) 26/08/2011, 15:37

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?