CSS Menu incorporated into Image. How is it done?

Hello everyone I hope your weekend if proving fruitful!
I have a little problem with Dreamweaver. Basically it is this:
I have created a banner in Photoshop with a gorgeous artwork image (I am pleased with it to be honest!). To add to its aethetic appeal I have decided to incorporate a CSS Menu into it. Please note the menu will not be at the top (in other words ABOVE the image) or below the image. I am wanting to position it around 200 pixes from the top.
The technique I have used so far is this:
Create image in Photoshop
Use the slice tool to slice the image and slice the part where I want my CSS Menu to go
Save as "Html and images"
Import into Dreamweaver and remove the part that has been sliced for the navigation bar
Insert a div tag at insertion point and apply my bar
Please note I am okay at putting the html coding and css into the right place (I think!) but the problems I am having is that it seems disjointed and the menu bar is not fitting seamlessly without gaps into the image.
Would a possible solution be to slice up the image save only as "images" (no html) and then incorporate parts of the image (e.g. top, middle, bottom) into div tags and incorporate the menu bar that way?
Please note I am new to this so please don't laugh too hard at my stupidity!
I'll catch you later!
Thank you
Jake

No need to slice the banner image. Simply put your banner in the background with CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
/**CSS Reset to fix the box model**/
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    background:#CCC;
    font-size: 100%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: 0;
    width: 1000px; /*adjust width in px or % as req'd*/
    margin: 0 auto;/**with width, this is centered**/
header h1, header h2 {
    font-size: 26px;
    color: #999;
    display: inline;
    text-align: right;
    padding: 2%
/**TOP MENU**/
nav {
    min-height: 200px; /**same as banner height**/
/**banner in the background**/
    background: #198EBA url(http://placehold.it/1056x200/198EBA/FFFFFF&text=Banner.jpg) no-repeat;
nav ul li {
    list-style: none;
    margin-top: 150px; /**adjust where desired**/
nav li {
    display: inline-block;
    margin: 0 2%;
    font-size: 20px;
nav li a {
    text-decoration: none;
    color: #CCCEEE;
nav li a:hover,
nav li a:active,
nav li a:focus {
    text-decoration:underline;
    color:#0F9}
</style>
</head>
<body>

<header>
<h1>SiteName</h1>
<h2>Some Pithy Slogan</h2>
</header>


<nav>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>

</body>
</html>
Nancy O.

Similar Messages

I am trying to remove something from the background of my image how is this done.

i am trying to remove something from the background of my image how is this done.

jboll0820 wrote:
how is this done.
Generally, using a different program than Lightroom, e.g. Photoshop.
Note: you can remove objects in Lightroom by stringing dust-spot removal bubbles across them, but that may or may not be preferrable. If you do go that route, it may be essential to position strategically *after* initial placement.

HT4436 I have 600 cds to move into icloud---how is this done---other than painfully importing 0ne at a time into itunes library???

I have just subscribed to Icloud and moved my itunes library in--I would like to add 600 cds now---how is this done--does each one need to be downloaded into my itunes library first?? Is there an easier process----Thanks to anyone

Yes. Each one has to be imported into iTunes first.
Allan

My videos only download into image capture and they don't show up in imovie because image capture wont let me download in photo,event,face ect... so is there anyway i can get it to go to imoive please help!!!!!!!!!

My camra is a canon powershotA40000IS

In iMovie, click FILE/IMPORT/MOVIE and navigate to the folder where Image Capture stored your movies.
If that does not work...
Open iPhoto, and click FIle/Import To Library and navigate to your camera.
You can also click on your camera in Image Capture and set it to automatically open iPhoto, if you want.

DVD Into iPod How can be done

I have a course on "....." there are in DVD Zone 1, I can cppy them, so they are not protected. I pay for them. Will like to bring them into the ipod and watch them any place I would like.
I try several ways....none work,,,
Any body will like to help.
Apple care said a way will be to converted inro somethin iPod will undertaand.

I purchased "Super DVD to iPod Converter" on line for $29.95 and have converted several DVDs and watched them on my new iPod. This software is worth the price for me, since it is very straightforward and easy to use. The conversion time is less than the time to watch the DVD. It does take a lot of the resources of the Computer while it's running.
Dell 8400 Windows XP Pro

Convert xml file into Image file

Hi,
How to transform xml file into image file?.
i don want to transform the xml file into html file.
Thanks,
nithi

One way I can think of is to create a java.awt.BufferedImage, and use its Graphics object to print out the xml (count the lines first, and space them to your liking). Then if you want to save it to e.g. png or jpg there are free libraries for that, whose names I don't remember at the moment... Dunno why you'd wanna do this though :)

Insert css menu bar

Dear all,
i am trying to insert a menubar developed by a thirdparty css menu builder into adobe muse, but whenever i try to insert the scripts via "object>insert html" it does not seem to work.
i am using a CSS menu builder form "CSS3 Menu. Free CSS Menu Maker"
i cant use the default menu builder from Muse becuase i have too many drop downs.
here is an example of one of my sites that i used a java script menu builder instead. "Kraft Foods Portal"
i am transitioning to css because java menu builder is obselete and Css is able to make it look cooler.
any help would be highly appreciated. thanks.

Muse can build it's own menu system using CSS. (Menu widget)
Not sure if you can even bring a third party menu builder inside Muse and work properly.

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

How to convert Doc file into image

hello frnds
Can any body guide me how to convert doc file into image and show into swf loader.
actually i have to convert doc files into swf files in runtime so that i have to use this flow.
is it possible to convert doc file into byte array and than convert into image.
Thanks And Regards
Vineet Osho

You can convert any DisplayObject to byeArray using this function ImageSnapshot.captureBitmapData().getPixels()

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

How to break the PDF file into images?

How to break the PDF file into images? There should be settings in Photoshop CS 6 that imports PDF file and break it into images. I have a short instruction:
2.    Open the file in Photoshop.
3.    A new window should open to Import PDF. Click on images, not pages import pdf into Photoshop.doc
4.    Select all the files shown (shift + click), Click O.K. Four files should open on your screen.
Was anybody successful with that?

Whether this is available solely depends on the structure of the PDF and whether it actually contains whole images that can be extracted separately. Depending on whatgoing on in the PDF this may simply not be the case and the images have been tiled and split up in multiple "objects" whose appearance can only be retained by rasrerizing the whole page...
Mylenium

How to bring Sample CSS Style Sheets into a Template?

I am creating a site from scratch using CS4 Template. Can I incorporate more than one DW Sample CSS Style Sheet? And how do I bring them into the Template site?
Thanks, g

Thank you. I added the 3 sample css style sheets I want to use into my site. Now I am trying to bring a different sample css into different sections of the layout. Example:
Sidebar 1: green/yellow
Sidebar 2: red/yellow
Middle: blue/yellow
I seem to only be able to have one for the whole page. Is this true?
What I am doing is clicking on the div tag: <div.sidebar#sidebar1>, then "Edit CSS" and then scroll down in the Class window to "attach style sheet" and there at the bottom is a link to the sample css style sheets. I click on the one I want and it changes the css for the whole page not just the sidebar 1. Is there a way I can get a different css sample style sheet for each sidebar in a 3 column layout, and a different sample css for the middle?
thank you very much

I deleted the picture in iphoto, then emptied my iphoto trash, but the picture is still showing on my computer when i go into my trash under "all images" How do you delete pictures even when you empty the trash and they stay in the computer?

I deleted the picture in iphoto, then emptied my iphoto trash, but the picture is still showing on my computer when i go into my trash under “all images” How do you delete pictures even when you empty the trash and they stay in the computer?

Wtih iPhoto 9 when the iPhoto Trash is emptied the files get moved to the Trash bin in the Dock as a second chance to change your mind. Look in the Dock's Trash bin.
OT

How to call the css file and its images from our application......

hai,
Im uploading a .css file and some images in Apex shared components ,now how to call the css file and images from my Application.... plz tell me detailed.....
Edited by: anoo on Nov 3, 2008 12:51 AM

Hi Anoo,
Sorry, didn't see that you'd started a new thread, so have answered this in 'undefined' is null (or) not an object "
Andy

HT1473 Im having a problem with adding cds to my library when some of the discs in a set have Gracenote information and other discs don't. iTunes in this situation puts the css that are part of a set into different albums, and I don't know how to combine

I'm having trouble adding "spoken word" CDs that are in a set to my library. When some of the discs have "gracenotes" info the album gets broken up as if each cd was a separate album. I haven't been able to figure out how to have all the cds in the set appear as one album. I have entered each one in the "get info" page as "1 of 7" and "2 of 7" etc, but the ones with gracenote info get put into a separate album. It's frustrating so far! Also, when I want copy an album to the burn folder so i can share it with a friend, it moves the songs as songs, not as albums. Any way around this? Thanks very much!

See Grouping tracks into albums.
PS, you don't have the right to burn copies of the songs you've bought/ripped to give away to your fiends...
tt2
Message was edited by: turingtest2

CSS Menu incorporated into Image. How is it done?

Similar Messages

Maybe you are looking for