WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Menu not showing

View previous topic View next topic Go down  Message [Page 1 of 1]

1Menu not showing Empty Menu not showing Thu Jul 01, 2010 6:16 pm

Guest


Guest
Hi,i have added an image to an HTML page as the body.
I added some images and placed them so they look like the menu.
It was ok and i saved it.
But then,the images where behind the body image! Shocked
the images are there,but they are behind the body image!
How can i make them appear to the front?>

2Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 6:18 pm

RockerMan

RockerMan
Technician
Technician
I don't understand what you mean...


Can you make it a little more clear what you would like?

http://www.graphics-post.com/

3Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 6:22 pm

Guest


Guest
yes.

I placed an image to be the body.An image sized 800x1000.
Then i took 5 icons and placed them so that they are my menu.
They were showing,but when i clicked save,the images werent there.
The images ARE to the HTML page,however they are behind the body image,so i cant see them and click them.

4Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 6:40 pm

RockerMan

RockerMan
Technician
Technician
OK,

Code:

* {
margin: 0;
padding: 0;
}

body {
background-image: (url of image);
repeat: repeat-x;
position: fixed;
}

For the icons, you use a method called listing:

First you need to create a div for the navagation to go into:
Code:
<div class="nav">
    <ul>
            <li id="nav-home><a href="#">Home</a></li>
            <li id="nav-about><a href="#">About</a></li>
            <li id="nav-contact><a href="#">Contact</a></li>
            <li id="nav-profile><a href="#">Profile</a></li>
    </ul>

Now you need to style it:
Code:
   #nav ul {
         list-style: none;
         padding: 0;
         margin: 0;
         height: 17px;
      }
      
      #nav li {
         float: left;
         margin: 0 0.15em;
         height: 17px;
      }
      
      #nav li a {
         display: block;
         height: 17px;
         text-decoration: none;   
      }

Now we need to give the buttons some class Razz :
Code:

      #nav-enteridhere {
         background-image: url(image of button);
         width: the width;
         height: the height;
         top: space from the top;
         left: space from the left;
         position: fixed;
      }

That should do it Smile



Last edited by RockerMan on Thu Jul 01, 2010 7:39 pm; edited 1 time in total

http://www.graphics-post.com/

5Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 7:06 pm

ankillien

ankillien
Administrator
Administrator
Cool-Processor wrote:yes.

I placed an image to be the body.An image sized 800x1000.
Then i took 5 icons and placed them so that they are my menu.
They were showing,but when i clicked save,the images werent there.
The images ARE to the HTML page,however they are behind the body image,so i cant see them and click them.

If you want an image to be as body, you must use it as background.
You can't put it in <img> tag.

As Mike has shown above, use the body image as background and put the menu images as HTML images i.e. <img>

6Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 7:39 pm

RockerMan

RockerMan
Technician
Technician
You should not put menu images as img tags, not good for SEO.

Doing it using the listing method is alot more practical Wink

http://www.graphics-post.com/

7Menu not showing Empty Re: Menu not showing Thu Jul 01, 2010 8:56 pm

ankillien

ankillien
Administrator
Administrator
While providing support, I prefer to go with easier methods rather than practical ones Wink I provide 'easier to implement and edit' codes rather than those which are practical but difficult to work with for member who doesn't have very advance knowledge of coding.

8Menu not showing Empty Re: Menu not showing Mon Jul 05, 2010 3:24 am

Guest


Guest
I just want to add some icons and appear.Any more simple code?

9Menu not showing Empty Re: Menu not showing Mon Jul 05, 2010 9:25 am

ankillien

ankillien
Administrator
Administrator
Here is the simplest code...

For vertical icons...

Code:
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a><br />
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a><br />
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a><br />
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a><br />

For horizontal icons...

Code:
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a>
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a>
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a>
<a href="LINK URL HERE"><img src="IMAGE URL HER" /></a>

Don't for get to use CSS background:url(); to put background for whole body. If you'll use <img>, it wont work.

10Menu not showing Empty Re: Menu not showing Mon Jul 05, 2010 2:50 pm

Guest


Guest
here is my code for the menu images:

Code:
<a href="link"><img id="menuspray" src="http://cdn.iconfinder.net/data/icons/SUPERVISTA/graphics/png/128/spray.png" height="80" width="80" /></a>
<a href="link"><img id="menufolder" src="http://cdn.iconfinder.net/data/icons/musthave/128/Folder.png" height="72" width="72" /></a><A href="link"><img id="menudisk" src="http://cdn.iconfinder.net/data/icons/nx11/Drive%20-%20C.png" height="70" width="70" /></a>

and thats the CSS for them:

Code:
#menuspray {
position:absolute;
left:380px;
top:170px;
}

#menufolder {
position:absolute;
left:480px;
top:170px;
}

#menupaint {
position:absolute;
left:480px;
top:170px;
}

#menudisk {
position:absolute;
left:580px;
top:170px;
}

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Menu not showing

Permissions in this forum:
You cannot reply to topics in this forum