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;
}
Related
I have created a container by <div> and I also pasted the pattern card and the image into the container. I am trying to put the text (under the name of class="under-name"beneath an image but the text is just sticking in the bottom without any effect.
I have been tried for several ways to move up the text but the text is just still locating in the same place.
The first thing I tried by setting with inline with moving the position by left or right. And I also tried to create the other new container with and it could not affect anything at all.
I want to move text beneath the image.
Please advise me the way to solve it.
enter image description here
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height:250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card
{
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.user-name{
position: relative;
width:40%;
left:0;
top:1000%
text-align: center;
margin: 0 auto 0 auto;
}
.victor{
position: relative;
background-color:#ffffff;
border:3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
<div class="topcon">
<img class="pattern-card"src="images/bg-pattern-card.svg" alt="pattern card at the frame.">
<img class="victor"src="images/image-victor.jpg" alt="image for Victor">
<figcaption class="user-name">Victor Crest</figcaption>
26
London
80K
Followers
803K
Likes
1.4K
Photos
</div>
Try changing your 'user-name' class style to this
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
Add
bottom: 60px;
In .user-nameclass, adjusting the pixels until you have the position you are looking for.
It works as below. The most important is to you vh
This is my first time to use vh.
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
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>
OK, I've gotten the prelim version of my page started, but I'm having a problem with two floated div's that are wrap in header tag. Basically, I want the two rectangles to center within the containing div tag. One of the rectangles overlaps the other. I had to us positioning to be able to expand them within the container other-wise the second would jump below the first.
Here's what I've have so far.
<div id="div1" class="fluid">
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity."
</div>
Here is the css for the page - I have a follow-up question after we get this solved.
.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
}
.gridContainer.clearfix #headGraphics #headRectangle1 {
float: left;
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.gridContainer.clearfix #headGraphics #headRectangle2 {
background-color: #FFAAAA;
float: left;
/*margin-right: 50px;*/
width: 350px;
height: 75px;
position: relative;
top: -50px;
right: 0px;
text-align: center;
clear: both;
left: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
.gridContainer.clearfix #headGraphics:after {
content: " ";
display: table;
clear: both;
}
I can't remove the position tags because they give me the layout that I'm am trying to accomplish.
Let ma know if you need more info. Thank you in advance. And yes, I have searched this page and others to find a solution, but none seem to apply to my particular situation.
let me clear a few things up... and before I go any further, most of my (98%) selectors are in the boiler plate template. That being said, here the computed effects per selector:
.gridContainer.clearfix #headGraphics;
width 950px, margin 0 auto, font-family monotype weight 800px size 20px, text-align center.
.gridContainer.clearfix #headGraphics #headRectangle1;
width 350px, height 75px, display inline-block, margin rt & lft auto, position relative, box-shadow (which isn't working properly)
.gridContainer.clearfix #headGraphics #headRectangle2
width 350px, height 75px, display inline-block, position relative, top -50px, rt 0px, bot 0px, left 100px (this is to bring object up and offset from rectangle), float left, clear both, text-aligh center.
I would suggest removing the float attributes from both, then just setting both items display as inline-block, you will need to specify width and height on both cases, then apply text-align center to the parent, that will allow the child to be centered to the parents available area.
The Display: inline-block will give the two elements the possibility to behave not just like a block element, it will be both, block and inline, so you will be able to use attributes for both at the same time.
If you need an example, I can provide you with one, Just let me know!
EDIT...
Here is a working example
My JSFiddle
http://jsfiddle.net/dq185dw9/
My CSS
#headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
outline: red dashed 1px;
padding: 35px; /* remove or change if needed */
}
#headGraphics [id*="headRectangle"] {
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 25px;
line-height: 75px; /* remove or change if you want to have more than one line of text */
}
My HTML
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>
How to make a fixed positioned div fit its content width?
I've made a demo here
Before clicking on the Load button, the div must only have enough width to contain the gif image and the button.
When more content is loaded, the width of the div must fit its width.
here is the CSS I've made
body{background: #eee; }
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
position: fixed;
top: 20px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 400px;
}
Since you are using JavaScript/jQuery to show/hide the loader, why don't you change the width of the box via JavaScript?
You could simply toggle a class called .wide for instance, to achieve the desired result as follows:
EXAMPLE HERE
CSS:
#divToCenter{
/* other declarations... */
text-align: center;
width: 50px;
}
#divToCenter.wide {
width: 400px;
text-align: left;
}
jQuery:
var $divToCenter = $("#divToCenter");
$("#show-more-data").click(function() {
// ...
$divToCenter.addClass("wide");
});
$("#show-less-data").click(function() {
// ...
$divToCenter.removeClass("wide");
});
Add display: table, position: relative and margin:0 auto to the following element:
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
display: table;/*Add this*/
position: relative;/*Change fixed with relative*/
top: 20px;
margin:0 auto;/*Add this*/
max-width: 400px;
}
fiddle
I am having some trouble with my sticky footer. First of all, my content does not reach the entire bottom of the screen (even underneath the footer .. check on larger monitor). Also, when the window is smaller than the content, the header moves and does not expand 100% in width when you move the horizontal scrollbar. What am i doing wrong?
Here is my testing site: My Site
If you use firebug or Google Chrome's built in Inspect Element, you can see where all the elements are.
Here is some of the css:
.content
{
width: 1100px;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: 100%;
height: 100%;
padding-bottom:50px; /* Padding for footer (width) */
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: 100%;
height: 100%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000; /* So you can see it */
}
Here is what it looks like when the content is bigger than the window:
I would also like the Content to extent all the way down the page with the content!
Edit / add your css like this to get rid of smaller screen issues..
.mainContainer {
min-width: 1100px;
}
To get that content background to continue all way down, i suggest using centered background image in .mainContainer and remove content background OR just set .content min-height to some large value like 900px OR use javascript to set content height if smaller than screen height.
if you put your .mainContainer to the width of your .content, it will work.
.mainContainer {
width: 1100px;
}
Is it what you want ?
Replace your CSS to this one.
.content
{
width: 100%;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: auto;
height: auto;
padding-bottom:50px;
position:absolute;
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: auto;
height: auto;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000;
}