How to overlap one Div content (Logo) on another Div (Menu) using CSS in ASP.Net

Last Reply on Feb 13, 2017 05:36 AM By AnandM

Posted on Feb 13, 2017 01:55 AM

 i have created designlike below image 1.But i want to design like image2.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/menu/megamenu.css">
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/menu/style2.css">
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/main.css">
    <link href="http://1mrshoes.com/css/style.css" rel="stylesheet" type="text/css">
    <link href="http://1mrshoes.com/css/jquery-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="http://1mrshoes.com/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="http://1mrshoes.com/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/StyleSheet.css">
    <link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/hint.css">
    <style>
        .header-top
        {
            background: #302f2f;
            padding: 1px;
        }
        .cssmenu ul li a
        {
            color: #ddd;
            display: block;
            margin: 0px 10px;
            text-transform: uppercase;
            font-size: 0.8125em;
        }
        .cssmenu ul li a:hover
        {
            color: #555;
        }
        img
        {
            /* max-width: 100%; */
            padding: -3px;
            padding-right: -16px;
            margin-right: 21px;
            padding-left: 230px;
        }
        .header-bottom
        {
            background: #262626;
            padding: 5px 0;
        }
        .megamenu>li>a {
    float: right;
    padding: 8px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
    </style>

 

<form id="form1" runat="server">
    <div class="header-top">
        <div class="logo">
            <img src="http://1mrshoes.com/images/logo.png" alt=""></a>
        </div>
        <div class="cssmenu">
            <ul>
                <li id="ctl00_liSignIn" class="active"><a href="http://1mrshoes.com/loginoregister.aspx">
                    Sign up /Sign In</a></li>
                <li>
                    <div id="blocknewcart">
                        <div class="trianle">
                        </div>
                        <div class="itemcart">
                            New item added in your cart <a style="color: black; font-size: 9px; font-weight: bold;">
                                view cart</a></div>
                    </div>
                    <a>Cart (<span id="ctl00_lblCartCount" class="lbltotalcart">0</span>)</a></li>
                <li><a>Track order</a></li>
                <li><a>My order</a></li>
            </ul>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="header-bottom">
        <div class="container">
            <!-- start header menu -->
            <ul id="ctl00_UlMenu" class="megamenu skyblue">
                <li class="showhide" style="display: none;"><span class="title">MENU</span><span
                    class="icon1"></span><span class="icon2"></span></li><li
                            class="grid" style="display: inline-block;"><a class="color2" href="#">Brand</a><div
                                class="megapanel" style="display: none; opacity: 1;">
                                <div class="row">
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                SPORT SHOES</h4>
                                            <ul>
                                                <li><a>ADIDAS</a></li><li><a>NIKE</a></li><li><a>
                                                        REEBOK</a></li><li><a>PUMA</a></li><li>
                                                            <a>CHINA</a></li><li><a>
                                                                max air</a></li><li><a>mrshoes</a></li><li><a>
                                                                        mr.shoes</a></li><li><a>air</a></li><li>
                                                                            <a>Harley Johns</a></li><li>
                                                                                <a>kappa shoes</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                FORMAL SHOES</h4>
                                            <ul>
                                                <li><a>PUMA</a></li><li><a
                                                   >LOUIS VUITTON</a></li><li>
                                                        <a >F-LEGACY</a></li><li>
                                                            <a >DEVILS</a></li><li><a
                                                               
                                                               >mr shoes</a></li><li><a
                                                                    >mr.shoes</a></li><li>
                                                                        <a >oxedo</a></li><li><a
                                                                            >Almon</a></li><li><a >
                                                                                Leather Club</a></li><li><a>
                                                                                    Chris Brown</a></li><li><a>ALDO</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                LOAFERS</h4>
                                            <ul>
                                                <li><a>VERSACE</a></li><li><a
                                                    >HERMES </a></li>
                                                <li><a>ARMANI</a></li><li><a>BOTTEGA VENETA</a></li><li>
                                                        <a >LOUIS VUITTON</a></li><li>
                                                            <a >LEEFOX</a></li><li><a>
                                                                CHINA</a></li><li><a >leathe
                                                                    club</a></li><li><a>mr shoes</a></li><li>
                                                                        <a>mr.shoes</a></li><li>
                                                                            <a>fendi</a></li><li><a>
                                                                                DV</a></li><li><a >beagle</a></li><li>
                                                                                    <a>JIMMY CHOO</a></li><li><a
                                                                                      >GOOS</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                SLIPPERS</h4>
                                            <ul>
                                                <li><a>ADIDAS</a></li><li><a
                                                    >NIKE</a></li><li><a>
                                                        PUMA</a></li><li><a>VERSACE</a></li><li>
                                                            <a>HERMES </a>
                                                </li>
                                                <li><a>GUCCI </a></li>
                                                <li><a>PRADA</a></li><li><a>LOUIS VUITTON</a></li><li>
                                                        <a>CONVERSE</a></li><li><a
                                                            >TOMMY HILFIGER</a></li><li>
                                                                <a >lacoste</a></li><li><a
                                                                    >mr.shoes</a></li><li><a
                                                                       >Giuseppe Zanotti</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                FANCY BOYS TREND</h4>
                                            <ul>
                                                <li><a>ADIDAS</a></li><li>
                                                    <a>VERSACE</a></li><li>
                                                        <a>SUPER DRY</a></li><li>
                                                            <a>XUV FASHION</a></li><li>
                                                                <a>ROCK</a></li><li><a
                                                                    >CONVERSE</a></li><li>
                                                                        <a>VANS</a></li><li><a
                                                                            >TOMMY HILFIGER</a></li><li>
                                                                                <a >CHINA</a></li><li><a
                                                                                    >lacoste</a></li><li><a
                                                                                        >toms</a></li><li><a>
                                                                                            SKECHERS </a></li>
                                                <li><a >mr.shoes</a></li><li>
                                                    <a >SEASTAR</a></li><li>
                                                        <a>air</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                CHAPPAL</h4>
                                            <ul>
                                                <li><a>PUMA</a></li><li><a>
                                                    LEEFOX</a></li><li><a>mr.shoes</a></li><li>
                                                        <a>ALDO</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                Casual Shoes</h4>
                                            <ul>
                                                <li><a>ADIDAS</a></li><li>
                                                    <a>NIKE</a></li><li><a>
                                                        PUMA</a></li><li><a>VERSACE</a></li><li>
                                                            <a >PRADA</a></li><li><a
                                                                >mr shoes</a></li><li><a
                                                                   >mr.shoes</a></li><li>
                                                                        oxedo</a></li><li><a
                                                                            >beagle</a></li><li><a >
                                                                                Giuseppe Zanotti</a></li><li><a >                                                                                    GOOS</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                Watches
                                            </h4>
                                            <ul>
                                                <li>ARMANI</a></li><li><a
                                                    DIESEL</a></li><li>
                                                        police</a></li><li>CASIO</a></li><li>
                                                            Daniel Wellington
                                                                (DW)</a></li><li>audemars
                                                                    piguet</a></li><li>Tissot
                                                                    </a></li>
                                                <li>Rolex</a></li><li><a
                                                    hublot</a></li><li>
                                                        patek philippe</a></li><li>                                                            ferrari</a></li><li><a href="http://1mrshoes.com/brand/Watches-/ck.aspx">ck</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                Goggles</h4>
                                            <ul>
                                                <li>LOUIS VUITTON</a></li><li>
                                                    Ray Ban</a></li></ul>
                                        </div>
                                    </div>
                                    <div class="col1">
                                        <div class="h_nav">
                                            <h4>
                                                T-SHIRT</h4>
                                            <ul>
                                                <li>ADIDAS</a></li></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                <li style="display: inline-block;"><a class="color3" >
                    SPORT SHOES</a></li><li style="display: inline-block;"><a class="color4">
                        FORMAL SHOES</a></li><li style="display: inline-block;"><a class="color5">
                            LOAFERS</a></li><li style="display: inline-block;"><a class="color6" >
                                SLIPPERS</a></li><li style="display: inline-block;"><a class="color7">
                                    FANCY BOYS TREND</a></li><li class="grid" style="display: inline-block;"><a class="color2"
                                        >More</a><div class="megapanel" style="display: none;
                                            opacity: 1;">
                                            <div class="row">
                                                <div class="col1">
                                                    <div class="h_nav">
                                                        <h4>
                                                            Other Categories</h4>
                                                        <ul>
                                                            <li><a 
                                                                Watches </a></li>
                                                            hoe<li>Casual Shoes</a></li><li>
                                                                goggles</a></li><li>
                                                                    T-SHIRT</a></li></ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                <li style="display: inline-block;"><a class="color1" >
                    Contact us</a></li></ul>
            <div class="clear">
            </div>
        </div>

        
    </div>
    </form>
</body>
</html>

this is code plz help

Posted on Feb 13, 2017 05:36 AM Modified on on Feb 13, 2017 05:38 AM
jordan says:
img
        {
            /* max-width: 100%; */
            padding: -3px;
            padding-right: -16px;
            margin-right: 21px;
            padding-left: 230px;
        }

 replace above code with below

img
{
    /* max-width: 100%; */
    padding: -3px;
    padding-right: 3px;
    padding-left: 6px;
    margin-right: 21px;
    position: absolute;
    padding-top: 42px;
    padding-bottom: 5px;
    background: #5C5C5C;
    border-radius: 0px 0px 20px 20px;
}

and below css in your style tag

.logo
{
    padding-left: 230px;
    background: #302f2f;
}

 

jordan says:
.header-bottom
        {
            background: #262626;
            padding: 5px 0;
        }

 replace above with below

.header-bottom
{
    background: #262626;
    padding: 5px 0;
    padding-left: 400px;
}