I'm trying to place three different images before some li points, but somehow, it just don't work the way I want. Can someone help me?
Right now, it looks like this: CSS content
As you can see, the images don't stay next to the text I want to, even though I used :before. The images are also very big, but I just want them just as small as the text.
This is the CSS code I've used:
a[href*="bron.pdf"]:before {
content: url("PDF%20img%20.gif");
}
a[href*="bron.vcf"]:before {
content: url("vcard-icon.png");
}
a[href*="bron.jpg"]:before {
content: url("adobe%20img%20.png");
}
This is the HTML code:
<section>
<h4>Downloads</h4>
<ul>
<li>project_CMDA_Moet_ik_rennen.pdf (1.3MB)</li>
<li>Contactgegevens_CMDA_Moet_ik_rennen.vcf</li>
<li>Poster_CMDA_Moet_ik_rennen.jpg (569KB)</li>
</ul>
</section>
What am I doing wrong?
A way to manage it will be to set a background-image in place of an image to be able to change height and width of the image. Also use display: inline-block to have the text and the image next to each other.
a:before {
content:"";
display:inline-block;
width: 20px;
height: 18px;
background-size: cover;
}
(Of course, adjust the height and the width depends of the size you want).
And then add the background-image property to each of your element
a[href*="bron.pdf"]:before {
background-image: url("PDF%20img%20.gif");
}
a[href*="bron.vcf"]:before {
background-image: url("vcard-icon.png");
}
a[href*="bron.jpg"]:before {
background-image: url("adobe%20img%20.png");
}
Here an exemple of a working exemple
You must set a height and width for them of how big you want them to be. Also try using: display:inline for the images and the text container (if it is a p tag or any tag) or if this doesn't work out, use float:left for the images.
Related
To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;
I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..
I am having a problem with a background image not showing.
I have a class that I've added to an anchor tag.
<a class="my-class"></a>
and the css for the class is:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center
}
The problem is that the background image is not showing.
I know it's there because when I do this:
<a class="my-class">&NBSP;</a>
part of the image shows.
Anyone have any idea on how to make the whole image show without having to insert lots of 's please?
<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then define the size of the element.
Try with:
.my-class {
display: block;
width: 128px;
height: 128px;
background: transparent url("../images/my-bg-image.png") no-repeat 0 center
}
For more information you can check the box model and the display property on the CSS 2.1 w3c standard.
Also the sections The width property and Computing widths and margins have an explanation of why the element doesn't show the background on an empty inline element.
Update:
Also the working draft of the CSS Box Model is available on the W3C site.
Update 2:
On a side note, relying only on a css background image for a link can have somme accessibility issues.
The element has a zero-width because it has no content at all. If the image contains useful information (and it really should, it is used as a link!), you should put some text inside the link and use any image replacement technique you like, for example:
HTML:
<a class="my-class">It‘s awesome!</a>
CSS:
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
display: inline-block; /* create a block element behaving like an inline element */
text-indent: -1000em; /* move the inner text outside of the link */
overflow: hidden; /* prevent text visibility */
width: 200px; /* image width */
height: 16px; /* image height */
}
You need to assign a width to your anchor. Inline elements have no width if they have no content.
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
width:20px;
height:20px;
display:inline-block;
}
Edit: and it seems without any content at all it is also necessary to set a height and display:inline-block. This causes the element to think of itself internally as a block element, but act externally as inline.