Sobreponer imagen

mblascog · #1 (**permalink**) 17/04/2014, 09:35

Buenas,
Estoy empezando con Response Web Design y tengo una duda de CCS.
El diseño para pantalla de pc es el siguiente:

Y por media query, me gustaría que cuando la resolución fuera de máximo de ancho 320 fuera así, es decir, apareciera un icono para desplegar menú:

El código HTML para la cabecera es el siguiente:

Código HTML:

Ver original<body>
    <section id="contenidor">
        <header>
            <div id="logo">
                <img src="logo.png"/>
            </div>
            <div id="titol">
                <div id="linia3">Pernil dessossats Sabadell, S.C.P.</div>
                <div id="linia1">SERVEI DE DESOSSAR</div>
                <div id="linia2">PERNILS I ESPATLLES</div>
                <div id="linia4">Antonio Domínguez García</div>
            </div>
            <div id="carousel">
                <img src="logo.png"/>
            </div>
        </header>

Y el código CSS, que afecta la parte del título, es el siguiente:

Código CSS:

Ver original#titol{
    margin:0;
    padding:0;
    float:left;
    background-color:lightgray;
    width:80%;
    text-align:center;
    min-width:320px;
}

Dónde creo que debo incluir el código para que se visualize el icono, creo que sería aquí:

Código CSS:

Ver original@media screen and (max-width:320px) {
    body {font-size:0.7em;}
}

El problema que se me plantea es que las lineas del título están centradas relativamente. Si quiero añadir el icono a la izquierda, no sé, quizá esté bloqueda, pero no veo la manera.

Alguna sugerencia. Muchas gracias

pzin · #2 (**permalink**) 18/04/2014, 10:58

Pues lo más fácil es ponerle una posición relativa a header y después una posición absoluta al icono, y ya lo colocas donde quieras con top, right, bottom y left.

mblascog · #3 (**permalink**) 18/04/2014, 11:57

Buenas,
Gracias por responder. Lo he solucionado de la siguiente forma:

Código CSS:

Ver original#menu {
    position:absolute;
    left:10px;
    top:47px;
    z-index:2;
}

Código HTML:

Ver original<div id="titol">
                <span id="linia3">Pernil dessossats Sabadell, S.C.P.<br/></span>
                <span id="linia1">SERVEI DE DESOSSAR<br/></span>
                <span id="linia2">PERNILS I ESPATLLES<br/></span>
                <span id="linia4">Antonio Domínguez García<br/></span>
                <div id=menu><img src="menu.png" onclick="javascript:MenuVisible()"/></div>
            </div>

Aunque no estoy segura que sea lo correcto. Para conseguir un diseño adaptable, lo recomendable es indicar porcentages y no píxeles.

Gracias.

pzin · #4 (**permalink**) 18/04/2014, 11:58

Cita:

Iniciado por mblascog

Aunque no estoy segura que sea lo correcto. Para conseguir un diseño adaptable, lo recomendable es indicar porcentages y no píxeles.

Bueno, pero eso es para cuestiones estructurales, no para situar un elemento que no forma parte de la estructura general.

mblascog · #5 (**permalink**) 19/04/2014, 12:00

Buenas Pzin,
No sé si acabo de entender tu respuesta. El elemento que no forma parte de la estructura general, entiendo que te refieres al botón de menú.
Es cierto, pero cuando aparece el botón, es porqué sustituye la barra de navegación y aprovecho la parte del título.
Si hay una mejor forma de hacerlo, te agradeceré si puedes darme alguna pista.
Gracias.