I have an issue where I can't seem to get rid of the background colour of a p tag, is it possible to do this? I have set the divs backgrounds to images.
Output:
CSS
.box {
display: inline-block; vertical-align: top; margin: -1px; text-align: left; padding: 25px;
}
#tables {
max-width: 1080px;
margin: 0 auto;
text-align: center;
}
#screenshots {
background: url(http://i.cubeupload.com/nAtNKD.jpg) no-repeat center;
width: 308px;
height: 280px;
}
#csmatches {
background: url(http://i.cubeupload.com/nAtNKD.jpg) no-repeat center;
width: 308px;
height: 280px;
}
#fixtures {
background: url(http://i.cubeupload.com/nAtNKD.jpg) no-repeat center;
width: 308px;
height: 280px;
}
HTML
<div id="tables">
<div id="screenshots" class="box">Screenshots</div>
<div id="csmatches" class="box"><p>Recent Match Results</p>
</div>
</div>
<div id="fixtures" class="box">Fixtures</div>
</div>
#csmatches p {
background:none !important;
}
Have you tried to do this :
.mycontainer p {
background-color:none;
}
It seems like you have set a background color attribute to your div and its children...
To remove the background of the p use:
.your-p-class {
background: transparent !important;
}
or for all of them:
.container p {
background: transparent !important;
}
http://jsfiddle.net/Hive7/3waTE/
Related
I was trying to create a button using CSS. The html code looks like
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
<span class="fon">Google</span>
</div>
And CSS is
.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
}
.content img {
margin: 5px;
float: left;
}
.fon{
position:relative;top:5px;
}
I'm getting output as expected, but I wanted to reduce repetitive html code and move them to CSS, so that I just need to write code similar to below code and should show same output :
<span class="mybutton">Google</span>
Here is my JSFiddle
http://jsfiddle.net/WW4N6/678/
html
<p class="mybutton">Google</p>
css
.mybutton {
background: #2d3f51;
color: #f5f5f5;
display: flex;
align-items: center;
height: 30px;
width: 100px;
padding: 0 5px;
}
.mybutton:before {
content: '';
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
background-size: cover;
width: 20px;
height: 20px;
display: inline-block
}
JSFiddle: http://jsfiddle.net/WW4N6/681/
css
.mybutton {
width: 90px;
height: 30px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
background-size: 20px, 20px;
background-repeat: no-repeat;
background-position: 5px;
padding-top: 10px;
padding-left: 30px;
}
jsFiddle link
http://jsfiddle.net/joshchurning/9sysby5f/
you could use css's background property for your button:
.mybutton {
....
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
....
}
If you want to get rid of the HTML code (the width and length of img, I'm assuming), you could just put the width and height in your .content img CSS class
.content img {
margin: 5px;
float: left;
width: 20px;
height: 20px;
}
I have problem with responsive design. I try to display text over the box in image, but when I resize browser text is outside the box.
My picture:
.row6 {
background: none;
width: 100%;
height: 130px;
border: 0px salmon dotted;
font: bold 1.7vw arial, sans-serif;
margin: 20px auto;
}
.row6 > div {
position: relative;
top: 8px;
width: 100%;
height: 100%;
margin: 0 auto;
background: url(images/background.png) no-repeat;
background-size: 100%
}
#dd7 {
margin-left:44.7%;
width:45px;
text-align:center;
padding-top:0.7%
}
HTML code:
<div class="row6">
<div>
<div>
<div id="dd7">TEXT</div>
</div>
</div>
</div>
What I should do to have text always in right place over image?
Try this fiddle
.row6 {
background: none;
width: 100%;
height: 130px;
border: 0px salmon dotted;
font: bold 1.7vw arial, sans-serif;
margin: 20px auto;
}
.row6 > .bgImage {
width: 100%;
height: 100%;
margin: 0 auto;
background: url(http://i.stack.imgur.com/amwBH.png) no-repeat;
background-size: 100%
}
#dd7 {
margin-left:44.7%;
margin-top: 1.2%;
float: left;
}
The problem is you're using a fixed width (45px) for your text. Try using a percentage width instead:
#dd7{
...
width: 5%;
}
https://jsfiddle.net/pnzLn2no/1/
I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
The html is like:-
<div class="mainWrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Css:-
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-image: url(/image.jpg);
background-repeat: repeat-y;
background-position: top left;
}
The css class "twoColumns" will be added to "mainWrapper" class if div with id=left is present. The background image(of color #363636) will be given to outermost div. If css class(twoColumns) is added in document ready(depending #left presence), it is taking time to bring the image from server. How to add the background image to outermost div depending upon the child div presence? Any idea/suggestion to solve this problem is applauded.
I would suggest placing the image into the wrapper from the start, then removing it under your respective conditions. All this can be easily achieved with a little css change and javascript:
CSS:
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-repeat: repeat-y;
background-position: top left;
}
JS/jQuery:
$(document).ready(function(){
if($(".mainWrapper #left").length == 0){
$(".mainWrapper").css({'background-image':'none'});
}
});
Here is the Fiddle
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.