I'm having a problem with my website, at the top of my page i made a list/menu with links, when you press the link the page jumps down to the topic you want, but the problem is when you press the link it crops off the top of the page, so you can't see the top 200px. How do I fix this? And why does it do that in the first place? I can see when you press the link the URL changes to "/#jump1" at the end.
This is the HTML:
<ul id="js-menu"> <li class="portfolio-menu" id="menu-li-1">Tema 2</li> <li class="portfolio-menu" id="menu-li-2">Tema 3</li> <li class="portfolio-menu" id="menu-li-3">Tema 4</li> <li class="portfolio-menu" id="menu-li-4">Tema 5</li> <li class="portfolio-menu" id="menu-li-5">Tema 6</li> </ul>
and this is how the #jump is applied:
<h2 id="jump-3">Tema 3</h2>
I tried searching on the web to find answers, but i have not found it... Please help.
Just take the time and find the solution yourself. There are countless options from CSS to JS, but here are some that you can give a try.
Easiest solution:
#jump-3 {
padding-top: 50px; /*height of your navbar*/
margin-top: -50px;
}
Another solution, taken from here, #LGT:
html {
height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
margin-top: 84px;
overflow: hidden; /* Don't scroll. */
}
body {
height: 100%; /* Set the height to that of html. */
overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}
Another solution:
#jump-3:target {
padding-top: 50px; /*height of your navbar*/
}
/*:taget pseudo class is used when user accesses the selected tag using href*/
This happens when your nav has a sticky or fixed position. You can fix it with scroll-padding-top or scroll-margin-top property in css.
The scroll-padding-top property is applied to the parent container and acts just like a CSS top padding, defining offsets from the top of the scrolling area. The scroll-margin-top property should be applied to each anchor section. Like:
nav {
position: sticky;
top: 0;
width: 100vw;
height: 60px; <--- Value for scroll-margin-top property
background: #F4F2F3;
}
section {
width: 100vw;
height: 100vh;
scroll-margin-top: 60px; <--- Value from nav height
padding: 1rem;
}
Here:
body {
margin: 0;
padding: 0;
}
nav {
position: sticky;
top: 0;
z-index: 999;
width: 100vw;
height: 60px;
background: #F4F2F3;
}
ul {
width: 100vw;
height: 60px;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
li {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: #656256;
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
scroll-margin-top: 60px;
padding: 1rem;
color: #FFFFFF;
}
#anchor-1 {
background: #D3B88C;
}
#anchor-2 {
background: #9EBC9F;
}
#anchor-3 {
background: #656256;
}
<nav>
<ul>
<li> Menu link with anchor 1 </li>
<li> Menu link with anchor 2 </li>
<li> Menu link with anchor 3 </li>
</ul>
</nav>
<section id="anchor-1"> Section 1 </section>
<section id="anchor-2"> Section 2 </section>
<section id="anchor-3"> Section 3 </section>
Related
I have a set of buttons which is a list with display: inline-block. Inside some of the buttons (li) there are div-s that may have some content, each is absolutely positioned below the parent li. The list is inside a div that has overflow-x: auto, because I don't know how many buttons there will be. However, the 'overflow-x: auto' creates a vertical scroll bar which I don't want and I have no idea why it's there. I thought that absolute elements are removed from the document flow?
Here is the snippet:
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
overflow-x: auto;
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}
<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>
, and this is what i want to achieve (i simply removed the 'overflow-x: auto' from '#links ul', but I need that in case there's more buttons than the space for them):
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
/*overflow-x: auto;*/
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}
<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>
I will then apply javaScript to hide/display the '.link-content' upon button click.
Thank you.
Your answer is in the example below.
The issue is "you are understanding position:absolute in a wrong manner. Position absolute only breaks the normal flow and now it moves according to its anchor element (with position: relative). But, it does not affect its height or width. When you are trying to compress pages or making a wrapper containing the whole structure, the height and width of element - (with position:absolute) is still an entity and on forcing and putting scroll (overflow:auto) that will absolutely be counted as a "legal HTML Element - with its height and width".
Normally you do not find this, because mostly position:absolute is used in menus, which are pretty small and not of that big size that they go out of page.
section {
overflow:auto;
height:110px;width:110px;
}
div {height: 100px;width:100px;background: red; position:relative;}
p {height: 200px; width: 200px;background: blue; position:absolute;left:5px;top:5px;}
<section>
<div>
<p></p>
</div>
</section>
<div>
<p></p>
</div>
This is very weird. So I'm making a simple navigation menu. I added anchor tags inside my list items but the thing I don't understand is that the more I move them to the right, they're not showing up as links but just list items. I know in this demo it shows them working but in my code they don't show up as links. What is wrong? Do I need to add a pointing cursor? I thought links automatically gave you them.
.nav {
display: flex;
position: relative;
align-items: center;
height: 50px;
margin: 50px 200px 0 200px;
width: calc(100% - 400px); }
.nav a {
display: flex;
align-items: center; }
.nav a img {
height: 35px;
position: absolute;
left: 0px; }
.nav .desktop {
position: absolute;
right: 0; }
.nav .desktop ul li {
display: inline-block; }
<div class="nav">
<img src="/images/ff_logo_black.png" alt="" />
<div class="desktop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
Turns out it was my h1 element covering them since it was positioned rather large. Silly me.
I'm trying to set up a simple layout for my homepage.
This is how I want it to look like:
Unfortunately, I've difficulties specifying the size for the main div. I want it to expand dynamically, both the height and the width. So it should "fill" the rest of the content, not filled by menu and footer.
HTML:
<body>
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
.nav, .content{
display: inline-block;
vertical-align: top;
}
.nav{
width: 200px;
background-color: #ccc;
}
.main{
height: 100%; /* something like 100% - 50px (height of footer) */
width: 100%; /* something like 100% - 200px (width of menu) */
overflow: hidden;
background-color: #aabbcc;
}
.footer{
background-color: #ff9999
}
You can find an example here: http://jsfiddle.net/48q5f4u9/3/
First at all reset:
* {margin:0;padding:0}
After use 100% on body, html tags and main container .container:
html,body, .container {
height:100%;
}
Then use calc() to set the dimensions, like:
.main{
height: calc(100% - 50px);
width: calc(100% - 200px);
overflow: hidden;
background-color: #aabbcc;
}
DemoFiddle
.nav{
width: 200px;
float: left;
background-color: #ccc;
}
Link to Fiddle
This is one simple way to make content dynamic , setting float to sidebar.
but i think you need to make more changes , set footer at bottom ( footer will be always at the end of the page ) and by this way you can make things look more attractive.
Hope this helps, let me know ;)
You can used sticky footer and absolute and border-box for main and nav and play with padding because they have a defined size:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.main, .nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
min-height: 100%;
margin-bottom: -50px;
overflow: hidden;
}
.nav {
position: absolute;
left: 0;
padding-bottom: 50px;
top: 0;
width:200px;
height: 100%;
background: #1abc9c;
z-index: 1;
}
.main {
top: 0;
width: 100%;
height: 100%;
padding: 0 0 50px 200px;
background: #3498db;
height: 100%;
position: absolute;
left: 0;
}
.container:after {
content: "";
display: block;
}
.footer, .container:after {
height: 50px;
}
.footer {
position: relative;
background-color: #e74c3c;
z-index: 2;
width: 100%;
}
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
</div>
<div class="footer">
Footer
</div>
I have an image animating from right to left... The image is 6000px wide to give a longer duration to the animation. I put the image (clouds-layer-2.png) in a div (layer-2-container) and used the following CSS hoping that the image wouldn't spill over the div creating a horizontal scroll. But unfortunately it's not working and I have 6000px worth of horizontal scroll.
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
This can be viewed at http://www.mike-griffin.com/testing. If you use CMD/CTRL+A to select all you'll be able to see the clouds better, if that helps.
I'll also paste all the code below.
-HTML-
<section class="home-section">
<div class="navigation">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div><!--navigation-->
<div class="creative-designer">
<h2>| Heading one |</h2>
</div>
<div class="home-section-layers">
<img class="layer-1" src="img/white-M-layer-3.jpg" width="" height="">
<div class="layer-2-container">
<img class="layer-2" src="img/clouds-layer-2.png" width="" height="">
</div><!--layer-2-container-->
</div><!--home-section-layers-->
</section><!--home-section-->
</div><!--container-->
-CSS-
.container {
width: 100%;
height: auto;
max-width: 100%;
}
.home-section {
width: 100%;
height: auto;
position: absolute;
}
.layer-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/*margin-top: -10%;*/
z-index: 1;
}
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
.layer-2 {
position: absolute;
z-index: 2;
width: auto;
height: auto;
top: 0;
}
.creative-designer {
text-align: center;
position: relative;
z-index: 5;
color: #666;
margin-top: 40%;
}
.navigation {
color: #0C98D6;
position: relative;
z-index: 10;
top: 0px;
}
.navigation ul {
list-style: none;
width: 100%;
padding-right: 5%;
float: right;
}
.navigation ul li {
float: right;
padding: 10px;
}
Thank you for any help at all.
In the spirit of Stack Overflow, I'm answering your question exactly.
.home-section {
overflow-x: hidden;
}
I want to stress, though, that this site is really heavy, and you should code it such that there aren't going to be load issues on mobile. You can split the clouds in half, and/or use an SVG (the M should also be SVG). Additionally, your clouds are going to be overlapping content should you decide to add stuff on the sides, so you might want to set a border-radius to make the circle crop out the clouds.
Just suggestions, but hope they help!
I have a problem where my z-indexes just won't kick in and I don't really get why.
I am not able to reposition the elements in the DOM, I need a purely CSS-based solution without any greater hacks
I have the following navigation:
<nav>
<div class="wrapper">
<ul>
<li>Test</li>
<li>Test
<ul>
<li>Sub test</li>
<li>Sub test</li>
</ul>
</li>
</ul>
</div>
</nav>
http://jsfiddle.net/S3XBD/1/
I packed it in a fiddle with the CSS to demonstrate my problem
my target is to get the blue box (Sub-Navigation) under the green box (Top level Navigation) in the exact same manner as demonstrated in the fiddle
Is there any way to fix my z-indexes or can someone point me to the mistake?
Thanks for your help
Just remove the z-index form the .wrapper element and change the z-index of the second ul to -1
nav .wrapper {
width: 100%;
max-width: 400px;
background: green;
margin: 0px auto;
position: relative;
}
...
nav ul ul {
display: none;
position: absolute;
top: 50%;
left: 0;
width: 100%;
background: blue;
z-index: -1;
}
http://jsfiddle.net/S3XBD/2/
I have updated your csss and removed hover as this is easy to fix: but the issue I believe you had was only in your positioning
nav {
width: 100%;
background: red;
}
nav .wrapper {
width: 100%;
max-width: 400px;
background: green;
margin: 0px auto;
position: relative;
z-index: 50 ;
}
nav ul {
list-style: none;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: blue;
z-index: 100 !important;
}
nav ul li {
display: inline-block;
}
nav ul li ul {
display: block;
}
Just one thing more: User firebug to find out what it current style and you can modify it there on runtime. It also supports hover