I wanted to set up an image as a transparent background image for my website but anything I try just doesn't wanna work. I've seen on the internet how it works for others, but for me it just doesn't. I converted my image from png to jpeg, but that didn't brought success
Here is my full CSS file
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: url(DS Organization logo.jpg)
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #050505;
text-align: center;
border: 1px solid #000307;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
background: rgb(99, 99, 99);
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #050505;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
The url-path is treated as a string and it needs to be enclosed in quotes. For more information on url(), visit mdn
Related
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
For this particular example you ca do this:
.wrapper{
display: inline-block;
}
.outter-h2 {
float: left;
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
margin-top: 4%;
}
.outter-span {
float: left;
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 0 10px;
}
<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>
You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)
All you have to do is add this line to .outer-span:
box-shadow:0 0 5px 20px #FFF;
This solution keeps the HTML intact.
Demo:
body {
background: #FFF;
}
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
position: relative;
z-index:1;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
position: relative;
z-index:3;
box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2>
.outter-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 10px;
float:left;
}
try this i think this is the solution you wanted. please let me know if i am correct or not
This is done(corrected) exactly what you want.
.outer-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outer-span {
background: #fff;
padding: 0px 10px;
color: #bec3c7;
margin: 10px;
float:left;
}
<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO
I'm trying to style my login form and i have the code in the style sheets for login problem is it changes the style of another form i have on another page to match the one from the login is there some way to stop this from happening
.form {
text-align:center;
margin: 0 auto 10px;
padding: 20px 0 10px 0;
font-size: 16px;
width: 300px;
}
input[type=text],
input[type=email],
input[type=password] {
color: #000000;
width: 100%;
border: 1px solid #E6E6E6;
border-radius: 0px;
height: 60px;
margin: 6px auto;
text-indent: 10px;
}
.btn-submit {
color: #FFFFFF;
font-size: 18px;
text-transform: uppercase;
background: #008CBA;
padding: 10px 20px;
border: 0;
margin-top: 6px;
}
Check this out I tried to center this inline-block but it is not working :( . I read couple of answer about similar issue but the solution; adding width and centering text is not working. Bellow is the codes. above is the codepen.
HTML:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download">DOWNLOAD NOW
</div>
<div class="footer">footer</div>
</div>
In order for text-align to work you need to specify it on a container, that container, in turn, will have centered text. Right now you have set text-align: center on the actual element you want centered.
EDIT:
Sample css:
.download {
text-align: center;
}
.download a {
color: #ffffff;
text-decoration: none;
width: 220px;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
This makes it so your .download-element works as awrapper telling everyting inside it to be centered. Than it applies your styling of the button to the <a/>-tag only.
EDIT 2:
For everyone recommending additional wrapper divs. Please don't. The link already has a wrapper and this HTML has the correct amount of elements (I would even argue one too many). It still has about 100% too many css-classes...
Unrelated to the question: This layout really looks like a table. No point in avoiding the <table/>-tag if the content is actually supposed to be a table of data.
Updated code
Give text-align: center to a parent element.
HTML
<div class="center">
<div class="download">DOWNLOAD NOW</div>
</div>
CSS
.center {
text-align: center
}
Wrap your download button in a container, and give the container the
text-align:center;
property:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
.download-container{
text-align:center;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download-container">
<div class="download">DOWNLOAD NOW
</div>
</div>
<div class="footer">footer</div>
</div>
I have made a 3 column widget area on Wordpress, however it appears that there is padding. Ive amended the margin, however its still not resizing the widget area to fit inside my "sidebar".
This is my site:
www.mammacoil.com
This is my CSS
#footer-widgets {
display: block;
width:950px;
margin-left:-50px;
background: #000000;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
THIS IS NOW RESOLVED
You have used id footer-widget1 twice, which isn't valid HTML.
I recommend taking the id off the inner #footer-widget1 and applying a different style.
This will resolve your padding issue.
I ave a div that popups up over my input boxes (javascrip auto complete). The div currently pops up behind the input boxes, how can I have this appear ontop?
screenshot of issue:
CSS Code is:
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
HTML Code is:
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
Thanks as always for the help,
Try using z-index property on .suggestionsBox
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 999; <------ Here
}
Set the z-index property.
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 100;
}