I want to set width to my IMG using the outer div class. Since the structure between the outer div and image might be different from page to page.
What would be the best CSS syntax to achieve this?
<div class="my-div">
<span class="my-variable-class">
<a href="#" class="element-x">
<img src="logo.png">
</a>
</span>
<div>
So far i'v got:
.my-div > img{
width:200px !important;
}
Infuriatingly, there is no parent selector in CSS.
You need to put a class on your img containers and style that.
.img_container {
max-width: 200px;
}
I also recommend, though it's theoretically not supposed to be necessary:
img {
width: 100%;
}
Presuming we're talking about max-width because you're doing responsive design and you want the img_container to be nearly-full-width on mobile but not grow out of control on wider screens. For that, also give img_container a width: 95% (or whatever amount). This must come before the max-width limit.
Related
I know this question is very popular, but I couldn't find any elegant answer.
I need to align horizontally 2 images and center them. I've already read about inline-block and I pretty good at margins (margin 0 auto trick), paddings and other geometrics. The thing is... that my html code is parsed from markdown by javascript parser (not mine and complex) and each element enclosed into <p> tag. But my text-align for <p> tag is justified.
I understand that answer on my question is to use <div> right in markdown around images and set its text-align to center, but I seek for more elegant way to do it because I prefer clean and modern coding with html5 semantics and look into the future where <div> elements would be no more.
Basically, my question is simple: is it possible at all to do such a thing without outside block?
UPD: jsfiddle - http://jsfiddle.net/8274L7wc/
It'd be perfect if I could change style of <p> based on child element <img>, but as far as I know - this is impossible by css.
Also I suppose I could use CSS calc() method to calculate width and set precise margins, but I think even div would be better than this.
I can't use text-align:center on <p> element because it would make everything centered, not only images.
UPD2:
I've made quick temporary solution by using jquery .parents method to set all <p> which contain <img> tag - centered:
$('img').parents('p').css('text-align', 'center');
Here are a couple of answers that you might find useful.
FIRST
There is a general rule in web development that says you should always try to use basic browsers' functions before relying on CSS. This is part of what we call progressive enhancement. Following this rule, the best way to solve your problem is by adding the html5 element <figure></figure>. Here is the doc and below is an example using your jsfiddle:
p {
text-align: justify;
}
figure { /* Then you can center your img inside the figure element */
text-align: center;
}
img { /* You don't need margin 0 auto or display block, let the browser do its work */
width: 6.25em;
height: 6.25em;
}
<p>
<figure> <!-- You can add several img in a figure element -->
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
</figure>
</p>
SECOND
If you don't want to add an element to your HTML markup then CSS can only help you if you now how many images you will have and what will be their size. In this case you can calculate with calc() the dimensions needed and add a padding-left on first image. As you can see this is quite complicated, hard to maintain and definitely not considered as best practices. Here is an example:
p {
text-align: justify;
}
img {
width: 100px;
height: 100px;
}
p img:first-child {
margin-left: calc(50% - 100px)
}
<p>
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
</p>
Good luck!
<p>
<img src="http://leone.ge/mem/img/image2.png" />
<img src="http://leone.ge/mem/img/image2.png" />
</p>
----
p{
display:block;
width:100%;
background:tan;
text-align:center
}
p img{
display:inline-block
}
view result here: http://jsfiddle.net/kr76uu46/2/
Here there are 7 css ways to center horizontally and vertically an element in the middle of a div (or a body). Than you can create a second div and you get your solution.
text-align:center
margin:auto
display:table-cell
position:absolute
translate function
flexbox
calc function
img{
width: 100%;
max-width: 150px; //your width
height: auto;
position: relative;
left: calc(25%);
}
<img id="b" src="http://placehold.it/150x150" alt="Sample Image 6">
<img id="a" src="http://placehold.it/150x150" alt="Sample Image 6">
Otherwise, if you are still interesting looking for different ways (css-based solution) check this LINK
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.
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.