Header image

all i want to do is replace the header with an image of my own...how to i do this while still keeping the nav menu?
also where are the page background images stored?.....id like to use backgrounds and images from other i web templates and i want to browse to find them.....thanks!

yes, again i understand what you mean by dropping the image i want overtop of the header itself but im working with a template (Italian Tile) buy 11mystics......
what i needed to do was publish to a folder then upload to my server.....once uploaded there i see in the files folder things like "navbar_background.png", navbar_separator.png, and then in another folder is pagetop.png .....once i removed these frm the folder then my header image and nav images disapeared and the menu was still there......
now how do i edit these image files within i web.....they arent clickable in iweb like other images

Similar Messages

I am having trouble with the position of my header image across browsers. white space above it in safari, pc, and crome then all to the right in firefox.

nydogworks.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NYDogWorks Long Island Dog Training and Behavior</title>
<meta name="description" content="Serving all of Long Island, Nassau & Suffolk. NYDogWorks specializes in dog training, dog behavior, and puppy training.">
<meta name="keywords" content="dog training, long island dog training, dog trainer, long island dog obedience, puppy training classes">
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />


<link href="css/overlay-apple.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tools.min.js"></script>
<style>
div.apple_overlay h2 {
margin:10px 0 -9px 0;
color:#222;
font-weight:bold;
font-size:14px;
div.black h2 {
color:#222;
#apple {
margin-top:10px;
float: left;
width: 250px;
padding-right: 10px;
#apple img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
body {
margin-right: auto;
margin-left: auto;
</style>
    <script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script><script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26177215-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/nydogworks-logo-hover.png','images/training-services-on. jpg','images/behavior-therapy-on.jpg','images/off-leash-training-on.jpg')">
<div id="wrapper"> <div id="header">
<div id="logoBox"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nydogworks-logo-hover.png',1)"><img src="images/nydogworks-logo.png" alt="NY Dogworks" name="Image3" width="280" height="200" border="0" id="Image3" /></a></div>
<div id="slogan">Serving All of Long Island, Nassau & Suffolk Counties<br />
Also serving Manhattan, Brooklyn & Queens
</div><div id="emailBox">
    <h2><img src="images/calltogetstarted.png" width="473" height="74" alt="Call to get started" /></h2>
    </div><div id="mainNav">
<ul class="dropdown dropdown-horizontal" id="nav" name="nav">
<li><a href="about-ny-dog-works.html">About Us</a></li>
<li><a href="long-island-dog-training-programs.html" class="dir">Training Programs</a>
   <ul>
            <li><a href="basic-obedience.html">In Home Dog Training</a></li>
            <li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
            <li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
            <li><a href="off-leash-training.html">Off Leash Training</a></li>
            <li><a href="puppy-training-program.html">Puppy Training</a></li>
</ul>
</li>
    <li><a href="dog-trainer-testimonials.html" class="dir">Testimonials</a></li>
<li><a href="contact-long-island-dog-trainer.html" class="dir">Contact Us</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="imgholder"><a href="long-island-dog-training-programs.html"><img src="images/main-header.jpg" alt="private dog training long island new york" width="951" height="416" border="0" /></a>
<div id="program1"><a href="long-island-dog-training-programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/training-services-on.jpg',1)"><img src="images/training-services.jpg" alt="dog training services" name="Image6" width="315" height="137" border="0" id="Image6" /></a></div>
<div id="program1"><a href="board-and-train-dog-program.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/boarding_training-on.jpg',1)"><img src="images/Boarding_training.jpg" alt="board and train dog program" name="Image5" width="315" height="137" border="0" id="Image5" /></a></div>
<div id="program1"><a href="dog-behavior-therapy.html" onmouseout="MM_swapImgRestore()" onmouseover=
"MM_swapImage('Image7','','images/Behavior_therapy2-on.jpg',1)"><img src="images/Behavior_therapy2.jpg" alt="behavior therapy" name="Image7" width="311" height="137" id="Image7" border="0" align="right" /></a></div>
</div>
<div id="pageContentNoside">
   <div id="sideSub">
     <h2>Dog Training Services<br />
       </h2>
     <ul id="subnav">
       <li><a href="basic-obedience.html">Basic Obedience</a></li>
       <li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
       <li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
       <li><a href="off-leash-training.html">Off Leash Training</a></li>
       <li><a href="puppy-training-program.html">Puppy Training</a></li>
       </ul>
     <br />
     <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F NYDogWorks%2F219268038151244%3Ffref%3Dts&width=248&height=558&show_faces=true& amp;colorscheme=light&stream=true&border_color=%23FFFFFF&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:248px; height:558px;" allowTransparency="true"></iframe>
     <p><br />
       </p>
     <p> </p>
     <p><img src="images/4449da18fc3aa2f249d17dc90ebd5531.jpg" width="145" height="136" /><br />
     </p>
     </div>
   <div id="mainContentFeature1">
     <h2>Welcome To NY Dogworks</h2>
     <p><img src="images/dog-breaking-through.jpg" alt="new york dog trainer" width="136" height="170" class="h_img_float_right" />Our private one on one training lessons are done at your home by a Professional Certified Trainer and Behavior Expert. The lessons are tailored to fit what you would like done with your puppy or adult dog. <br />
       <br />
       We use a humane, positive and scientifically sound approach that makes it easy for you and your dog to succeed. Our instructions are broken down into simple steps so that everyone can take part in the training and be able to practice as a family. <br />
       <br />
       <span class="employeeName">Call Today for a Free Consultation!!      </span></p>
     <p>Do not have the time or patients to do the Training? Well then NY DogWorks has the answer.. We now do <a href="board-and-train-dog-program.html">Board and Train Programs</a> at our lovely facility in the home of Owner & Trainer Brian DeMartino. It is a 2 to 6 week program that is 100% guaranteed. Your dog will stay with us for no additional fee if we feel that he or she is not ready to graduate. This program can be for Puppy Training, Housebreaking, Socialization / Obedience & Manners / Behavior problems such as Aggression, Anxiety, or Fears / Advanced Off Leash Training / Personal Protection and much more..</p>
     <p>We also <a href="board-and-train-dog-program.html">board dogs</a> at our facility if you are going away and want your family pet to be cared for 24/7 as if he or she was one of our own. Plenty of playtime, walks, individual attention, grooming if needed, comfortable sleeping areas with their own bed, and lots and lots of love.. </p>
     <p>Let us help you have the relationship that you and your dog deserve.. <br />
       <br />
       <strong>We are now accepting</strong><br />
       <img src="images/creditcards.jpg" width="228" height="43" alt="now accepting credit cards" /><br />
       <br />
       <br />
       </p>
     <p><br />
       </p>
     <p><br />
       <br />
      </div>
   <div id="mainContentFeature2">
     <form action="form.php" method="post" name="form2" id="form2"> <table width="279" border="0" cellpadding="2" cellspacing="2">
       <tr>
         <td width="273"><h2>Quick Contact</h2></td>
         </tr>
       <tr>
         <td class="mainContent">Your Name</td>
         </tr>
       <tr>
         <td><span class="style9">
           <input name="forname" type="text" class="colorfieldssmall" id="forname" size="20" />
           </span></td>
         </tr>
       <tr>
         <td class="mainContent">Your Email Address* (required)</td>
         </tr>
       <tr>
         <td><span class="style7 style9">
           <input name="admail" type="text" class="colorfieldssmall" id="admail" size="25" />
           </span></td>
         </tr>
       <tr>
         <td class="mainContent">Phone Number</td>
         </tr>
       <tr>
         <td><span class="style7 style9">
           <input name="phone" type="text" class="colorfieldssmall" id="phone" />
           </span></td>
         </tr>
       <tr>
         <td><span class="mainContent">Type of Dog Training</span></td>
         </tr>
       <tr>
         <td class="mainContent"><span class="style9">
           <select name="need" class="colorfieldssmall" id="need">
             <option value="select one">select one</option>
             <option value="Basic Obedience">Basic Obedience</option>
             <option value="Behavior Therapy">Behavior Therapy</option>
             <option value="Board and Train">Board and Train</option>
             <option value="Off Leash Training">Off Leash Training</option>
             <option value="Puppy Training">Puppy Training</option>
             </select>
           </span></td>
         </tr>
       <tr>
         <td><span class="mainContent">Comments</span></td>
         </tr>
       <tr>
         <td><textarea name="comments" id="comments" cols="24" rows="8"></textarea></td>
         </tr>
       <tr>
         <td><div align="left">
           <input type="submit" name="submit" id="submit" value="Submit" />
           </div>
           </td>
         </tr>
       </table></form>
     <h2><br />
       We are available in the following areas:</h2>
     <p>Long Island, Nassau county, Suffolk county, Manhattan, Brooklyn, Bronx, & Queens.</p>
     <p>**We have pick up and drop off services for your pet for the boarding and boarding and training programs. <br />
       </p>
     <h2>Dog Training Testimonials<br />
       </h2>
     <p>Sending Otis to Brian for the board and train program was the best decision I ever made. After being told Otis could not be helped and that he should be put down, I was devastated. Otis has now been back from Brian's program for a few weeks and is extremely obedient and friendly. He is the same puppy we brought home a couple years ago, but calmer and without any aggression. We work on Otis' obedience daily as well as walk him and put him on the treadmill.   Thanks to Brian, our dog is happy-go-lucky and more approachable. The list goes on and on of how Brian has helped the family, myself, and especially Otis. If you are having issues with your dog, especially behavior and aggression problems, my advice to you is to trust Brian. Your dog will be in good hands with a safe, reliable, responsible, dog lover that will treat your dog like his own.<br />
       <span class="testimonalName"><strong><br />
         Victoria Zilli<br />
         </strong></span><span class="mainContent">Long Island, New York</span><br />
       <br />
       <a href="dog-trainer-testimonials.html">Read more dog training testimonals</a><br />
       <br />
       <br />
      <br /></div>
   <div id="breadCrumbs">
     <p><a href="index.html">Home</a> > Welcome to NY DogWorks New York's Premier Dog Training Company<br />
       <strong>Serving all of Long Island, Nassau & Suffolk County, Manhattan, Brooklyn & Queens</strong>        <br />
       </p>
     </div>
</div>
    <div id="footer">
      <div id="footermenu">
      <div id="footermenu1">
      </div>
    </div>
   <div class="phoneNumber" id="copyright"> Copyright © 2014 NY DogWorks</div>
     <div class="websiteDesign" id="sitedesigner">Long Island Website Design by <a href="http://www.wetribet.com" title="Wet Ribet" target="_blank" class="medlink">Wet Ribet</a>     </div>
</div>
</div>
</div>
</body>
</html>

The issue with that white space is explained by the use of relative positioning of your menu. Remember that relative positioning visually allows you to move an element, but that its "shadow" or "foot print" is retained in the document flow. So it still takes up space where it originally flowed in your content, and this causes the header image to position itself the way it does. Turn off the relative positioning of the menu to see what I mean. A simple solution is to set the #header to relative positioning, and then apply absolute positioning to the menu.
There are other issues with your code. Much of it can be simplified, and you should really stop using ID selectors from this point on, and predominantly use classes instead. The use of ID selectors ought to be limited as much as you can - they force you to write bloated convoluted code.
Try to write DryCSS (Don't Repeat Yourself).
Here is my somewhat cleaned up code. Notice I removed and simplified most of the css selectors. Some have no css properties at all anymore. And be careful that you cannot use re-use the same id selector in your html code: it will not validate. #program1 must become .program1
PS as always, please backup your files before applying these changes! Dreamweaver lacks a history/versioning feature!
*, *:before, *:after {
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
body {
    margin: 0 auto;
    background-color: #203610;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
    font-size: 100%;
    color: #333;
#wrapper {
background: url("../images/wrapbg.png") repeat-y scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 auto;
width: 951px;
#header {
position: relative;
#mainNav {
background: url("../images/menubg.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
padding: 0 15px 0 25px;
position: absolute;
right: 0;
width: 510px;
.dropdown li { /* simplify .dropdown li !*/
float: left;
line-height: 2.2em;
.dropdown a { /* simplify ul.dropdown li a !*/
display: block;
font-weight: bold;
padding: 7px 12px;
#container {
background-color: #fff;
border-top: 6px solid #6f9f49;
#imgholder {
.program1 { /* you CANNOT have multiple id selectors sharing the same name! Use classes!!! */
float: left;
width: 315px;
rewrite this in your html:
<div class="pageContentNoside">
    <div class="col-1-3 sideSub">
    <div class="col-1-3 mainContentFeature1">
    <div class="col-1-3 mainContentFeature2">
    <div class="breadCrumbs">
</div>
.col-1-3 {
float: left;
width: 33.3333%;
padding: 25px 15px;
#sideSub {
#mainContentFeature1 {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
#mainContentFeature2 {
#footer {
clear: both;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 0.7em;
height: 45px;

How do I use Adobe Edge to get faded header images on my website?

Trying to use Adobe Edge to get faded header images on my website. Was referred to Adobe Edge because it is supposed to be easy for beginners. I was able to upload my images, but then there was no instruction/direction on what to do next. Everything I clicked just brought me somewhere else. I'm a novice who needs help with coding, as everytime I tried adding coding to my page, it messed it up. I would appreciate if someone can tell me what to do after I upload the images.

Yes, Animate. Again, I uploaded the images, but then, I didn't see any directions on what to do next, as I would like fading header images for my website. I understand that it is supposed to generate the code for my website, which is where I need the most help.

Can I change header image on one or more pages of a template site?

Hi all,
I have a site I created in D.W CS3. I'm kicking around the idea of adding an affiliate store. I think I might be better served if the store has a different header image than the main site. I can either create a whole new site for the store, or what I'd rather do for now is just make a new page from the main template, and change the header image just for that page to see how it goes. Does anyone know the code I could use to have a page from template override the CSS and use a new header image just for that one page?
The URL is http://isuckatgolf.net if that is needed.
Thanks!
ken

Take images out of the HTML and put them in the background of your #header div with CSS.
#header {
background: url(header1.jpg) no-repeat
width: xxxpx; /**same width as image**/
min-height: xxxpx; /**same height as image**/
Use embedded CSS on child pages requiring a different background.
<style type="text/css">
#header {
background: url(header2.jpg) no-repeat;
</style>
Nancy O.

Template header images not visible after upload

Thanks in advance.
Using Dreamweaver CS5 on a Macbook Pro 10.7.5. GoDaddy web host.
DW novice however I am using a book to help me along but am stuck.
Because I am new to this, I am using a VERY simple template.
Link to my site: http://www.lifeafterpharma.biz
I did search this site and others for answers
PROBLEM:
My template looks great when I preview it in all of the browsers but after I upload it, pictures within the body of the site do not appear and NONE of the header images appear.
I have made certain that I uploaded all of the pictures.
It's supposed to look like this:
Original Template:
After my modifications and this is the image I see when I use the DW browser preview --
This is the original template and what the site ACTUALLY looks like in any browser after upload. When I upload my modified website, my newly added pics will appear but none of the template images appear.
Thanks in advance for your help!

Site Defintion:
First things first. You must set up a Site Definition in DW or you're going to have more problems than you can handle.The entire program functions off of the idea of Site Defintions working from a centralized folder...
http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/
Once your site definition is created, and all of your files are within the folder it creates, you can use DW to re-link your images. Once everything is re-linked with correct paths, you can upload all of the files to your server. Your .html pages do not "contain" their images, each image also needs to be uploaded to the server itself.
Templates:
In DW, "Templates" are a very specific thing. They have a .dwt file extension and are used to create Child Pages within a Defined Site and have Editable Regions set by you. Everything outside those Editable Regions is identical from page to page, leaving the Editable Region as your area to place content that changes from page to page. To me, it sounds like you are just using a pre-made layout vs an actual DW Template .dwt file. I just wanted to make sure that was the case, because some weird things can happen if you don't use a .dwt correctly.

How to adjust height of header image in fluid grid layout

I appreiate the help people are trying to give me but I need help on what "to" do not on what "not" to do. I'm tryinh to tweek the height of my header image in the indivisual device views without screwing each other up.Meaning when I adjust the height in smartphone view I dont want it to affect tablet view, or when I adjust the height in desktop view it doesn't affect smartphone view, and so on and so on. The width works fine (right now at least) because its simple 100% of screen so it scales great right now. Its the height I cant get!!! I cant adjust it. Each device needs a little tweek beause of design issues. PLease help
ps no tutorial i've seen helps with the issues i'm going through, none. And I've had people offer suggestions so I done wasting days looking at these things. I just need the anwser a what to do.

If you alter the height in the applicable css media query only that device will observe the specified height.
What is it you are actually trying to do. Simple example below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
img {
    max-width: 100%;
    height: auto;
@media screen and (max-width: 480px) {
.changeHeight {
height: 500px;
</style>
</head>
<body>
<div id="header">
<img src="yourImage.jpg" class="changeHeight"></div>
</body>
</html>
If you want to target screens with a max-width of 480px you would write a css media query:
@media screen and (max-width: 480px) {
.changeHeight {
height: 500px;
However not sure why you would want to change heights as it will distort the image.
You could server up an alternative sized image for desktop, tablet and smartpone:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
img {
    max-width: 100%;
    height: auto;
.tablet {
display: none;
.smartPhone {
display: none;
@media screen and (max-width: 480px) {
.deskTop {
display: none;
.tablet {
display: none;
.smartPhone {
display: block;
</style>
</head>
<body>
<div id="header">
<img src="deskTop.jpg" class="deskTop">
<img src="tablet.jpg" class="tablet">
<img src="smartPhone.jpg" class="smartPhone">
</div>
</body>
</html>

Header image overlapping menu div tag...

Hi,
I have decided to play some more with Dreamwaver, and started to build a website in it. So far everything went smooth, but I have to place the menu buttons over the header image (which is the background for my buttons in the same time) and noticed that the same header image is overlapping the menu buttons, but only in the editor mode, when I test the website inside my browser the buttons are visible and are ok.
I have tried to set both in positioning to Absolute, and set the z-index...but in the editor mode the header still overlaps the menu buttons.
Here is the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>InfoSpot</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

<div id="header"><img src="images/logo.png" alt="logo" name="logo" width="783" height="167" id="logo" /></div>

<div id="homeBtn">Home</div>

<div id="mainContent">
<p>Lorem ipsum dolor </p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum.</div>
</div>
</body>
</html>
And the css:
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
background-image: url(../images/bg.png);
#wrapper {
width:900px;
height:800px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
#header {
width:800px;
height:167px;
font-size: 2em;
color:#900;
padding:0em;
margin-left:100px;
float:left;
#homeBtn {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#5a5959;
width:70px;
height:30px;
float:left;
margin-top:-10px;
margin-left:370px;
padding: 3px;
text-align: left;
#mainContent {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height:1.6em;
color: #5a5959;
border:;
margin-top: 70px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 355px;
width: 450px;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-align: left;
#mainContent p {
font-family: "Arial", Times, serif;
font-weight:bold;
font-size: 1.6em;
color: #5a5959;
.imagesLeft {
padding: 3px;
clear: left;
float: left;
margin-top: 3px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
border: 1px solid #CCC;
REGARDS!
vedtam

Hi, and thanks for your response. I did as you said, but the header still overlaps the menu button ( se the attached images).
#header {
width:800px;
height:167px;
font-size: 2em;
color:#900;
padding:0em;
margin-left:100px;
float:left;
background-image: url(../images/logo.png);
Regards
Editor:

How To Create A Header Image That Keep The Visitors?

Hello Adobe community. My name is Mike, and I have
been creating a website in order to reach and help
people in my industry, which is health and training,
especially for people who want to lose belly fat and
that want to get a six pack abs. I know it sounds silly.
Unfortunately, my niche has a reputation to be...
REALLY spammy, scammy, and scummy.
I'm pretty new to this internet business stuff, and people
not trustng what they see, so I really need some of your advice.
This is why I'm trying to build a website that really
connects with the visitors, and that delivers a lot of value.
The reason why I'm posting on this forum is to know if
you could help me create a banner that conveys trust,
value, and authority by pointing to what I should include
in the process of creating a Header Image.
For example, i'd like to know if the design should be
squarer/rounder, lighter or darker, or in a certain
dimension to convey those things and most importantly
KEEP THE VISITORS ON THE PAGE (not in an hypnotic
sense, but in an aesthetical sense.)
(you can tell, I have NO IDEA how to approach this).
If you could make a bullet point or top 10 things keep in mind,
I'd be so grateful!
-Mike

Mike,
Apart from what you write, you are up against everyone trying to do everything to seem trustworthy and all that so just about every approach is out there already. The very attempt to appear trustworthy may very well arouse suspicion.
Except maybe something that is the opposite of slickness and promises of easy solutions.
A statement that there is no easy solution but here is a viable way may work, especially for those having tried easy (who may be the vast majority of visitors), but it must be genuine and in accordance with the contents of the website, or the visitors will be lost through the gap between first appearance and contents.
I believe that is the only bullet point, or top 1 thing. When everyone else is doing the same, different makes the difference.

Css - linking to header image

Hello,
I'm building a Web site using CSS. I refer to the header
image file within the #header part of my CSS - "background-image:
url(../images/header_birnweb.jpg);
background-repeat: no-repeat; "
Then I merely create a header division in my HTML file:
<div id="header"></div>
But now my client wants to link to the the header image to
the site index page. How do I do that?
Thanks,
Lee

Other than a transparent image nested inside the DIV, I'm not
too sure of
any other way.
One question: is there a reason you're doing it like that,
instead of using
the <img> tag? Cleanliness? Ease?
Just curious ...
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"VinnieVee" <[email protected]> wrote in
message
news:e5nljb$e4r$[email protected]..
> Hello,
> I'm building a Web site using CSS. I refer to the header
image file
> within
> the #header part of my CSS - "background-image:
> url(../images/header_birnweb.jpg);
> background-repeat: no-repeat; "
> Then I merely create a header division in my HTML file:
<div
> id="header"></div>
>
> But now my client wants to link to the the header image
to the site index
> page. How do I do that?
>
> Thanks,
> Lee
>

Header image not appearing

My jpg header image (RGB) only appears in the web form. I double-checked the color profile. Why is this happening? It's only 250kb file size. I tried putting it inside the header area, and I also tried deleting the header and placing the image below. Neither work.

This is more than likely an issue with the color profile in the image you used not being supported by the PDF - this FAQ describes the issue and ways to fix it:
http://forums.adobe.com/docs/DOC-4144
Thanks,
Josh

Editing Header Image in iWeb 'o8

I am having problems trying to edit the header image in iWeb '08. In the page layout part of the inspector there is places to edit the background image and the browser fill but no header image has appeared.
Any help here would be very helpful......

You can just replace the header image with one of your own by importing it - not through the inspector panel. The inspector panel as you say only does the page and browser background. Go to insert and click on choose you can then choose an image from your computer. Or through the media panel at the bottom of iweb.
Hope that is what you wanted to know.
Message was edited by: Hazell

Refresh problem with header image in OrgChart 2.1

Hi
We change the header image in OrgChart 2.1, replacing standard charttitle.png with one file named exactly equal. File is located in /OrgChart/root/images/charttitle.png.
This image are showed correctly, but when we restart the application, or restart the server, this file is replaced automatically with the standard charttitle.png.
¿Anybody knows how to solve it?
Best regards

Hi Xavier,
Try putting the file into /root/images in your build folder (e.g. /usr/sap/J2D/J74/j2ee/cluster/apps/Nakisa/OrgChart/servlet_jsp/OrgChart/root/.system/Admin_Config/__000_My_Build/root/images). Then when you publish it should write to the /root/images folder used by the application. I suspect that charttitle.png exists in /root/images in your build folder and this is overwriting anything in the main /root/images/ folder.
Good luck!
Luke

Header image on our outgoing email is ruined when secured

Our outgoing e-mail all gets a company header image. It's a 650 x 66 gif image that is applied to all outgoing messages right before hitting the ironport.
This header image goes out fine unsecured, but if we secure the message we run into a problem.
When I view the secure e-mail in CRES, I get a broken image link, and the image URL is changed to: cid:[email protected]
Although in the secure e-mail there is an attachment called short_header.gif. If I click on this attachment I see the header image open in a new browser window.
This is NOT what we want. We want the short_header.gif to be in the body of the message, like company letterhead. We were told prior to purchasing this appliance that this was possible. This is why we didn't go with Tumbleweed for secure e-mail, because that stripped the image and sent it as an attachment.
Any idea's how to get this working?

We are sending out the cid: matched to the content-id.
For example, the content id header before the data is:
------=_Part_27139_31810384.1256219199103
Content-Type: image/gif; name="short header.gif"
Content-Transfer-Encoding: base64
Content-ID: <200910229463981>
Content-Disposition: inline; filename="short header.gif"
and the image tag where we refrence this is embedded as:
This DOES work, but once we encrypt the message this breaks for some stupid reason. The CID isn't altered. It just shows short header.gif as an attachment and a broken image link at the top of the screen.
Any ideas?

CSS header images not visible except in design view

I have a recurring problem in my css designs, and it's driving me to drink. In my stylesheets I define background and header images that work beautifully in design view, but when you view it any browser the header image is gone. This is not the first time I have struggled with this and I am over it. On the example I have posted there is an image underneath (not below, actually underneath) the company name and slogan at the top of the page, but you sure can't see it can you? As a matter of fact the second line of text completely disappears because the header image is not displayed. If someone can show me where I am going wrong with this I would appreciate it. The link to the site is here:
http://firstvirginiaservices.com/test/index.html

This is a path issue.
You're testing your new website in a subfolder called test. The server does not know that.
Your header rule points to the image with a site root reference i.e. starting from the root folder
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(/images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;
That'll probably be OK when the site goes live but not while it lives in the "test" subfolder.
The server is looking for
http://firstvirginiaservices.com/images/header.jpg
but the images folder does not exist at the root folder level yet so the file is not found and the image does not display.
You really mean
http://firstvirginiaservices.com/test/images/header.jpg
The solution is to
EITHER
keep the root relative path and change the path temporarily in the CSS while you're working in the test folder
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(/test/images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;
then tweak the path (remove "/test") when the site goes live.
OR
use a document relative path in the #header rule (from the CSS folder location to the images folder location)
#header {
margin:0;
font-family: Verdana, Geneva, sans-serif;
background-image: url(../images/header.jpg) ;
background-repeat:no-repeat;;
text-align: right;

What is the best header image size?

Hi, I was wondering what is the ideal pixel dimensions for a header image in a form? I have tried both low and hi rez files and both get blurry.
Thanks!

You can check this post http://forums.adobe.com/docs/DOC-1621 to see any of the recommendations help in your case.
Thanks
Roman

Header image

Similar Messages

Maybe you are looking for