Foros del Web - Ver Mensaje Individual

mateovidal · #1 (**permalink**) 12/03/2014, 16:19

Hola a todos,
Tengo un problema con el css de esta web. Quiero que tenga el logo arriba la derecha y debajo un menú vertical y al lado de todo esto ocupando todo el alto quiero poner una imagen grande. Para hacer esto he creado un div donde están metidos el logo y el menú vertical, los cuales a su vez están metidos en divs. Hasta aquí todo bien. El problema llega cuando añado la imagen que me sale completamente descolocada porque, al parecer, el div del logo y el div del menú vertical tienen unos márgenes que ocupan todo el ancho de sus lineas por lo que la imagen se me baja. Gracias por vuestra ayuda
Os dejo el código:

Código HTML:

Ver original<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link href="imags/lookylittle1.ico" type="image/x-icon" rel="shortcut icon" />
<title>A different look to photography</title>
<link rel="stylesheet" type="text/css" href="fotostyle1.css" />
</head>
 
<body>
    <div id="container">
        <div id="menus">
        <div id="logo">
            <a href="looky.html"><img src="imags/logo.jpg" /></a>
        </div>
        <div id="sidemenu">
            <ul>
                <li>Inicio</li>
                <li>Fotos</li>
                <li>Quien Soy</li>
                <li>Citas</li>
            </ul>
        </div>
    </div>
        <div id="bigfoto">
            <img src="imags/IMG-20140311-WA0003.jpg" />
 
        </div>
 
    </div>
 
 
</html>

y el css:

Código CSS:

Ver originalbody {
    margin:0px 0px 0px 0px;
}
 
#logo {
    width:15%;
    margin-top:2%;
    margin-left:3%;
    overflow:hidden;
    margin-right:0px !important;
 
}
 
#menus {
    display:inline;
    overflow:hidden;
}
 
#logo > a >img {
    width:100%;
}
 
#sidemenu {
    width:15%;
    margin-left:2%;
    margin-right:0px;
 
}
ul {
    list-style-type:none;
    list-style-position:inside;
    padding:0px 0px 0px 0px;
    margin-left:3%;
    margin-top:7%;
}
ul > li{
    border-bottom:1px solid black;
    padding:2.25%;
    font-family:Raleway;
}
#bigfoto {
    width:42%;
    margin-left:2.5%;
    margin-left:25%;
    margin-right:0px !important;
 
}
#bigfoto > img {
    width:100%;
}