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
>

Similar Messages

Centering Images using CSS but having links on the Images

Hi all,
I have a problem on centering an image using CSS. I read on many forums that you have to use margin-left , margin-right and set to auto. and also set the display:block which I had done.
The problem is if I want to have a link from the image. Because I have set the display to block, the link will span the entire container containing it! How do I resolve that? I only want the image to be linkable and not the entire container!
Thanks for reading!

Murray *ACP* wrote:
Because I have set the display to block, the link will span the entire container containing it!
That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.
Hi Murray,
Weirdly it does in my experiments. (code below). Even if I set the 'a' tag to the width of the image it still makes the whole <div> container clickable:
<!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>Untitled Document</title>
<style type="text/css">
#imgWrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #000;
#imgWrapper img {
    margin: 0 auto;
    display: block;
</style>
</head>
<body>
<div id="imgWrapper">
<a href="http://www.bbc.co.uk"><img src="slice_2.jpg" width="595" height="130" /></a></div>
</body>
</html>

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;

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;

Links in mouseover images to change with the images

I have created a page with mouseovers on page headings that affect the main page image -- mouseover image 1 and the main image changes, mouseover image 2 and the main image changes again etc.
I have set the mouseovers not to revert on mouseout, so the mouseover images remain until you mouseover another of the heading images.
I need to set up links within the main images using image maps (I'd like to have mouseovers in there too, but have no idea if this is possible), links that change depending on which of the images is currently showing. How can I do this?
thanks in advance.
Dreamweaver CS3
Mac OS X 10.5.8
imac 2.8ghz extreme intel core duo
4gb ram
1tb internal, 2x1tb external

Just speculating here, but as long as you bring in the images to which you want to add the image-maps as foreground (not background) images, you should be able to do this.
That is, set up a "show/hide" behavior and not a changing background image (CSS). Background-images are just that, background, and they don't (as far as I know) have any events associated with them to which to attach behaviors.
You will have to set up the image-maps while the image is 'showing', of course. So before you set up the show/hide, expose the image, apply the image maps, then set up the show/hide.
Let me know if this works out for you!
Beth

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 do you remove link box around images?

I have put a link on a firework image that I created. When I put the files up it looks fine on my computer but a blue box keeps showing up on older computers. It is a bright blue color and looks very weird. Is there a way to have a link on the image but without a blue box around it? Or at least change the color of the link so it matches the site. Thanks!

'In the stylesheet add the following: (or in the head of the document if that's where your style rules are).
a img {border: none}
This will ensure there is no border on *any* images that have links attached to them.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

Can I dynamically display Page title over a static header image?

Is there a way to Dynamically Display Page Title Text Over my static site Header Image? here is a link so you can see what I am talking about. http://www.bridgestoprosperity.org/See-Our-Work/afghanistan/afghanistan.htm where Afghanistan would be the text to be replaced automatically on each page. Please note, currently, I must create individual headers, insert the page title in photoshop, etc. I am hoping to figure out a way for all this to happen dynamically perhaps by calling the text from the page title info.
Thank you,
Allan

Hi, Allan,
I realize my suggestion is off your point, and you probably have already thought of some of this, hence your question... But, rather than going the dynamic route, Why not create a Header Image without a title on it and use it as a div background image? Replace this
<img src="/See-Our-Work/afghanistan/Images/header/afghanistan-header.jpg" name="topnavbar_r1_c1" width="779" height="114" border="0" alt="bridges to prosperity: afghanistan">
with the styled div, for instance:
<div id="header"><h2>Afghanistan</h2><h3>Bridges to Prosperity: USA</h3><div>
At this point, you can use a more generic image for the background, one that does not have "Afghanistan" embedded in it, and you may style the #header thus:
#header {
     width: 779px;
     height: 114px;
     border: 0;
     background-image: url(/See-Our-Work/Images/header/header.jpg;)/* for instance */
and the header Headline styles thus:
#header h2, #header h3 {
     color: white;
     text-align: right;
     font-family: Arial, Helvetica, sans-serif;
Then you can place your html (<h2>, <h3> etc.) in the same div, only on the "surface".
Using the tags <h2> and <h3> will maintain their usefulness to Search Engines; as hiding them in images does not.
If you still wished to vary the header image, depending on the contents of the page, you can actually control all of this from the CSS file, if you add an id attribute to the <body> of each page.
For instance, for your example page, if you did this:
<body id="afghanistan">
You could then do this in your CSS file:
#header {
     width: 779px;
     height: 114px;
     border: 0;
body#afghanistan #header {
     background-image: url(/See-Our-Work/afghanistan/Images/header/afghanistan-header.jpg);
You could then proceed to have a different background image for each page. (Not your original intention, but now possible).
<body id="pakistan"> would use a CSS style declaration like:
body#pakistan #header {
     background-image: url(...pakistan-header.jpg...etc.);
I am not aware of being able to pass content (other than background images) using CSS, so I would go into each page and put the Headline in html.
But if you were using multiple background images in the header div (one image for afghanistan, another for pakistan, in my example), you can use the same <body id="afghanistan"> for ALL pages about Afghanistan, and thus have the continuity of the same image for all. Likewise, you could id all pages about Pakistan <body id="pakistan">.
I hope this gives you some ideas...
Z

What to do about these overly large header images

Hi,
I have a header image that is big and wide, 950px by 400px. It takes a tad long to load and plus I need to make a part of it clickable to link to another page.
If this were six years ago I'd slice it up and put it in a table. But I refuse to do things the old way. Can anyone suggest a good way to make this header load faster and slice it up in a CSS friendl manner?
Thanks,
Stan

I'm not entirely correct.
The loading of images varies on both the browser and the server.
>
HTTP/1.1 spec, 8.1.4
>Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than
2 connections with any server or proxy.
If you follow this concept, loading 3 different 900 KB+ images from a single server
should result with the third image not starting to load until either of the first two images completely loads. But this seems to be a theoretical spec. The HTTP/1.1 server I just tested does not seem to follow this. But then we rarely make persistent connections to a server.
On a test I just ran with IE, FF, Safari, Chrome, and Opera, only Safari had a random loading of images with this layered DIV technique. The other browsers appear to start to load all the images at the same time (the smallest stand-in images fully load first as they arrive more quickly).
You can test this for yourself on your own server and browsers with 3 different sets of an exaggerated small file of 2 KB and a large file of 900 KB. Unless the browser is extraordinary, the small files will load first.
YSlow, a Firefox add-on, is very helpful in picking apart page load issues.
>Make the real image as small as you can and let it go at that.
At about 40 KB for the image in question, I would agree. This should not be a problem for the average DSL/cable user. Dial up users should already be tolerant of image loading times and would not be any more adversely affected.
...and if your client complains that the image loads slowly, tell them that you will work on it tonight and they should check it in the morning. The cached image will load much more quickly. :)

Wordpress Header Image

Trying to edit wordpress theme with Dreamwaver. Have setup all according to tutorials and everything works; however, the header image appears in a box with a question mark in it. I've rechecked the code according to the tutorial and cannot figure out the problem

<?php
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
* @package WordPress
* Tells WordPress to load the WordPress theme and output it.
* @var bool
define('WP_USE_THEMES', true);
/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');
and here is the header.php 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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php wp_title('-',true,'right'); ?>
<?php bloginfo('name'); ?>
</title>
<link rel="Shortcut Icon" href="<?php echo bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="bannerArea">
<div class="container">
    <div class="bannernav"><a href="#" >Privacy Policy</a> • <a href="#" >Contact Us</a> • <a href="#" >Site Map</a></div>
    
    <a href="<?php echo get_option('home');?>">
    <img src="images/blog_head.png" width="300" height="83" alt="company blog" border="0" /></a>"    
    <div style="clear:both;"></div>
</div>
</div>

<div class="topnavigationArea">
<div class="container">
    <div class="topnavigationgroup">
      navigation goes here
    </div>
    <div style="clear:both;"></div>
</div>
</div>

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.

Link on background image

I created and inserted a background image in the Container. It includes "link buttons" built into the image in Photoshop, meaning images intended to be clicked in order to move to another page. I can't create hotspots/image maps to use to create links because the image is a background image.
How do I create the actual hyperlinks to make the "buttons" function as navigiation links?
Thanks for your suggestions.
Barry

Google is your friend.
Search term
"Links on background images"
First link in search result
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
#yourdiv {
    background-image:url(image.png);
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
You will need to style the position of the div(s)
Learn CSS
Shane

How do you change the font in WPC Link List Header ...

Does any one know how/where to change the font in Web Page Composer on the Link List Header? I am using the Link List header delivered with the product.
It looks like it is pulling arial font but we are adding content in a different font in the paragraphs and want the fonts to be the same. Is there something I can change in the theme?
thanks
Angie.

You need to go to the
Content Adminstration/KM Content/etc/wpceditor/css/runtime and look in the sdn_general.css file. The controls are all there. You can rename or create a new style sheet as this will modify all WPC sites.

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>

Css - linking to header image

Similar Messages

Maybe you are looking for