HTML5 & CSS3 responsive website design margin issue - html

Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me

Using
.topcontent{
display: inline-block;
}
should solve your problem.

You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Related

Why is the gutter padding not displaying in one of my Bootstrap webpage content block and how do I fix it?

I have just started learning Bootstrap 5. I made a very simple webpage with basic blocks using the row/column guidelines on Bootstrap. One of these columns that I made is not displaying the gutter padding. The other columns are displaying the gutter padding to the left and right, but not the content1 column that consists of the two "posts". I am attaching my HTML and CSS code here.
Here is the webpage that I made in Bootstrap 5: Click Here to View
And I am attaching my CSS code here:
.header1 {
background:#ededed;
border-bottom:1px solid #ddd;
}
.content1 {
padding:40px 0;
}
.post {
background:#ffe6fa;
margin-bottom:30px;
}
.sidebar1 {
padding:40px 0;
}
#widget1, #widget2, #widget3 {
background:rgb(233, 250, 205);
padding:30px;
margin-bottom:30px;
}
.footer1 {
background:#000;
color:#fff;
}
Can you please help me understand what did I do wrong in my code? Why is the Bootstrap gutter padding not displaying for the column with class "content1"?
Thank you so much.
There is a way for Bootstrap to do all the work and you get to shrink down your CSS file too.
blahblahblah{
etc.etc.etc
etc.etc.etc
etc.etc.etc
}
^ done for one tiny UX result eventually adds up to a large file that needs to be loaded by each visitor. You could do it all by adding 4 characters only to your HTML.
You are adding a lot of CSS when Bootstrap will take care of it for you. In the same way that you can add rows and columns to your HTML to make a cool layout where all the CSS is pre-written, you can also add margins and padding to your HTML and the CSS is all automatic too. You've already been doing this by adding gutters (if you were also following the GetBootstrap info for those rather than adding your own).
In your thing above, the two items that require a gutter on their right hand side could just have a little margin on their right hand side, or the column they are housed in could have a little right-side padding.
So, padding in Bootstrap, use any number between 0 and 5. Everything below also applies to Margins, just swap the p to an m.
<div class="p-0">
Padding - None
<p class="p-5">
Padding - Maximum (but you can add CSS)
<a class="pt-0">
Padding Top - None
<h1 class="pb-5">
Padding Bottom - Maximum
In Bootstrap we don't use left and right for some things, we use Start and End.
<nav class="ps-5">
Padding Start (the left side of whatever is being padded)
<footer class="pe-2">
Padding End (the right side of whatever is being padded)
^ That last one can be added to the parent div of your two boxes. Adding pe-2 to your HTML is better than brain-aching over custom CSS? As promised, 4 characters only ;)
Couple of variations...
<img class="px-0">
Padding left and right
<button class="py-0">
Padding top and bottom
The main point is, especially with the layout of the page. Let Bootstrap do the work, adding more and more layout CSS often results in a negative.
The thing is you are adding padding for content1 as padding: 40px 0; which makes the padding zero on both left and right of the content1.
If you want to have some padding,
.content1{
padding: 40px 10px;
}
will do the trick.
And if you want to add some padding to .post classes as well, you can use,
.post{
padding: 30px;
}

Body content eaten by navigation bar

I have looked for other answers on SO that should answer the question, but I'm having a hard time finding relevant help.
On my webpage, I have two nav bars, one each for the top and bottom. My problem is that my "body" is getting eaten up by the two nav bars. I would prefer to have the content scale to the edges of each nav bar rather than extending into them.
The sample code can be seen in this fiddle: http://jsfiddle.net/qLjcao3p/
Thanks for all help.
The reason your content is displaying under the header and footer is because the header and footer have fixed positions. These elements space is not taken into consideration when rendering your page. So the content will be generated as if the nav are not there.
Adding margins as suggested will solve the problem by giving extra white space that will allow you to scroll from beginning to end for your content.
Are you using jQuery mobile?
Adding some margin or padding on the body will help. If that is what you were looking for.
// em or rem values recommended
body {
margin:60px 0 40px 0;
}
You have only to add margin to body like:
body{
margin : 60px 0; // 60px for top and bottom side and 0 for left and right side
}
Try this example
Add a padding to bottom and top of your container:
#bodyContent {
padding:60px 0;
}
60px looked fine. That is really the hight of your Nav.

Getting rid of white space below footer

I'm using the bootstrap 3.0 framework and no matter what I do I cannot get the little white space after the footer to disappear.It only shows in Chrome though, in IE it's fine.
I've used min-height, overflow:hidden,different margins still nothing.
http://www.bootply.com/XonUL6Vq2C
I'm sure there is some simple fix that eludes me.However it is driving me mad.
Can anyone offer a solution to this?
In your CSS, you are using 50px margin for both the top and bottom of the footer.
Remove the margin from your footer.
If you want to apply margin only on the top of the footer, use this:
footer {
margin: 50px 0 0 0; /* or just use: margin-top: 50px;*/
}
UPDATED CODE
You are using min-height and padding bottom in #cfoot.container. Remove that and you'll get as you expect.
working demo
Just add a negative margin-bottom until the white space is filled.
E.g
footer { margin: 0 0 -50px 0;}
It sometimes also happens when you forget adding a closing tag of a section.

top header span the whole width of site

Just building a website and I want to do something I haven't come across yet. When the top of the site has no margin but the main content does have, same as the top of this site.
Can someone point me in the right direction?
currently I have given it:
<div id="header"><h1>Header</h1></div>
Just a bit stuck.
The body and/or html element will have margin and/or padding by default (the exact values depend on the browser).
If you remove them, then any div (if you don't apply CSS that restricts the width) that is a child of the body will then fill the width of the window.
html, body {
margin: 0;
padding: 0;
}
You can then set a margin on the main content.
#main_content {
margin: 5px 10%;
}
If I understand your question correctly this is what you need to do in css:
body {
margin:0px;
padding: 0px;
}
That's all.

Illogical HTML and CSS inheritance?

I have a footer table which always has to stay at the bottom. In order to achieve this I have made a div with a class wrapper. wrappers height and width are 100%. The footer is not inside the wrapper so it is always at the bottom. By giving the wrapper a margin bottom of -150px I pull the footer up. However when you re size the page it becomes evident that the the table inside wrapper inherited the margin bottom -150px which is strange. If I do set margin bottom 150px for the table it stops working in safari and chrome.
Here is the site: http://canmill.zxq.net
Help is greatly appreciated
There's a few design choices (specifically your wrapping divs) which have contributed to the problem. The code provided on this page should help you correct it: http://www.cssstickyfooter.com/using-sticky-footer-code.html
try
.wrapper {
padding: 0 0 200px 0;
}
.footer {
margin-top: 0px;
background: url(images/bottombg.jpg) repeat-x;
position: fixed;
bottom: 0px;
}