Forums

insidetheeye

I am struggling with getting divs to resize along with a browser. If you manually resize your browser with your mouse, I'd like the main logo div to resize along with it. I know it's kind of a petty problem since most people will be viewing the page full screen. The #lg div is the one I'd like to gradually size down with the browser window size. The first time I set the width and height to auto it worked, then I was messing around with some other div options and all of a sudden it stopped working. I've tried to re-write the code several times with no luck. I'd certainly appreciate some advice on how to tackle this.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Whatevers</title>
  <link rel="stylesheet" href="_css/styles.css"/>
  <style type="text/css">
    html { 
      background: url(_css/brownpaint.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

  </style>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>



</head>
<body>
  <div id="mcon">
    <nav id="navi">
      <div>
        <ul>
          <li><a class="nv" href="index.html">ABOUT</a></li>
          <li><a class="nv" href="index.html">SERVICES</a></li>
          <li><a class="nv" href="index.html">WORK</a></li>
          <li><a class="nv" href="index.html">CONTACT</a></li>
        </ul>
      </div>
    </nav>
    <div id="lg">
      <img src="_images/sanfedeleLogo.png"/>
    </div>
  </div>
</body>
</html>

And the CSS:

#mcon,body{width:100%;height:100%;overflow:hidden;font-family:'helvetica';color:white;}
#navi{position:absolute;bottom:0px;font-size:12px;left:0px;right:0px;}
#navi div{height:66px;background-color:#000;line-height:12px;padding-top:1px;padding-bottom:1px;}
#navi ul{list-style-type:none;}
.nv{text-decoration:none;color:#9e005d;border-left:solid #9e005d 1px ;padding:12px;}
#navi a:hover {color:#C7C3BB;}
#lg{position:absolute;top:180px;left:140px;width:auto;height:auto;}

insidetheeye

sorry guys, how do you post code successfully? I haven't used this forum before..

djrolstad

post in codepen.io and save it and copy the url and post

TheDoc

I've updated your post for you. Just got to make sure you tab four spaces. Read more on Markdown

Paulie_D

Unfortunately, we don't have access to your images so we can't tell how this is supposed to look.

Do you have a mock-up/image of what your design is?

Paulie_D

Here's another thing.

Unless there is no other way, try to avoid using absolute positioning. There are nearly always more flexible and yet robust methods of putting elements into the place you want them.

insidetheeye

Hey guys,

I took a couple screen shots to describe what I'm trying to accomplish. Is there a way I can embed those in this thread? Sorry for all the questions, I'm new here. And thanks up there Doc for updating my code posts.

treehouse : what would you like to learn today?

Forums

Need help with div movement and resizing a browser