I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
Hello I had problem positioning a div to the center of the page.
CSS:
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
margin: 0 auto;
}
Am I doing something wrong? Also I should mention that this div is inside another div, so could that be a problem? How to avoid it than?
Have you tried to enter the width to be smaller than the outer div?
Something like that:
.fancyClass{
width: 50%;
margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}
Please Try this and let us know
HTML:
<div class="outterDiv">
<div class="innerDiv">
some thing here
</div>
</div>
CSS:
.outterDiv{
width: 100%;
background-color: #ccc;
padding: 25px;
}
.innerDiv{
width: 50%;
background-color: #eee;
margin: 0 auto;
text-align: center;
}
fiddle EXAMPLE HERE
here you can see the div is horizontally and vertically centered in page. Here is the Demo.
have a look at CSS.
body{margin:0 auto;
text-align:center;
}
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
text-align:left;
width: 25%;
height: 25%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<div class="fancyClass">
this text will be center
</div>
This should do the work:
margin-right:25%;
margin-left:25%;
HTML:
<div class="cont">
<center>
<div class="xmdiv">
<img class="xmenu" src="media/file1.png">
<img class="xmenu" src="media/file2.png">
</div>
</center>
<p>-snip-</p>
</div>
CSS
.cont {
position: relative;
margin-top: 3%;
background-color: transparent;
width: 65%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 1px;
-moz-box-shadow: 0px 0px 11px #000000;
-webkit-box-shadow: 0px 0px 11px #000000;
box-shadow: 0px 0px 11px #000000;
font-family: 'Open Sans', sans-serif;
color: #070707;
font-size:15px;
font-weight:300;
text-align:justified;
line-height:1.5;
}
p {
margin-left: 8px;
margin-right: 8px;
}
What it looks like:
I want it to be centered, how do I do that? Tried looking it up online, and it didn't really work.
Is this what you want ? Link: http://jsfiddle.net/jtFUs/
CSS:
.cont
{
position: relative;
margin: 0 auto;
}
If you need to center a div vertically and horizontally on your page, use:
div {
width: 100px;
height: 100px;
background-color: #000000;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://jsfiddle.net/65adr/48/
In case you need to center it just horizontally, use:
center
{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
Just define a width for the element, in this case i added 200px for example.
http://jsfiddle.net/65adr/50/
To center a div (and many other types of elements), use this CSS code:
.cont {
margin: 0 auto;
width: XXXpx;
}
JSFiddle.
Make sure to specify the width, or else the div won't be centered.
Edit
To center an element without specifying with, you could do something like this (not sure if this will work in all browsers, however):
body { text-align:center; }
.cont { display:inline-block; }
Side-note
Don't use the center tag, it is deprecated. You can read more about it here.
tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..
http://jsfiddle.net/st9AM/1/
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
First of all, using margin: auto; is not a hack
And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.
Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.
To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;
Demo
Last but not the least, you should nest the span tag inside the inner circle div.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -31px;
left: 50%;
margin-left: -31px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Here's a cleaner solution.
with one HTML element only.
HTML:
<div class='circle'></div>
CSS:
*
{
margin: 0;
padding: 0;
}
.circle, .circle:after
{
border-radius: 50%;
border: 2px solid #DDD;
text-align: center;
}
.circle
{
width: 120px;
height: 120px;
font-size: 0;
}
.circle:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circle:after
{
content:'+';
font-size: 20px;
padding: 20px 0; /* 2*padding + font size = innerCircle height*/
display: inline-block;
vertical-align: middle;
width: 50%;
}
You had "float: left" in the inner circle, which you didn't need
//float: left;
Working fiddle
remove float left and use margin: 0 auto;
.circle{
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
margin:0 auto;
}
Have a look at this fiddle. You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.
Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):
{
position:absolute;
left: calc( 50% - 261px );
top: calc( 50% - 165px );
}
Ok this is my problem:
The left float and right float are somehow not put into my container and the footer only pays attention to the middle content part. What am I doing wrong?
I could show it with a picture but I cannot add one because I don't have 10 rep.
It must be a simple fix, I have read about clear:both etc but that all does not work unfortunately.
#container
{
position: relative;
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
text-align: left;
}
#header
{
height: 160px;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
position: absolute;
top: 160px;
left: 0;
float: left;
width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
position: absolute;
top: 160px;
right: 0;
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
margin: 0 26% 0 26%;
padding: 0 10px;
background: #0F0;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
I'm not sure what you are trying to achieve without knowing your html structure, but the problem stems from the fact that you have absolute positioning on your left and right containers as well as a floted positioning.
The default positioning for a html element is static, so you either float everything or absolute position everything. Here's something to help you understand positioning better, it's very easy and you'll be on your way in 5 minutes: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Also, you should post a jsfiddle link with the html included so we'll understand better what you are trying to achieve if you need further help. My guess is that Rohit Azad's solution is correct, you just have trouble understanding positioning.
Hi i check to your code i think you want to this
HTML
<div id="container">
<div id="header">Header</div>
<div id="mainContent">
<div id="sideleft">Left</div>
<div id="sideright">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Css
#container
{
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
}
#header
{
height: 160px;
background:red;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left; width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
padding: 20px 10px;
background: green;
overflow:hidden;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
Live demo