#controlpanel .button
{
margin: 12px 12px 0px 12px;
width: 100%;
}
How do I make these buttons fill the width of the white box, and yet have 12px on each side? Padding adds space internally... and margin makes them go off the white box.
add padding to #controlpanel
remove left and right margins from button
add box-sizing:border-box to buttons
and you should get smth like:
#controlpanel{
padding:0px 12px 12px 12px;
}
#controlpanel .button {
margin: 12px 0px 0px 0px;
width: 100%;
box-sizing:border-box;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
}
The problem is the width: 100%;.
Try to comment out that line and type: display: block;
Two things may help:
use padding for div#controlpanel
remove the margin for buttons
In addition you could also try to remove the 100% width.
Related
I'm trying to get the h1 text on the top center of the page, but when I add a border the width of the border extends the entire top part of the page. When I decrease of the width of the element using CSS the border pushes the text towards the left.
Before changing width
After changing the width
Demo :
JSfiddle
Remove float property and add margin: 0 auto to center h1 as it is a block element.
JSFiddle
Try pasting this in the css,
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
The changes made are: removed "float:center;" and added "margin:0 auto;"
Hope this helps.
You can use margin: 0 auto in your css like this
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
Hope this helps
The issue is with the float, there is no float for center, just left and right. Because you have declared a width you can use margin: 0 auto which will center your h1. Keep in mind that if you remove the width the margin: 0 auto will not work.
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
I don't know why there is a quiet large space between content and footer here: jsFiddle
I've set margin-bottom, padding-bottom of content and margin-top and padding-top of footer are zero. But why it still have a space?
You are seeing the classical behavior of collapsing margins between the p tags in the content and footer.
You can fix this many ways, an example of which is:
body #container #wrapper {
margin: 0px 15px 0px 15px;
padding: 67px 0px 0px 0px;
background-color: white;
box-shadow: 0px 0px 10px 5px #969696;
overflow: auto;
}
body #container footer {
margin: 0px 15px 0px 15px;
padding: 0px;
background-color: greenyellow;
height: auto;
overflow: auto;
}
Set overflow: auto on your footer and #wrapper elements.
Also, set the height to auto on your footer to allow enough space for your text.
Demo at http://jsfiddle.net/audetwebdesign/9jMrR/
However, you have a box shadow at the bottom of you wrapper and you need to decide how you want that to work. If you want it to be visible, you will need to add a top margin to your footer.
You can add a negative margin:
footer {
margin-top:-20px;
}
This is kind of a bad way of doing this but you can apply a css rule of margin-top:-10px to decrease the space between the content and the footer tag.
footer{
margin-top:-10px
}
I'm working on the site www.albafitness.com
As you can see, the social media icons and the footer menu are not horizontally aligned. Can someone tell me how to do this please?
Is there any particular reason why you use table for your social icons? It is recommended to use ul tag for things like this.
Try this CSS:
.footer_content {
border-top: 1px solid #1F2024;
clear: both;
float: left;
margin: 30px 30px 0;
padding: 20px 0 0;
width: 940px;
text-align: center; // Align both elements horizontally
}
table.cnss-social-icon tr td, table.cnss-social-icon, table.cnss-social-icon tr {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
display: inline-block; // inline-block will make it inherit rules from text-align rule
}
.footer_menu {
padding: 10px 0;
// float: right; //float will always pull your element to one side. This should be removed.
}
TO position something, you have three super powers:
1. POSITION ABSOLUTE
2. VERTICAL ALIGN
3. FLOAT
this time we are using no. 1
CSS:
.footer_content_wrraper
{
position:absolute;
bottom:0;
}
HTML:
<div class="footer_content_wrapper">
....../
</div>
if you need to keep the same html you have, you can just use a negative margin on the menu
.footer_menu {margin-top: -21px}
but you will need remove it will a media query when you get down to a mobile size. so they don't overlap
I have, for some reason extra white space at the bottom of my div name 'profile-stuff'. I can't seem to figure out why it is there. What could I be doing wrong.
JSFIDDLE: http://jsfiddle.net/8kvwC/
My CSS:
#profile-stuff {
margin: 0px 0px 20px 0px;
height: auto;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 6px 16px -9px;
background-color: #fff;
}
Alright, extending from comment:
Just as #Adrift has explained, position:relative elements still occupy the space they require, no matter how top/left/etc. offset they are assigned.
So to avoid this, change
#cover-wrap {
top:-100px;
margin-bottom:-100px;
}
to
#cover-wrap {
margin-top:-100px;
}
http://jsfiddle.net/8kvwC/3/
In your #cover-wrap, change your position to absolute and change the top -100px to 50px.
Should fix your problem.
you can use that answer if u want the space for the bottom means you have to add
div{
float:left;
margin-bottom:100px;
}
Although li.textmenu has width: 140px, padding: 5px, and div.textmenu has width: 150px, the one list item i've made so far has a big left margin, and extends beyond the right edge of the div by at least 30px. What could be causing this and how can I restrict it's width?
http://www.briligg.com/frailty.html
CSS
div.textmenu {
background-color: #3b3b3b;
float: left;
width: 150px;
margin: 30px 10px 0 30px;
}
li.textmenu {
background-color: #4a4a4a;
margin: 0;
padding: 5px;
border: none;
width: 140px;
list-style: none;
text-align: right;
}
HTML
<div class="textmenu">
<ul>
<li class="textmenu">
<a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a>
</li>
</ul>
</div>
Did you add a zip/uni reset to the top of your css file?
* { margin:0; padding:0; }
( Put that exactly as is at the very top of CSS to override browser default margins/padding ).
Most likely the ul is being given default padding/margin, so this is to counter-act it.
Make sure the ul does not have padding and margin of its own, by resetting it with padding:0;margin:0;
The ul has a margin and padding set it on by the browser. You'll want to remove this:
div.textmenu ul {margin:0;padding:0;}
Only the padding affects the width, but you'll probably want to take off the margin too.
Its like smeridan said. There are for all html elements preset styling properties.
I recommend you to use the reset css by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/
You can include it at the top of your document. After that you have more control about your desired styling.
Make sure you've calculated the exact width and height of the Li you want to fix inside the Div by making sure the DIV has enough space within it.
div.textmenu {
background-color: #3b3b3b;
float: left;
width: 150px;
margin: 30px 10px 0 30px;
}
li.textmenu {
background-color: #4a4a4a;
margin: 0;
padding: 5px;
border: none;
width: 140px;
list-style: none;
text-align: right;
}
Since you made the padding: 5px, calculated by the 2xwidth + height of the Li, the Li should exceed 150px width of the Div box. you can fix by reducing your padding pixel of the LI.