I'm using downloaded bootstrap template for my Web Application.It had the side-bar menu I deleted it thought irrelevant.Now I have to add the left margin for the body of template.When adding left-margin it collapsed. How to add left margin without ruining it.
Please suggest.
Why don't you put a place holder <div> where the sidebar used to be. Make sure it has the same width, height, padding, margin, position, and float properties as the sidebar then set visiblity: hidden;. That way no collapse.
Note that <div> should be empty or do this: <div> </div>.
Related
So, I have a navbar on the top, footer on the bottom and a big image in the center. I placed everything using margin (margin-top: 0 for nav, margin-bottom: 0 for footer and margin: 3% auto for image. The image is centered on my page and everything is allright. However, when I set position of nav bar to fixed, the margin for image seems to count from the beginning of page instead of the end of navbar (it causes my image to overlap with navbar instead of being in between of footer and margin). The only way I know to fix it is making a second, invisible div with the exact same size as my navbar, but I believe it's not the most practical way.
I don't know if putting HTML/CSS code is necessary there, I think I described everything important.
Thanks in advance for help
try position:sticky. it works best if you have fixed height of element.
Setting position: fixed removes the element from the document flow. One possible solution is to add a container for the content, in your case a container div for the image, and set a fixed top margin or top padding on the container for the height of your navbar.
How can I add padding to the top of a single div? Is there a way to do it without modifying the .css file? I am using Bootstrap and there is no space between the carousel and the first div. I tried adding padding to the carousel, but the color of the left and right chevron overlap the padding, and this is not the look I want. I want a true white space between the two.
Try <div style="padding-top: 10px;"> :)
Use firebug on Chrome or Firefox and see which div or element inside the carousel needs the padding you want.
However, the best way would be to use CSS. As you said, you want a padding, and CSS has the padding property. As #Jorgen said, just add a padding top.
Otherwise use <br> instead as #Mr Lister said
I am working on a website and am willing to achieve the following layout. I would greatly appreciate if you could guide me to the working solution.
In the header of a page there is:
a logo on the left (<a> tag)
2 widgets (<aside> tags) in a <div>
I need these 2 widgets to take up all the remaining width (all 100% except for the logo width).
How do I do this with CSS? If there is no way to do it without modifying HTML, then what (and how) would you suggest to change? Responsiveness is not a priority #1, however the webpage itself is responsive.
I understand there are many possible solutions, but please do not suggest JavaScript solutions or HTML changes that make use of tables.
Meanwhile I will try to prepare a code snippet to avoid possible misunderstanding ...
Here's how you do it:
Give header overflow:hidden so its height will wrap floated elements (or you could use a clearfix)
Make the header have padding-left the same width as the logo. Make
the logo float:left with a negative margin-left the same width as the
logo. This will fill the padding-left of the header with the
logo.
Make the header have padding-right the same width as the 2nd
<aside>. Make the 2nd <aside> float:right with a negative
margin-right the same width as the 2nd <aside>. This will fill the
padding-right of the header with the 2nd <aside>.
Lastly, give the 1st <aside> float:left and width:100%. Boom - you're done!
jsfiddle demo
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything