http://elektrikhost.com/
You see the penguins thats over the header on the columns? I'm trying to get them to be over the header and list. I'm wondering what would you do? use position absolute, or relative? I'm stuck.
HTML:
<section class="starter">
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Starter Plan</h2>
<ul>
<li><span>5GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->
.plan-icon is the image.
Needs to look like this:
You can simply set the image style to float: right
.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }
The idea is that the image is positioned "absolute" so it can be anywhere within the confines of its parent element ".starter". This will not work if ".starter" is not set to relative.
I got this to work in Firebug, the .starter img selector might need changing but its the idea of absolute positioning that you should take away from this.
try
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">
I might even suggest adding a padding: 5px 5px; to that, but that's just me ...
Use relative positioning. You can also give it a z-index to place it "on top" of any elements.
Regardless, take a look at this page. It should help you out:
http://w3schools.com/CSS/css_positioning.asp
If it were me, I'd add this CSS.
#plans-wrap section { position: relative; }
#plans-wrap section .icon { position: absolute; right: 0px; top: 0px; }
Related
Firstly, thanks in advance, I've been trying to figure this out for hours now and I just can't work it out..
I don't have access to the backend PHP / HTML but I want to change a few images in a sites design..
How can I change these images by pure CSS alone ? Is this even possible ?
<a href="example.php?action=task1" class="tooltip" title="task1">
<img src="/example/1/image1.png" alt="RP"></a>
<a href="example.php?action=task2" class="tooltip" title="task2">
<img src="/example/1/image2.png" alt="RP"></a>
No, you cannot change the src attribute via CSS, because the src attribute is an HTML attribute, outside the scope of CSS styling. But:
background-image
If you want a pure CSS solution, then you can place divs instead of img, possibly wrapping the divs around the anchors.
<div style="width: 100px; height: 100px; background-image: /example/1/image1.png;"><a href="example.php?action=task1" class="tooltip" title="task1"></div>
See an example here: https://www.w3schools.com/cssref/pr_background-image.asp
I know you do not have access to HTML development, but if you will have access, then it's worth knowing that it can be solved this way.
Javascript
With Javascript you can easily sun something like:
var images = document.getElementsByTagName("img");
for (let image of images) {
//Do something with image.src
}
You could add a pseudo-element after the images. I know of a couple places where psuedo-elements aren't allowed (like on form elements), but on the images or the links that wrap them you could use something like the following
img { position: relative; display: block; width: 350px; height: 150px; }
img:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-size: cover;
background-repeat: no-repeat;
background-image: url( 'https://via.placeholder.com/350x150' )
}
<img src="/example/1/image1.png" alt="RP">
The biggest thing to remember (for me at least) is the content attribute is required for :before & :after psuedo-elements
You can do like below using content applied to image and an attribute selector to identify each one:
img[src*="image1.png"] {
content:url(https://picsum.photos/id/10/200/300);
}
img[src*="image2.png"] {
content:url(https://picsum.photos/id/15/250/400);
}
<a href="example.php?action=task1" class="tooltip" title="task1">
<img src="/example/1/image1.png" alt="RP"></a>
<a href="example.php?action=task2" class="tooltip" title="task2">
<img src="/example/1/image2.png" alt="RP"></a>
For website:
http://68.50.243.1/wunhopkuendo/
I am trying to make the image carousel show UNDER the green banner on the top left. If I set z-index on the carousel to -1, the left/right buttons don't work. However if I set z-index to 999999 on the banner, it does not appear over the carousel. How can I accomplish this? Thanks!
JS Fiddle located:
http://jsfiddle.net/3ZSBh/
Just add position: relative for the image.
<a class="brand" href="#">
<img src="http://68.50.243.1/wunhopkuendo/img/logo.png"
style="z-index: 99; position: relative;" />
</a>
The reason behind this is, the z-index works only on positioned elements, that are not static.
Fiddle: http://jsfiddle.net/3ZSBh/1/
The 'z-index' tends to work on elements that have the same type of position applied.
http://jsfiddle.net/CqnH4/1/
You can apply the following to your CSS:
.navbar {
position:relative;
z-index:999;
height: 50px;
background:#ff0;
}
#content{
position:relative;
z-index:1;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
This would keep the navbar on top of the content...of course, you don't need to specify a z-index of 999...you could simply go with a value of 2.
So I am making a little site just for fun - and to learn HTML a little better.
I have four divs. I want the to be arranged kind of like a collage. I have three of them in the perfect positions, but the fourth one does not show up at all unless I make the other three invisible with display:none in the CSS...
Anyone know why this would happen? Im using Chromium on Ubuntu.
<body>
<center>
<div id="content1">
</div>
<div id="content2">
</div>
<div id="content3">
</div>
<div id="cont4">
THIS ONE DOESN'T SHOW UP.
</div>
</center>
</body>
Here is the CSS:
#content1{
width:230px;
height: 160px;
background-color:blue;
border-radius:10px;
position: relative;
left: -240px;
}
#content2{
width:230px;
height: 350px;
background-color:red;
margin-top: 10px;
border-radius:10px;
position: relative;
left: -240px;
}
#content3{
width:230px;
height: 520px;
background-color:red;
border-radius:10px;
position: relative;
top: -520px;
}
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
}
From what I saw in Chrome and Firefox, cont4 is showing up, but it's way down on the page (you have to scroll to see it). I don't know exactly where you want it, but adding top: -1040px aligns it at the top of the page with the rest of the divs.
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
top: -1040px;
}
Give #cont4 a top: -1040px;. This means, for the previous div, you applied a -520px top to make it align top. So this lengh + height of that div (520+520=1040) is required for your purple div to appear. Here is the demo.
But this is not my solution. Use margin-top: -520px; instead of top: -520px; to your third div. This will shift the fourth div along with the third div. But top wont do this. top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Here is the corrected demo
The tag center is deprecated as Jared Farrish said. Actually, you should use CSS more carefully to get this types of layouts. There are lots of example is available. Trying to search with "Multi Column Layout with CSS". You can check THIS tutorial.
Also, THIS is very useful resource. THIS tool is interesting one. You can check this as well.
I'm trying to overlay a transparent image on hover using CSS.
There is an answer here but it doesn't work in IE7 or IE8. Would anyone know how to do this?
I'm trying to keep super-light so don't really want to use js or anything similar.
Thanks
I checked your link and came up with this solution based on that.
HTML:
<div class="image">
<img src="xy.jpg" alt="" />
<img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>
CSS:
.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }
Should work in all browsers including IE8 and IE7. It won't work in IE6 because it only allows :hover on certain elements like links (<a>). If you want to support IE6, change .image to be an <a> instead of a <div> and give it display: block;.
This still doesn't work on IE7/8 AFAIK, so I'm afraid this won't answer the question.
However, I have ended up on this page when I forget how to make this work using modern methods, so I'm placing the answer here for reference.
I've only been able to do this by placing the img within a container/wrapper div, as img elements won't accept psuedo-classes like :after.
<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>
Then the CSS is styled to provide a pseudo element on hover.
.container {
position: relative;
}
.container:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}
See the example here
Usually we recreate the image that is supposed to have a transparent overlay in the .png format. .Jpeg is a flat image format which doesn't support transparency.
the next step we take is to have something like this :
<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
<div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
...
</div>
</div>
This is the closest to how I could understand your question
Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>