I need to show a picture and text next to it, but the problem is that the picture is too big and I need to reduce it by setting custom width and height.
CSS:
#list{
max-height:200px;
overflow-y:auto;
padding:5px;
/*display: none;*/
}
.info{
border: 1px dashed #CCCCCC;
margin-bottom: 5px;
padding:0 5px;
overflow: hidden;
cursor: pointer;
}
.info .image{
width:20%;
height:30%;
display:inline-block;
margin-right:20px
}
.info .image img{
width: 100%;
height: 100%;
}
.info .text_data{
display: inline-block;
}
HTML:
<div id="list" class="select_block">
<div class="info">
<div class="image">
<img src="https://dl.dropbox.com/u/14396564/screens/screenshot.jpg">
</div>
<div class="text_data">
<p>
Name: Some name
<br />
Start: 2012-05-17 04:43:40
<br />
End: 2012-05-17 04:43:40
</p>
</div>
</div>
</div>
http://jsfiddle.net/nonamez/e5hyX/
In Firefox it's like
In Safari (probably in chrome is the same)
So I need something like this (hover on the picture shows it in full size, so I only need a list of previews, but with percentage).
If you only set the height or the width, the browser will scale the image in proportion to its natural dimensions. If you need to make sure that it stays inside a given area, make sure you use the max-* properties. For example:
width:50%;
max-width:100px;
max-height:80px;
Related
I want make two divs: image and description for image. If there is not enough space for 100% image size, this image must be smaller. Description div should have a fixed size on the right of the image.
In my code, if I reduce browser width the div with the image description moves under the image instead of staying to the right.
How I can fix this?
.parentdiv
{
width:100%;
height: auto;
border: 1px solid black;
}
.imgdiv
{
width:auto;
border: 1px solid green;
float: left
}
.textdiv
{
width: 200px;
height: 400px;
border: 1px solid red;
float: left
}
.imgdiv img
{
max-width:100%;
max-height:100%;
}
<html>
<body>
<div class="parentdiv">
<div class="imgdiv">
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
</div>
<div class="textdiv">
Description
</div>
</div>
</body>
</html>
I think you need this : demo
CSS:
.parentdiv {
width:100%;
float:left;
}
.imgdiv {
margin-right:210px;
}
.imgdiv img {
width:100%;
}
.textdiv {
width:200px;
float:right;
}
HTML:
<div class="parentdiv">
<div class="textdiv">Description</div>
<div class="imgdiv">
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
</div>
</div>
If available you can use the CSS3 functionality calc().
Set a min-width of 100% on the image, and reduce it with the 200px of the right div.
Like so
max-width: calc(100% - 200px);
Also, I set a border-box on the elements with a border so it all fits. Keep in mind that when you add padding to these elements now, the element does not increase in size.
Fiddle
I am trying to position the second image inline next to the one before, the second image is smaller and i want it to sit on the same bottom line next to the larger one next to it. this will create a gap above the second image where i can put a small bit of text.
My problem is when i play around with background-size:, height: and width: to change the size of the image it just goes to the top left hand corner of its surrounding div.
I plan on having 4 more small image next to the small one so I'm asking please could anyone sort out the positioning of the divs and css so that i can easily add more next to the prior one,
Here is an image to give you an understanding of what i am trying to achieve, The red box shows where i want it to be positioned, and the other red box is where i will have the next skin.
LINK
Things i have tried:
Bottom:0
margin-top ( to push it down ) though this does not leave room for me to add text above the smaller images
padding-top:
Here is my current CSS:
#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}
#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#downloadbutton1 {
width:100%;
}
#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;
}
Here is the HTML:
<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>
<div id="firstskin">
<div id="topskin"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
<div id="secondskin">
<div id="topskin2"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
</div>
This is the third section to the index page.
</div>
Here is a JS fiddle to show you what i mean,
http://jsfiddle.net/bjbear123/qdwgpaqc/
display: table-cell; with a vertical-align: bottom could be a good solution.
Have a jsBin!
HTML
<div class="skin-wrap">
<div>
<img src="http://www.placehold.it/100X300" />
<button>Download</button>
</div>
<div>
<p>text above </p>
<img src="http://www.placehold.it/100X200" />
<button>Download</button>
</div>
</div>
This is the third section to the index page.
CSS
.skin-wrap {
display: table;
}
.skin-wrap > div {
display: table-cell;
width: 100px;
vertical-align: bottom;
padding: 10px;
}
And if you don't want / are not able to use table-cell as misterManSam answered you can use nested divs with position absolute.
.wrapper{
position: relative;
height: 200px;
width: 100px;
}
.content{
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="content">
<img src="whatever.jpg" />
</div>
</div>
And there you have a little jsbin http://jsbin.com/jiqakefu/1/
One easy solution is to increase the top margin of topskin2.
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
i tried this on jsfiddle both download button were inline.
You can set margin as per your need, if you want space between both then you can use margin-left to create gap.
you were right doing it through bottom:0;
The thing you missed was to set position:absolute; and for outer div position:relative;
Here's a fiddle: http://jsfiddle.net/Nive00/qdwgpaqc/2/
how can i align my paragraph as shown in the following image
.
I need to show a newspaper kind of thing in which this should be included.
The following is the html code i'm using
<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>
and the css code is this
*{
margin:0;
padding:0;
}
.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}
.myImage img{
width:100px;
height:100px;
}
.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}
Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:
<style>
.right, .left
{
width: 200px;
height: 300px;
float:left;
}
#real-img
{
width: 100px;
height: 100px;
float: right;
margin-right: -50px; /* half the width */
margin-top: 125px; /* vertical align considering page height minus img half height */
}
#fake-img
{
width:100px;
height:100px;
float:left;
margin-left: -50px;
margin-top: 125px;
}
</style>
And the html:
<div class="left">
<img src="imgurl" id="real-img" />
[CONTENT_TEXT]
</div>
<div class="right">
<div id="fake-img"></div>
[CONTENT_TEXT]
</div>
All of this, of course, considering you hard-code all the sizes.
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
What I am trying to do is to make a 'portfolio' page. But I want it to 'perfectly fit' in the size of the users browser (so that, no matter what size of the screen the user is equipped with, the content of the page is always fully visible). Therefore, the page should be "resizable" and always show 100% width and 100% height on widescreen, desktop, tablet or mobile phone... and according to the size of the screen the inner div's should stretch (or shrink) to fit nicely in the browser.
This is what I have made so far but it's not good.
http://jsfiddle.net/MPQXF/50/
And when I resize the height or width of the screen the white frame (together with the eight blue frames pops out of the 'upper' part of frame. And it doesn't stretch or fit as I change the browser's size.
Btw, the blue frames should represent a small images (let's say 250x250).
<section id="home">
<div class="upper">
<div class="frame" align="center">
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
</div>
</div>
<div class="lower">
</div>
</section>
You have specified widths as percentages for some divs and for a few of them the width and height is fixed in px. If you want the desired behavior make sure everything is in %s.
I have modified your CSS to make everything in %s. Pls test and see if it works fine. It does on the fiddle.
html, body{
margin:0px;
padding:0px;
height:100%;
}
section{
height:50%;
width:100%;
}
div{
height:100%;
width:100%;
}
.upper{
background:orange;
}
.lower{
background: green;
}
.frame{
width: 35%;
margin-left: auto;
margin-right: auto;
top:15%;
height: 40%;
background: #f6f6f6;
position: relative;
border-radius:3px;
}
.innerframe{
width:20%;
background:blue;
display:inline-block;
border-radius:3px;
height:42%;
}
Use this css. your green div is also visible now
html, body{
margin:0px;
padding:0px;
height:100%;
}
section{
height:50%;
width:100%;
}
.upper{
background:orange;
}
.lower{
background: green;
height: 100%;
}
.frame{
max-width: 200px;
margin-left: auto;
margin-right: auto;
top:30px;
background: #f6f6f6;
position: relative;
border-radius:3px;
overflow: hidden;
}
.innerframe{
width:40px;
background:blue;
display:inline-block;
border-radius:3px;
height:40px;
}