Replacing images used as a link with background image

OK - I'm embarrassed to say that what I'm trying to do is
blindingly
obvious, and I've used Dw for several years - and do most of
the work
in code view but I'm having a senior moment and can't do what
I want.
I've read that when you use images on a page for background
styling,
for example the logo, or an image of a professional body such
as IEE,
it is more semantically correct to use CSS background images
rather
that a <img src=
tag
So I have a div in which I put the background, but then
perhaps quite
logically you can't directly put a link to it. So how do you
do it.
I've tried to ensure there was a block element so when you
hover l
mouse over it you get a block link - but no joy.
maybe my dyslexia early is the sign of premature brain fade
~Malcolm N....
~

You cannot place a link on a background image. However, you
can place a
link on a transparent image floated over the background.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]..
>
> OK - I'm embarrassed to say that what I'm trying to do
is blindingly
> obvious, and I've used Dw for several years - and do
most of the work
> in code view but I'm having a senior moment and can't do
what I want.
> !!!
>
> I've read that when you use images on a page for
background styling,
> for example the logo, or an image of a professional body
such as IEE,
> it is more semantically correct to use CSS background
images rather
> that a <img src=
> tag
>
> So I have a div in which I put the background, but then
perhaps quite
> logically you can't directly put a link to it. So how do
you do it.
>
> I've tried to ensure there was a block element so when
you hover l
> mouse over it you get a block link - but no joy.
>
> maybe my dyslexia early is the sign of premature brain
fade ;-)
>
> --
>
> ~Malcolm N....
> ~

Similar Messages

  • 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

  • Problem with Background image and JFrame

    Hi there!
    I've the following problem:
    I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
    public class MContentPane extends JComponent{
    private Image backgroundImage = null;
    public MContentPane() {
    super();
    * Returns the background image
    * @return Background image
    public Image getBackgroundImage() {
    return backgroundImage;
    * Sets the background image
    * @param backgroundImage Background image
    public void setBackgroundImage(Image backgroundImage) {
    this.backgroundImage = backgroundImage;
    * Overrides the painting to display a background image
    protected void paintComponent(Graphics g) {
    if (isOpaque()) {
    g.setColor(getBackground());
    g.fillRect(0, 0, getWidth(), getHeight());
    if (backgroundImage != null) {
    g.drawImage(backgroundImage,0,0,this);
    super.paintComponent(g);
    Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
    the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
    It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
    Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
    Thx in advance

    I still prefer using a border to draw a background image:
    import java.awt.*;
    import java.awt.image.*;
    import javax.swing.border.*;
    public class CentredBackgroundBorder implements Border {
        private final BufferedImage image;
        public CentredBackgroundBorder(BufferedImage image) {
            this.image = image;
        public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
            int x0 = x + (width-image.getWidth())/2;
            int y0 = y + (height-image.getHeight())/2;
            g. drawImage(image, x0, y0, null);
        public Insets getBorderInsets(Component c) {
            return new Insets(0,0,0,0);
        public boolean isBorderOpaque() {
            return true;
    }And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
    import java.awt.*;
    import java.io.*;
    import java.net.URL;
    import javax.imageio.*;
    import javax.swing.*;
    import javax.swing.border.*;
    public class BackgroundBorderExample {
        public static void main(String[] args) throws IOException {
            JFrame.setDefaultLookAndFeelDecorated(true);
            JFrame f = new JFrame("BackgroundBorderExample");
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            JTextArea area = new JTextArea(24,80);
            area.setForeground(Color.WHITE);
            area.setOpaque(false);
            area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
            final JScrollPane sp = new JScrollPane(area);
            sp.setBackground(Color.BLACK);
            sp.getViewport().setOpaque(false);
            f.getContentPane().add(sp);
            f.setSize(600,400);
            f.setLocationRelativeTo(null);
            f.setVisible(true);
            String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
            final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
            Runnable r = new Runnable() {
                public void run() {
                    sp.setViewportBorder(bkgrnd);
                    sp.repaint();
            SwingUtilities.invokeLater(r);
    }

  • FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

    Figure I'll mention this here as well.
    When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
    Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
    Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
    I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
    Thanks,
    Mark H

    I tried, but could not see and problem.
    Hello,
    In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
    Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
    Thank you!

  • Looking to create fully editable PDF files with background images

    Hello and thank you, I create menu's and flyers for a group of restaurants. I need to make text editable PDF menus with background images. I believe Livecycle is able to do this, but would really like to hear it from someone who knows for sure. Again thank you.
    Cheers,
    Charlie

    Yes it can. Download a free trial and try it out.

  • TextImage shows links with chainlink image.  Why?

    The TextImage component shows my links with chainlink image.  Why?  Even in preview mode, it shows the chainlink image and the links are not clickable.
    See the bottom-right of the attached image.  How can I fix the links?

    Thanks Justin.  That was the problem.  I had written "www.google.com" instead of "http://www.google.com".

  • How do I substract an image at the time t with an image at t-1 to detect move in a grab acquisition

    After the VI acquire in a grab acquisition, how do I substract an image at the time t with an image at t-1 to detect the movement in the scene?

    Hello,
    One way of doing that is to do a ring acquisition with two buffers. At anytime one of your buffers will be the most current frame and the other will be one before the most current. Having both buffers available at anytime in your code you can call IMAQ Subtract.
    Hope this helps!
    Yusuf C.
    Applications Engineering
    National Instruments

  • For the last 2 days whenever I try to upload photos from my iPhoto page to facebook I get an error message: Bad Image There was a problem with the image file.  I haven't knowingly changed any settings on iPhoto or facebook. Can anyone help, please ?

    I need help with uploading photos from iPhoto to facebook. I could do it till 2 days ago. Now any new photo I try to upload gives me an error message:
    Bad Image
    There was a problem with the image file. 
    Please help.

    Can you drag it to the Desktop?

  • Using tracing image, then replacing with background image

    I am very new to Dreamweaver, and am trying to put together a very simple site.
    I am using a tracing image for the layout table mode – and am tracing it exactly. However, when I out put it to test in my browser,
    nothing lines up how it shows in my work environment.
    Am i missing something "very" obvious? Thanks.

    1) Don't ever use table layout mode. It's a terrible way to build web pages.
    2) No matter how hard you try, you can't make stuff stick to a big background image.  It's like trying to nail Jell-O to a wall.
    Have a look at the following tutorials. These will get on the right track.
    From  Tables to CSS Web Design Part 1 -
    http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
    From  Tables to CSS Web Design Part 2 -
    http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
    Post back if you run into any trouble.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Working with Background images

    HI. I have a project which contains a few slides with the same background image...an image that was caught with Snagit and then merged onto the slide. I anticipate needing to replace this image with an updated one in the near future. Is there a quick and easy way of replacing that image (which contains a number of captions, highlight boxes, etc) without having to recreate the entire slide from scratch?

    Hello again,
    Please save the image (p.e. as a PNG) on your PC, do not copy it to the Clipboard. The workaround I described would work, but here is even a shorter way:
    Open the Slide Properties (righ mouse click menu)
    Use the button 'Change background image' and point to the image saved.
    The background image will be replaced, you will see both of them in the Library in this case
    But there will be no problem to delete the old image (right mouse click on the image in the Library)
    Try it,
    Lilybiri

  • Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

    Flash Professional CC
    I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
    Here are two cases:
    Case #1:
    This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
    SCREEN.
    Case #2:
    This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
    mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;
    This results in a close up of the background image.
    Here is the code that I'm using:
    import com.greensock.TweenLite;
    import com.greensock.easing.*;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    //When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
    /*stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;*/
    var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
    var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
    var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
    var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
    var chapters: MC_CHAPTERS = new MC_CHAPTERS();
    var _stageWidth = 1024;
    if (stage.stageWidth > _stageWidth)
        //Add bigger background if the stage is bigger than 1024
        mainBackground_2208.x = stage.stageWidth/2;
        mainBackground_2208.y = stage.stageHeight/2;
        addChild(mainBackground_2208);
        //Using this code results in a very close up view of the stage on iPhone 6 plus  
        /*mc_stageBackground_Main.scaleX = stage.stageWidth;
        mc_stageBackground_Main.scaleY = stage.stageHeight;*/
        //Adds corner to the main screen.
        mainCorner.y = stage.stageHeight;
        mainCorner.x = (stage.stageWidth - stage.stageWidth);
        addChild(mainCorner);
        TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
        //add logo to sit at 50 pixels from the top of the stage
        /*main_logo.x = stage.stageWidth/2;
        main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
        addChild(main_logo);
        TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
    else
        trace ("The stage is 1024 or smaller");
        //Add 1024 background if stage is 1024 or smaller
        mainBackground_1024.x = stage.stageWidth/2;
        mainBackground_1024.y = stage.stageHeight/2;
        addChild(mainBackground_1024);
        //Adds corner to the main screen.
        mainCorner.y = stage.stageHeight;
        mainCorner.x = (stage.stageWidth - stage.stageWidth);
        addChild (mainCorner);
        TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
        //adds chapters
        chapters.x = (stage.stageWidth - stage.stageWidth)+75;
        chapters.y = stage.stageHeight - 120;
        addChild(chapters);
        TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});  
        //adds the Main logo to sit at 50 pixels from the top of the stage
        main_logo.x = stage.stageWidth/2;
        main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
        addChild(main_logo);
        TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

    On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

  • How to read ZIP files(having PDFs,Image) using MQ Series link for R/3

    Hi,
    1)Is it possible to transfer a zip file (having an image or pdf) using IDocs in SAP 4.6C using MQ Series link for R/?
    Scenario: "MQ Series link for R/3" converts Business-Reports from a third-party software,into SAP IDocs.Each Business-Report contains one XML file and one ZIP file.
    2)Being on ABAP side,do I have to worry about how the zip file would be converted into IDocs?
    Detailed descrption:
    This scenario requires integration of a non-SAP software which talks in XML with SAP R/3(4.6C).The customer has decided to go with 'MQ Series link for R/3' (which integrates any non-SAP application running on IBM MQ Series to R/3,by converting data(in any format) into IDocs).He is not ready to go for XI.
    The Problem area is a functionality which requires the non-SAP software to send XML file along with an attached Zip file.So,XML document,basically,has a 'zippedFile' XML element having actual file in XML keyword 'file'.
    This XML document ideally, should be converted by the subsystem(MQSeries link for R/3) into IDocs i.e. into a stream which could be stored in a table on R/3 side and later, sent back to the non-SAP software through MQ Series link to be converted into zip-file again with corresponding pdfs,images.I want someone who has worked in a similar scenario to confirm this.

    Hi,
    I have a feeling I have posted this question in the wrong forum or maybe I will let you decide this.Any help would be appreciated (even the right forum name).
    My scenario requires integration of a non-SAP software which talks in XML with SAP R/3(4.6C).The customer has decided to go with 'MQ Series link for R/3' (which integrates any non-SAP application running on IBM MQ Series to R/3,by converting data(in any format) into IDocs).He is not ready to go for XI.
    The Problem area is a functionality which requires the non-SAP software to send XML file along with an attached Zip file.So,XML document,basically,has a 'zippedFile' XML element having actual file in XML keyword 'file'.
    This XML document ideally, should be converted by the subsystem(MQSeries link for R/3) into IDocs i.e. into a stream which could be stored in a table on R/3 side and later, sent back to the non-SAP software through MQ Series link to be converted into zip-file again with corresponding pdfs,images.I wanted someone who has worked in a similar scenario to confirm this.

  • A a:link has background image

    I have a bkg img in my nav and bottom nav. (navBkg.jpg) These navs are styled very specifically for the nav and bottom Nav in my css.  However all the a links are displaying this background, rather than just the nav and bottom Nav.  You can see it in the lower box (Eva prim's Snack of the Week Club) where it says "...read more."
    http://carriecoren.com/test/Sept9
    here's the css:
    @charset "UTF-8";
    #column3 img {
              margin-left: 10px;
    @font-face
    font-family: myFirstFont;
    src: url(Gondola_SD.ttf); 
              margin:0;
              padding:0;
    a, a:link, a:hover {
                        background-image: url(../images/whtBkg.jpg);
    body {
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 18px;
              margin-right: auto;
              margin-left: auto;
              text-align: left;
              background-image: url(../images/blue_bg_vert.jpg);
              background-repeat: repeat-x;
              background-color: #000;
    #container {
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              margin-top: 0px;
              margin-bottom: 0px;
              text-align: left;
              background-color: #FFF;
              background-image: url(../images/containerBkg.jpg);
              background-repeat: repeat-y;
    #content  {
              width: 920px;
              padding-right: 20px;
              padding-left: 20px;
    #header {
              background-image: url(../images/header.jpg);
              background-repeat: no-repeat;
              padding: 0px;
              height: 280px;
              width: 960px;
              text-indent: -9999px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
    /* column 1 */
    #column1 {
              width: 590px;
              margin-top: 30px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              background-image: url(../images/column1art.jpg);
              padding-bottom:50px;
              float: left;
    #column1  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
              padding-left: 253px;
              padding-right:10px;
              padding-bottom:10px;
    #column1  h1{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              padding-left: 240px;
              padding-bottom:10px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* column 2 */
    #column2 {
              background-color: #FFF;
              padding: 0px;
              width: 250px;
              margin-top:30px;
              margin-right: 20px;
              margin-bottom: 0px;
              margin-left: 10px;
              float: right;
              padding: 0px;
    #column2 li {
              list-style-type: none;
              display: inline;
              padding: 0px;
              margin-top: 0px;
              margin-right: 8px;
              margin-bottom: 0px;
              margin-left: 0px;
    #column2 a, a:link {
              margin-top: 0;
              margin-right: 0px;
              margin-bottom: 0;
              margin-left: 0;
              padding-top: 0;
              padding-right: 0;
              padding-bottom: 0;
              padding-left: 0;
    /* column 3 */
    #column3 {
              width: 550px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              padding: 20px;
              float: left;
              height: px;
              background-color: #FFF;
    #column3  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
    #column3  h2{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-bottom:10px;
              font-size: 16px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: left;
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    h1{
              padding-bottom:10px;
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* the main nav */
    #nav {
              width: 960px;
              height: 35px;
              margin-bottom: 10px;
              padding-top: 5px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              text-align: center;
              font-size: 14px;
              line-height: 30px;
              font-family: "Gondola SD", "Gondola SD - Swash";
              border-top-width:thin;
              border-color:#000;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat;
    #nav ul { /* this is the main nav list */
              list-style:none;
              margin-bottom:0px;
              width:100%;
              margin-top: 0px;
    #nav li {
              display: inline;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
    #nav li a, a:link {
              padding-right:25px;
              padding-left:15px;
              text-decoration:none;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              vertical-align: bottom;
              width: 100%;
              padding-top: 0px;
              padding-bottom: 0px;
              margin-top: 0px;
    #nav li a:hover{
              background-image: url(../images/navBkgHover.png);
              background-repeat: repeat-x;
              padding-top: 6px;
              margin-top: 0px;
              width: 100%;
    /* bottom nav */
    #bottomNav {
              width: 960px;
              background-color: #003399;
              margin: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
              border-top-width: 9px;
              border-top-style: solid;
              border-top-color: #000;
              text-align: center;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              float: left;
              height: 25px;
    #bottomNav ul {
              list-style:none;
              font-weight:bold;
              margin-bottom:0px;
              margin-top: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
    #bottomNav li {
              margin-right:0px;
              position:relative;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 0px;
              padding-bottom: 0px;
              display: inline;
    #bottomNav a, a:link {
              margin-right:0px;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 7px;
              padding-bottom: 7px;
              display: inline;
              margin-top: 10px;
              margin-bottom: 0px;
              color: #DDD;
    #bottomNav a:hover {
              color:#DDD;
              background:#660000;
    #pinterest {
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
    #twitter {
              background-color: #FFF;
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
              height: 100%;
              margin-top: 15px;
    #social {
              width: 250px;
              height: 58px;
              background-color: #FFF;
    #copyright {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9px;
              line-height: 20px;
              color: #222;
              text-align: center;
              width: 100%;
              float: left;
    #contact {
              margin: 0px;
              height: 140px;
              width: 50px;
              padding-right: 10px;
              padding-left: 20px;
              border: thin solid #222;
              padding-top: 40px;
    .clear {
              width: 900px;
              color: #EEE;
              margin-top: 100px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
              clear: both;
    #container #content #clear {
              width: 700px;

    OK, you didn't need to post your CSS here, it's available on the page.
    But I am confused. Perhaps I am misreading you here.
    You have your bottom nav and your top nav. Then you have your "read more" which is not nav-it's just a link. Doesn't have your nav background.
    When you set the rules for links for Column 3, you set the way the "read more" would work:
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    So when you hover, it turns bold and maintains the same color. And the background for links in Column 3 is white, which is the background for column 3. Really not needed.
    Additionally, the W3C Validator is finding problems with your page. Please fix those, then get back to us.

  • How do you make a rectangle resize with background image?

    I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

    As I understand. correctly.  You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

  • Help with background image center position in firefox

    See here on
    firefox<<<
    i dont know whats going wrong, i tried many different ways
    with divs only but doesnt work...
    any help appreciated...
    css
    /* CSS Document */
    body {
    background-image:url("resources.jpg");
    background:url("resources.gif") no-repeat center;
    .textstyle01res {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:62%;
    color:#FFFFFF !important;
    text-align:center;
    padding-top:360px;
    text-decoration:none;
    .textstyle01res a {
    color:#FFFFFF !important;
    text-align:center;
    padding-top:360px;
    text-decoration:none;
    html
    <!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=iso-8859-1" />
    <link href='res.css' rel="stylesheet" type="text/css"
    media="screen" />
    <title>Feast of Marriage - Resources</title>
    <style type="text/css">
    <!--
    body {
    background-color: #147972;
    -->
    </style>
    </head>
    <body>
    <div style="width:940px; height:140px;">
    </div>
    <div style="padding-left:227px;" align="center">
    <table width="200" border="0">
    <tr>
    <td><img src="res-a.jpg" border="0"
    alt=""/></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    css:
    table#centerTable {
    margin-left: auto;
    margin-right: auto;
    html:
    <body>
    <div style="width:940px; height:140px;"></div>
    <table id="centerTable" width="200" border="0">
    <tr>
    <td><img src="res-a.jpg" border="0"
    alt=""/></td>
    </tr>
    </table>
    </body>
    Lampros_uk wrote:
    >
    http://www.3ddream.net/feast/resources.html<<<
    > i dont know whats going wrong, i tried many different
    ways with divs only but
    > doesnt work...
    > any help appreciated...
    >
    > css
    > /* CSS Document */
    >
    >
    > body {
    > background-image:url("resources.jpg");
    > background:url("resources.gif") no-repeat center;
    > }
    >
    > .textstyle01res {
    > font-family:Verdana, Arial, Helvetica, sans-serif;
    > font-size:62%;
    > color:#FFFFFF !important;
    > text-align:center;
    > padding-top:360px;
    > text-decoration:none;
    > }
    > .textstyle01res a {
    > color:#FFFFFF !important;
    > text-align:center;
    > padding-top:360px;
    > text-decoration:none;
    > }
    > --------------
    >
    > html
    > <!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=iso-8859-1" />
    > <link href='res.css' rel="stylesheet" type="text/css"
    media="screen" />
    > <title>Feast of Marriage - Resources</title>
    > <style type="text/css">
    > <!--
    > body {
    > background-color: #147972;
    > }
    > -->
    > </style>
    > </head>
    > <body>
    > <div style="width:940px; height:140px;">
    > </div>
    >
    >
    > <div style="padding-left:227px;" align="center">
    > <table width="200" border="0">
    > <tr>
    > <td><img src="res-a.jpg" border="0"
    alt=""/></td>
    > </tr>
    > </table>
    > </div>
    > </body>
    > </html>
    >
    >

Maybe you are looking for