SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with my menu! plz help!

    Hi everyone!

    I have a picture with 6 buttons

    its 800px wide and 50px high.

    I have placed the image in a div tag
    And under that div tag i have a div tag with the text for my menu: Menu, About, Service, projekts and so on.


    The problem is that I want the text to be in the middle of each button! how do I do it in the simplest way?

    I also have trouble getting the text to be on the picture.
    as it is now so is the text under the picture and I have tried with padding-bottom but nothing happens!


    How can I solve it?

    Would you like to see my codes, so let me know, and I work with css and html just so you know

    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    A link to the actual page would be best.

    Why not just use a set of CSS-generated buttons and ditch the image?

  3. #3
    SitePoint Member doni's Avatar
    Join Date
    Apr 2012
    Location
    TN
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do something like this, however seperating the images would make things alot easier.

    First the HTML:

    Code:
    <div id="menu">
        <ul class="links">
            <li class="link1"><a href="#">Link1</a></li>
            <li class="link2"><a href="#">Link2</a></li>
            <li class="link3"><a href="#">Link3</a></li>
            <li class="link4"><a href="#">Link4</a></li>
            <li class="link5"><a href="#">Link5</a></li>
            <li class="link6"><a href="#">Link6</a></li>
        </ul>
    </div>
    Now the CSS: note: you will have to adjust the top and left positions for each link to align with each button

    Code:
        #menu {
            width 800px;
            height: 50px;
            position: relative;
            background: url(images/yourimage.jpg) no-repeat top left;
        }
        
        #menu .links li {
            position: absolute;
        }
        
        #menu .links li.link1 {
            top: 0;
            left: 1px;
        }
        #menu .links li.link2 {
            top: 0;
            left: 1px;
        }
        #menu .links li.link3 {
            top: 0;
            left: 1px;
        }
        #menu .links li.link4 {
            top: 0;
            left: 1px;
        }
        #menu .links li.link5 {
            top: 0;
            left: 1px;
        }
        #menu .links li.link6 {
            top: 0;
            left: 1px;
        }

  4. #4
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code, i will try it this afternoon to see if it can help me.


    and yeah it would be easier to seperate the buttons but then i get the problem that there is some space between the buttons and i dont want that.
    Or can i somehow solv that?

    I will link to send a link to my page when i come home!

  5. #5
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://hedlofdesign.se/

    Here is the link to my page! It is only the first page that comes up as my question is about!


    As you can see it says home home home home in Swedish.

    What I want is for home home home to be placed on the buttons/immage above !

    I tried your code doni as you wrote above but it was too complicated for me so I did not get to it!

    someone who can help me?

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cut out one of your images.
    Set it as the background to your nav div.
    Solved.

    To be even nicer, change the image for the hover for the <li>- the simplest way is to flip the image upside down, or make it lighter in colour.

    here's some code I lifted from a site giving free menus. just substitute your own images.

    Code:
    #menu {
    	position:relative;
    	display:block;
    	height:42px;
    	font-size:100%;
    	font-weight:normal;
    	background:transparent url(images/menu_background.gif) repeat-x top left;
    	
    
    	}
    #menu ul {
    	margin:0px;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	}
    #menu ul li {
    	display:block;
    	float:left;
    	margin:0 1px 0 0;
    	}
    #menu ul li a {
    	display:block;
    	float:left;
    	color:#000;
    	text-decoration:none;
    	padding:14px 16px 0 15px;
    	height:28px;
    	}
    #menu ul li a:hover {
    	color:#fff;
    	background:transparent url(images/menu_backgroundOVER.gif) no-repeat top center;
    	}
    you can add other styles to the various parts if so desired - eg text-decoration:underlined for the hover.
    You can add an id of current to the menu item on each page and style that slightly different so the user gets a hint as to what page they are on.

    I'm assuming that you have a div called menu, and use an unordered list for the menu.

    Can't find a link to the site I found the code on, but it's one of the simplest menus you can make.

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    Cut out one of your images.
    Set it as the background to your nav div.
    Solved.

    To be even nicer, change the image for the hover for the <li>- the simplest way is to flip the image upside down, or make it lighter in colour.

    here's some code I lifted from a site giving free menus. just substitute your own images.

    Code:
    #menu {
    	position:relative;
    	display:block;
    	height:42px;
    	font-size:100%;
    	font-weight:normal;
    	background:transparent url(images/menu_background.gif) repeat-x top left;
    	
    
    	}
    #menu ul {
    	margin:0px;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	}
    #menu ul li {
    	display:block;
    	float:left;
    	margin:0 1px 0 0;
    	}
    #menu ul li a {
    	display:block;
    	float:left;
    	color:#000;
    	text-decoration:none;
    	padding:14px 16px 0 15px;
    	height:28px;
    	}
    #menu ul li a:hover {
    	color:#fff;
    	background:transparent url(images/menu_backgroundOVER.gif) no-repeat top center;
    	}
    you can add other styles to the various parts if so desired - eg text-decoration:underlined for the hover.
    You can add an id of current to the menu item on each page and style that slightly different so the user gets a hint as to what page they are on.

    I'm assuming that you have a div called menu, and use an unordered list for the menu.

    Can't find a link to the site I found the code on, but it's one of the simplest menus you can make.


    Thank you very much for your help!

    But I'm not so good at codes so I do not get it to work.

    I think I do so that I separate the keys individually.

    But if I have a few buttons and put them beside each other, then there will be a small gap.


    Should I use the code: position: absolute; to get rid of the gap or which way is best?


    Thank you again!

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No, you only need one little image (two if you want a hover effect), just name the images as above. This is as basic as it gets, just copy and paste the code, and make sure you menu is in a div named named #menu

    Oh, here's where I got the sample code from, as feel I should acknowledge the source having now found the link..

    http://13styles.com/css-menus/slate/

  9. #9
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I got bored
    so I made this.
    http://kidneydialysis.org.uk/your-menu.htm
    just copy and paste the code.
    And download the two images to your images folder.

    I've added a #current to the second menu item. you can use that and add the id="current" to each page's on menu item, or not.
    Adjust the width of #menu as required.

  10. #10
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved the problem. I made the image into a background and then I made a divtagg in the divtagg in which the image was in.

    Then I used the top: ** px, to come down at the bottom of the picture and then wrote the margin: 0 auto; to get it in the middle and lots of other stuff but I have what I want now,

    Thanks for the help everyone!


    Check oute my webbpage and se how i made it.
    www.hedlofdesign.se
    There are som changes but you helpt me anyway!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •