On this website as you can see, the white background doesn't fit the text (content)... How can I get it to do so? This is the CSS... But it doesn't seem to be responding:
.entry {
margin:0 0;
padding: 0px 5px 5px 5px;
width: 680px;
}
Thanks - Tara
Your background is an image:
background: url(images/single.jpg) repeat-y;
background images can't scale.
Remove the background image, and give the single class these additional rules:
overflow: auto;
background-color: white;
The white background that I think you're asking about is actually a 630px wide JPEG image.
Related
I've used the below code to add a box around a header title, however is there any way to make this responsive to fit the header text? At the moment all boxes are the size set and when scaled down to mobile go off screen, thanks for any help in advance
.box.active .header-title p {
width: 600px;
height: 120px;
padding: 15px;
border: 0px solid white;
padding-bottom: 15px;
background: rgba(80, 80, 80, 0.4);
opacity: 1;
color: white
}
Why don't you just put border around the text? No need bind text with fixed height and width. This will not make text responsive.
Try this code.
.box.active .header-title p {
padding: 15px;
border: 1px solid #000;
}
Remove extra css.
width: 600px;
Is causing problems for you. This is fixed with of 600px and mobile screen is, lets say, 375px
I want to create a background with repeated image using CSS
background: url(../images/bg.PNG) repeat;
The problem is that the images are very close to each other, how can I add a padding for every image?
html {
background: white;
}
body {
width: 639px;
height: 280px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG) silver;
background-repeat: space;
border: 1px dotted red;
margin: auto;
}
Don't think this is possible, can't you add a transparent space in bg.PNG ?
You cannot have spaces between the background images. But you can modify your image to have the spaces you want.
and sorry I can't properly translate my question into easier language, sorry :(
body
{
background: #33ffcc;
min-height: 100%;
margin-top: 3em;
}
#kal
{
font-size: 2em;
color: #fff;
border: 3px solid #fff;
text-align: center;
}
but here:
http://jsfiddle.net/skinnytotoro/s3Xfp/
and notice the box border is changing everytime the screen size change?
and I want to make the border is fixed, like, 20px from left and right of the text
is there how and any way to do so..?
thanks in advance!
sorry grammar errors too. Hope you don't get headache.
Use display: inline-block and set padding to how much space you want: http://jsfiddle.net/s3Xfp/1/
Another alternative way to get this working would be to set a fixed size div with margins to center the div, then manually set the padding.
#kal {
width: 180px;
margin: 0 auto;
padding: 0 20px;
}
http://jsfiddle.net/s3Xfp/6/
I'm trying to figure out the best way to create three 284x87 rounded rectangle boxes, which will contain an icon on the left and text to the right. Is it worth trying to pull this off purely with CSS, or is there no way to get out of using images? Here's what I have so far, using a background image of the entire image:
<style type="text/css">
.blurect {
background-image: url(blurect1.gif);
width: 284px;
height: 87px;
color: #FFF;
}
</style>
<div class="blurect">Test</div>
You can certainly use CSS. As cale_b said, set a background image with the appropriate position, then adjust the padding-left so that the text doesn't overlap the icon. Here's the appropriate CSS:
.rect {
background: url(path/to/image.png) 4px center no-repeat;
padding: 4px 4px 4px 24px;
width: 200px;
height: 20px;
line-height: 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
4px center in the background rule sets the image 4px from the left edge and centered vertically. The left padding is set to 24px to move the text away from the background icon
Here's a demo:
http://jsfiddle.net/6p8Rz/
The dimensions are obviously adjustable to suit your needs
I have this weird issue... The last line of CSS rules is commented. When it's commented, the div has a space on top. But with the comment removed, the border comes in and the space is gone!
#divFooter {
height: 99px;
display:clear;
width: 970px;
margin: 0 auto;
text-align:center;
background: #000000 url(../../Images/TopBanner-Slim.png) repeat-x;
color:white;
/*border: 1px solid yellow;*/
}
I don't want the space. I also don't want the border. Is there something wrong in my CSS rules?
The image is 99px tall.
Any ideas are really appreciated.