I have an box which is an image and I have text inside the image which will be geenrated dynamically.
Please look at the attached screenshot for more information.
How do I make sure that the image stretches when there is more text ?
.my-community-box{
background: url('/assets/my-community-box.png') no-repeat !important;
background-size: 100%;
width: 287px;
min-height: 474px;
float: right;
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
ul{
width: 250px;
margin: 0 0 9px 0;
li{
}
}
a{
color: #darker-green;
}
a:hover{
text-decoration: none;
color: #light-green;
}
}
Why not use a border?
.my-community-box{
background: #F3F3F2;
width: 287px;
min-height: 474px;
float: right;
border: 3px solid #C5C3C3;
}
.my-community-box-wrap{
border-left: 2px solid #C2E2A0;
border-right: 2px solid #C2E2A0;
float: right;
}
Demo: http://jsfiddle.net/AWXHr/
you will need to background-repeat: repeat-y; the image, but will have to change it. as far as it seems, it is one single image - you will have to crop it to have the top border and the "body" of the image will be the part that you want to vertical repeat.
alternatively, due to the simple design, you could just use css borders
EDIT
also, as a few comments suggested, you should show us some code and not just an image, that would help a lot!
Use css border instead of image
div{
border:#333 solid 6px; border-radius:0 0 6px 6px;
box-shadow: 0px 0px 0px 2pt green;
height:auto;
width:200px;
background:#c1c1c1
}
Demo http://jsfiddle.net/wYUFD/12/
Demo
Hi now used to background-size:cover; or max-width
as like this
p{
max-width:200px;
border:solid 10px red;
background:url('http://www.gravatar.com/avatar/eb71f65106648cf6618b10423e8b0451?s=32&d=identicon&r=PG') no-repeat;
background-size:cover;
color:#fff;
}
Demo
I hope this may be helpful to you
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
max-width: //set what depends up on your image width
max-height: //set what depends up on your image height
overflow-y: auto;
Related
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
Hi I want to make fix this iframe into the center between the left table and right table. I'm having trouble with making my site responsive and it appears different on different resolutions: (http://footkick.16mb.com/)
As I said, I wanted this to be bang in the center of the left and right table regardless of resolution. If you can help me out: THANKS SO MUCH
[<]iframe class="channels" src="http://www.bbc.co.uk/sport/football/fixtures" scrolling="yes" style="height: 990px; width: 619px;margin: 45px 0px 0px 115px; border:2px solid black; outline-style: solid; outline-color: green; ">
css:
height: 990px;
width: 619px;
margin: 45px 0px 0px 115px;
border: 2px solid black;
outline-style: solid;
outline-color: green;
Try adding this to your CSS:
margin: 45px auto 0px;
display: block
On your Iframe element remove: margin: 45px 0px 0px 115px; and add margin: 0 auto; display:block;.
Display block:
Margin: 0 auto
Also please learn about why inline css is a bad practice
turn the iframe to a block element like so
.your-frame {
display: block;
width: 80%;
margin: 2% auto;
}
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
I have an image with a hover event. The only problem is it does not scale to a smaller size or to mobile screens. I've spent much time researching and haven't found anything. I thought 100% width should have done the trick. I must be missing something.
Codepen link.
Please help before my brain splits.
Also, criticism welcome.
Check with this one:
body, html {
width:100%;
height:100%;
}
.myButtonLink {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test3.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
display: block;
height: 100%;
text-indent: -99999px;
width: 100%;
background-size: 100%;
}
.myButtonLink:hover {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test5.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
background-size: 100%;
}
Also apply below css to the page you have loaded in iframe.
body, html {
width:100%;
height:100%;
}
Hope it will help
Do the following:
Apply max-width: 100%; to the img
Remove text-indent: -9999px;
Remove the background image on the div