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 little css issue

Discussion in 'CSS' started by Divvy, Feb 21, 2016.

0
  1. #1
    Hey guys,

    Can someone please help me with this little issue in my website?
    http://bestlistofporn.com (adult content)

    I just need to remove this space:
    [​IMG]

    EDIT:
    I just figure out that the problem is with the twitter image (pink bird)
    class="top-gapper-twitter"

    Can someone please help me how to remove that space and put the bird here?
    [​IMG]

    Hope someone can help me with this, thanks :)

    Part of the code:
    <div class="col-md-8 mr-head-right">
            <div class="top-gapper-twitter">
             <a target="_blank" href="https://twitter.com/BestPornList"><img width="110" height="115" src="<?php bloginfo('template_url'); ?>/images/twitter22.png" alt="Twitter" /></a>
            </div>
            <div class="top-gapper-discription">
            <?php if ( ! dynamic_sidebar( 'Top Widget' ) ) : ?>
            <?php endif ?>
            </div>
        </div>
        </div>
    </div>
    <div class="main-container">
    PHP:
    .top-gapper-twitter{float:left;margin:62px 0 0}
    Code (markup):
     
    Solved! View solution.
    Last edited: Feb 21, 2016
    Divvy, Feb 21, 2016 IP
  2. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #2
    The way you want to do it, it will probably not work cross-browser. That bird's container is nested wrong. This may or may not work cross-browser:
    .top-gapper-twitter {
position:relative;
top:35px;
z-index:9999;
}
    Code (markup):
    That gap is caused by a clear property. This will "fix" your issue:
    .top-gapper-twitter {
position:relative;
top:5px;
z-index:9999;
}
.us_wrapper {
clear:none !important;
}
    Code (markup):
    However, this is just a "hack", it will probably fail on a number of browsers. Your best bet is to actually redo the whole header, its positioning is just illogical and prone to similar issues.
    -edit- : just to let you know, if at any point you need to add !important to a declaration, there's probably something very wrong with your layout...
     
    Phil S, Feb 21, 2016 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    781
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Hey buddy,

    Thank you very much for your reply and for trying to help me.

    I tried your code but didnt worked very well...

    Please take a look:
    [​IMG]

    Do you think that is better to change my header code? Is difficult?

    
<body>
    <div class="header-container clearfix">
        <div class="container header-banner">
        <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
                <?php dynamic_sidebar( 'sidebar-3' ); ?>
        <?php endif; ?>
        <div class="col-md-4 mobile-menu">
           <div class="mr-menu-opt"><a href="#" id="mr-toggle-menu"><img width="60" height="60" src="<?php echo get_template_directory_uri();?>/images/menu-icon.png"></a></div>
            <div class="mr-logo"><a href="<?php bloginfo('url'); ?>">
            <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
            <img width="235" height="110" src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
            <?php else : ?>
                <?php bloginfo( 'name' ); ?>
            <?php endif; ?>               
            </a></div>
            <?php if(is_home() || is_front_page()) : ?>   
            <div id="search_input">
                <input type="text" placeholder="search..." id="search-box" name="search">
            </div>
            <?php endif; ?>   
            <?php //wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
            <?php //get_search_form(); ?>
            <div class="clear"></div>
        </div>
        <div class="col-md-8 mr-head-right">
            <div class="top-gapper-twitter">
            <a target="_blank" href="https://twitter.com/BestPornList"><img width="110" height="115" src="<?php bloginfo('template_url'); ?>/images/twitter22.png" alt="Twitter" /></a>
            </div>
            <div class="top-gapper-discription">
            <?php if ( ! dynamic_sidebar( 'Top Widget' ) ) : ?>
            <?php endif ?>
            </div>
        </div>
        </div>
    </div>
    <div class="main-container">
    PHP:
     
    Divvy, Feb 21, 2016 IP
  4. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #4
    You either didn't deploy it exactly how I suggested above, or you've edited something in the meantime. I depends where you pasted that code as well. And yeah... that code is very bad. But that's to expect from wordpress really, not much you can do about it at this point.
     
    Phil S, Feb 21, 2016 IP
  5. Divvy

    Divvy Well-Known Member

    Messages:
    781
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #5
    Please take a look to my site now, I have your code there.
     
    Divvy, Feb 21, 2016 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    qwikad.com, Feb 21, 2016 IP
  7. #7
    I see... Okay, replace this:
    .top-gapper-twitter {
position:relative;
top:5px;
z-index:9999;
}
    Code (markup):
    with this:
    .top-gapper-twitter {
position:absolute;
top:65px;
z-index:9999;
}
    Code (markup):
    This will probably cause less pain on IE and Safari as well.
     
    Phil S, Feb 21, 2016 IP
    qwikad.com likes this.
  8. Divvy

    Divvy Well-Known Member

    Messages:
    781
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #8
    Thank you for your replies!

    qwikad.com, no... pushing down didnt worked.

    Phil S, yeahhh now is working fine!! Thank you very much buddy!!
    Tested on: Chrome, Firefox, Opera, Edge, IceDragon :)
     
    Divvy, Feb 21, 2016 IP
    qwikad.com likes this.