I have this lines below for a reponsive site,
I need to put "no-image" class when there is no image,
<div class="row">
<div class="column">
<img id="first" width=275 height=385 src="flower-275x385.jpg" />
<img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
</div>
</div>
<style>
.row {
width:400px ;
}
.column {
width:50% ;
}
.column img {
width:100% ;
height:auto ;
}
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ;
}
</style>
The problem is Blank image always shown as square;
Because of natural sizes of blank.png is 1x1.
It seems "height:auto" reset or ignore HTML defined sizes (275x385),
Here is a jsfiddle for examine,
How to fit it like first image without JS?
Edit: I think This can be solved only with JS manipulations: My solution, Thank you for advices below!
You can consider doing this in CSS. Have a no-image like this:
http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg
Now for all the images, give this CSS:
img {background: url("no-image.png") no-repeat center center transparent;}
So, this way, the images to be loaded will show No Image and then those with no image, show this. :) DeviantArt uses the same technique. Do check this out.
You can try:
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ";
height:385px;
}
If i'm not misunderstanding your question, i think you can try using css property background-size .
<style>
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center;
background-size:275px 385px;
}
</style>
<img id="second" class="no-image" src="blank-1x1.png" />
if you still have to write the inline style css of width&height inside the at html, doesn't it supposed to add the 'px' after the number of size you write?
for some more useful documentation, you can surf into http://www.w3schools.com :)
Related
I have this simple code-
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
And I'm trying to make the arrows much more larger -
I've tried to play with this style rules -
div{
height:50px;
width: 50px;
}
But nothing is happening to the arrows sizes.
So what am I doing wrong here? Is it possible to change it's size anyway in css?
Thanks for any kind of help
Use font-size instead.
div {
font-size: 50px;
}
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
It's text do font-size would work
div {
height:50px;
width: 50px;
font-size:50px;
color:green;
}
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
Here's the fiddle I'd like to have those divs in right column to fill the height. So the first div should start at the top, and the last should end at the bottom, and the space between each div would be the same. How can I achieve this ?
<div>
<div class="left">
<img src="http://serwer1307713.home.pl/bg.png" />
</div>
<div class="right">
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
</div>
This is how I would like to make it looks like
I've forgotten to add one important info, I need that to be responsive ;)
I think this is what you mean, your images do not reach the end of the page?
Add this to your CSS file:
body {
padding:0;
margin:0;
}
It's not that easy, but I think I did it: http://jsfiddle.net/Whre/X3vKd/2/
I added some wrapping divs and used :before and :after pseudo elements to enforce equal heights:
.wrapper {
position:relative;
display:inline-block;
}
.wrapper:after {
content:".";
display:block;
visibility:hidden;
height:0;
}
Assign a height property to your html and your respective divs, then you can manually specify the height for the images in your right or left divs, like so:
.left img {
height: 42%;
}
.right img {
height: 10%;
}
html, body {
height: 100%;
}
Fiddle: http://jsfiddle.net/y8sw9/4/
I have done this with js. Have a look
jsfiddle.net/y8sw9/6/
I have an image and some text floated next to it. I have a title which I wan't to be on its own line so I set it to display:block but it's not working. I can't for the life of me figure it out. It seems to work when I don't have it floated.
Here is an image to help make it clear. I want the image 'Fin MCool' to be display block
Here is my code:
http://jsfiddle.net/zq7C6/
HTML
<div class="staff">
<img src="../assets/images/fin.jpg" alt="">
<div class="staffContent">
<img src="../assets/images/fintitle.png" alt="">
<p>Stunt pilot with the Red Arrows (UK airforce stunt team), has served in combat choppers in 3 recent wars, and fears nothing except small dogs and single women.</p>
<p>Owns an Extra EA-200 for the ultimate full stunt flight experience, and flies all our other fixed wing craft much more sedately when required. And, yes, that is his real name. He's Irish and he doesn't want to talk about it.</p>
</div>
</div>
CSS
.staff{
color:#001D5D;
margin-left: 10px;
}
.staff img {
float:left;
}
.staffContent img {
display: block;
}
.staffContent {
width:500px;
float:left;
}
The problem is not with the block display, all images are displayed as block in your code. Your problem is that the second image gets a float: left against your wish (you wanted only the first image to float).
This is because the rules of .staff img are modifying all images in .staff, not only the direct child as you probably want. The simplest fix is
.staff > img {
The > between the selectors means only direct child elements.
.staff
{
color:#001D5D;
margin-left: 10px;
}
.staff img
{
float:left;
}
.staffContent img
{
display: block;
}
.staffContent
{
width:60%;
float:left;
}
.staffContent img
{
float: none;
}
DEMO
Demo here
Css
.staffContent img.heading{
float:none;
}
some changes in html
Give class on img .heading under the .staffContent container.
<img src="http://purestrategic.com/wp-content/uploads/2013/10/typography-unnamed-cbffa-x-hd-jootix-66808-300x168.jpg" alt="" width="200" height="40" class="heading">
Simply add float:none to .staffContent img
DEMO
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
Thanks for the very quick replies to my previous question.
"The first thing on the page, right after , I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page."
I forgot to mention that I would like the entire "banner" to have the same background colo(u)r. The text, the image and everything in between.
Something like this:
<div style="height:100px;width:100%;background:url(yourimage.png);background-position:right;">Yourtext</div>
.banner{ color:blue;
background-color:blue;
background:url(yourimage.png);
background-position:right;
width:100%
}
in addition, you can have create a new class so that the div for for banner can inherit the properties, this way you can seperate the div for the image and text
Something like this?
HTML
<div class="divwrap">
<div class="div1">text</div>
<div class="div2"><img src="http://farm4.static.flickr.com/3170/2724062433_68f2af7af7_m.jpg"></div>
<div class="divclear"></div>
</div>
CSS
.divwrap
{
background-color: #CCC;
}
.div1
{
float: left;
}
.div2
{
float: right;
}
.div2 img
{
display: block;
}
.divclear
{
clear: both;
}