#id not selecting my image in CSS - html

I want to border an image, and when I code it in HTML, I get a border. But when I try it in CSS, the border will be placed south-west on my page, seperated from my image.
<img id="maxaboutme" />
<img src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg"
height="300px" />
CSS
#maxaboutme{
border: solid grey;
border-width: 15px;
}
This is what happens :

Change your img tag as shown below :(In your case ,you had 2 of them which were not related to each other )
<img id="maxaboutme"
src="http://www.google.com/selfdrivingcar/images/home-where.jpg" height="300px" />
CSS :
#maxaboutme
{
border: solid grey;
border-width: 15px;
}
<img id="maxaboutme"
src="http://www.google.com/selfdrivingcar/images/home-where.jpg" height="300px" />
Fiddle Link

It should work like that. By the way I recommend you to use class instead of id ;)
#maxaboutme{
border: solid 15px grey;
height: 300px;
}
<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" />

It's because you have added another image (<img id="maxaboutme" />) instead of applying the id to
<img src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />
Modify your HTML as below.
#maxaboutme {
border: solid grey;
border-width: 15px;
}
<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />

Try This
CSS:
#maxaboutme{
border: solid grey;
border-width: 15px;
}
HTML:
<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />
Pleae note: avoid using physical paths (C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg) for your images because it will work on your computer only and it will not work for your client

html tag should be :
<img id="yourimage" src="http://placeit.org/300x300.jpg"/>
css :
#yourimage {
border: 1px solid gray;
height: 300px;
}
hope it would be helpful.

It's working. I had an extra IMG indeed.
I am still new and also learning from the paths.

Related

Remove white border around object tag

I'm currently looking for a way to remove a thin white border around the object tag... heres the code and what I have tried
.hr-ob {
background-color: #003262;
width: 50px;
height: 10px;
border: none;
outline: none;
border-width: 0;
padding: 0;
margin: 0;
}
<div style="background-color: #000000;">
<object border="0" class="hr-ob" data="" type="image/jpg"></object>
</div>
Johnathan's solution was still flawed as I was still getting a border, nevertheless wanted to share the solution I am using now:
<iframe class="hr-ob" width="50" height="5" scrolling="no" frameborder="0"></iframe>
.hr-ob {
background-color: #003262;
width: 50px;
height: 5px;
}
Since you have mentioned the type as image/png and the data field is empty there seems to be a default internal-root-color that is appearing.
but when you place an image there is no border.
The border attribute of <object> is not supported in HTML5. Use CSS instead.
CSS syntax: <object style="border:0px">
.hr-ob {
background-color: #003262;
height:100px;
width:100px;
}
<div style="background-color: #000000;">
<object style="border:0px;" class="hr-ob" data="https://dummyimage.com/600x400/4550ed/fff" type="image/jpg"></object>
</div>
<div style="background-color: #000000;">
<object style="border:0px;" class="hr-ob" data="" type="image/jpg"></object>
</div>

Set an img src placeholder for testing

Is there a way to add an img tag without an image, but with a placeholder tag or attribute, or using css
for testing purposes: activate javascript or css etc.
You can use base64 image
please go through following links for more information and also check code snipet
Codepen Demo
base 64 tutorial
body {
background-color: #efefef;
padding: 10px;
}
div#thumbnail-frame {
border: 1px solid #999;
border-radius: 10px;
float: left;
margin-right: 10px;
padding: 1px;
}
img{
content:url('data:image/png;base64,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')
}
div#thumbnail {
border-radius: 10px;
height: 167px;
width: 250px;
background-image:url('data:image/png;base64,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');
}
<div id="thumbnail-frame">
<div id="thumbnail"></div>
</div>
<img />
You can use: https://placeholder.com/
Simply enter the dimensions and you will be good to go. Eg: https://via.placeholder.com/350x150
You can then add CSS or manipulate this with JS
Yes, it is possible. Here is an example:
(function($) {
$(document).ready(function() {
$('#path').change(function() {
$('#img').attr('src', $(this).val());
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Image path: <input id="path" value="https://www.chatelaine.com/wp-content/uploads/2018/10/Black-Panther-chadwick-boseman-e1539272923602-810x608-1539273014.jpg" />
<img src="" alt="Image not loaded" id="img" />

Targeting the text in an anchor element but not the image

I do not want the picture to be underlined, but I need the hyperlink in the text to be underlined. How can I do that? It is a wordpress theme so I can't change the html I have to stay with css
.post-desc a{
border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
border-bottom: none;
}
<div class="post-desc">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</div>
You can remove it under the image using display:table; on image, like this:
.post-desc a img{
border-bottom: none;
display:table;
}
Snippet:
.post-desc a {
border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
border-bottom: none;
display: table;
}
<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</a>
</div>
to make it simple you may use vertical-align with a negative value to drop img as much as needed under the base line:
a {
border-bottom: solid;
}
a img {
vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
/* demo purpose: see border under img */
opacity:0.75;
}
text
<a href="#">
<img src="http://dummyimage.com/60" />
</a>
within the last stylesheet of your website , test this
a img {
margin-top:0.5em;
vertical-align: -0.5em;
}
or if you like better:
a img {
position:relative;
top: 0.5em;
}
The idea is to hide the border with the image itself
Text decoration underline
<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
You have set the border attributes on the <a> tags, so you can't just remove them on the containing <img> elements. Unfortunately, there is no "conatining" selector in css (yet) and apparently you can't edit the html, so we have to stick with the informations we've got.
The links with the containing images have the word attachment in the attribute rel. This is how to select them and disable their border:
a[rel~="attachment"] {
border-bottom: none !important;
}

ebay style gallery issue

So I need help if this is even possible, going to try to be as detailed as possible so you guys understand my problem. I found a simple ebay style gallery code that I want to incorporate into my website i'm making. heres the code
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 400px; vertical-align: top;">
<img src="1_large.jpg" width="398" height="299" alt="Large Photo" style="border: 1px solid #000000;" name="swap">
</td>
<td style="width: 6px;"></td>
<td style="width: 94px; vertical-align: top;">
<img src="1_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='1_large.jpg';">
<br>
<img src="2_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='2_large.jpg';">
<br>
<img src="3_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='3_large.jpg';">
</td>
</tr>
</table>
I also have a slimbox2 addon into my site, link is here if anyone doesnt know what that is. slimbox2
so all i need to do is add this
<a href="images/1_large.jpg" rel="lightbox"><img src=........./>
to allow the image to expand into a larger preview using slimbox, my problem is, if i add it to main image that says "1_large.jpg" the href link is still linked to that specific image, regardless if I "swap" it when i click on another image
for example, i have 3 images in the gallery. the first image is already loaded into the big preview of the ebay style gallery, when i click on image 3, it gets swapped out to the big preview of the ebay style, now i want to expand it and see the image a lot bigger (this is where slimbox comes in) but once i click the big preview, the image gets expanded, but image 1 gets loaded, not image 3.
hopefully i made the problem clear, if anyone can help that would be fantastic!
all in all, im looking for a photo gallery similar to neweggs website for viewing products
Is this the functionality you're looking for? - FIDDLE
HTML
<div class='bigpic'></div>
<div class='rightbar'>
<div class='littlepic'><img src='http://img4.wikia.nocookie.net/__cb20130310121325/youtubepoop/images/c/c0/Goofy_Yop.jpg' /></div>
<div class='littlepic'>
<img src='http://img4.wikia.nocookie.net/__cb20130706024933/disney/images/8/88/Mickey-Mouse-High-Resolution-Wallpapers.stillmaza.com-1.jpg' /></div>
<div class='littlepic'><img src='http://images.wikia.com/disney/images/archive/7/71/20121205062928!Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg' /></div>
</div>
CSS
.bigpic {
float: left;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: hidden;
}
.bigpic img {
width: 400px;
height: 300px;
}
.rightbar {
float: left;
width: 110px;
margin-left: 5px;
}
.littlepic {
width: 100px;
height: 80px;
border: 1px solid black;
margin-bottom: 5px;
overflow: hidden;
}
.littlepic img {
width: 100%;
}
JS
$('.littlepic img').on('click', function(){
$('.bigpic').html('');
$(this).clone().appendTo('.bigpic');
});
Edit:
<script>
$(document).ready(function(){
$('.rightbar .littlepic:first-child img').clone().appendTo('.bigpic');
$('.littlepic img').on('click', function(){
$('.bigpic').html('');
$(this).clone().appendTo('.bigpic');
});//end click
});//end ready
</script>
</body>
</html>

last-of-type issue with some img tag

I have some <img> tag which will be load some images via the php code.
The following code :
<div class="images_cd">
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image10'); ?>" alt="" />
</div>
I would like to add 50 px padding-bottom for each img tag, but for the last one i don't one that padding.
Here is my CSS :
.images_cd{
}
.images_cd img{
margin-bottom: 50px;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
But the last img still get the 50px padding as well as 0 padding.
And the thing is the -50 px is also not working for that.
What is the problem?
I copied your code as written, but added some outlines so you could see things and it's working just fine.
.images_cd{
width:400px;
border:1px solid blue;
}
.images_cd img{
margin-bottom: 50px;
width:100px;
height:100px;
border:1px solid red;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
You can see it here and verify that there's no margin-bottom on the last img.
My guess is that something else must be overriding that CSS rule.
use
.images_cd img:last-child { }
instead