I have a small issue with a website I'm creating.
The page has a background and a white body in the center, in the white body there is padding for the text so it doesn't start at the border.
#content
{ width: 900px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;}
So the problem is I have a jquery gallery in the top of the content body, but I don't want the gallery to have the padding around it, I mean, the white body. I want the gallery to start at the border of the body and end at the other end.
So I figured I have to make a new CSS tag without padding or negative padding but that isn't working.
How can I fix this?
You can use negative margins that match the padding amount to make the gallery flush with the edges.
body {
background: #eee;
}
#content {
width: 900px;
overflow: hidden;
margin: auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;
}
.flush {
background: #171717;
color: #fff;
margin: 0 -30px 0 -31px;
}
<div id="content">
<div>normal</div>
<div class="flush">flush</div>
</div>
Related
I'm new to html and css, and while I was creating a page for training, I made one div to fill the top horizontal space.
However I did not have succsess in doing that, and I have no idea why, I tried tweaking the margins, the padding, looked around on the internet and found no solution for my case. I wanna know if it is possible to fill all horizontal space with only one div.
Here is how my code currently is looking:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Just apply margin:0 to the body tag. You are getting the default margin from the body.
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
margin:0;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
this is a test
</div>
Try this
body{ margin :0; background-color: green;color: green; font-family: 'Orbitron', sans-serif; overflow-x: hidden;}
A div by default takes up as much horizontal space as possible. So it is generally as wide as its parent element.
As I understand your problem you are missing the the last few pixels on either side. This is not an issue of the div, but of the body element. The body element has to a default margin.
So you have to set the body margin to 0 (zero). Then you can either not specify a width for the div or give the div a width of 100%.
Then the div should take up the whole horizontal space of the webpage.
First problem, your page div is not valid (closed tag that is never opened).
For the width, add
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
to reset browser styles.
https://jsfiddle.net/dtz5h9yh/3/
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: 0;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Add this to your CSS:
*{
margin:0;
padding:0;
}
div#page{
width:100%;
}
Also remove the </header> from the div with id"page".
hope this helped
For the life of me, I cannot tell where is my extra space coming from on my footer as you see it looks about near 20 30px on the url below
http://innovativeapps.dk/
But my footer code only has this so I don't understand where the extra space is coming from below my social icons.
footer {
background: #fff none repeat scroll 0 0;
color: #ffffff;
float: left;
padding: 30px 0;
width: 100%;
}
It's from section#services. Padding: 50px 0.
section#services have a padding: 50px 0 you can change it with padding: 50px 0 0 0
#bartek_zet was faster than me ;)
Replace the section#services with this code.
section#services {
float: left;
padding: 50px 0 0;
width: 100%;
background: #fff;
}
I know that there are tons of questions about this but I've been searching Google for 4 days now and nothing is seeming to work for me. I'm trying to implement a sticky footer - meaning that when there is not enough content to fill the screen, the footer is at the bottom of the screen and when there is enough content to fill the screen, the footer stays below that content and you scroll down.
I have tryed roughly 15 different sticky footer solutions and while most of them work in theory, my particular situation keeps messing it up my content has borders on the left and right that should extend down to the footer. Anything involving push won't work.
Here is the most recent incarnation of what I've tried:
HTML
<div id="container">
<div id="header">
<!--Banner goes here-->
<div id="nav">Navigation Links</div>
</div>
<div id="content">
<p>Content Goes Here</p>
</div>
<div id="footer">
</div>
</div>
CSS
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#content {
padding: 20px;
border-left: solid 30px lightblue;
border-right: solid 30px lightblue;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
How do I get this sticky footer to work while also getting those blue borders to extend down to the footer?
Here's a solution that uses box-shadow to create the "border:" http://jsfiddle.net/FT8KR/. The pixel values were rather arbitrary, so play with those. Border can also be used, but it pushes the scroll bar more inwards, whereas box-shadow naturally does not.
#container {
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding-bottom: 80px;
padding: 0 30px;
box-shadow: inset -48px 0 0 lightblue,
inset 30px 0 0 lightblue;
}
body{
padding-bottom: 90px
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right:0 ;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
I have a lot of images having inline-block display type within a fixed width div.
The images have a margin of 0 5px 5px 0 which means you get a nice table effect when you have many of them.
Unfortunately this creates a side effect where the containing div has extra space between the images and its padding at the bottom and right.
How can I fix this?
CSS
div{
padding: 10px;
max-width: 191px;
background: #ddd;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 5px 5px 0;
display: inline-block;
}
HTML
<div>
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
Fiddlesis
DEMO
Change your div's padding to this:
padding:10px 5px 0 10px;
A quick approach could be to simply justify align with margins of auto for right and left and vertical align middle:
Fiddle
div{
padding: 10px 10px 5px;
max-width: 191px;
background: #ddd;
text-align:justify;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 auto 5px auto;
vertical-align:middle;
display: inline-block;
}
rearrange padding for your div and set image as vertical-align:top or bottom to erase the gap under it .
div{
padding: 10px 10px 5px;
max-width: 191px;
background: #ddd;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 5px 5px 0;
vertical-align:top;
display: inline-block;
}
http://jsfiddle.net/LnHDc/1/
Else dispatch margin and padding and see how to deal with white-space (code not indented, use of comment, font-size to 0 , .... ) http://jsfiddle.net/LnHDc/4 or http://jsfiddle.net/LnHDc/5 or http://jsfiddle.net/LnHDc/6 .
you have many ways to approach this, eeven floatting image .
i'm new to html and the whole web development process (so excuse me if this is a stupid question) but how can i center a form in the middle of the page? I have the below code, but when i apply it, the form aligns centre but sticks to the top of the page - why? i can adjust it manually but i imagine that there will be problems depending on the resolution the site is viewed later down the line.
#formWrapper{
width:550px;
padding 2em 0 2em 0; border:solid 5px #F1F1F1;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #AFC8DE;
}
#formWrapper{
width:550px;
padding: 2em 0 2em 0;
border:solid 5px #F1F1F1;
margin:0 auto;
background-color: #AFC8DE;
}
And for verticaly align the div look here for an example
http://stylizedweb.com/2008/02/01/vertical-align-div/
you're missing colon after padding
auto for margins will only work when an explicit width has been defined but doesn't work for vertically centering things - this is actually not very easy to do in CSS. the simplest way is to do this
#formWrapper {
height: 400px;
width: 550px;
position: absolute;
top: 50%; /*position halfway down the page */
margin-top: -200px; /*shift item up half it's width (assuming here the height is 400px)*/
left: 50%; /*position in center of page */
margin-left: -275px; /*shift item left half it's width (working with your width of 550px)*/
/*add your other values here,
but not anything that will conflict with the above */
}
you need a ":" after your padding!
#formWrapper{
width:550px;
padding: 2em 0 2em 0;
border:solid 5px #F1F1F1;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #AFC8DE;
}
If that's directly copy/pasted, there's some syntax errors that need to be addressed:
You need a colon after padding, and if you have all the margins set to auto, you don't need to specify each individual subset, you can just state margin: auto which will use auto for all the margins.
#formWrapper
{
width: 550px;
padding: 2em 0 2em 0;
border: solid 5px #F1F1F1;
margin: auto;
background-color: #AFC8DE;
}