I would like to have my menu bar across the entire screen, currently it is in the middle with white space on either side. I would like the bar to be stretched along the top of the page but for it to not "hover". I have tried the position:fixed and that has achieved the look of the menu that I want however I don't want the menu bar to be fixed to the top of the screen as the reader scrolls down the page. The URL to my blog is as follows : http://www.blankesque.com and I have included the css coding for the menu bar below :
#topdropcont {
width:100%;
height:45px;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:absolute;
background:#f5f5f5;
}
Change position:absolute; to position: fixed;
The other option is running the following jQuery script that calculates the width using JS
$("#wctopdropcont").css('left',($(document).width() - 1080) / 2 * -1).width($(document).width());
Best I can tell (and assuming I understand how you want your page to look), the problem isn't in your topdropcount, it's in your content-outer, which appears to specify a space that's 1080 pixels wide.
If you dont want a fixed header you have to change the position attribute of div.content-outer & .fauxborder-left to position: static (actually relative).
The problem here is you're using a relative width (100%) inside of a defined width container (.content-outer{1080px;}). You can see how this works by adding a larger relative width to your #topdropcont. (e.g. #topdropcont {width: 120%;}).
You can easily solve this by moving the markup of the menu outside of that container.
Just like #Matthew Darnell said your class content-outer has the following css styles min-width: 1080px and max-width: 1080px so having a width of 100% on your menu will give it a width of 1080px. If you don't want to move your menu outside of countent-outer, you can make the following changes to your css:
1) Remove min-width: 1080px and max-width: 1080px from .content-outer
2) Add min-width: 1080px, max-width: 1080px and margin: 0 auto to your header tag and to .main-outer
This should solve your issue.
Since first parent element of the Menu that has 100% width is .content, make sure it has position: relative, than make sure all other parent Menu elements have no position set. Than you can set your menu container to absolute positioning.
Final CSS should be:
.content {
position: relative;
}
.content-outer {
/* REMOVE: position: relative; */
}
.fauxborder-left {
/* REMOVE: position: relative; */
}
#wctopdropcont {
position: absolute;
/* Fading script should be removed...
it changes opacity and display, so: */
display: block !important;
opacity: 1 !important;
}
What you get after is this:
Related
I have nav bar and I'm using js to make my nav bar position fixed. After scrolling down because i adding width 100% my nav bar stretch more then it should and it goes over my layout
my script
$(window).on("scroll", function(){
if ($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
Css
.sticky {
position: fixed;
top: 0;
width: 100%;
}
link to website so you can see what is happening is click here
I recomend you to use the position stick property
For example: nav { position: sticky; top: 0px; }. You should use it inside a container with height defined.
Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#Sticky_positioning
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here you just can give the width value in pixels, what you want. Or if you wanna use it with relative values, you can make a container for it, because it will count the position from the parent element, give a fix width value to the container, and add your element to it.
.sticky {
position: fixed;
top: 0;
width: 100%;
}
could be your problem here.
Change 100% to the actual width you want, because your object is leaving the header object with a static positioning and as so the width isn't regulated any more. This fix is quick but also dirty. Consider changes in your layout have to be applied to all divs with static width, as well as responsive features are harder to implement. Option B would be a much better solution here.
Another solution is to insert a between the page div and your objects and set the fixed width there. Sub-divs allow for aligning objects. Inside objects at 100% width will line up to the next div up in the document tree.
I'm having some problems in a specific part of a responsive fluid page I'm trying to build for tablet dimensions for now with 960px converted to 96% container's size.
To see what's the problem, it's available here: http://shopper.izigo.pt/vote/
The arrows figure image in the button is not fluid as the rest of all elements and if I try to change to portrait's orientation, the arrow gets to small. I have made the calculation based on target % context but in this particular case it's not working (here is the code):
css:
main form button img {
float: right;
width: 12.3943661971831%; /* 44px current element size % 355px parent (button) size */
margin-right: 2.8169014084507%; /* 10px current element size % 355px parent (button) size */
margin-top: 3.09859154929577%; /* 11px current element size % 355px parent (button) size */
}
And the footer is not centered (here is the code):
css:
footer {
position: absolute;
bottom: 30px;
width: 96%; /* equal to the containers width because it's in a absolute position */
}
I think that img inside your button is actually styling, and not content. Therefore it belongs in your css as a background image, and not in your html as a img. This also makes the positioning a lot easier:
main form button {
background: url(path/to/image.png) no-repeat right center;
padding-right: 20px; /* width of image to prevent the label from laying on top of it */
}
(May I suggest you add a class to that button and target it that way, in stead of those long, hard to maintain, and slower selectors you use now)
For the footer, in stead of defining a width you can just set the right and left property to 0 (when it is positioned absolute that is). this way it will take over the width of the parent. Something like this:
footer {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
}
Both should work fine in your fluid design...
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
I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
Here are some alternatives that I've already tried:
width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
adding code to position the div "manually" in the html (not CSS)
I've discovered that float and text-align don't affect to fixed positioning
Help is greatly appreciated! Thank you.
If I understand correctly, this is what you're after.
You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.
Alternative if you don't want to add additional absolute container
#div {
width: 150px;
position: fixed;
right: calc(50% - 500px); /* will move the div as far as 50% of viewport
then move it back to 500px (that is half of max-width) */
}
/* if needed, you can add media query */
#media (max-width: 1000px) {
right: 0;
}
I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.
I think you need this one:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}