Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

resizing the Header using CSS

Posted on 2007-11-27
8
Medium Priority
?
815 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
Independent Software Vendors: 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!

 
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 1500 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

886 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