1

Buenas, necesito orientación para hacer que una galería de Flickr y una mapa de Google Maps encajen en una página.

Necesito que la mitad izquierda de la página muestre la galería y la mitad derecha el mapa de Google Maps.

El código HTML que estoy usando el siguiente:

    <title>Search results</title>

<fieldset id="googlemaps">
    <legend>
        Google Maps search for the location
        <c:out value="${param.searchQuery}" />
    </legend>


    <div id="map"></div>
    <script>
  function initMap() {
    var uluru = {lat: ${lat}, lng: ${lng}};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMPX-BlAy9WQULw6ghUPdinLeGACrjA70&callback=initMap">
</script>


</fieldset>

<fieldset id="flickr">
    <legend>
        Flickr search for the location
        <c:out value="${param.searchQuery}" />
    </legend>

    <c:forEach items="${requestScope.photos.photo}" var="photo">
        <img
            src='http://farm<c:out value="${photo.farm}"/>.staticflickr.com/<c:out value="${photo.server}"/>/<c:out value="${photo.id}"/>_<c:out value="${photo.secret}"/>.jpg' />
        <br />
        <form action="/facebookPostCreation" method="post">


            <textarea hidden="" name="message">I just liked a Flickr photo via Project TOROID. See it on http://farm<c:out
                    value="${photo.farm}" />.staticflickr.com/<c:out
                    value="${photo.server}" />/<c:out value="${photo.id}" />_<c:out
                    value="${photo.secret}" />.jpg</textarea>
            <br>
            <div class="bottom_links">
                <button type="submit" class="button">Post in Facebook</button>
                <button type="button"
                    onClick="javascript:window.location.href='index.html'"
                    class="button">Cancel</button>
            </div>
        </form>
    </c:forEach>
</fieldset>

2 respuestas 2

0

Es fácil, te recomiendo tomar este tutorial de flexbox => Guide to Flexbox

En realidad te recomiendo esta página Web como una fuente muy buena de aprendizaje CSS que te va a sacar de mas de un apuro, pero ahora vamos con tu problema.

Lo primero de todo es crear un div que usaremos como contenedor principal que encapsulara todo el código html que has puesto, le puedes poner el nombre de clase que quieras para acceder a el mediante CSS, yo le puse "flexbox" (que original) y dentro de el crear dos divs mas que representaran cada una de las columnas, donde cada uno encapsula tus etiquetas fieldset (es decir, uno encapsulará tu galería Flicker y el otro tu Mapa)

Lo he probado en JSBIN.COM y me funciona correctamente en tu código.

.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}

.flexbox > div {
width: 50%;
padding: 10px;
}

.flexbox > div:first-child {
margin-right: 20px;
}

Como han respondido mas arriba, un framework como Bootstrap, Foundation, Materialize... pueden ayudarte a maquetar los elementos de tu página web muy facil con sus sistemas de grillas los cuales son todos muy parecidos (por no decir los mismos)

¡Un saludo!

-1

Puedes utilizar bootstrap, así no sólo logras lo que quieres sino que también lo harás responsive y se verá bien en cualquier dispositivo y al div de la galería le das 6 columnas y al div donde está el mapa le das 6 columnas también

<div class="row">
<div id="galería" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      ....
</div>
<div id="mapa" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      ....
</div>
</div>

En la página de bootstrap hay mucho material introductorio que te será útil. Te dejo el Link: http://www.getbootstrap.com

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.