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.
Related
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
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 having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
I am working on a simple redesign for a project I did awhile back, just for practice. I have a left column that remains a certain size no matter what I seem to do. When the content in the main area becomes too great, the left column looks cut off. How do I get this column to extend with the content of the page? Here is the css I have for my containers and the column:
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
min-width: 760px;
text-align: left;
width: 80%;
}
#outerWrapper #header {
background-color: #8ab573;
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #eef6ed;
border-right: solid 1px #8ab573;
float: left;
padding: 10px 10px 10px 10px;
width: 24%;
height: auto;
}
#outerWrapper #contentWrapper #content {
margin: 0 0 0 26%;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper .clearFloat {
clear: left;
display: block;
}
#outerWrapper #footer {
background-color: #eef6ed;
border-top: solid 1px #8ab573;
padding: 10px 10px 10px 10px;
Thanks for any suggestions, I know it's really simple I'm just having code block I guess :/
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.