• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

HTML automatic div resizing

G'day All,

I'd like to get a <div> to resize automatically, the same as the background in the following snippet, so that the linkbar div stays at the bottom of the header and doesn't sit halfway down the page as the browser screen narrows.   Any and all help greatly appreciated.


.header {
background-image: url(assets/jpgs/header.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
-o-background-size: 80% auto, auto;
-moz-background-size: 80% auto, auto;
-webkit-background-size: 80% auto, auto;
background-size: 80% auto, auto;
}
.linkbar {style: height: 64px;
      align: center;
      text-align: center;}
0
Jalbkay
Asked:
Jalbkay
  • 4
  • 3
1 Solution
 
Amish SanghrajkaCommented:
Hi,

Have you got an example of the page I can look at to get a clearer image of what you want it to do?

Kind regards,
Amish.
0
 
JalbkayAuthor Commented:
Hi Amish,

Sure:  http://renegadewing.com/renegade_wing.html

Just resize your browser and you will see what I mean.

Cheers
Chris
0
 
Amish SanghrajkaCommented:
Hi Chris,

There are two options I can think of here. First one is to have a fixed size background such as is on the index page of the site. Alternatively if you want the background image to shrink when the window is resized use embedded <div> tags and set the background in the parent <div>.

Example:
<style>
.header {
position: relative;
background-image: url(assets/jpgs/header.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
-o-background-size: 80% auto, auto;
-moz-background-size: 80% auto, auto;
-webkit-background-size: 80% auto, auto;
background-size: 80% auto, auto;
}
.linkbar{
position: absolute;
bottom: 10px;
height: 64px;
align: center;
text-align: center;
}
</style>

<body>
<div class="header">
     <div class="linkbar">
     </div>
</div>
</body>

Open in new window


That will keep the linkbar 10px above the bottom of the background image. If you also want to look at resizing those link images on a browser resize then I would recommend looking into jQuery.

Let me know if you need a bit more clarification on any of this.

Kind regards,
Amish.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
JalbkayAuthor Commented:
Hi Amish...
Not really the desired result:
http://renegadewing.com/css_test.html
The header div doesn't resize in any way and the linkbar is unuseable as the header div has no sizing.  Is there not a way to make the div resize with the background?
0
 
Amish SanghrajkaCommented:
Hi Chris,

Try this:
<style>
.header {
position: relative;
}
.bg_img {
width: 80%;
z-index: 1;
}
.linkbar{
position: absolute;
bottom: 10px;
height: 64px;
align: center;
text-align: center;
z-index: 2;
width: 100%;
margin: 0 auto;
}
</style>

<body>
<div class="header">
	<center><img src="assets/jpgs/header.jpg" class="bg_img" /></center>
     <div class="linkbar">
     <center>
     <a href="bridge.html" title="Go to the Bridge">
    <img alt="Bridge" height="64" src="assets/mc80cverEJ.png" width="80" longdesc="Go to the Bridge" /></a>
    <a href="intel/intelcon.html" title="Intelligence (Bothan Spy Network?)">
    <img alt="Intel" height="64" src="assets/r2.png" width="64"/></a>
    <a href="recruiting/recmainm.html" title="Recruiting">
    <img alt="Recruiting" height="64" src="assets/recruit.jpg" width="64" /></a>
    <a href="rogue/rogueros.html"></a>&nbsp;
    <a href="rogue/rogueros.html" title="Rogue Squadron">
    <img alt="Rogue Squadron" height="64" src="assets/X-Wing-icon.png" width="64"  /></a>&nbsp;&nbsp;
    <a href="buccaneer/buc.html" title="Buccaneer Squadron">
    <img alt="Buccaneer Squadron" height="64" src="assets/bw.png" width="64" /></a>&nbsp;&nbsp;
    <a href="corsair/corsair.html" title="Corsair Squadron">
    <img alt="Corsair Squadron" height="64" src="assets/aw.png" width="64"/></a>&nbsp;&nbsp;
    <a href="support/rwss.html" title="Renegade Wing Support Squadron">
    <img alt="RSS" height="64" src="assets/y-wing.jpg" width="64"/></a>&nbsp;&nbsp; 
    <a href="tacops/tacops.html" title="Tactical Operations">
    <img alt="Tac Ops" height="64" src="assets/Death_Star.png" width="64" /></a>&nbsp;&nbsp; 
    <a href="lounge/lounge.html" title="The Liberty Lounge"> 
    <img alt="Lounge" height="64" src="assets/bluemilk.jpg" width="64"/></a>&nbsp;
    <a href="library/roguelib.html" title="The Library">
    <img alt="Library" height="64" src="assets/c3po.png" width="64"/></a>
    </center>     
</div>
</div>
</body>

Open in new window


Kind regards,
Amish.
0
 
JalbkayAuthor Commented:
Once I was able to make it clear what I was trying to do Amish nailed it!  And I've learned something new to boot :)
0
 
Amish SanghrajkaCommented:
Glad I could help :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now