How do I make a div tag trace a non-square image?

Please look at the following screen shot:
On the right, you are looking at the "Home" button of a navigation bar, and I want to see just the gray button without the triangular white parts to the left of the vertical line in the middle that are included with the div tag. I thought I would be able to make the background of the nav bar transparent and thus have the button overlap the glow / shadow surrounding the container without seeing the white parts by adding "background-color:transparent;" to the nav bar style sheet, but that didn't work.
What is the easiest way to accomplish what I am trying to do? If I am on the right track with making the background transparent, what could have gone wrong? Any help would be much appreciated.

In Photoshop...
1. Make sure any background is turned off in the layers palette so you can see the checkerboard background
2. Choose File > Save For Web
3. Select .gif from the dropdown menu
4. Make sure Transparency is checked.
5. Save

Similar Messages

  • How do you make a "div" tag stretch to the top, left and right?

    Hi, i'm making a professional website on dreamweaver with both codes and WYSIWYG data however i've noticed top, left and right in the CSS script for my div tags. do you know how i can "stretch" the left, right and top to make it look like one of the top div tags on one of these sites:
    http://www.neopets.com/ products div tag above the site that mentions other nick products

    Go into  http://images.neopets.com/css/default.css?v=3
    And change the width of the header from 996px to 100%.
    Gary

  • How to fast make headline div

    How to fast make headline div´s?
    I made individual divs for headline and paragraph text area,
    but I´de like to see a fast and efficient way to do this as
    part of preparing a page to InContext use.
    Pekka Varis

    Hello Pekka,
    I think I might still be confused by what you want as the
    result. Are you referring to Devin's tutorial here:
    http://tv.adobe.com/#vi+f1472v1029
    In Devin's tutorial, it appears that when he created the
    elements, they were already wrapped in DIV containers. However, if
    your elements are not already wrapped in DIV containers, the
    fastest way to do this is to either select the element (e.g., an
    h2) then choose Insert > Layout Objects > Div Tag, and choose
    "Wrap around selection" from the Insert submenu in the Inser Div
    Tag dialog box, or simply click Insert Editable Region from the
    Insert > InContext Editing menu and let the function
    automatically wrap your elements in DIVs.
    Another way you could accomplish this for multiple elements
    on your page is to use Edit > Find and Replace... for example,
    finding all <h2> in your source code, and replacing with
    <div><h2>, then repeating this for the closing tag,
    finding all </h2> and replacing with </h2></div>.
    Could you elaborate on why Inserting an Editable region does
    not result in pleasing results? What happens when you try to Insert
    an Editable Region?
    Best regards,
    Corey

  • How do i make a slideshow lightbox with only one main image

    Hi all,
    i was wondering How do i make a slideshow lightbox with only one main image being seen on the page and once clicked the lightbox will open and have multiple images viewable from prev/next buttons with comments.
    Reason being is i want have a portfolio page with my work all viewable from that one page so i will have say 10 lightboxes on the page but all with one master image.
    Cheers,
    Chris

    hello
    I have the same problem... Its so basic thing and is it really missed in muse ?

  • How do I position AP Div Tags relative to a Table?

    Hi!
    I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)

    webdesigner3383 wrote:
    Hi!
    I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)
    Not sure why you want to do this as it can be hit and miss.
    I would insert a <div> in a table cell and set its position to relative and then insert an absolutely positioned <div> inside of the relatively positioned one:
    <td>
    <div style="position: relative;">
    <div style="position: absolute; top: 50px; left: 40px;">Content goes here</div>
    </div>
    </td>
    I think that should work although I havent tried inserting <divs> inside a <td> cell for many moons.

  • How do i center a div tag using css?

    I am trying to learn css layout.
    Starting with a blank page, I insert a couple of AP div tags and locate them where i want.
    When i preveiw them in a browser, i notice that they are left justified. This is what i expect as they are Absolute positioned.
    I would like them to be centered as a group. Creating a layout and centerring it on the browser window seems like a basic task.
    I tried to add a div tag wrapper and center that but i cannot find where in the css panel is there any reference to center.
    seems simple enough, im stumped.
    Thanks
    Jerry
    P.S. I know as soon as i post this, i'll find the answer.

    >>I tried to add a div tag wrapper and center that but i cannot find where in the css panel is there any reference to center.
    Yeah that is the right approach and you can center by using following style:
    #wrapper{
    margin:0 auto;
    Your ap divs will then absolutely position themselves within this wrapper div which acts as parent.
    Regards,
    Vinay

  • When someone calls....how do you make the photo show in a small square?

    In the commercials for the iphone, when someone calls, the phone defaults to the wallpaper (in the commercials its most often the photo of earth) and the photo of the person is a small square in the upper right corner. When people call me, the photo I've chosen for them takes up the whole screen.
    How do I make my phone look like the phone in the commercial?!
    PS, I understand this question is pretty hilarious and non at all an important one.
    Message was edited by: Host
    To make Subject more descriptive

    Not silly at all, many have asked.
    In general, the answer is....
    When you sync contacts from your comptuter, if you are using a Mac or Outlook 2003 (I think) or higher, then in your computer's address book, you can assign an image. Your computer makes (saves) a thumbnail of that contact with your contact data. When you sync, that thumbnail comes over to the phone.
    When you assign a picture via the iPhone to a contact, it stores a full screen version of it instead of a thumbnail.
    So when a person calls, if the image was from a sync with a picture that was assigned from the computer you will see what you saw in commercials. If the image was assigned from the iPhone directly, then you get the full screen view when they call.

  • Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

    I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
    here's my code if it helps to answer
    <!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>Main</title>
    <style type="text/css">
    body {
    background-image: url(images/realgrade.jpg);
    background-repeat: repeat-x;
    text-align: center;
    html, body {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 25px;
    #wrapper {
    width: 930px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
    background-repeat: no-repeat;
    #header {
    height: 192px;
    width: 237px;
    background-image: url(images/logo_fill.jpg);
    background-repeat: no-repeat;
    position: absolute;
    left: 35px;
    top: -25px;
    #mainNav {
    background-color: #33F;
    height: 200px;
    width: 272px;
    float: left;
    margin-top: 233px;
    #maincontent {
    height: 600px;
    width: 608px;
    float: right;
    margin-bottom: 45px;
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: center 270px;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
    #sidebar {
    background-color: #F36;
    height: 250px;
    width: 272px;
    clear: left;
    float: left;
    #footer {
    height: 525px;
    width: 870px;
    clear: both;
    padding-top: 45px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    background-image: url(images/footer_image.jpg);
    background-repeat: no-repeat;
    margin-top: 45px;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="mainNav">
    <p> </p>
    </div>
      <div id="maincontent"></div>
      <div id="sidebar"></div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    here's what I'm going for
    here's what I'm getting in the browser
    Please help!

    Your image files are pointing to your hard drive, not your server.  You have this
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
    and you should have this
    background-image: url(imag es/opaqueMaincontent.png);
    Also, is your images file named imag es?
    Gary

  • How can I make screen bigger than the 2 inch square for Quicktime playback

    My playback of videos with Quicktime has viewing area of about 2 inches square. How do you make it larger for video viewing?

    Note that if the video is in a low resolution (as would seem to be the case given the native window size), expanding the window will yield a fuzzy picture, more so the larger you expand the window.

  • How to link to named div tags?

    Where to find a list of named divs in a page or site so that I may select one to link to?
    Using latest dw cc.

    Not just DIV's, but any element can be a named element as long as you give it a name through a CLASS or an ID.
    Normally I would use an ID for the purpose of linking because an ID may only occur once in a document. That way I know that I am pointing to just one element.
    As far as finding a list of named elements, I don't think that DW facilitates this. There are outliner tools available, the most known one can be found here h5o/h5o-js · GitHub. not sure of that lists the element by name though.
    What is the reason that you ask for a list of named divs?

  • How to start your container div tag at the very top of the page?

    I'm currently making a website for a friend and I can't seem to get my web page to start at the very top of the browser window. It seems like when you create a website in dreamweaver it want's to start it with a gap at the top. How do I take the top gap out?

    Best if you upload the page you're working on to the web and post a link here so we can see what you're doing.
    Try adding
    body {
         margin: 0;
         padding: 0;
    to your CSS stylesheet.

  • How do I make sidebar div move with the content div in Firefox 14?

    Hello,
    The sidebar div blocks the content div in Firefox 14 when the browser window is resized smaller. In other browsers, this is not a problem.
    The website url is: www.gaddislaw.com
    Thanks for your help!

    I assume you want the main content text to be 'flexible' i.e., narrow and widen when you alter the size of the browser window. If so amend your 'content' css to as below:
    .content {
    padding-top: 25px;
    padding-bottom: 10px;
    margin-left: 290px;
    margin-right: 40px;

  • How do I make an Acrobat 10 package for deployment or image?

    I'm not sure how to do it, since there is no customization wizard for Mac, thanks

    <div id="content">
          <h1>Friendly Harpenden based service for Home and Home Office PC's and Laptops</h1>
      <ul>
                 <li>Home visits</li>
                <li>No call out charge</li>
                <li>No fix, no fee</li>
                <li>Free local collection and delivery within 15 miles of Harpenden</li>
                <li>Over 15 years experience</li>
                <li>Please click <a href="services.html" title="Click to go to Services Page">'Services'</a> tab above for full list of services offered</li>
            </ul>
            <img id="content_box_bottom" src="images/content_3_bottom.png" />
         </div>
    Have you set a height on  the 'content' <div> in your css?
    That is one explanation as to why your bottom content image may not be at the foot of the 'content' <div>
    You might also try zeroing out the margins on your <ul> <li> tags
    ul, li {
    margin: 0;
    padding: 0;
    The code as you show it should work, as long as any extra content is inserted obviously before the image, but I can't see whats in your css file.

  • How do I make a thumbnail that has a gallery inside? And how can I make this gallery have embeded videos from vimeo + Images?

    Hello,
    I'm pretty new to Muse so I don't know a lot about it, but I researched a lot and didn't find an answer to this question.
    I'm trying to make a portfolio website. The website will be a 12 thumbnails. But each thumbnail is one project, not an image.
    When you click one of the thumbnails, I want it to be a lightbox that will show embeded videos from vimeo mixed with images.
    Ex: A coca-cola projet.
    Main page has a thumbnail of a coca cola image. When you click on it, it opens a lightbox with a coca-cola film, when i click to the right arrow, it shows a cocacola poster, then another poster, then another video. (but they are all part of this gallery, that is inside the thumbnail.
    Can you guys help me?
    Thanks!!!

    I don't understand why my thumbnails don't work.
    I dragged a composition lightbox inside another one. But I still have the first lightbox there and can't delete.
    When I try my wabsite i see this:
    But then I click the thumbnail and I see this:
    And when I click one of those 3 I see this:
    Like it is making a double lightbox.
    but it doesn't show the images, it's like the first lightbox is on top of the second one.
    How I deal with this?  =/

  • How do you make a bootable install partition from a disk image of an install disk.

    I have an iMac g4 running Leopard and would like to install OS X 10.3 on a different partition Leopard is on. However the super drive in the iMac will not read the disk I have, so I used my MacBook Pro to make a disk image of the install disk to use to install on the iMac. I do not know how to make the disk image into a bootable partition so I can install 10.3. The person I bought it from has already created a partition of the Leopard install disk and it is bootable but I do not know how he did this. Please help me. Thanks!

    However the super drive in the iMac will not read the disk I have, so I used my MacBook Pro to make a disk image of the install disk to use to install on the iMac
    Could be the cd is bad.  Could be a bad cd reader.
    I' not sure what you are trying to do. 
    To install,
    --  you need to boot from a cd. 
    -- copy a working installation from another partition. try carbon-copy-cloner
    -- could try target disk mode.  There is a cd sharing mode.
    "Installing OS X 10.4 'Tiger' on DVD-Challenged Macs Using FireWire Target Disk Mode" Should work for 10.3
    http://lowendmac.com/misc/06/0710.html
    Here is a picture of  a firewire port:
    http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/IEEE_1394_Firewire_PCI_ Expansion_Card_Digon3.jpg/800px-IEEE_1394_Firewire_PCI_Expansion_Card_Digon3.jpg
    cd sharing across ethernet.  Not sure if this works for booting.
    http://support.apple.com/kb/HT5287

Maybe you are looking for