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
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 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
Facebook page like button(not box) ruins the responsiveness of my website in mobile. Below is the code for the Facebook like button:
<div class="fb-like" data-href="https://www.facebook.com/myamazingfbpage" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
While the responsive structure is intact, there is a huge white space/block/section towards the right side of the viewport. Nothing is protruding from the website layout to force that white space/block/section. The buttons are in a left sidebar.
I have tried displaying it as inline-block, floated it to extreme left, reduced it's margin and padding to 0. Moreover, it also makes the twitter follow button next to it unclickable. I have also tried to <span> the <div>.
All to no avail.
Thanks my friends in advance. :)
It looks like you're using a WordPress plugin and that plugin's custom CSS is causing the issue. Not sure if you've set it up properly or just a bug with the plugin's CSS.
The culprit is this CSS selector:
.fb-like span {
overflow: visible!important;
width: 450px!important;
margin-right: -375px;
}
The selector above is targeting a <span> that is the immediate child of the <span> you posted in your question.
You'll notice in Dev Tools that your span is 75px wide even though the button has been given a specific width of 49px. That is due to the selector above. The selector above tells it to be 450px wide then essentially subtracts 375px via a negative margin, leaving you with 75px which creates the extra space on the right side as the button is only 49px.
To fix the issue you'll either need to:
Reference any docs that might be available for that WordPress plugin to ensure that you have configured it properly.
Remove the selector if possible.
Override the selector if you cannot remove it.
WordPress Plugin in question: Easy Social Share Buttons
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 7 years ago.
Improve this question
I've looked at many a thread and understand the width and display tags ( min, max, block inline, inline-block and table etc), but I'm having a terrible time trying to fix this issue with my page footer. When I resize the browser window, everything in the footer collapses.
Can someone kindly check my markup and let me know what I need to add in my CSS to fix this, please.
Basically I'd like the browser window to pass over the content and all that contained be fixed centrally... how it looks, laid out, when window full-size.
Thanks!
Site: http://mixititb.com/Z_Test_Site/index.html
Edit;
Two issues I'm seeing are when you change window size, the footer itself is collapsing and perhaps making the content bunch up. So, that would be first priority fix and then aligning the content center.
For these two issues, I'm really stuck and truly appreciate the help for a newbie to get this fixed. Thanks for checking my code!
Edit 2;
Just fixed the footer sizing with overflow-x: hidden; for the fix_footer class! :)
So, now we/I just have to figure out why the content is collapsing when you resize the window. Any takers? :) :)
Edit 3;
# PeeHaa, easwee, mario, user35443, Starkeen... please kindly take this off hold, I'm unsure how to edit the question as I've fixed some issues myself and too with help from those below, but a few remain, so didn't want to ask another question. Thanks, appreciated!
Edit 4;
Fixed through reorganising HTML structuring div's with classes and setting .container to white instead of the footer itself. Setting all main div's (i.e. nav, content and footer) with a class of container allowed fixed scaling of the footer as it was taking the width set in CSS.
Thanks everyone for the help!
Search media queries on google and center the elements with text-align: center or margin: 0 auto, if the elem are floated, use clearfix.
Your footer breaks at about 900px.
Example:
#media screen and (max-width: 900px) {
center your elem
}
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.
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've uploaded my website, so you can see how it works, and also can check the CSS there. It's not fully working, but the problem is visible. http://exampleforso.uw.hu/testvertaboraink.html
My problem is that I can't click the link on the page. Anyone can help me correct my code?
I'm still new to CSS, so my code might be messy or imperfect. And sorry for the language its hungarian.
#menuwrapper {
position: absolute;
top: 212px;
right: 0;
bottom: auto; /* or just remove */
left: 0;
z-index: 1;
}
You set a top value AND a bottom value of 0, with no height. The browser will fill that space up. This means that the menu wrapper will be on top of the rest of the content, so when you think you are clicking on the link, you're actually clicking on the menu wrapper.
You should get rid of all those position absolutes, or at least get some better z-indexing going so that the "3D" representation is correct.
The problem is your header has a height of 700px and position absolute, which means it overlaps not only your link, but you whole page, So either remove the height or the position absolute.
In your styletest.css file.
From #menuwrapper Remove the property z-index:1;
And it will work perfectly.
What's happening here is, your div that contains that link is getting overlapped by the div with id=menuwrapper. And both those divs have z-index property set to 1.
Removing that from #menuwrapper should fix the problem.
You should not really play with height values as that may distort your orientation and alignment should you open that website on screen that is huge.
remove the bottom:0 rule from your #menuwrapper CSS block. this will allow the menu wrapper to assume the correct height as dictated by its contents.
This way, you don't need to declare a specific height (which would change with things like font size, etc.) or change your z-index, which allows your menu flyouts to correctly display above the page content.
Give your menuwrapper a fixed height. Something like this:
#menuwrapper {
height: 45px;
}
or remove the "z-index" that you have given to the menuwrapper.
Currently, your menuwrapper has a height of 430px and along with the z-index it makes the link, unclickable.
Update: Removing the "bottom" value is the right solution.