Problems with Width

Question

Problems with Width

Navigation

#1 by (4 votes)

1

Hello, I have a problem with my project, at the top of my site I want a picture and a blue block, as shown below, top http://www.mediafire.com/convkey/9b19/xrewbegj44ce1e6zg.jpg

Both are inside a div # top with height: 10% and width: 100%; The image has a height: 100%; and a width: auto; to always be square and proportional to the screen size.

top http://www.mediafire.com/convkey/ce87/d7ypfcbjcr2t54hzg.jpg

or so: top http://www.mediafire.com/convkey/56ee/iqmqr2nij89eu18zg.jpg

Here is the code: HTML

<div id="topo">
    <img id="logo" src="http://www.mediafire.com/convkey/ab86/gyn33csao1jj3jazg.jpg"/><divid="bloco_azul"><img id="logo2" src="http://www.mediafire.com/convkey/4b1a/1004wqw2lh36au6zg.jpg"/></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height:100%;
}

topo {
    height: 21%;
    width: 100%;
    background-color: #f2f2f2;
}

img#logo {
    display: inline-block;
    float: left;
    background-color: rgba(255, 255, 0,1);
    height: 100%;
    width: auto;
}

div#bloco_azul {
    margin-top: 0;
    float: left;
    position: absolute;
    display: inline-block;
    background-color: #4795cf;
    margin-left: 0%;
    width: 89%;                       /* Aqui fica o width do bloco azul */
    height: 10%;
}

img#logo2 {
    display: inline-block;
    height: 100%;
    width: auto;
}

What should I do? Thank you!

html5 css3

asked by anonymous 18.02.2015 / 15:05

1 answer

What is ActionBarSherlock for Android? How to return the specific element when using multiple custom share buttons on the same page, using querySelectorAll?

score 4 · Accepted Answer

I've done the following, see if it suits you:

JSFIDDLE

HTML

<div id="imagem"></div>
<div id="header"></div>
<div id="content"></div>

CSS

#imagem {
    background-color: red;
    position: fixed;
    height: 10%;
    top: 0px;
    left: 0px;    
    z-index: 3;
}

#header {
    background-color: blue;
    position: fixed;
    height: 8.9%;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
}

#content {
    background-color: gainsboro;
    position: fixed;
    overflow: auto;
    height: 91.1%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
}

JAVASCRIPT

var imagem = $("#imagem");
$(window).resize(function() {
    imagem.innerWidth(imagem.innerHeight());
});
$(window).trigger("resize");