I am trying to add two buttons on the top of this page:
http://213.229.81.180/~demo/
I have managed to add them via putting this code:
<div class="hochzeit-button-header"><img id="hochzeit-button" src="http://213.229.81.180/~demo/wp-content/themes/creativepearl_child/btn_hochzeit.png" alt="hochzeit button" title="hochzeit button"></div>
<div class="portrait-button-header"><img id="portrait-button" src="http://213.229.81.180/~demo/wp-content/themes/creativepearl_child/btn_portrait.png" alt="portrait button" title="portrait button"></div>
The problem remains that now all the other content in the menu has moved down, so the Header is getting too big.
I would like to have the images just float on top of the other stuff in the menu like the facebook, google plus buttons.
You need to absolutely position the buttons inside the header. To do so, add position:relative to the button's parent element and add position: absolute and something like top: 10px; right: 30px; to the buttons.
Related
I have a dialog, and inside of that I have a dropdown. Initially my dialog is overflowing in the y-direction. But when I add position: absolute (or relative) and a larger z-index to my options for my dropdown, it will not lay on top of the dialog. It causes a scrollbar in the y-direction, because the options are too long for the dialog. The z-index only works if the dialog have overflow: unset. Is there not a way to both have a scroll inside the dialog, when the content are too long, and also display the options on top of the dialog, if it pops open?
<div class="think-of-this-as-dialog" style="overflow-y: auto; z-index: 1">
<div class="think-of-this-as-dropdown" >
<div class="think-of-this-as-list-of-options" style="position: absoute; z-index: 100"></div>
</div>
</div>
I can see that the problem is the dialog which have an overflow-y: auto, such that the options triggers the scroll to appear. But I need the scroll feature when the content inside the dialog becomes too long.
If I remove the overflow-y: auto, then it works, but as mentioned: I need the funtionality.
I have a Bootstrap 4 navbar with a <div class="container"> wrapped around the navigation links, so the navigation is positioned exactly like the content on my page (which is also in a container)
I now want to add a search input outside of the container, aligned to the right side (visible only on XL screens, hidden otherwise)
I know how to align things, I can align it inside the container, but creating another <ul class="navbar-nav"> outside of the container actually messes everything up, so I'm not really sure how can I do it while also having a container in the navbar.
As far as I can see, it's the fact that container has an auto margin, and placing a form-inline right after the container messaes up the margins, even when using float-right
Here's a bootply: https://www.bootply.com/T9Ks167fW7
As for now I went with using a trick to make the inline form use position: absolute, this way it doesn't interfere with the margin of container so everything looks nice:
<form id="search" class="form-inline">
</form>
#search
{
position: absolute;
right: 0;
margin-right: 1rem;
}
Everywhere people asks for how to align an element inside a DIV they are told that the container must have a relative position.
In my case, I have a floating dialog, with absolute position. How can I make a button element always stick to the bottom of this dialog?
<div class="dialog">
<div class="dialog-content">
</div>
<button>Close</button>
</div>
Try to use absolute positioning with bottom: 0px for your button. It will position relative to the parent of button which is .dialog.
Something like this: http://jsfiddle.net/0rohooj9/
You would need to give the dialog absolute dimensions, and then set the button's position to absolute, and bottom: 0;
Here's a Fiddle with your code:
http://jsfiddle.net/erlingormar/d8sa43s8/
My site currently has a main content area that is centered in the page. I want to create a floating container to the left of this main content area, where I can put ad code to display an ad to my visitors. I want this container to be on the left side, somewhere between the menu navigation and the first blog post. Here is the code I have:
<div> <!-- float container -->
<div style="float: left; display:inline; width:120px;"><p>
<!-- my ad code script -->
</p></div>
<div style="clear:both;"></div>
</div>
I have been placing this code between the body tag and hfeed site tag, which gets the container outside the main content area. However, it simply places the container at the very top left corner of my site, above the header area. So, essentially, it's got it's own row spanning across the width of my site reserved just for the container, rather than placing it next to the main content area.
Can you please help me adjust the code accordingly? And where is the proper place to place this code?
Thank you in advance!
Consider positioning it absolutely as such (jsFiddle):
position: absolute;
top: 50px; // Or some number
left: 0;
If you want it to be displayed even when your user scrolls down, use position: fixed instead.
Or, since your ad <div> is already outside your content <div>, you could apply margin-top: 50px or some variation.
Best place for this would be in an external CSS file, but if you have to do it inline, just apply it to your ad container <div>.
I'm using z-index on my page ( -link no longer needed- ), and it doesn't work properly: it doesn't place certain divs above all others...
You can see it yourself, by clicking one of the items in the left, or right bar.
Then, the mask will fade in, but show the message box, beneath it.
I've tried a lot, but I just can't get the message box to show above all others...
What can I do to fix this? [note: 2nd question below!]
If you don't want to check the page, the message box is located in some other divs:
<div>
<div>
<div>message box</div>
</div>
</div>
The CSS positioning is like this:
.window {
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
}
I use position:fixed, because position:absolute is not absolute here, the div is not aligned to the body, but something else somehow.
Is there a way to reset the positioning and absolute position it again?
For as long as I can remember, z-index issues often come from the fact than the parents of the z-indexed elements are not positioned. Sibling parents should be positioned.
If you're using jquery check the top Z Index Plug In, you can apply it when the object has a mouse over event like:
<div id="modal" onmouseover="$(this).topZIndex();"></div>
Then change the position to absolute with jquery also or viceversa:
$(document).ready(function(){ $('#modal').css('position','absolute'); });
if you remove z-index from #leftbar it fixes your problem. The position should not matter, as long as you have one.