I have a piece of fixed html which is beyond my reach to change and I would like to style it to my liking, but I can't figure out how. This is what I have:
<a title="some title" href="...">
<img src="....jpg"></img>
Some text
</a>
CSS:
div.container-outer {
width: 25%;
float:left;
}
div.container-inner {
width: 156px;
margin: 5px;
}
div.container-inner img {
max-width: 156px;
max-height: 124px;
}
I would like the text centered under the img, and both text and img centered in a fixed width containing div. The width and height of the images are unknown, but there is a max-width and a max-height, and the max-width is smaller than the containing div. Also, the bottom of the picture should be at a fixed position inside the containing div.
I'm free to modify the html around this code snippet.
Is this even possible? I have bashed my head into the wall for the last hour and I'm still clueless....
Best Regards,
Markus
edit 130513 ------------------------------------------------
Added current CSS. This leaves me with the image left-aligned, and the text below also left aligned. If the image changes height then the bottom part of the image moves since it is top aligned.
Have you tried
<div style="text-align:center">
<img src="..." alt="..." /><br />
<span>text<span>
</div>
You can style the div's width in the style param itself. You need to BR after the img because img are inline objects like loose text (text not wrapped inside a P element or something.
The span is only there because you can later style it
So far I haven't managed to do this in CSS... could you use Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
div.container-inner {
width: 156px;
text-align: center;
border: 1px solid red;
}
</style>
<script>
function addBr() {
document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>');
}
</script>
</head>
<body onload="addBr();">
<div id="container-inner" class="container-inner">
<a title="some title" href="...">
<img src="images/sample.jpg">
Some text
</a>
</div>
</body>
</html>
Demo: http://doug.exploittheweb.com/SO/16521934.html
FWIW, </img> is not valid HTML and almost certainly won't be present in .innerHTML even if it's there in the source code.
Related
I have an image coded like so:
<img src="assets/img/facebookImage.png">
I also have an <a> hyperlink tag wrapped around the <img> tag, that looks like this:
<a href="http://www.facebook.com" style="width: 80%">
The image is not centered in the hyperlink box.
How can I align the facebook icon image in the hyperlink box? Here is the full code section for context:
<a href="http://www.facebook.com" style="width: 80%">
<img src="assets/img/facebookImage.png">
</a>
remove max-width: none; from img, remove left and right padding from a tag.
Here you go, make them display block, both elements, nest them in the html and set img margin to 0 auto.
a {
display:block;
border: 1px blue solid;
width:100px; height:100px;
padding:10px;
}
img{
display:block;
margin:0 auto;}
Play around and set different width to the img or the link and it will always be centered.
Link to pen:
http://codepen.io/damianocel/pen/RRWzdr
Set a width and height on img tag to match the size link box you need. Setting this on your site's img tag centers the image in the link box:
width: 21px;
height: 20px;
I want create a responsive image in my doc.
<style>
img,.img {
width: 80%;
height: auto;
}
</style>
<body>
<div>
<img src="img/tools3/2.png" />
</div>
<body>
Now I try convert img to div:
<body>
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
<body>
But not showing any images!
If I change height: auto; to height: 100px; it works but it's not responsive else...
Also I add:
box-sizing: border-box;
clear: both;
to .img but not working.
You don't need the pic in the div, you can have that in the img tag.
The img tag can be changed on hover using css
.img:hover {
content:url(NEWPICPATH);
}
See this answer for more details on changing src this way.
To do responsive images you need to set the max-width property to 100%. Images always have to be an img tag unless you decide to use background-image on a div.
What you have to do is this ....
In html ....
<div style="width:50%;height:50%">
<img style="width:100%; height:100%;" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
</div>
you can give any height or width for the div.If you want you can use style in external style sheet.
I suggest you to try bootstrap.it is pretty easy.
looking at the below
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
The image will not show because
you have
style as "img/tools3/2.png"
A div is a container that can hold an image it, it does not have a source property like an image tag that points to a link.
If you want to make the image display like a div you can simply do
img{
display:block
}
However you can also set a div background to te an image like this
div {
width:put your width here;
height: put yout height here;
background-image:url("url here");
background-size: cover;
}
here is a
div {
width:500px;
height:500px;
background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
background-size: cover;;
<div>
</div>
Here is the HTML page's code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.image {
float: left;
}
</style>
</head>
<body>
<div id="image-gallery">
<div class="image">
<h3>Stack Overflow</h3>
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69" />
</div>
<div class="image">
<h3>Meta Stack Overflow</h3>
<img src="http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png?v=d65f9368620d" />
</div>
</div>
<h1>Title</h1>
</body>
</html>
And here is what the page then looks like:
What I want is for the page to look like this:
The problem is that the code underneath the #image-gallery is aligned beside the image gallery, since the divs inside are using the property float: left. As you can see in the images, the Title is not where I want it to be.
I am using the float: left property so that all of the images are beside each other. But I cannot use padding to force the Title into its proper place because the width of the page changes, which means the images might be stacked in more than 1 row.
How can I put the Title so it is always below the #image-gallery?
You should clear the floats, either with:
#image-gallery {
overflow: auto;
}
Or, use the micro clearfix hack.
#image-gallery:after {
content: "";
display: table;
clear: both;
}
Use display:inline-block; instead of float, and a div or display:block; for the title.
It seems that no matter what I do, I can't get a row of images to line up horizontally when I zoom into the browser. When I zoom in, the images furthest to the right will drop down to the next row instead of going off screen. I've tried float:left;, creating a border, and position:relative; but no luck.
If I use position:absolute; it seems like I have to manually position each image.
My goal is make a sliding image gallery using jquery like the one here: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
I don't want to copy the code in the link above, because I want to create everything from scratch by understanding the fundamental building blocks.
try wrapping the images in a container div width 100%, with overflow: hidden; this will stop a scroll bar appearing - Then set the white-space property of the container div to nowrap this should force the images to stay on one line but the overflow outside your container area will be hidden allowing you to script the change to the left/right offset or margin - you can make the images display inline, or inline-block
Nate that if there is also caption text along with these images the white-space property will also affect the text in the captions so you may need to reset any captions to white-space: normal
sample CSS:
#container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}
#container img {display: inline-block; margin: 0 100px;}
HTML:
<div id="container">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
</div>
try creating a container div around the images with fixed width, i.e.: in px
<html>
<head>
<title></title>
<style type="text/css">
#container { width:1100px; }
img { width:200px; height:100px; margin: 0 10px; float:left; }
</style>
</head>
<body>
<div id="container">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
In the following web page, there is a gap of a few pixels between the image and the div. (I've tested in Firefox 3 and Safari 4.)
How can I close the gap?
body {
background-color: black;
}
img {
width: 250px;
height: 70px;
border: 0;
margin: 0;
padding: 0;
}
div {
background-color: white;
border: 0;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Test Page</title>
</head>
<body>
<img alt="Stack Overflow Logo" src="data:image/png;base64,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">
<div>text</div>
</body>
</html>
The image is an inline element, so it's placed on the base line of a text line. The gap is the distance between the base line and the bottom of the text line (I.e. the space needed below the base line for hanging characters like "g" and "j").
Make the image a block element, and the gap goes away:
display: block;
Delete the line break between your image tag and the div tag.
Add display: block to your <img> either in CSS or on the style attribute.
Edit Guffa beat me to the above.
You can also wrap the <img> with a <div> which technically speaking in this case you should do anyways. Only block level elements can be descendants of <body> if I remember the HTML specs right. You then have the flexibility of adding more images inside that div (as long as there is no white-space between the close of the <img> and the </div> you should be good to go.
Remove the newline in the HTML between the <img> line and the <div> line.
Why yes, it is annoying that HTML treats newlines as spaces.
Change:
<img alt="Stack Overflow Logo" src="http://is.gd/lEfE">
<div>text</div>
To:
<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"><div>text</div>
display block didn't work for me but this does. Give it a negative margin value - Valid CSS
img {
width : 250px;
height : 70px;
border : 0;
margin-top : -11px;
margin-left : -22px;
padding : 0;
}
adjust as necessary.