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.

Please help me with this css code

Discussion in 'CSS' started by Divvy, Sep 25, 2015.

  1. #1
    Hello guys,

    Can someone please help me? I am trying to fix this in gtmetrix:
    http://i.imgur.com/BgloCjn.png

    This is the code that I have in my site:
    
    <div id="cssmenu">
    <ul>
    <li class="cssbutton">
    <img width="46" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-left.png">
    </li>
    <li class="cssbutton1">
    <a href="#"><img width="131" height="53" alt="Home" src="<?php bloginfo("template_url"); ?>/images/menu-home-active.png"></a>
    </li>
    <li class="cssbutton">
    <img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
    </li>
    <li class="cssbutton2">
    <a href="#"><img alt="Premium Sites" width="131" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-premium.png"></a>
    </li>
    <li class="cssbutton">
    <img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
    </li>
    <li class="cssbutton3">
    <a href="#"><img alt="Best Adult Sponsors for Webmasters" width="170" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-sponsors.png"></a>
    </li>
    <li class="cssbutton">
    <img width="100" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-middle.png">
    </li>
    <li class="cssbutton4">
    <a href="#"><img alt="Best Blog" width="131" height="53" src="<?php bloginfo("template_url"); ?>/images/menu-blog.png"></a>
    </li>
    </ul>
    </div>
    
    PHP:
    
    .cssbutton1 img, .cssbutton2 img, .cssbutton4 img {
        border: 0;
    }
    
    .cssbutton1, .cssbutton1 a, .cssbutton1 img, .cssbutton2, .cssbutton2 a, .cssbutton2 img {
        height: 53px;
        width: 131px;
    }
    #cssmenu li {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
    }
    .cssbutton1, .cssbutton2, .cssbutton3, .cssbutton4 {
        position: relative;
        display: block;
        margin: 0 0 2px;
        padding: 0;
        white-space: nowrap;
    }
    .cssbutton1 a {
        display: block;
        float: left;
    }
    #cssmenu li a {
        float: left;
        height: 53px;
    }
    .cssbutton2 a {
        display: block;
        float: left;
    }
    .cssbutton3 {
        height: 53px;
        width: 170px;
    }
    .cssbutton3 a {
        display: block;
        float: left;
        height: 53px;
        width: 170px;
    }
    .cssbutton3 img {
        border: 0;
        height: 53px;
        width: 170px;
    }
    .cssbutton4, .cssbutton4 a, .cssbutton4 img {
        height: 53px;
        width: 131px;
    }
    .cssbutton4 a {
        display: block;
        float: left;
    }
    .cssbutton1 .active, .cssbutton1 a:hover {
        background: url(/wp-content/themes/xxxxxxxxxx/images/menu-home-active-hover.png) no-repeat;
        text-decoration: none;
    }
    .cssbutton2 .active, .cssbutton2 a:hover {
        background: url(/wp-content/themes/xxxxxxxxxx/images/menu-premium-hover.png) no-repeat;
        text-decoration: none;
    }
    .cssbutton3 .active, .cssbutton3 a:hover {
        background: url(/wp-content/themes/xxxxxxxxxx/images/menu-sponsors-hover.png) no-repeat;
        text-decoration: none;
    }
    .cssbutton4 .active, .cssbutton4 a:hover {
        background: url(/wp-content/themes/xxxxxxxxxx/images/menu-blog-hover.png) no-repeat;
        text-decoration: none;
    }
    
    Code (markup):
    That results in this menu:
    [​IMG]

    Can someone help me fix the code to appear the images in css?
    Will be great if you can help me do the sprite css too :)
    SEMrush
    Thank you guys!!

    ***** images files attached *****
     

    Attached Files:

    Divvy, Sep 25, 2015 IP
    SEMrush
  2. Divvy

    Divvy Well-Known Member

    Messages:
    725
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #2
    Here goes the rest of attached images...

    Thanks :)
     

    Attached Files:

    Divvy, Sep 25, 2015 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    725
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    I forgot this lines in css code:

    
    #cssmenu li,#cssmenu ul{
    display:block;
    padding:0;
    margin:0
    }
    
    #cssmenu ul{
    background:url(/wp-content/themes/xxxxxxxxxx/images/menu.png) no-repeat;
    height:53px;
    position:relative;
    width:auto;
    background-size:100% 100%
    }
    Code (markup):
     
    Divvy, Sep 26, 2015 IP
  4. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #4
    css - sprites are easy to do, you can use ones the many generators online , i recommend you to use http://spriteme.org/

    They have an interesting javascript button that generates sprites depending of your page.

    for each image that you add in sprite, you will get a background-position, so after you just need to edit your css file to replace the images url by your sprite url, and add the background-position for each images in your sprite.
     
    RoundShots, Sep 26, 2015 IP
  5. Divvy

    Divvy Well-Known Member

    Messages:
    725
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #5
    Fixed, thank you mate :)
     
    Divvy, Sep 26, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,181
    Likes Received:
    1,727
    Best Answers:
    239
    Trophy Points:
    515
    #6
    That code is just... gah... images as text, div for nothing (UL is a perfectly good block level container), presentational images in the markup...

    If I were writing that same code, it would look like this for markup:

    <ul id="cssMenu">
    	<li class="home">
    		<a href="#">
    			Best list of porn
    			<span>Home</span>
    		</a>
    	</li>
    	<li class="premium">
    		<a href="#">
    			Best list of porn
    			<span>Premium</span>
    		</a>
    	</li>
    	<li class="webmasters">
    		<a href="#">
    			Best adult sponsors for
    			<span>Webmasters</span>
    		</a>
    	</li>
    	<li class="blog">
    		<a href="#">
    			Best blog of porn
    			<span>Blog</span>
    		</a>
    	</li>
    </ul>
    Code (markup):
    EVERYTHING else being done there belongs in the CSS. I don't have time right now, but I'll try to remember this if I have time later to show you what I mean.

    Good rule of thumb though? Massive amount of text as an image? You're doing something wrong. Presentational images in the markup? You're doing something wrong. Extra DIV (or other tag) around JUST a UL? probably doing something wrong.

    STUNNING example of what I suspect is some pixel-minded artist being under the delusion they are a designer.
     
    deathshadow, Sep 27, 2015 IP
  7. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #7
    can't you just wrap it with forum bbcode ?
     
    RoundShots, Sep 28, 2015 IP