I have a website I am working I am struggling to center all of my content. Why won't the header center?
I tried the usual method of margin-left and right: auto; but it didn't work so I did the following by using this:
<div class="header-wrapper">
<div id="wrap">
<!---start wrap 960px--->
<h1>TITLE</h1>
<div class="box-full">
<h2>Our Cloud Development</h2>
<p>Welcome to company Feel free to follow us on twitter. We are a new company, focused on business development.</p>
<div class="button">
Learn More
</div>
</div>
</div>
</div> <!---end wrap 960px--->
But it is pushing to the right.
You have specified width of 960px for your .box-full <div>. Because you have also specified padding, you're extending beyond that 960px wrapper.
Change the width to: 960-30-30 = 900:
.box-full {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
clear: both;
left: 0;
margin: 1cm auto 0;
padding: 30px;
position: relative;
text-align: center;
width: 900px;
}
On your site, the div#wrap element is actually 900px wide, not 960px. That in consideration, THAT div is actually centered as well. The thing that makes it not look centered, is the fact that the div.box-full element is 1022px wide (960 + 30(padding-left) + 30(padding-right) + 2(border left and right)) = 1022. Take the width of that .box-full element and set it to 898px and see if that makes it look right!
Related
GitHub use margin:40px and padding:24px. To use only margin or padding is not good? ex. margin:64px or padding:64px. I want to know the reason why GitHub use both of them.
<style text="css">
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
</style>
<p class="alt-lead text-center text-gray mb-6 pb-4 col-md-10 mx-auto">
Open source software is free for you to use and explore. Get involved to perfect your craft and be part of something big.
</p>
<div class="clearfix gut-lg">
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-future.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Shape the future of software</h3>
<p class="alt-text-small text-gray">Your contributions help make technology better for everyone, developers and non-develo alike.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-best.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Work with the best in the field</h3>
<p class="alt-text-small text-gray">Amazing developers use GitHub. Contribute code to projects that change how software&nbs built.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-grow.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Grow your skills and help others</h3>
<p class="alt-text-small text-gray">Whatever your skill level, working on open source software is a great way to learn newp;things.</p>
</div>
</div>
</div>
</div>
I guess you already know different between margin and padding. but wondering why they using both combined instead of one thing.
If you check their code. you will see they come from different class.
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
and If you dig a bit deeper you will see they have these classes in their framework.
.mb-1{ margin-bottom: 4px }
.mb-2{ margin-bottom: 8px }
.mb-3{ margin-bottom: 16px }
.mb-4{ margin-bottom: 24px }
.mb-5{ margin-bottom: 32px }
.mb-6{ margin-bottom: 40px }
and same things for padding pb-1 to pb-6
Now, If they want 64px space they have options to define a new class or re-use those class.
And they choose to reuse .pb-4 + .mb-6 to get 64px instead of define a new class just for one time using and without messing around with their framwork.
The reason why people would use margin and padding together would usually be due to the use of a background color, or background image.
If the background is left blank/transparent, it does not matter if you use a padding or a margin. However once you set the background color, the padding will increase the size of the element which includes the background color, while the margin will separate it from other elements creating white space in between.
Hope this helps you understand!
What I am understanding is that you went through GitHub's styles and noticed that they used both margin and padding in their CSS. Your question appears to be "Is using one/both preferred or does one method have an advantage?"
The answer to which is no, there isn't an advantage to using either, but you need to understand what margin and padding are
Margin
Margin is space between that element and elements around it. so saying margin:5px on something will put a five pixel wide margin around the entirety of the element, ensuring other elements do not "touch" it.
Example:
Notice that there is a very visible gab between the first element and the second element. And there is even a gap between the left side of the container and the first element.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
background-color: blue;
color: white;
}
<div class="row">
<div>Hi</div>
<div>Hello</div>
</div>
Padding
Padding, on the other hand, is how much space there should be between the edges of an element and the element's own contents. padding:5px says that there is a a sort of boundary inside the element five pixels wide on each side. To extend our first example:
Notice that there is a very small gap between the contents of each element's wall (where the background begins or ends) and the text content.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
padding: 5px;
/*Try removing/changing this value to see what effect it has.*/
background-color: blue;
color: white;
}
<div class="row">
<div>Hi, this text is longer so that we can see the border around the element and how much space there is between the walls of the element and the text.</div>
<div>Hello</div>
</div>
Tl;Dr
Margin is used to create a gap or some space between elements. Padding is used to create space between an elements contents and it's "walls."
So you seem to know
Padding is space inside the border, whereas Margin is space outside
the border.
Do you also know that that means, if you have margin set to elements following by the same elements it will just take the biggest possible value. So if margin-bottom is bigger than margin-top of the following element it will take margin-bottom.
So example gap will be margin-bottom from first element 20px.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 20px;
}
div.two {
margin-top: 5px;
}
<div class="one"></div>
<div class="two"></div>
Kinda same example gap is again 20px but this time it is the margin top from the second element.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 5px;
}
div.two {
margin-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
And here what happens if you use padding. If you use your browser debugger you will see that now the gap should be 27px (25px from both elements padding + 2x1px border)
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
padding-bottom: 5px;
}
div.two {
padding-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
So to answer the why. If you know this you can have reasons to use one over the other.
I must start off by saying I'm on a HUGE learning curve with this, and the website project is in my spare time as a present to somebody, so my knowledge is limited, although I think I understand the basics.
ALSO please note that I do have another more basic, less interesting site which is already built as a back-up so I won't be broken-hearted if I'm told all my code is rubbish and I need to start again!
I'm creating a one-page, horizontally-scrolling portfolio site for a make-up artist, which requires me to have a fixed banner with my menu listings on the left hand side, and with javascript, the page scrolls nice and smoothly to the relevant section.
Everything looks great on my screen resolution, with my browser at the right size, but I've noticed that if I shrink the browser window down, the fixed navigation banner starts to scroll out of place, while everything else stays together as it should.
The end result should be that everything stays in its place, with the only 'moving part' being the content on the scrolling section, so when the browser is resized, everything either re-sizes or at least scrolls together.
I've played around with wrapping everything in a content div and I've experimented with different positioning, but nothing seems to be working.
Here's my basic html layout for the sections:
<html>
<body>
<div id="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
</div>
<div id="testimonials" class="bigpanel">
</div>
<div id="contact" class="bigpanel">
</div>
<div id="footer">
</div>
</body>
</html>
...and the CSS:
body {
width: 15000px;
height: 580px;
background-color: #fcf4f1;
position: absolute;
margin: 2% 0 5% 0;
}
#footer {
position: fixed;
left: 935px;
top: 645px;
margin: 10px;
}
#banner {
position: fixed;
height: 580px;
width: 200px;
background-color: #fff;
opacity: 0.8;
line-height: 20px;
margin: 45px 0px 0px 20px;
padding: 0;
z-index: 999;
}
.panel {
width: 930px;
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top: 45px;
}
.bigpanel {
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top:45px;
}
Pic of how the site is at the correct size
...and a pic of how it looks when it's squished in height!
I've tried to be as thorough as possible so sorry for the long one!
Any help would be greatly appreciated.
Ok, I don't know whether I have the answer that will work for everyone but it certainly has for me.
I basically had a long look at how I'd defined the widths and heights for basically all elements in my website and worked out that although the widths needed to be fixed for the main body and the banner, the height could be responsive depending on the viewport size.
I wrapped everything in a very wide wrapper div, with a height set to 100%, but set the body height to 84vh, with a max-height of 700px (so my images can have the same max-height and always look good).
This way I could also set the banner to height: 84vh with a max-height of 700px so it never overflows, but always sizes down.
I set the margin for my wrapper to centre it vertically, and now whilst everything fits inside its containers, there's no vertical scroll!
I'm sure a lot of it is an ugly solution, caused by my bad coding but it works now!
I thing you have to play with the top poperty on you #banner div by putting it to 0. This work only with positions like fixed, absolute, relative, etc. What it will do is to fix you div at the top of your browser window, no matter what. It is the "top padding" (disantce) you div will have relativly to the to of the screen.
So you should just add
top: 0;
to
#banner
and it should work!
If you want an exemple of it's efficacity, I recommend you to look at this codepen: http://codepen.io/Symsym/pen/LsjCK
Cheers! and tell me if it works.
<body>
<div class="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div class='content'>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
about
</div>
<div id="testimonials" class="bigpanel">
testimonials
</div>
<div id="contact" class="bigpanel">
contact
</div>
</div>
<div class="footer">
footer is here!!
</div>
css code:
body {
background-color: '#fcf4f1';
overflow:hidden;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.banner {
position: fixed;
width: 200px;
background-color: '#ccc';
opacity: 0.8;
padding: 0;
z-index: 999;
top:20px;
left:0;
}
.content{
width:800px;
margin-left:200px;
overflow:auto;
float:left;
}
.panel {
margin-top:10px;
width: 930px;
float: left;
}
.bigpanel {
float: left;
margin-top:20px;
}
.footer {
position: fixed;
bottom: 0;
left:0;
right:0;
background:red;
margin: 10px;
}
you can scroll on content.
I can't get the text in the footer placed in the right position, just as the image below:
I've been making changes to the code from a template and now the text is in the upper part and some blank spots appear, specially on Chrome browsers:
The web is here and these are the links to the html and the css
Update: JSFiddle added.
<footer class="aligncenter">
<div class="wrapper" id="bottom_footer">
<h2 class="hidden">xxxx Footer</h2>
<section>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<p>xxxxxxx xxxx, 35</p>
<P>xxxx x</p>
<p>Tlfo xxxxx Fax xxxx</p>
</div>
<!-- left_column-->
<div class="mid_column"><span class="helper"></span>
<img src="images/eccWhite_200.png" width="400" height="120" />
</div>
<div class="right_column">
<h4> xxxxx ESTRUCTURAS SL</h4>
<p>estructuras construcciones y contratas</p>
<p>info#xxxx</p>
</div>
<!--right_column-->
</section>
<!-- class="container"-->
</div>
<!-- wrapper footer-->
</footer>
Could you please show me what I'm doing wrong?
I would recommend against using float:left; on the left and middle column. Since your content is not likely to change significantly there is one thing I might do. Give your footer position:relative and position your .right-column with position:absolute; bottom:0; right:0;. This will ensure that your right column is far to the right, and aligned to the bottom of the footer.
Overall, the styles in the footer seem like they are trying to be 'not a table' and end up being kind of messy for it. If you want semantic markup that still behaves like a table, try http://960.gs/.
<footer id="footer">
<h2 class="hidden">Ecomir Footer</h2>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<span>Almirantes Matos, 35</span>
<span>36002 PONTEVEDRA</span>
<span>Tlfo 986869940 Fax 98685362<span>
</div><!-- left_column-->
<div class="right_column">
<h4> ECOMIR ESTRUCTURAS SL</h4>
<span>estructuras construcciones y contratas</span>
<span>info#ecomir.es</span>
</div><!--right_column-->
</footer>
css
.hidden {
display: none;
visibility: hidden;
}
#footer h4{
line-height: 1em;
margin:10px 0 0 0;
}
#footer{
width: 1100px;
height: 120px;
position: absolute;
bottom: 0;
margin-left: -560px;
left: 50%;
background-color: #CCC;
background-image: url(http://www.xente.mundo-r.com/turkish/ecomir_2/images/eccWhite_200.png);
background-repeat: no-repeat;
background-size: 400px 120px;
background-position: center;
}
.left_column{
width: 200px;
background-color: #FF0080;
float: left;
padding: 0 0 0 10px;
position: absolute;
bottom: 0;
}
.right_column{
width: 300px;
background-color: #FF00FF;
right: 0;
bottom: 0;
position: absolute;
}
you can simple use this FIDDLE
I tried to solve it but stylesheet little bit messed up in my opinion, so just remove the footer at all then try to apply your footer in your own style sheet just like I created.
Be careful while choosing class names because, if there will be a overload , it will messed up again
.footer
{
background-color:#CCCCCC;
width:400px;
height:100px;
margin-left:auto;
margin-right:auto;
font-size:9px;
}
I checked the HTML version, in your code you unnecessary use section remove that first.
by removing this you can remove the while space.
there are a lots of things which need to fixed ..but here is work around to vertically align the text.
.right_column
{
width: 25%; /*remove this line**/
display: inline; /*remove this line**/
}
Not able To fix it complete but the following point will help you a lot
I looked into your code not completely but found that you used
margin-left property although your left right div are 25 % and
center one is 50 % So there is not space for that margin . IF you
remove margin-left:10px (I suppose in your code). The White lines
will be removed and you can align text by setting margin-top.
I have not studied your whole code but not able to find clear:both
property as the bottom three div float. So do that as it is a good
practice and I think it will help in solving your issue
Either set background of section to #ccc or use padding not margin
Hope this help.....
I have Some dynamic size of nav with fix size of width: 25%; in a 100% page width.
<nav class="football fig1">
<header>Header</header>
<article>
<h3>P1</h3>
<img src="">
<p>This is a first News</p>
</article>
</nav>
you can see my code here.
because of dynamic length of nav, there is some blank space between P1 and P4. please help me to delete theme for all of blocks with css.
Also what is the problem with the code that 4 of blocks are not in a row?!
The reason you aren't fitting 4 divs across is because your display setting is inline-block. This creates some padding between the elements that you aren't in control of. Replace that with a float and all is solved:
nav {
display: block; <--this changed from inline-block
float: left; <--this line added
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
}
Now the divs are hard up against each other, consuming exactly 100% of the width. If you want a margin between you will need to factor that in, i.e.:
nav {
display: block;
float: left;
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
margin-left: 0.5%;
margin-right: 0.5%;
}
Since I have added 1% of margin, you would adjust the width to 24% to compensate. If you don't want the half-margins on the left and right you will have to get creative with :last pseudo classes, or add a last-column class to it.
As to the other part of the question, I suspect that unless you restructure your code that they will always line up at the top (I could be wrong). You could combat this by re-ordering the divs if you know that there will always be 4 across:
<div class='container-col'>
<div id='col1'></div>
<div id='col5'></div>
</div>
<div class='container-col'>
<div id='col2'></div>
<div id='col6'></div>
</div>
<div class='container-col'>
<div id='col3'></div>
<div id='col7'></div>
</div>
<div class='container-col'>
<div id='col4'></div>
<div id='col8'></div>
</div>
CSS:
.container-col {
float: left;
}
So now we have 4 vertical columns floated side-by-side, and the divs will stack with no space between them vertically. Here is a fiddle showing the result, which keeps the margins too.
This question has come up similarly before, but I have looked around and can't find this happening to anyone else.
I can make a 4x4 grid of divs together with images using in the HTML but one of the divs I want text in (top right). When I enter <p>Some text</p> within that div it goes below the div to the left and the bottom two are still aligned and under the moved text div.
I have tried making the height fixed but nothing changed, the div just moved up but the others remained where they were.
CSS:
/* Page Content */
.container
{width: 910px;
height: auto;
margin: 0px auto;
padding-top: 35px;
position: relative;}
/* Home Page Content */
.gridblock, .gridblock2, .gridtext
{width: 450px;
height: 200px;
padding: 0px;
position: relative;
display: inline-block;}
.gridblock
{margin: 2px;}
.gridblock2, .gridtext
{margin: 3px, 0px, 3px, 0px;}
.gridtext
{width: 450px;
height: 200px;
position: relative;
background-color: #f9f9f9;}
HTML:
<div class="container">
<div class="gridblock">
<img src="images/homegrid1.jpg" alt="3345 Mastering">
</div>
<div class="gridtext">
<p>Some Text</p>
</div>
<div class="gridblock">
<img src="images/homegrid2.jpg" alt="3345 Mastering">
</div>
<div class="gridblock2">
<img src="images/homegrid3.jpg" alt="3345 Mastering">
</div>
<ul class="footer">
</ul>
This is an online demo: http://jsfiddle.net/saidbakr/2LCwg/
If I'm getting your question right, the problem seems to be with the property display:inline-block.
Add vertical-align:top to your .gridtext class:
.gridtext {
vertical-align:top;
}
It should fix it. Here's a working fiddle.
And here's an interesting article about the display:inline-block property.
Alternatively, you could remove the display:inline-block property (your divs would then, by default, be displayed as block) and give them floats instead:
.gridblock, .gridblock2, .gridtext {
width: 450px;
height: 200px;
padding: 0;
position: relative;
float:left;
}
Also, as you are working with images, you could add overflow:hidden to the above classes, to make sure those images won't expand out of its container and mess up the grid.
.gridblock, .gridblock2 {
overflow:hidden;
}