I have a box, the size of which is defined by the img in it. in this image there is a button which can hold a text of arbitrary quantity. If the text is less than the image beihnd it, then the button is to be placed in the middle, and if the text is more than the image, then it has to be cut with text-ellipsis. The maximum size of the text must be the width of the image so it cannot go over the box even if it does not fit in. Does anybody know a solition for this ONLY using CSS? Here is the demo: http://jsfiddle.net/h3emzbcq/3/
<div class="border-box">
<div class="item-pic">
<img src="http://demo7.firstvoicemedia.com/u5.png" alt="" class="img-responsive">
<div class="item-btn">
<button class="btn btn-green"><span class="btn-text">Text place Text place Text placeText place Text place Text place</span></button>
</div>
</div>
Text place
Thanks for your answers.
Remove width and set max-width: 100% on the <button>:
.btn {
border: 0;
padding: 0;
margin: 0;
/* added */
max-width: 100%;
}
Here is the updated fiddle.
Related
I am new to bootstrap so I don't exactly know how it works !
What I want to do is to make the 3 images shown in the screen shot of same size.
Their resolutions are different .
This is the html for each image
<div class="col-sm-2 ">
<div> <img src="img/test.jpg"> </div>
<div > <h3>Text Here</h3> </div>
</div>
This is the screen shot
add class="img-responsive" to your img and for the same size display you can add some custome class such as my_img and set the size there:
my_img{
height: 200px
width: 150px
}
or set a default height to the parent. Than you can do width: 100%; height: 100%
So what you know have is a column. That sets the width. than you have a div which has no class yet. You can add style to that div or to the img directly.
The column is responsive by default so just give the img a width: 100%; (it will scale to parent element) and that div will scale to its parent element as well which is col-sm-2.
I feel like this should be really easy, but I've been playing with it for ages and haven't gotten anywhere.
I have a div, and my images inside it are set to width:100%. This works as you'd expect, with the images appearing edge to edge inside the div.
For paragraphs inside this div, I have padding.
What I'd like, is for images inside those paragraphs to also appear at the full width of the div (not the paragraph, which is narrower, due to the padding). However I do need to keep the padding, as I need it or the text.
HTML (Which can't be changed):
<div id="grandparent">
<img src="whatever" />
<!-- this next image should be exactly the same width as the first one -->
<p><img src ="whatever" /> This text still needs to be padded though.</p>
</div>
CSS:
p {
padding:15px;
}
img {
width:100%;
}
I have tried adding a negative margin to the image (using the CSS below), which gets it over to the edge, but I can't accurately make it the same width as the div.
CSS:
p img {
/*starts the img in the right place, but doesn't fix the width */
margin-left:-15px;
margin-right:-15px;
}
One thing you can do is use the css calc property. Try the code below. Keep in mind that calc does not work in some older browsers.
Fiddle: http://jsfiddle.net/q8Lb7t3t/6/
html
<div class='gp'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
<p>
<img class='img-pad' src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
text text text text text text text text text text
text text text text text text text text text text
text text text textext text text text text text text
</p>
</div>
css
.gp {
width: 300px;
background-color: #eee;
}
img {
display: inline-block;
width: 100%;
height: auto;
}
.img-pad {
margin-left: -20px;
width: calc(100% + 40px);
}
p {
padding: 20px;
}
What is the best way to align content DIV vertically and horizontally on image in responsive.I can give position absolute and align top:some%,and left:some% but it wont align middle of the image container in some screens, and i can give margin-top:-%,margin-left:some% this one also won't align properly for some times means in different screens.Is there any other way to do it.The content div should be exactly placed middle(horizontally and vertically in all screens) on the image. what is the best way to do it?
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="img/someimage.png" class="img-responsive">
<div class="content_div">
image content paragraph 1
image content paragraph 1
image content paragraph 1
</div>
</div>
The content div must be placed at the middle of image.
<div class="container">
<img goes here>
<div text goes here>
</div>
CSS
.contianer
{
position: relative;
}
.container img, .container .txt
{
position: absolute;
}
.container img
{
//Width and height
}
.container .txt
{
width: 100%;
margin: auto;
line-height: height of image div; // It ll pace in the middle of image
}
Demo It ll help you.
Another way is
set table layout for div and table-cell for content which will support vertical-align:middle`
EDIT:
Demo2 -- It ll help You.
Thanks to SO
In general I know how to use css but not advanced css
So I need some help in order to start. Unfortunately I can't find any good and decent guide for tables without css and the part I want to do is very tricky. So here is what I want and what I've done so far.
The height is not fixed by the way so I want it flexible because the main text might be very long or very small
Here is what I've done so far
http://jsfiddle.net/VmnDj/1/
This doesn't seem to work properly though because the minimum height is where the main text is and it never includes the whole picture. Some part of the picture is out of the container. Please can you contribute on this and explain me why do you have to take each step? My purpose is to learn from this and not just the solution. If you need something more please let me know.
Thank you very much in advance
Try this:
JSFIDDLE: http://jsfiddle.net/86FMw/
Notice that there is no fixed height and the box will grow when the main text is longer.
HTML
<div class="cartitem">
<div class="left">
<img src="http://images.pictureshunt.com/pics/p/pear-5428.jpg" width="60" height="60" alt=""/>
</div>
<div class="toptext">
top text top text top text
</div>
<p>
text text text text<br/>
text text text text text text text text text text text text <br/>
text text text text text text text text <br/>
</p>
<div class="buttonbar">
<button>click me</button>
</div>
</div>
CSS
.cartitem {
position: relative;
padding-left: 80px;
border: 1px solid #333;
}
.left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 80px;
}
.toptext {
background: silver;
}
.buttonbar {
text-align: right;
}
That layout looks like it would formerly be used in frames.
Try this for the top right DIV:
set the code for Text2 to something like this:
p.tab {
margin-top: -2em;
margin-left: /* spacer_distance in em/px */;
}
I made 3 columns of text to mimic a table on some of my pages since the text displayed wasn't very wide in the first place.
Keep in mind we now deal with mobile device users. So only having 2 columns in that DIV should work. But, be wary spreading more text across that space without using min-width statements to the entire viewport.
I have a webpage written in dreamweaver. I have my buttons as part of the background image and use a href to provide functionability to those buttons. However when I zoom in or out with my browser those a tags move and the buttons in the background no longer align with teh a href tag. Is there any way around this?
Thanks
You need to slice those image buttons seperately, whether it's using Photoshop, GIMP or whatever you want and save them in your images folder. Then you can either use the <img> tag or have a <div> with a background using that image and set the "a href" on that.
So you could do either of these:
<img src="url" alt="some_text"/>
OR
html:
<div id="image"></div>
css:
div#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
To have them placed where you want on the page, you would have to place them in a div and then use css to add a margin or padding to be placed where you need it to be. So if you use the first option and you want it to be on the bottom right of a specific div, you would do this:
html:
<div id="specific_div">
<div id="image">
</div>
</div>
css:
#specific_div{
height: 400;
width: 400;
}
#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
#specific_div #image{
/* placement on page */
float:right;
margin-top: 150px;
}