Solved

HTML automatic div resizing

Posted on 2014-11-05
7
284 Views
Last Modified: 2014-11-06
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
Comment
Question by:Jalbkay
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 2

Expert Comment

by:Amish Sanghrajka
ID: 40423447
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
 

Author Comment

by:Jalbkay
ID: 40423457
Hi Amish,

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

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

Cheers
Chris
0
 
LVL 2

Expert Comment

by:Amish Sanghrajka
ID: 40423512
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

Author Comment

by:Jalbkay
ID: 40423614
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
 
LVL 2

Accepted Solution

by:
Amish Sanghrajka earned 500 total points
ID: 40423664
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
 

Author Closing Comment

by:Jalbkay
ID: 40423947
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
 
LVL 2

Expert Comment

by:Amish Sanghrajka
ID: 40426693
Glad I could help :)
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Un-Indent Setting Notepad++ 3 27
What is the optimum percentage to save images for webs. 4 34
help thx 6 25
Keyup listener getting fired on initial page load 1 20
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question