Solved

resizing the Header using CSS

Posted on 2007-11-27
8
810 Views
Last Modified: 2013-12-08
Could u Please let me know how can i resize the header(the header image  has to fit the as per the Screen size)

Please check the below script which i am using.

<style>
 body {
  margin-left: 0px;
  margin-right: 12px; }
</style>
<table cellspacing="0" cellpadding="0" width="100%"><tr>
 <td valign="top">
             <!-- Header Start -->
<style>
#buehne1 {line-height: 19px;background-image:url(images/buehne_1_intra.gif)}
#buehne3 {height:58px;background-image:url(images/buehne_3_intra.jpg); text-align:none; padding-left:184px;}
#buehne3 span {position:absolute;line-height:1em;width:100%;;margin:40px 0 0 12px}
#buehne3 img {float:right;margin-left:80px}
#buehne4 {height:11px;background-color:white; text-align:left; background-image:url('images/buehne_4_intra.gif'); background-position:top right;}
#buehne5 {background-image:url(images/buehne_5_intra.gif);background-position:left;width:100%;;background-color:#003399;}
#buehne5 .horizontal_navi a {height:24px;line-height:24px;width:100%;;background-image:url(images/div_intra.gif) ;background-repeat:no-repeat; padding: 5px 0 5px 29px}
#buehne5 .horizontal_navi a.first {background-image:none;padding-right:0px;}
* html #buehne5  .horizontal_navi a {padding: 0 0 0 30px}
</style>
<div id="buehne1" class="blue_11">
&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div id="buehne3" style="color:#003399;font-size:11px;font-family: verdana"><span >GTO IES Partners in Performance</span><img src="images/buehne_2_flex_en_intra.gif" border="0" alt="" ></div>

<div id="buehne4"><img src="images/buehne4_gto.jpg" height="11" border="0" alt=""></div>
<div id="buehne5">
<table cellpadding=0 cellspacing=0 style="height:24px;">
<tr>
<td style="width:763px; padding-left:12px" class="horizontal_navi">
</td>
<td style="width:198px; height:18px"></td>
</tr>
</table>
</div>
<map name="logo"><area shape="rect" coords="495,1,706,40" ></map>
<!-- Header End -->
              </td>
</tr>
</table>

Regards
Naren
0
Comment
Question by:knaren_1975
8 Comments
 

Author Comment

by:knaren_1975
ID: 20357988

Quick help on this will be greatly appreciated

Regards
Naren
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20357997
paste the entire page or a link. also could you explain clearly what needs to happen to the header image? Does it need to expand horizontally? ie. the width stretches to fit the screen?
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 20358074
Forget css for image,
set size or width and height(100%) of table containing the header images using CSS. Image will will get auto adjusted.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20358158
You can try javascript:

<img src="blank.gif" border="0" alt=""
onLoad="if (this.src.indexOf('blank')!=-1) {
  if (screen.width<800) this.src='images/buehne_2_flex_en_intra_small.gif';
  else   if (screen.width<1024) this.src='images/buehne_2_flex_en_intra_medium.gif';
  else   this.src='images/buehne_2_flex_en_intra_large.gif';
}
">
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20358652
Never really used liquid images before but this may be of interest to you:

http://michelf.com/weblog/2005/liquid-image/
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 20363956
0
 

Author Comment

by:knaren_1975
ID: 20712468
Thx
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20712570
So help within 6 hours was not fast enough to warrant your appreciation - or was the answer not complete?
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Several part series to implement Internet Explorer 11 Enterprise Mode
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

786 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