Fotos

Hola no se si me podreis ayudar o me llegareis a entender pero bueno voy a intentar explicarme bien.
Quiero poner en un apartado de mi web imagenes, y en vez de poner todas en grande, me gustaria hacer una especie de índice con miniatruras para que cada cual pinche en la que le interese y se haga grande.
Lo de que pinches y te mande a la foto grande creo que lo se hacer, pero a la hora de acer las miniaturas me gustaría hacer por ejemplo un cuadro de 4x4 y sin embargo me salen cada una en una linea distinta.
Puede que sea porque al principio puse display: block, pero no se
Bueno espero haberme explicado y a ver si me lo podeis solucionar.
Gracias de antemano
Hola
Muestranos tus codigos, para poder
ver donde está el error

saludos
como os mando los códigos?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>pasisajes de cillaperlata</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="plantilla.html">
[contenido no disponible]</div>
</a>
<div id="texto">Esto va mejorando</div>
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>Menu</h1>
  • INICIO
  • FIESTAS
    </div>
    <h1>PAISAJES</h1>


    [contenido no disponible][contenido no disponible][contenido no disponible]</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    el índice lo quiero poner ahi.
    la oja de estilo es la siguiente:

    * {margin:0px ; padding:0px ; border: 0px}
    h1 {font-size: 2em; color:purple; font-weight: bold ; text-decoration: underline ; text-align: center}
    body {text-align: center}
    #cabecera {background-color: pink; border-left: black 1px solid ; border-right: black 1px solid ;height:85px }
    #logotipo {background-color: white; width:280px; float:left}
    #publicidad {background-color: pink; width:518px; float:right;margin-top:25px}
    #navegacion {background-color: gray; border: black 1px solid }
    #contenido {background-color: orange ;border: 1px solid black}
    #contenido p {padding: 20px 15px 10px 10px; text-indent: 20px}
    #pie {background-color: brown; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow; width: 150px ; float:left;background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px}
    #menu li { list-style:none }
    #menu h1 {text-decoration:none; font-size:20px;background-image:url(objetos/menu-curva-superior-1.gif)}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left; margin:5px 15px 15px 5px }
    #menu li {list-style:none ; margin: 10px 8px 4px 6px}
    a {color: green; font-size:1.3em ; text-decoration: none; display:block }
    a:link {color: green; font-size:1.3em ; text-decoration: none}
    a:visited {color:red; front-size:1.2em; text-decoration: none}
    a:hover {color:red; front-size:2em; text-decoration: underline; background-color: green}
    a:active {color:red; front-size:2em; text-decoration: none}
    p {text-align: justify}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat; width:800px ; height: 12px; overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px; overflow: hidden }
    .centrado {text-align:center}
    #contenido p a {color: black; font-size:1em ; text-decoration: underline}
  • Hola

    pues si, el error está en el display:block

    pero si la eliminas, pues ya no tendrás ese efecto en el menú

    y me puse a buscar una forma de acomodarla jeje

    y mira lo que me he encontrado

    en la hoja de estilos agregas esto:


    a.foto {text-decoration: none; Display:inline}
    a.foto:link {text-decoration: none}
    a.foto:visited {text-decoration: none}
    a.foto:hover {text-decoration: underline;}
    a.foto:active {text-decoration: none}


    y en el documento html le pones esto

    [contenido no disponible][contenido no disponible][contenido no disponible]</p>



    Seguro hay mas formas de hacerlo, pero esto es lo que he encontrado

    checalo y me avisas si te funciona

    saludos
    muchisimas gracias, problema resuelto que haria yo sin esta página?
    Bueno que pregunta, pues nada, porque ni me imaginaba que una web se hiciera asi.
    Gracias otra vez y espero no tener mas problemas.
    Por cierto mi web es:
    http://cillaperlata.iespana.es