I want to make content of <div class="features"> smaller so that it appears like this:
Check this demo here to see what I have been able to achieve so far.As you see in the pic the features icons(No daily limits etc...) are small and the text below them is centered but I haven't been able to do this so far.
Give Some Width to class features in css .
<pre>
.features { width: 800px; }
</pre>
You can use media query for this.(If device size is smaller then you mentioned as above then what will be size of your given width and all thing goes here...As shown below.)
<pre>
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
// font-size , margin , padding etc goes here ...
}
}
</pre>
Disable width in the class .feature. Currently, it is set to 400px. Once done, you should have something like this
I figured, rather than go back and forth in comments, I'd just write an answer.
A couple of things to consider:
your images and your text are in separate areas. For the images you adjust their size using width/height not font-size. If you want to adjust the font-size then adjust the class of the captions.
.features img {
float: left;
padding-left: 50px;
width: 100px; /*add some sort of width/height and that will resize*/
}
Your images and text are in different rows of the table, so adjusting them as a unit will be very hard.
<tr>
<td>
<img src=""/>
<p>text</p>
</td>
</tr>
would probably be a better set up, but to be honest ditching the tables all together and moving to a list would be more semantic.
<ul class="features">
<li>
<img src=""/>
<span>image caption</span>
</li>
</ul>
If you really want to get semantic checkout http://html5doctor.com/the-figure-figcaption-elements/ but long story short, you just need to hit those images with a width/height to adjust the size.
Related
I've been working with a html page that has a form in the bottom of the page. That form is inside a table and table is inside a div. Fiddle here : http://jsfiddle.net/2ZTvQ/
Problem is on smaller screen the div is taking 100% width(full width of the screen) but not width of the whole table containing the form. I'm not an expert with html/css so I'm not even sure if it can be done this way.
Sample HTML:
<div class='wide'>
<table width="100%">
<tr>
<td>
looooooooooooooo ooooooooooo00000 ooooooong text goes here
</td>
</tr>
</table>
</div>
CSS:
.wide {
text-align:center;
background:#e7e7e4;
width: 100%;
padding-top:20px;
}
Remove text-align:center; or create a new aligning style for the table.
What I think you will have to do is add a min-width to .wide of however small the table will get after manually trying to reduce it's width. So once it is as small as you can get it (use media queries to change classes under a certain window width) set
.wide { min-width: thatSize; }
What will happen now is instead of the content disappearing or running out of the div, you will now just have to scroll horizontally to see it all.
Or what you can do is add
.wide { overflow: scroll; }
What that will do is keep the viewport the same size, but make the content inside .wide scrollable like an iframe. Probably better looking than the first solution. Whatever you decide is a design choice on your part. But most important thing would be using media queries and trying to get the form as thin as possible. Display block and percentage widths are your friends there.
I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-container collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
I would've easily done this by setting a min-height on img-container class, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsive helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<span class="img-container thumbnail clearfix">
<img alt class="pull-left img-responsive" src="http://...">
</span>
<div class="caption">
<a href="http://.." class="card-title lead">
Some text
</a>
</div>
</div>
</div>
EDIT DUE TO COMMENT
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
Set the following CSS:
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another div element, this is only required if you would like to give it all a padding or border, since the padding-bottom calculates the padding in pixels based on the width of the div INCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
For non-square images:
If you would like to change the ratio of the picture, just change the padding-bottom of the container div accordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
http://jsfiddle.net/pQ5zh/2/
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
EDIT: See above.
Ok, assuming all images are square, we can do it. Add an extra div around your image like this:
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}
.img-container:before{
content: "";
display: block;
padding-top: 100%;
}
.image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
See this in action:
http://jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container
Hy, i'm really stuck. I'll go step by step and hope to make it short.
This is the html structure:
<li class="FAVwithimage">
<a href="">
<img src="pics/Joshua.png">
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Before i paste the css classes, some info about the exact goal to accomplish:
Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.
After resizing, the picture needs to be centered
vertical&horizontal inside a: 68x90
boundaries. So you have an LI element,
wich has an A element, and inside A we
have IMG, IMG is resized by 57% and
centered where the maximum width can
be of course 68px and maximum height
90px. No for that to work i was adding
a SPAN element arround the IMG.
This is what i was thinking:
<li class="FAVwithimage">
<a href="">
<span class="picHolder"><img src="pics/Joshua.png"></span>
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.
I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.
li.FAVwithimage {
height: 90px!important;
}
li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;
}
That's it what's relevant. I have not included the classes for: name,comment,arrow
And now the classes that are incomplete and refer to IMG.
li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning
of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;
}
Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.
li.FAVwithimage span.picHolder img
{
max-width:68px!important;
max-height:90px!important;
}
This is the class wich should shrink the pic by 57% and center inside picHolder
Here I have a drawing describing what i need:
alt text http://lookpic.com/i/169/2U12JC16.jpeg
I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?
The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:
text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;
One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.
For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).
As far I can remember (out of the web dev world for a while), a is an inline element and you can't set its height. You could try adding a display:block to a elements.
I have these 3 icons enclosed in separate DIVs all of which are enclosed within a single DIV:
<div id="icons">
<div id="divtxt" class="divicon">
<img src="/icons/text.png" id="icontxt" class="icon"/>
</div>
<div id="divpdf" class="divicon">
<img src="/icons/pdf.png" id="icondoc" class="icon"/>
</div>
<div id="divrtf" class="divicon">
<img src="/icons/rtf.png" id="iconrtf" class="icon"/>
</div>
</div>
I set some simple styles but can't figure out why these images are lining up top-to-bottom instead of left-to-right:
div#icons
{
width:200px;
height: 100px;
}
div.divicon
{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
}
Any suggestions would be appreciated.
And now for something a bit more comprehensive:
You look like you just want a row of icons. Using your HTML, you would need to float the divs containing the icons in order for them to be next to each other. The reason why you need to float is because a div is a block level element (as opposed to inline) which means that nothing can exist in the horizontal space next to it.
You can achieve this effect by adding a float: left; rule to div.divicon
Floating does two things: it takes the block element out of the page flow allowing other elements to exist next to it (or flow around it) and it reduces the width of the box to fit the content. As far as the parent is concerned, a floated element has no height. To illustrate this, just try giving #icons a background color or border. You will notice that it won't show up - or show up as a 1px line.
In order for the parent to recognise the height of the floated element you need to tell the parent that overflow should be hidden with this rule:
#icons { overflow:hidden; }
This also works in IE however not always, so sometimes you might need to set a height or width or do a zoom:1 which tends to fix a lot of IE bugs (look up "hasLayout bug" if you want more info).
Now for a different solution:
You look like you just want a row of icons. Unless theres a reason for the images to be surrounded in a div (and in your example there is none) I would suggest to you to do something like this:
<div id="icons">
<img src="/icons/text.png" id="icontxt" />
<img src="/icons/pdf.png" id="icondoc" />
<img src="/icons/rtf.png" id="iconrtf" />
</div>
#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }
I have removed the redundant divs and the redundant class attribute on the images. Since images are inline elements you wont need to screw around with floats and you wont have any extra divs that may cause divitis a degenerative HTML disease that affects many websites and spreads through bad advice. Remember, only use what you need - don't use it just because its there.
Hope this helps,
Darko
You need a
float: left;
in your div#icons.
div is a block level element. So the default behavior is to layout one below the other, unless you float them like Robert suggested.
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
Basic HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
Thanks to everyone who answered!
This could also be accomplished using 'display: table-caption' for the caption, as follows:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
For setting the width to match the image automatically you could use
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
Stylesheet
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.
You can also acheive this using the following solution proposed by Temani Afif in his blog post (All credits to him, I just don't want the solution to be forgotten)
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>
.box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}
Make the container inline-block, and makes the h1 (or whatever text tag you use) occupy the space dictated by the sibling element. It's essentially a hack, but it works! No unintended semantic consequences like the table solutions
You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.