I've created a navigation list with plain and simple HTML and some CSS. It should be on the right side of the page and shouldn't move neither if there is a lot of content on the page nor if the user scrolls down.
After I added some sample text to my website I recognized that the navigation element is more in the left side. Why is this happening and how can I fix this?
This is the first minimal example with just some text:
https://jsfiddle.net/sck6nL6w/2/
And a snippet with some more text where the navigation list is more on the left side than in the first example:
https://jsfiddle.net/7Lsew6gg/3/
Note: Both have the same CSS styles defined:
ul {
list-style-type: none;
padding: 0;
width: 200px;
float: right;
margin: 0 5em 0 0;
right: 0%;
top: 5%;
position: fixed;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.navigation div {
margin-left: 60px;
}
#content div {
width: 65% !important;
}
Edit:
As #Autista_z mentioned the navigation bar gets moved when there is a scrollbar but I don't want to always show a scrollbar. Isn't there a better way to fix this?
as said by #Autista_z it's just because of scrollbar.
`https://jsfiddle.net/sck6nL6w/4/'
check this updates fiddle.
it's not fix but i want to show you how it's not an issue at all.
all i did is added this line of code
body {
overflow: scroll;
}
Related
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.
I know there have been many questions about ul auto indents, I've tried with no success many of those answers and I have the additional problem of when adding a container with padding, it seems to only pad one side.
Basically I'm trying to get a ul bar fixed to the bottom of the window. This bar is inside a container (main) to give it padding from either side of the window). It is designed to auto expand with the width of the window (liquidish) so there is no defined width beyond the initial width=device width.
When written by itself, I get a small auto indention on the left side of the ul. I've tried adding 0 padding and margins to the ul and li elements and that seems to have no effect as well as others. When I add in the container it seems to pad only the side with the indent problem. I'm sure its something simple and stupid, but I appreciate any help.
As an aside.. the width of the li elements being 33.3% is due to using a spacing box hack found on stackoverflow. The use of it doesn't change/help/hurt anything in this problem, so I omitted it to keep this a little more simple.
JSFiddle Link http://jsfiddle.net/XdHXf/1/
HTML
<div class="main">
<nav>
<ul>
<li>Main</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
</div>
CSS
.main{
width: 100%;
padding: 0 1em;
}
nav{
position: fixed;
bottom: 0px;
background: #455868;
width: 100%;
z-index: 1000;
}
nav ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
nav li{
position: relative;
float: left;
width: 33.3%;
text-align: center;
background: #455868;
padding: 0;
margin: 0;
}
nav li a{
text-decoration: none;
display: inline-block;
width: 100%;
padding: 15px 0;
}
This comes from the browser's builtin stylesheet. If you add
body {
margin: 0;
}
the small extra space goes away.
As an alternative, you get similar results, when you check Normalized CSS under Fiddle Options.