Problem getting my images to squish to fit my DIV's

Page 1 of 1

3 Replies - 335 Views - Last Post: 22 January 2012 - 12:54 AM

Topic Sponsor:

#1 -Nix-  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-December 11

Problem getting my images to squish to fit my DIV's

Posted 21 January 2012 - 04:24 PM

Its hard to explain so i will include a picture of my page, it is a project im workin on for school. I have my navigation bar on the left, and the buttons are images with hyperlinks; the hyperlinks work fine. However i cant get that white space below my bar to go away, even if i make the background of the page black. And my images refuse to squish to the dimensions ive assigned the Div that they are in. Also, im aware it needs a lot of cosmetic changes. Im just working on functionality first.

Posted Image

<html>
<head>
<title>TekPro Computer Repair</title>
<style type="text/css">
#banner {
  background: #FFFFFF;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 20%;
  }

 
#center {
  background: #A0A0A0;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 80%;
  height: 80%;
}

#button {
 background: #FFFFFF;
 position: absolute;
 top: 20%;
 left: 0%;
 width 20%;
 height 10%;
}

#button1 {
  background: #FFFFFF;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 20%;
  height: 10%;
}

#button2 {
  background: #FFFFFF;
  position: absolute;
  top: 40%;
  left: 0%;
  width: 20%;
  height: 10%;
}
#button3 {
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 0%;
  width: 20%;
  height: 10%;
}
#button4 {
  background: #FFFFFF;
  position: absolute;
  top: 60%;
  left: 0%;
  width: 20%;
  height: 10%;
}
#button5 {
  background: #FFFFFF;
  position: absolute;
  top: 70%;
  left: 0%;
  width: 20%;
  height: 10%;
}

</style>
</head>

<body>

<div id="banner">	
<img src=banner.jpg style="width: 100%; height: 100%">
</div>

<div id="button">
<a href="home.htm"><img src="home.jpg" style="width 100%; height: 100%"></a> 
</div>

<div id="button1">
<a href="service.htm"><img src="service.jpg" style="width 100%; height: 100%"></a> 
</div>

<div id="button2">
<a href="products.htm"><img src="products.jpg" style="width 100%; height: 100%"></a>
</div>

<div id="button3">
<a href="contact.htm"><img src="contact.jpg" style="width 100%; height: 100%"></a>
</div>

<div id="button4">
<a href="testimonies.htm"><img src="testimonies.jpg" style="width 100%; height: 100%"></a>
</div>

<div id="button5">
<a href="about.htm"><img src="about.jpg" style="height: 100%; width 100%"></a>
</div>

<div id="center">
<center>HOME PAGE</center>		
</div>


</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Problem getting my images to squish to fit my DIV's

#2 Slice  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 122
  • View blog
  • Posts: 431
  • Joined: 24-November 08

Re: Problem getting my images to squish to fit my DIV's

Posted 21 January 2012 - 05:39 PM

I would avoid using absolute positioning. It will seem like it works for now but it is considered bad practise for something that could be achieved with floats. (more information on floats) Floats will work more to the flow of your page, and allow content to flow around page elements.

Your side bar should be contained in its own parent div, something like:
<div id="sidebar">
    <div id="button1">
        <img>
    </div>
 
    <div id="button2">
        <img>
    </div>
</div>


Creating a parent div will help contain all your elements.

Setting your width/height as percentages is also asking for trouble. Try to use pixels(px). change the image sizes to sizes that you want them to be in pixels. <img src="link/to/image.jpg" height="10px" width="80px" /> Same for div boxes.

Hope this helps.
Was This Post Helpful? 0
  • +
  • -

#3 -Nix-  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 14-December 11

Re: Problem getting my images to squish to fit my DIV's

Posted 21 January 2012 - 11:31 PM

I wouldnt mind using pixels, but wont it look funny on bigger screens? like out of proportion?
Was This Post Helpful? 0
  • +
  • -

#4 Slice  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 122
  • View blog
  • Posts: 431
  • Joined: 24-November 08

Re: Problem getting my images to squish to fit my DIV's

Posted 22 January 2012 - 12:54 AM

Not necessarily.

When using percentages, your main aim is to make the page expand/contract to any screen possible. Look at Amazon for example. The site is very fluid, it fills the entire width of the page. But, you'll notice that the navigation links down the side of the page never change. Try making your browser window smaller to see which elements they have made using percent.

Now look at another popular site, facebook. It has more of a fixed rigid design, using no percentages. The page is centred on all screen sizes, with an automatic margin; yet the width of the content area stays the same.

So if you use percentages, think a little about what needs to be used and what doesn't. You want to be able to create some consistency throughout your site when viewed from different monitors.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1