Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have just started creating my site and getting into web development. I was creating a social media nav bar . i wanted to place it in the bottom right side of all my pages. It worked fine except for one which showed the nav bar way below the end of my background image. After several attempts to fix it several other pages also started having the same issue.
leloupdevelopment.com
Give this bit in your CSS:
#social-media-icons {
margin: 0;
position: fixed;
bottom: 0;
right: 0;
z-index: 99;
}
This way, it always stays in the bottom of the screen, irrespective of the page size. :)
You should change the z-index but to use that you need to position it to either absolute or relative depending on your element. The higher z-index means your element is going to be on top of the lowest z-index.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
The footer in the main home page works fine: https://michaelarabic.blogspot.com/
It doesn't work when you're on a Page or a Post.
Page: https://michaelarabic.blogspot.com/p/home.html
Post: https://michaelarabic.blogspot.com/2019/03/test-2.html
This is one of the default blogger templates. I tried to figure out what's the <div> that is responsible for the footer.
Using inspect feature in Chrome, I can guess that they are the ones that have those classes: footer-outer and footer-fauxborder-left.
After figuring out the possible or the potential class names. I used the method in this question: Make footer stick to bottom of page correctly
There was some changes in the footer but that's not what I wanted. It became very thin and it doesn't respond to changing the height. I faced some issues while trying different solutions from other websites.
If it's hard or impossible to stick the footer to the bottom. At least, I need a method to hide it.
This is very simple,
just fix the
position of your footer content to fixed
,it will ready your content to fix to a point, now the browser looks for the position where it need to be fixed so just pass
bottom:0;
now in your case the content is not containing the full width so to recover that we need to provide a
width to 100%
so your final code looks something like this.
footer{
position: fixed;
width: 100%;
bottom: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a hero image, and on the top of it, I want a logo and menu,
I have given below properties to hero image. and for nav bar I have given a position: absolute; and width : 100%.
I dont want that horizontant scroll bar, please help.this is how my page look like
height: 551px; width: 100%;background: url(../_images/banner_1.JPG) no-repeat;background-size: cover;position: relative;
You mean window horizontal scroll-bar, so to hide that add below code and change you navbar div to 100%,
body{
overflow-x:hidden;
}
for removing horiontal scroll bar
add overflow-x: hidden
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have read many different problems referring to a white margin at the top of website and I haven't found an answer to help.
http://codepen.io/WikiWookie/pen/DijrI
Here is my code. I've just started to learn html/css and I'm trying to make a navigation like bootstrap's. I'm trying to do it from scratch, so I can learn more stuff
Oh yeah, I've tried to mess with some margin elements, but to no avail. Thanks guys!
Remove margins from ul tag
ul{
margin: 0;
}
Your <ul> margin is "bleeding" through your header and creating the white space. Either set:
header ul {margin-top: 0;}
Or
header nav {overflow: hidden;}
Or similar clearfix to contain margin within header.
As a side note, when you are using codepen, you do not put in any code in the html area except for what goes between your body tags. Codepen is set up to automatically link to your css & javascript files.
As far as having the nav bar positioned at the very top, left corner of your site, you can absolutely position the element(s) like I've shown below.
header nav
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
Remember, if you absolutely position the nav bar, you need to change the positioning of the next element that follows. A good way to learn about positioning is to use the developer tools in the browser and select the area you are interested in learning about. You will be able to see all the html & css to reveal how the developer of the site built their pages. Hope this helps. Here are a couple of links that helped me when I was first starting to code.
CSS Tricks: Absolute Positioning
Explaining CSS Positioning
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
2 weeks ago I started with learning HTML and CSS, and I really enjoy it.
I've been struggling with getting my footer(div) to resize with my background on my Home page, though. So whenever I zoom in or out the background stays, but the footer(div) moves around. The same when I resize my browser.
It just looks weird. You can say I want to "glue" my div to the background so they resize and move together. It's hard to explain, but try taking a look.
http://www.futureplane.net (the website is still in a work in progress, not finished at all)
It doesn't look great.
Does anyone know how I can fix this?
You have min-width: 1200px set on #wrapper. That's creating an issue with the nav area not being flexible if the browser is resized. However, you will need to refactor the <nav> elements so they also resize in with the nav/footer bar. You might try using float instead of position to start with.
Example:
#navbar {
float: right;
margin-left: 700px;
margin-top: -155px;
width: 50%;
}