Problema con el css de esta web

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%;
}

pzin · #2 (**permalink**) 14/03/2014, 06:21

Es el comportamiento natural de un div, ya que por defecto es un elemento de bloque y estos ocupan todos el ancho de su contenedor.

Lo que tendrías que hacer es flotar un elemento. Algo así te valdría:

Código CSS:

Ver original#menus  {
  float: left;
  width: 15%;
}
 
#bigfoto {
  overflow: hidden;
}

Luego tendrías que eliminar algunos anchos que tienes puestos al 15%, porque ahora ya tiene el contenedor ese ancho especificado y querrás que ocupen el total de ese contenedor.

Immodium · #3 (**permalink**) 15/03/2014, 03:49

a los divs mas grandes como el logo el menu y lo otro ponele float:left y despues que ocupen entre todos 100% por ejemplo el logo con 35% el menu con 20% y lo otro con 45% y fijate que el margen izquierdo y el derecho no aumenten el tamaño y si es necesario sacale un poco a los demas..

PD: no lei el css no ando con tiempo

CircuitoX · #4 (**permalink**) 18/03/2014, 09:28

Como te dijeron asignale un: float: left; si no funciona agregale float: left !important;