Displays the image behind floating images above?

Hi, im of problems trying to find the error or maybe ive missed something. If you could look at the code and tell me why the image appears behind the images floating above it to halfway:

Here's a rough idea of what I mean...

This is the full image:

[IMG] http://I28.Tinypic.com/2v26qa9.jpg [line]

and its display like this:

[IMG] http://I32.Tinypic.com/iof71y.jpg [line]

{#menu_left}
float: left;
height: 71px;
Width: 484px;
}
{#menu_right}
float: right;
height: 71px;
Width: 484px;
}
#bottom { *This poster image behind the left
background-image: url(images/bottom.jpg);            and good menu (frames).
height: 229px;
Width: 968px;
padding: 0px;

and

(< body onload="MM_preloadImages('images/menu_left_roll.jpg','images/menu_right_roll.jpg')" > "
< div id = "container" >
< div id = "banner" > < / div >
< div id = "menu_conatiner" >
"< div id ="menu_left"> < a href ="resturants.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('menu_left',", ' images/menu_left_roll.jpg', 1) "> < img src =" images/menu_left.jpg "name ="menu_left"width ="484"height ="71"border ="0"id ="menu_left2"/ > < / has > < / div >
"< div id ="menu_right"> < a href ="barsclubs"MM_swapImgRestore" onmouseover = "MM_swapImage ('menu_right',", ' images/menu_right_roll.jpg', 1) "> < img src =" images/menu_right.jpg"name ="menu_right"width ="484"height ="71"border ="0"id ="menu_right2"/ > < / has > < / div >"

< / div >

< div id = "bottom" > < / div >

< / div >
< / body >

Hello:

When you apply the float property these elements are removed from the flow of the document. What I mean is that when the page is rendered to the browser will process floated element as if they aren't there and so push up the underlying content.

How to fix is to use clear property to clean the floats.

So, in your code, try following:

OR add clear: both in your css #bottom class as follows

{

background-image: url(images/bottom.jpg);

height: 229px;

Width: 968px;

padding: 0px;

Clear: both;

}

Try and try to create a new html page and use following code:



kasjfldsa
fakdsjfsadf
asdkfjasjfa
sdfasdjfkajfdas'dasfdka
dfkjlasjdf



kasjfldsa
fakdsjfsadf
asdkfjasjfa
sdfasdjfkajfdas'dasfdka
dfkjlasjdf

See the following links to better understand:

http://www.quirksmode.org/CSS/clearing.html

http://www.positioniseverything.NET/easyclearing.html

Thank you

Vinay

Tags: Dreamweaver

Similar Questions

  • Satellite M40-265 LCD displays the image complete but crushed

    Satellite M40-265 LCD displays the image complete but crushed on two-thirds of the screen

    When my Satellite M40 - 265 ATIMobility Radeon X 700 and omega 3.8442, Windows Xp drivers, Sp3 boots by setting the LCD + analog RGB, initially only displays on the external screen after startup can be switched with Fn + F5 on LCD. Then appears on the LCD, the complete picture but only two thirds of the screen, third, the right is black. It works so well when the external monitor is not connected during the boot.

    When defini set to auto, select the display to the computer starts only when an external monitor is connected, then after that, I spent in the LCD screen.
    Damage to the inverter is excluded as already checked. Inspect visually the cable of the LCD displays nothing. Beside the left speaker, a ground wire (black) to screwed, but it is s t connected anywhere.

    Starting in safe mode is possible to use a display fullscreen on external

    Hello

    The M40 is a not sure oldie about the available settings in the BIOS and in the graphics options, but I think you should check the settings of the graphics card ATI Catalyst.
    I remember that ATI catalyst supports certain options such as resizing the Image. Here you can select the image scale Panel option full size
    In addition, you must set the resolution on the internal screen at native resolution of 1280 x 800
    I think that the external monitor supports the resolution, which is not the same thing as the screen internal.

  • How to configure CPU Meter so that it displays the image instead of the text version.

    How to configure CPU Meter so that it displays the image instead of the text version.

    Hi John,.

    Welcome to the Microsoft community.

    The CPU Meter gadget shows the status of the two main resources, you can follow on your computer - the use of your CPU and memory.

    To install the CPU Meter gadget in Windows 7, just right click anywhere on your desktop and click on Gadgets. Search the CPU Meter gadget and drag it to your desktop.

    See the Microsoft Article below and check if this is useful:

    http://Windows.Microsoft.com/en-us/Windows7/customize-desktop-gadgets

    Let us know if you encounter problems under windows in the future. We will be happy to help you.

  • Cannot display the image from Internet on BlackBerry

    I developed a simple code to display an image and a title on the screen of a blackberry, but I am not able to display anything (but if I tested for the title just does not) my requirement is to display the image with title in a list? I followed

    This link to get an image of the url of the image

    and here is my code in the drawlistrow method:

    ' public void drawListRow (list ListField, Graphics g, int index, int y, int w)
    {
    String text = (String) listElements.elementAt (index);
    Bitmap image = GetImage.connectServerForImage ("http://toucheradio.com/toneradio/iphone/toriLite/toriLive.png");
    g.drawLine (0, y, w, y);

    g.drawText (text, 150, y, 60, w);
    g.drawBitmap (0, image.getWidth (), image.getHeight (), image, 0, 0);
    }

    can we know what is the problem?

    HII,

    "I had my requirement, if add this ("; deviceside = true") at the end of my image for web url like this imageweburl +"; deviceside = true', while working

  • Reg: Display the Image...

    Hello

    I want to display the image. I use Blackberry JDE 4.1, also I do not have the resource folder...

    Please send me the sample code... in JDE how to add images, please suggest me.

    Add your PNG file for the project, create the bitmap from it, create a Bitmapfield using the Bitmap image and add the domain to the screen.

    Something like that...

    Bitmap img = Bitmap.getBitmapResource ("img.png");

    Bmpf BitmapField = new BitmapField (img);

    Add (BMPf);

    Search BitmapFiueld builders for its uses...

    PS: Is in edit mode.

  • How to display the image in the center of the imageview window?

    How to display the image in the center of the imageview window, if the image is smaller than the window...

    Page {
        Container {
            layout: DockLayout{}
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            ImageView {
                imageSource: "asset:///images/image.png"
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
            }
        }
    }
    
  • Is there an easy way to create "the mouse on the text, to display the image" without coding it? I want an image to appear only when you move to a line of text. I found the code for it but I want to find an easier way. Thank you!

    Is there an easy way to create "the mouse on the text, to display the image" without coding it? I want an image to appear only when you move to a line of text. I found the code for it but I want to find an easier way. I'm creating a home page with a list of text links. I want to design as well as in the overview of one of the text links, a corresponding image is displayed to the right of the page. I also need a default image to rest all the time unless one of the other links text is hovered over. Thank you!

    Try to use a Widget for Composition in the Adobe Muse Widgets Panel.

    I would like to start with a blank publication.

    Place your text in the button area.

    Place your image in the display area.

  • What is the shortcut to display the image and a mask?

    Dear pixelbenders,

    There is a shortcut to display the image below with a screen and a mask; It is q and involves the backslash.

    Can't remember what it was.

    When you have a situation like this, go to the help with shortcuts and search page

    https://helpx.Adobe.com/Photoshop/using/default-keyboard-shortcuts.html

  • Reinstall Photoshop CS5.5 - on opening a file image, the program will not display the image.

    Just reinstall Photoshop CS5.5 of CD on Mac. On the opening of an image file, the program will not display the image. Thumbnails of the image appear in the layers window, but not the main window - ideas?

    Join the Discussion of Photoshop discussion

  • How to display the image in the answes table based data.

    I need to display the image based on the values retrieved from the base.

    For example, if the value of a column is 1, then I need to be to display an image within a table. Help, please. Thank you.

    Published by: 853213 on April 18, 2011 21:50

    Hello

    Use the conditional formatting...

    The column properties->->, click Add a Condition for conditional formatting-> filter on the column value is equal to 1-> change Format (click on the image and choose the image)

    If you want to add custom images
    Reference: http://obiee101.blogspot.com/2009/07/obiee-adding-custom-image-in.html

    See you soon,.
    Aravind

  • How to display the image to export?

    <-InDeisgn

    Block of text Rectangle frame Rectangle

    <-export the image

    Hello.

    As above, the scope of the block of text, the rectangle frame image is not displayed when it is exported as an image.

    I want to show the frame of image exported using JavaScript

    Any ideas?

    Thank you.

    Add a line to the framework

  • Firefox does not display the Images selected from the Google search results!

    I'm a recent new user of Firefox, since my IE8 on XP does not work with certain sites.
    I am now on Firefox 25.
    Firefox has a couple of mixed content settings, and in fact, some changes have gone with 25 who has been registered to be in 24, but was not (I read).

    Anyway, my IE8 and IE9 on Windows 8, I believe, have a warning that appears in a box when I go to a web page with mixed content, so I can decide whether to allow the display of mixed content, and I make the judgment, if I'm on a bank or other secure site, etc.

    This mixed content WARNING CHOICE seems to be missing in Firefox, and I'm surprised!

    In any case, in Firefox 25, mixed the active content is blocked, and when I do a google search on '2014 Nissan Rogue', successes were few images called images.
    When I click on any of these images, a blank page appears, with no way to allow the image to display. Help!

    Looks like 25.0.01 that came out a few days ago has fixed the problem that existed in 25 delivered a few weeks before. Thank you!

  • Safari does not display the images (looked for fix, tried many things, can't find one that works)

    Hello

    My safari will display all the images, for example Google Logo, image profile of everyone here and much more.

    So I was wondering how I can fix this problem?

    Either way, I have 3 accounts on my computer, works on the other two, but not mine.

    Thank you!!!

    Safari > Preferences > advanced

    Tick the box "Show develop menu in menu bar."

    Menu "develop" will appear in the Safari menu bar.

    Click 'Expand' in the menu bar and make sure that 'Disable the Images' is not enabled.

  • display the image in full screen

    Hi all, I am a newbie for labview. I want to ask you the image display in labview. Now I can display an image in my front panel. I opened the path to the file and display it. First thing I want to do is in other words it is possible to display full-screen monitor not on the façade and the second thing is that how to display images in the folder and show about 2 seconds delay between the two? Pls kindly help me.

    Thank you for the million.

    Hello

    -I don't know if the full display of the image may be possible or not, any reason why you ask this requirement?

    -L' another question on playback of the files in a folder and display for 2 sec can be made as shown in picture.

    -J' joined vi in lv 12 if necessary.

    -Next time, please post your vision research related machine vision Board.

    -

  • How to display the Image caught by IMAQdx in CWIMAQViewer in VC ++ 6.0?

    Hello

    I use VC ++ 6.0 and NIIMAQdx (Vision 8.5 Acquisition) to get the picture from my camera Prosilica GigE GE1380.  The definition of the image being entered is

    Image * grabImg;

    Later, I want to display in a CWIMAQViewer control. However, given that my grabImg is not of type CWIMAQImage, I get errors that.

    Anyone know how I can do? If you have an idea, please help me. I spent several days on this issue...

    Thank you!

    AY

    Hi, for this type of image you must call the imaqDisplayImage (which will actually create a new window). Alternatively, you can convert the image to a CWIMAQImage type (for example with the ArrayToImage of the class CWIMAQImage method. Discover the shipping documents in C:\Program NIUninstaller Instruments\Vision\Documentation and C:\Program NIUninstaller Instruments\NI-IMAQdx\Docs.

Maybe you are looking for