37 users online (2 members and 35 guests)  


  Results 1 to 7 of 7

Related

  1. Menu over background image    Forum: HTML Forum
    Replies: 2
  2. image rollover menu    Forum: HTML Forum
    Replies: 0
  3. Image to text menu rollover    Forum: CSS Forum
    Replies: 3
  4. Image Dropdown menu    Forum: Website Scripts Forum
    Replies: 8
  1. #1
    J-Gamer's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2011
    Posts
    2

    Image in between menu options

    I have a menu that is generated by a php script. I want an image to be in between each menu option, and here's as far as I could get with the help of w3schools:
    PHP Code:
    menu p+p:before {
        
    content url("http://localhost/data/thumbs/thumbsmlogo.png");

    But this, as you probably know, positions the image in front of the text, and not above it. I found a quick hack by putting <br /> in front of the text, but isn't there a better way to do this?

    This is what I want it to be like:


    This is what I get without the ugly hack:


    Any help?

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Image in between menu options

    Hi there J-Gamer,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    menu p+p:before {
        content:url('http://localhost/data/thumbs/thumbsmlogo.png');
        display:block;
    }  
    

  3. #3
    J-Gamer's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2011
    Posts
    2

    Re: Image in between menu options

    That helped, thanks!

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Image in between menu options

    No problem, you're very welcome.

  5. #5
    mikeee741's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2013
    Posts
    17

    Re: Image in between menu options

    Hi
    i am a beginner and currently learning css.

  6. #6
    johny5566's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2014
    Posts
    1

    Re: Image in between menu options

    I want to have a title under an image, how can I accomplish that under CSS and HTML?
    The title has to have the same link as the image.
    __________________
    AAAAAAAA

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Image in between menu options

    Hi there johny5566,

    and a warm welcome to these forums.

    Here is an example that includes all sorts of possible styling options...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>A very fancy link</title>
    
    <style media="screen">
    body {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:100%;
        background-color:#f0f0f0;
     }
    #mylink {
        display:block;
        width:204px;
        padding:20px;
        margin:auto;
        border:1px solid #634a66;
        border-radius:20px;
        font-size:110%;
        font-weight:bold;
        color:#fff;
        text-shadow:0 0 1px #634a66,0 0 2px #634a66,0 0 3px #634a66;
        text-align:center;
        text-decoration:none;
        letter-spacing:1px;
        background-color:#a7b1e2;
        box-shadow:inset 0 0 15px #634a66,5px 5px 5px #666;
     }
    #mylink img {
        display:block;
        padding-bottom:20px;
     }
    </style>
    
    </head>
    <body>
    
    <a id="mylink" href="http://www.ahfb2000.com/">
    <img src="http://www.coothead.co.uk/images/ball.gif" alt="ball">
    this is the title
    </a>
    
    </body>
    </html>
    ...all of which, obviously, you don't have to use.