Align DIV with Absolute position to another DIV with FIXED position

Asked

Viewed 609 times

-1

I got a little problem here. on this website: http://www.gncshop.com.ar/portal/company/

I need to align this image slider to the top of the screen, which sits behind the main menu.

As you can see, there’s a black bar right up there. I put her at 10px high, but the idea later is to leave her with 0px even (I just put it like this to see if she’s in the right place)

What I need now is to position the slider glued on that black bar. The slider is set with position: Absolute.

How do I do that?

EDIT: Below are the codes:

.upperfixedbanner {
position:fixed;
top:0px;
width:100%;
height:10px;
background-color:#000000;
}

.upperfixedbanner > .sliderhomepage {
display:block;
  position: absolute;
width:100%;
top: 0px;
margin-top:0px;
left:0px;
}
<div class="upperfixedbanner">
</div>

<div class="sliderhomepage">
<!--SHORTCODE DO SLIDER-->
  </div>

Other information: CMS: Wordpress Using Wp-Bakery (because the customer has asked for a website where they can easily update the list of products and downloads later.)

html css

2 answers

0

The div <header id="header" class="pagewidth"> precise is with position: fixed; and the class .metaslider with position: absolute; top: 0; z-index: 0;

Everything will go up, but then if you don’t want it you should use it position: relative; top: -102px; z-index: 0;

0

Use the position: absolute in the slider, and then change the property top (position of the element relative to the top of the document) according to its need.

I noticed you put a padding in your content (div in which your slider is). In this case it is recommended that you remove the padding of this content, otherwise it will never reach the top of the page.

It is also interesting to remove the left who put it on your logo and modify the way you mounted it. Try to leave it just inside a div instead of putting it on h1. Then modify the values of margin-left and margin-top to put her in the position you like.

  • At the moment it’s like this:

  • .upperfixedbanner { position:Fixed; top:0px; width:100%; height:10px; background-color:#000000; } . upperfixedbanner > . sliderhomepage { position: Absolute; width:100%; top: 0; }

  • Take a look at this simple template I made here: https://jsfiddle.net/e7mga97m/

  • Just need to exchange the landscape image for div with your slider.

  • But this way you used, would work on a site made in wordpress? Where, for example, any and all information I put on a page will be inside the "content" of the page, unless I specify another location.

  • Yes. In fact hardly things change in Wordpress. The point is that in Wordpress, instead of you putting everything into a single file, your template may have placed one part of the header.php and another in index.php (single.php, or page.php). HTML remains the same.

  • The Slider is done through the meta slider plugin (to make it easy for the client to change the images they want to expose) All HTML code is being done directly on the page (in this case, on the main pages of each language) CSS is placed in the custom css of the theme.... I tested the idea here, and it didn’t work. Is there any other way it will be? to make the slider align to the top of the page.

  • Vish.. Working with third-party components is complicated because of this. In case you have two alternatives: 1 - Go straight to the code of the slider and modify the CSS. It will require patience from you to find the path of the files and understand their CSS, but it is the right way to do it. 2 - Take the classes and ids of the elements you want to modify, add and modify in your CSS using the important that will overwrite the styles added by the plugin owner.

  • Beauty! Thank you Matheus! I will try here

Show 4 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.