CSS Assistance

  • Resolved tanchev

    (@tanchev)


    7 years, 7 months ago

    Hello everybody, i need help with a css code that i am using for a link in my wordpress site. The problem is that no matter how i position the element, when the resolution is changed or/and when the browser is resized from big window to small window, the element i changing its location.. Now i am a css rookie that doesnt even know what he is doing so i might have made a mistakes, but i want the professional developers here to tell me where my mistake is.

    First the link is position in the file searchform.php

       </div><!-- end #search-form -->
            
                 <div class="advanced-search">
             <a href="https://hubbubooks.com/advanced"> Разширено търсене</a>
             </div>

    It is positioned after the div of the search form.
    As you all know the header.php allow the search form to appear
    <?php get_search_form(); ?>
    Ok now everything is alright we have a link.

    This is the CSS code that is in my style.css document, or actually it s not but its in the custom css of the wordpdress blog:

    .advanced-search a{
  float: right !important;
  width: auto !important;
  position: absolute !important;
  color:#FFFFFF !important;
  top: 5.8% !important;
  right: 13% !important;
}

.advanced-search a:hover{
  float: right !important;
  width: auto !important;
  position: absolute !important;
  top: 5.8% !important;
  right: 13% !important;
}

    And what is happening when the resolution is changed or the window of the browser is resized to smaller one:

    This is when its normal size window no matter chrome, explorer or opera :
    https://store.picbg.net/pubpic/3E/13/e5b1ae5fcf393e13.png
    And this is when the window of the browser is smaller:
    https://store.picbg.net/pubpic/EC/7B/2c62c7bac000ec7b.png

    I have no idea what needs to be done to fix this issue.
    Please if there is any css gods in this forum, help me i will be really grateful.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Dion

    (@diondesigns)

    I don’t click on url-shortened links, or on links to image sites, so I didn’t view your images. My advice is general in nature.

    If you want the element to be in the same absolute location on all screens, you can’t use percentages for positioning. Try using pixels instead, and if possible, add a position:relative CSS rule to your “wrapper” element. You may also need to use media queries to adjust the positioning for different screen widths.

    You also don’t need the float:right rules in your CSS because floats are disabled by your use of position:absolute.

    First, a.hover will inherit everything from a. Inside a.hover{} you only need to put whatever should change when the pointer is passing over this element. (Unless you with these parameters are trying to eliminate some parameters for the same element in any other place…
    By the way, if you specify a slightly different bgcolor on .hover, then you should apply the same format for .focus, too. This will allow someone to select the right link with TAB and see what link is currently selected.

    Where do you want the search form to appear?
    If you want it to be within the black top-bar, then you should probably put the whole form within section id="top-bar"

    And I suggest you try to take away position:absolute

    you’re using a lot of complicated CSS you don’t need.

    Edit the searchform.php (or copy it to your theme and edit it. And put the link before the closing div,
    if you do this;
    <a href="https://hubbubooks.com/advanced" class="advanced"> Разширено търсене</a>

    <style>
.advanced { display: block;}
</style>

    it will appear underneath the search field and occupy the same width as that element.

    Thread Starter tanchev

    (@tanchev)

    Hello, which one is my wrapper element in this situation, is it searchform?
    I have tried it with pixels first, but somewhere in the web when I was looking for a fix of the problem I found a post where it was written that the problem come from using pixels and not % so I tried it with % but its still the same way.

    Here’s the code on your page;

    <div class="search-form">
<form role="search" action="https://hubbubooks.com/" method="get">
<input type="text" name="s" placeholder="Търси">
</form>
<span class="search-icon"><i class="fa fa-search"></i></span>
<a class="advanced" href="/advanced">Advanced Search </a>
<style> .advanced {display:block;color: #fff;margin:5px 0 0 20px;font-size: 
14px;}</style>
</div>

    >>Hello, which one is my wrapper element in this situation, is it searchform?

    No, you need to insert the link within the .search-form div

    If you use Developer Tools in your browser you can see what’s going on and edit the HTML / CSS directly until it’s right.

    • This reply was modified 7 years, 7 months ago by chrispink.
    • This reply was modified 7 years, 7 months ago by chrispink.

    Usually it’s best to add the keyword !important; only if you really need it.
    The additional CSS in the customizer is applied last, and therefore takes precedence over any previously encountered CSS, unless previous CSS gave a more specific targeting.

    Thread Starter tanchev

    (@tanchev)

    Hello, special thanks to: @chrispink.
    Your assistance is greatly appreciated :).

    @tobifjellner thank you i will remove the unnecessary things like !imporant; in the custom css, thank you for the advise.

    Best Regards,
    Georgi Tanchev!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS Assistance’ is closed to new replies.