1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css aligning ul with image

Discussion in 'HTML & Website Design' started by alexdog1805, Apr 1, 2012.

  1. #1
    I want to align facebook logo inline with the menu.

    Here's the html code and you have attached the photo
    .
    <div id="menu">     <ul>
           <a href="#"><li>Home</li></a>
           <a href="#"><li>Web Design</li></a>
           <a href="#"><li>Web Hosting</li></a>
           <a href="#"><li>Web Marketing</li></a>
           <a href="#"><li>Oferte speciale</li></a>
           <a href="#"><li>Clienti</li></a>
           <a href="#"><li>Contact</li></a>
         </ul>
         <a href="#"><img src="images/facebook.png" alt="facebook" /></a>
       </div>
    
    Code (markup):
    
    #menu {   background:url(../images/bg_menu.png) no-repeat;
       }
       
    #menu li {
       list-style-type:none;
       display:inline;
       padding:0px 5px 0px 5px;
    }
    
    
    #menu ul {
       margin:10px 0px 0px 10px;
       padding:18px 0px 20px 10px;
       font-size:16px; 
       font-family:Arial, Helvetica,sans-serif;
      }
      
    #menu ul a {
       color:#ffffff;
       text-decoration:none;
       }
       
    #menu ul a:hover{
       color:#ffffff;
       text-decoration:none;
       background-color:#4a4b50;
       }
    
    Code (markup):
     

    Attached Files:

    • div.jpg
      div.jpg
      File size:
      73.5 KB
      Views:
      70
    alexdog1805, Apr 1, 2012 IP
  2. ashburyfranklin.alcordo

    ashburyfranklin.alcordo Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    add this to your css
    .facebook {float:right!important}

    make changes in your html
    <div id="menu">
    <ul>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>Web Design</li></a>
    <a href="#"><li>Web Hosting</li></a>
    <a href="#"><li>Web Marketing</li></a>
    <a href="#"><li>Oferte speciale</li></a>
    <a href="#"><li>Clienti</li></a>
    <a href="#"><li>Contact</li></a>
    <a href="#" class="facebook"><li><img src="images/facebook.png" alt="facebook" /></li></a>
    </ul>

    </div>
     
  3. netcommlabs

    netcommlabs Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Give the image float:left;
     
    netcommlabs, Apr 2, 2012 IP
  4. alexdog1805

    alexdog1805 Greenhorn

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    thanks Peon
     
    alexdog1805, Apr 2, 2012 IP