I made vertical dropdown menu in bootstrap. Everything works just fine except one thing. The whole submenu is positioned using fixed attribute, and when there is some more content of page, the whole submenu is scrolling with page.
Here you have example: Bootply
Is it possible to fix it?
The problem is that all the element before that dropdown are positioned relative which makes absolute position of width to 100% of body width difficult (read more). If you aren't looking for a JavaScript solution than with some changes to the mark-up and CSS(removing container class from li.inline-list , removing col-sm-3, changing col-sm-9 to 'col-sm-12', postioning nav link in center and using container-fluid instead of container to wrap them) I came up with this Bootply .Observe the CSS I have added
.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}
Even though I could get the sub-menu to almost full length, container-fluid and col-x-x both leave 15px padding on both sides, so I had to give -30px position to left and add 60px to width using calc . Calc is supported by IE9+ only.
Change in your css this,
.top-main .dropdown-menu {
width: 100%;
position: absolute;
top: 87px;
z-index: 1000;
text-align: right;
padding: 5px 0;
margin: 0 auto;
}
This will make it stay
Related
So I've been told (maybe this is wrong) that if you want to overide (go beyond) the margins of a parent div simply make the child position:absolute. The problem with this is that it will overlap text that is set below that div.
Is there a way to;
Override the margins of the parent div and have that div still push down the adjacent text?
Can this be executed by not applying a margin-top: to the first block of text? This solution seems sloppy, the layout would blow up while in mobile view.
Thanks for you help / opinion on this one.
The page in question can be found here.
remove the image background for the div has the position absolute and put the image as a background for the parent div with the following selector:
.entry-content {
padding: 0 40px 40px;
background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
background-size: 100% 219px;
}
and change the absolute div css to be as the following:
.content-masthead {
max-width: 100%;
min-height: 219px;
position: relative;
left: 0;
right: 0;
margin-left: 0px;
padding-left: 0px;
}
Few hinds to help you fixing this:
This this not the parent, but the first positioned ancestor (with position other than null, can be "relative").
You can define the size of this element in percentage relative to this ancestor.
You can use padding instead of margin to keep the space.
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.
UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.
You can do this if you know the width of the DIV you want to centre.
CSS:
div
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
}
You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.
position: absolute;
left: 50%;
transform: translateX(-50%);
Try this:
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)
As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.
There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:
jQuery .centerInClient() plugin
Hope this helps.
The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.
I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like
<div id="external">
<div id="internal">
</div>
</div>
and the CSS
#external {
position: absolute
}
#internal {
margin: 0 auto
}
I did not test the above layout, but I think it should work.
Here's a simple method using percentages:
div {
width: 80%;
position: absolute;
left: 10%;
}
Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
Using this method will allow the div to scale with different window sizes and screen resolutions as well.