Making sidebar background images extend to footer

I am using one of the DW html 3 columned fixed width
templates and would like for my sidebar backgrounds to extend to
the footer regardless of whether their content is greater or less
than the middle main content div. I don't want to use /br or some
other hack. Is there a CSS-based way of doing this? Thanks!

Try this but you will need to use css for id tags...
<body id="container">
<table cellspacing="0" cellpadding="0" width="100%"
align="center">
<tr>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="menucat" valign="top" bgcolor="#F7F7F7"
width="160">
MENU CONTENT
MENU CONTENT
MENU CONTENT
</td><td width="160"><td width="80%">
<div id="content">
<table width="100%" cellpadding="0" cellspacing="0"
border="0" bordercolor="#C5DCE2" style="margin-bottom:15px;">
<tr>
<td class="menucat" style="padding:0px;" valign="top"
align="center">
<table width="100%" border="0" align="center"
cellpadding="0" cellspacing="15" bordercolor="#C5DCE2">
<tr>
<td valign="top">
CONTENT
CONTENT
CONTENT
</td>
<td align="center" border="0"><td>
</td><td align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table></td></tr></table>

Similar Messages

Having trouble making background image editable in template

Hello this is my first time so here goes...
I would like to make a template from a page I have created,
the trouble is the background image is url background image placed
in css with text over the image, the problem I have is on further
pages I would like to keep same divs
but would like the freedom to change text and bground image.
I have tried to make text an editable region which works and
bground image make attribute editable but I do not really
understand how this works any ideas would be much appreciated here
is my site address
http://www.andysite.prohost4u.co.uk
cheers

I'm confused, I dont see that you have a background image in
your css.
"WILLO THE WISP" <[email protected]> wrote
in message
news:[email protected]...
>
Hello this is my first time so here goes...
> I would like to make a template from a page I have
created, the trouble is
> the
> background image is url background image placed in css
with text over the
> image, the problem I have is on further pages I would
like to keep same
> divs
> but would like the freedom to change text and bground
image. I have tried
> to
> make text an editable region which works and bground
image make attribute
> editable but I do not really understand how this works
any ideas would be
> much
> appreciated here is my site address
http://www.andysite.prohost4u.co.uk
> cheers
>
>
> Here is my css
> * {
> margin : 0 auto;
> padding : 0;
> }
> body {
> background-color : #ffffff;
> text-align : center;
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> font-size : 100%;
> background-position : center center;
> }
> #container {
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> background-color : #ffffff;
> width : 780px;
> }
> #header {
> width : 780px;
> height : 280px;
> margin-top : 10px;
> margin-bottom : 10px;
> }
> #content {
> background-image: url(images/content_bground.gif);
> float: left;
> height: 400px;
> width: 430px;
> }
> #content h1 {
> font-size : 115%;
> width : 390px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> padding-top : 40px;
> padding-bottom : 10px;
> }
> #content p {
> font-size : 80%;
> width : 310px;
> text-align : justify;
> text-indent : 20px;
> color : #66FFFF;
> }
> #content h2 {
> font-size : 80%;
> width : 420px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> height : 70px;
> padding-top : 10px;
> }
> #sidebar {
> background-image : url(images/sidebar_bground.gif);
> width : 340px;
> height : 400px;
> float : right;
> }
> #sidebar ul {
> font-size : 60%;
> line-height : 22px;
> list-style-image : url(images/bullet.gif);
> list-style-position : outside;
> text-align : left;
> color : #66FFFF;
> padding-top : 45px;
> padding-left : 62px;
> }
>
> #clear {
> clear : both;
> }
> #footer {
> background-image : url(images/footer_bground.gif);
> width : 780px;
> height : 80px;
> margin-bottom : 10px;
> margin-top : 10px;
> position: fixed;
> }
> #footer p {
> text-align : center;
> font-size : 75%;
> color : #66ffff;
> padding-top : 24px;
> }
> #footer ul {
> margin : 2px;
> }
> #footer li {
> display : inline;
> margin : 0;
> }
> #footer a:link, #footer a:visited {
> color : #00ccff;
> margin : 2px;
> }
> #footer a:hover, #footer a:active {
> color : #00FFFF;
> text-decoration : none;
> background-color : #33cccc;
> }
> a:link {
> color : #00ccff;
> text-decoration : none;
> }
>
> a:visited {
> text-decoration : none;
> color: #00CCFF;
> }
> a:hover {
> text-decoration : underline;
> color: #00FFFF;
> }
> a:active {
> text-decoration : none;
> color: #006699;
> }
>

Footer background image stretching width of screen

I want to stretch my footer image the full width of the screen to mirror my header. It's easy for the header, as you simply designate this the body background image. The footer is different owing to differing page lengths. Is the only way to do this to take the footer div out of the container div?

Hi pziecina,
Actually, I found a simpler solution by creating a wrapper div for the footer outside the container div. I cannot be bothered to utilize CS3 yet and I absolutely hate conditional comments for IE...
This tutorial explains how to do it:
http://www.sohtanaka.com/web-design/achieving-liquid-backgrounds-with-fixed-content/

Setting background-image as editable in Fluid Grid Layout (Template file)

Hi, Im very basic on Dreamweaver so bare with me,
I am creating my first website and setting up my template file.
I am struggling with making my background image editable in the template file,
Alot of the awnsers point me into creating a new background style sheet which I have done.
I have included :
<link rel="stylesheet" href="../Background style sheet.css" type="text/css">
into my <head> in the source code and now im pretty lost for what to do next... I want to link it to all my mobile, tablet and desktop #main divs and then be able to edit the background image for my different web pages;
for example my home page is one background-image and then the other web pages all have other background images.
Sorry if I am not asking the right questions, I am very new to coding
Regards,
Confused Graphic Design student.

It's actually very easy to target the <body> of each page in an external stylesheet to change the background individually, just not with DW Templates.
Normally, what I would do is give each page's <body> tag an id, for example, on an about.html page...
<body id="about">
Then in the css, you would give the #about id a background-image setting...
#about {
background-image:url(about_bg.jpg);
Each page would have a similarly named id in the <body> and a corresponding #id in the css.
Side Note: Stick to lower case, alpha numeric file names for all of your pages and images. Use underscores or hyphens instead of spaces for them too. Servers are CaSe SenSitIvE and a link to Index.html (capital i) will not go to a page named index.html (lowercase i). It will work on your local system, just not on the server because the server sees the case structure difference as two separate files.

Size and rotate a background image

I would like to have a background image that rotates different images when the page is refreshed and sizes with my page. I believe I have a handle on the sizing part but I can't figure out how to make the images rotate. I would like the images to go in a particular order instead of random if that's possible.
This is what I have so far:
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%;;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#navbar {position:relative; z-index:1; padding:10px;}
#content {position:relative; z-index:2; padding:10px;}
</style>


</head>
<body>
<div id="page-background"><img src="stretchPix2.jpg" width="100%" alt="Smile"></div>
<div id="navbar">
<h2><img src="TestNavArt.gif" width="900" height="30"></h2>
</div>
<div id="content"><font color="#FFFFFF"> more test here?</font></div>
</body>
</html>
If anyone can give me some insight into making the background image rotate I would greatly appreciate it.
Thanks,
Dave

Hi
The only reliable way to rotate a background image is using css3 but as this feature is only implemented in 1 browser, (and that is in beta)? There are a few javascript frameworks that claim to do this, but in testing I have not found one that is even 50% reliable.
PZ

Color or background image of a page

Hi all.
We want to have multiple pages with different color or background image in our portal.
Via the theme editor it is possible to assign either a color or an image on the background of the portal body but that only gives us one look to choose from.
We have tried creating our own page layout with a specific background image but it does not work through the portal (it works fine doing a preview of the page though).
Has any of you had the same challenge wanting different backgrounds on the portal pages and found a usable solution?
PS!
Portal version is EP6 NW04 SP12.
Thanks in advance.
Søren

I think what you want is a nice clean strip that runs the width of the page that you can place tabs on top of. To give it a really professional look. We wanted the same effect but there is no easy way. I ended up making a background image for the page with a small stripe about an 1" from the top of the page that ran the width of the page. Then when the page is rendered, the tabs appear on top of the strip. That was our workaround.

Background image with Crystal Report 2008

Hi,
I have to develop an invoice report with a background image on the full page.
I have already develop some trying but i have not the right result:
1) Background image in page header
2) Create 2 different sections: one for the image and one with labels and data
3) Background image in report header
4) Background image in report footer
In all of my tests in Report > Section Expert, I check Underlay Following Sections on the Common tab
but never the image was printed in background respect of the different sctions.
I always got the image and then the rest of the report
Can you help me please?
Thank you for your attention
Bye
Edited by: EDPTEAM on Aug 30, 2011 5:52 PM

Hello Brian.
Thanks for you answer.
I do just like you say but i have the same problem.
My report is like an invoice: i have an header, a body with a group and 2 sections and a footer.
All the pages of my report must be printed on a background image (A4 format).
This is the problem.
If i create a report with image in a single section all is ok. But in my report if i use a small image, the image is printed and hide columns separator (simple vertical lines) and show data but the following sections lose their right position.
If I use the original image (A4 format) CR return the following error:
header or footer too large for the page
o similar word (I translate from italian to english because I am working with italian version).
Do you have other solutions?
Thank you wery much.
Best regards

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

Background image in extended awt.Button doesn't show.

Hi all
I have an applet that has only an awt.Button visible on the page. Because of layout requirements I need to style that button with a background image. I have extended the java.awt.Button like this:
     class ImageButton extends Button {
          public void paint(Graphics g) {
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), "../img/loadSertificate.jpg"),
                         0, 0, null);
     }and use the extended:
     public void init() {
          mSignButton = new ImageButton();
          mSignButton.setLocation(0, 0);
          Dimension appletSize = this.getSize();
          mSignButton.setSize(appletSize);
          mSignButton.addActionListener(new ActionListener() {
               public void actionPerformed(ActionEvent e) {
                    signSelectedFile();
          this.setLayout(null);
          this.add(mSignButton);
     }Now everiting is ok but when the applet is loaded the background image doesn't show and only a plain gray button is visible. The interesting part is that the image does show after I click somewhere in the browser's window and later on it's always visible as expected.
Below is part from the log from the java console:
basic: Applet started
basic: Told clients applet is started
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpg
network: Cache entry found [url: http://ip:8080/UserManagement/img/loadSertificate.jpg, version: null]
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with proxy=DIRECT
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with cookie "JSESSIONID=8A0936441BDA3215A10D9798742C4685"
network: CleanupThread used 39850 us
network: ResponseCode for http://ip:8080/UserManagement/img/loadSertificate.jpg : 304
network: Encoding for http://ip:8080/UserManagement/img/loadSertificate.jpg : null
network: Disconnect connection to http://ip:8080/UserManagement/img/loadSertificate.jpg
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpgAny suggestions how to fix this issue?!
Edited by: factor5 on Nov 12, 2009 1:27 AM
Edited by: factor5 on Nov 12, 2009 1:28 AM

xmm sry but this was a forgotten repaint() :
          public void paint(Graphics g) {
               // call super's paint method
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), APPLET_BUTTON_IMAGE_URL),
                         0, 0, null);
               repaint();
          }Now it seems to work fine.
Edited by: factor5 on Nov 12, 2009 1:44 AM

Background images not coming for taskflows extended in webcenter.

Hi,
I have created an ADF Task flow.The jsff page has a pop up which contains a backgroung image.But when i extend the adf task flow as a shared library in webcenter,I have not abloe to see the background image in webcenter.
Thanks,
Ananya

Hello Doctor,
I am not sure but could it be related to SU01 --> Defaults --> Delete after output option
Or with note 1468596 - Trivial job logs are automatically deleted
Can you check?
Regards,
Yuksel AKCINAR

Footer over background image

I have a site with a large different background image behind every page. I want the footer to be stick to the bottom of the browser window, with the background image going behind the footer.
Muse pushes the footer below that background image.
Suggestions?
Jeff

Hello, I can think of 2 ways to fix this.
1. Use this background image as browser fill and it will stay behind the footer.Second half of the video below explains how to do that.
Add an image to the background of the page or browser | Adobe Muse CC tutorials
2. You can also use layers tab in muse.
    Create a new layer in Layers tab
    Move the new layer below the existing layer (drag and drop).
    select the footer items and move them to the lower layer by right click > Move to layer > select the lower layer. Make sure Footer items are below the layer that has the background image. Check more about layers in the like : Adobe Muse Help | Working with Layers
Regards
Vivek

Help needed making background image a clickable link

Hi guys,
I want to make the background of my site an advertising background where the background image is clickable.
I've tried a few tutorials but none seem to be working
What I've got is this as my CSS...
#skin {position: absolute;
    width: 100%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-position: fixed;
...and this as my HTML...
<div id="skin"><a href=""><img src="background.jpg" /></a></div>
It kind of works but the link is only a thin strip either side of the screen for some reason and doesn't span the whole image background.
Does anyone have any ideas as to where I'm going wrong?
Thank you very much and hope to hear from you!
SM

Spindrift wrote:
Basically, what I want to do is have an advertising skin as the background (can just be a dummy container div to act as the background) of my website, so that it fills the area outside my sites' container div and opens a link when clicked on.
Does anyone know how I can do this?
This can be done relatively easily but it's not very pretty. You will need to use a full-size image for the background, unless you plan to repeat it and set the clickable container to exactly that size. See code and screenshot below. Tested in FF, Chrome and IE9.
<head>
<style>
body {
    width:100%;
    height:100%;
    margin:0;
#background {
    background: #000 url(your-background-image.jpg) no-repeat 0 0;
    display: block;
    height: 1280px; /* change to your image height */
    position: fixed;
    width: 1920px; /* change to your image width */
#wrapper {
    background-color: #FFFFFF;
    border: 1px solid #333333;
    left: 50%;
    margin-left: -480px; /* half the width */
    min-height: 500px;
    position: absolute;
    width: 960px; /* wrapper width - unclickable area */
</style>
</head>
<body>
<a href="" id="background"></a> 
    <div id="wrapper"> 
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>

When I try to print, I get one page with a header and the background image, another page with the content, and a third page with a footer and background image. How can I make it print properly?

Also, if I print to a .pdf, the background does not show up even if I have the checkbox checked to print background image.
The site I'm trying to print is:
[http://www.puertovallartatours.net/coupons-discounts.htm http://www.puertovallartatours.net/coupons-discounts.htm]

I did not have the HP printer software for Mac OSX installed properly. Once installed the problem went away.

Making background image clickable link

I have several div tags with background images in them. I want to make the background images clickable links. what is the easiest way to do this?

Yes, the background image can be made clickable.
Here is the link to get the info to one method: http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/
Basically it is written like this:
==CSS==
#bkgrdimage {
    background-image:url ('image.png');
    display:block;
    height:??px;       (image height)
    width:??px;        (image width)
    text-indent:-9999px;
==HTML==
<a href="http://????" title="Title of Link" id="bkgrdimage">Basic Text For this Link</a>
The text indent places the "basic text for this link" outside the browser screen.

Populate Empty DIV with Background Image

I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.

joycwang wrote:
I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.
I don't fully understand what you have said below?
'How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? '
(not color) is the bit that confuses me?
You have a background image that you want behind all 3 columns? This background image is not color? Is it an image?

Making sidebar background images extend to footer

Similar Messages

Maybe you are looking for