CODEWITHSUNDEEP
csshtml
Kyle
Kyle

Reputation: 2379

Placing two divs next two each other (inside another div)

so I'm basically tying to have everything for this site contained in one div. This is a success. My menu bar is in its on div inside of the main one. Through some rearranging of code and modifying of CSS, I have got my image gallery div to be in the right place. However, is this effective on other resolutions? Is there an easier way to get my gallery to show up next to my menu bar? A live demo of the site can be found at accessorizewithstyle.tk. Any help would be appreciated. I'm trying to make this site scale dynamically so that it looks good no matter which browser/resolution is viewing it.

Code:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
           // create the image rotator
           setInterval("rotateImages()", 2000);
       });

       function rotateImages() {
           var oCurPhoto = $('#gallery div.current');
           var oNxtPhoto = oCurPhoto.next();
           if (oNxtPhoto.length == 0)
               oNxtPhoto = $('#gallery div:first');

           oCurPhoto.removeClass('current').addClass('previous');
           oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
               function() {
                   oCurPhoto.removeClass('previous');
               });
       }
</script>
<style type="text/css">
body {
    overflow:hidden;
}
img.background {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    z-index:-3;
}
img.background {
    width:auto\9;
    max-width:100%;
}
.menu{
    margin:0; 
    padding:0; 
    width:300px; 
    list-style:none;
    background:rgb(255,255,255);
}
.menu li{
    padding:0; 
    margin:0 0 1px 0; 
    height:40px; 
    display:block; 
}
.menu li a{
    text-align:left;
    height:40px; 
    padding:0px 25px; 
    font:16px Verdana, Arial, Helvetica, sans-serif; 
    color:rgb(255,255,255); 
    display:block; 
    background:url('images/verMenuImages.png') 0px 0px no-repeat; 
    text-decoration:none;
}
.menu li a:hover{
    background:url('images/verMenuImages.png') 0px -40px no-repeat; 
    color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
    background:url('images/verMenuImages.png') 0px -80px no-repeat; 
    color:rgb(255,255,255);
}
.menu li a span{
    line-height:40px;
}
#site {
    width:85%;
    margin:0 auto;
}
#menubar {
    position: relative;
    left: 0px;
}
#gallery {
    position: absolute;
    left: 35%;
    height:400px;
    width:400px;
}
#gallery div {
    position:absolute;
    z-index: 0;
}
#gallery div.previous {
    z-index: 1;
}
#gallery div.current {
    z-index: 2;
}
</style>
</head>

<body>
<img src="images/background.jpg" class="background" /> 
<div id="site">
<P><center><img src="images/logo.png" class="logo" /></center></P>
<div id="menubar">
<div id="gallery" align="center">
<div class="current">
<img src="http://i.istockimg.com/file_thumbview_approve/1459298/2/stock-photo-1459298-jewllery-2.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/3480966/2/stock-photo-3480966-bracelet.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/14879331/2/stock-photo-14879331-earrings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/2741073/2/stock-photo-2741073-wedding-rings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/15490304/2/stock-photo-15490304-scarf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>
<ul class="menu">
  <li><a href="index.html" class="active"><span>Home</span></a></li>
  <li><a href="about.html"><span>About</span></a></li>
  <li><a href="necklaces.html"><span>Necklaces</span></a></li>
  <li><a href="bracelets.html"><span>Bracelets</span></a></li>
  <li><a href="earings.html"><span>Earings</span></a></li>
  <li><a href="rings.html"><span>Rings</span></a></li>
  <li><a href="scarves.html"><span>Scarves</span></a></li>
  <li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>

</div>
</body>
</html>

Upvotes: 1

Views: 1451

Answers (2)

Otis Wright
Otis Wright

Reputation: 2110

First off your background is messed up and shrinks when you re-scale so maybe set it to your body back ground.

Personally I would have 1 wrapper div max-width 960 and min-width maybe 400 then the two divs inside that and then float both left put a right margin on the menu and an auto margin on the image slider and then if you resize to below the specified height of the image slider plus the menu the image slide should auto shift to be below the menu.

Your other option would be to use @media queries but that is a bit more complex.

Upvotes: 1

jamesc
jamesc

Reputation: 12867

Can I suggest that you take a long hard look at the awesome css designs for liquid layouts by Matthew James Taylor.

The designs (and there are many) are not only liquid (auto resize to fit whatever size the browser is) but they are also very SEO friendly

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Upvotes: 1

Related Questions