Placing images directly on top of each other - html

I have this HTML code, and I just want to place the images directly on top of each other. (so without this green line in between them)
How to do this?
Example URL: http://todolist.x10.mx/test.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body bgcolor="green">
<img src="f.jpg" width="200" height="80" alt="plaatje1" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
<img src="f.jpg" width="200" height="80" alt="plaatje2" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
</body>
</html>

Don't use <br /> instead add the following CSS:
img {
margin: 0;
display: block;
}

The gap belongs to the line height reserved character as the inline elements (the images in this case) are aligned vertically in their baseline by default.
You could align the inline elements vertically by vertical-align: middle; (or top/bottom) to remove the vertical gap between the lines.
You can refer my answer here for further info.
Also, you could simply remove the <br> between two lines and change the default display type of the images to block, as: display: block;.

Related

Center arbitrary image horizontally

Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>

Irremovable bottom margin in div when using image

I am trying too code a simple thing: an image in a div with no space between their borders but somehow I always get a bottom margin (or padding depending on how you want to see it). I tried putting margin and padding to 0 but it doesn't change anything.
Here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
<style>
*{margin:0;padding:0;}
div{
background:red;
}
</style>
</head>
<body>
<div>
<img src="image.jpg"/>
</div>
</body>
</html>
I tried on two browser already (Chrome, Maxthon) no luck. is it in the specification or all web browser are messing when it come to that?
Display your <img /> as a block-level element:
div > img {
display: block;
}
jsFiddle Demo
The problem and solution:
The reason is because inline-elements (such as images) align automatically to the baseline of the parent box unless modified by the vertical-align property. If you ever set a block-level element to display as an inline-block you'll often encounter this problem also. To fix this you align the image with the top or bottom of the div as follows:
img {
vertical-align: top;
}
Understanding baseline:
Baseline is easy to understand when thinking about text. Letters such as abcdefhiklmnorstuvwxz all sit on the baseline. There is, however, room under this line to handle letters that extend past the baseline. All other letters also sit on the baseline, but there is a portion of the letter that extends below the baseline. These include the letters: gjpqy. As inline elements (including images) sit on the baseline by default there will be extra space below them unless you modify the vertical-alignment.

I want to have a title centered on the same line as two floats one to left and one to right

You misunderstood me in my previous message so I post a new with an example.
Assume the following that you float for example an image left and some div to the right containing for example which browser you use and date + time and some other things perhaps.
Now you want also to display a name for the company centered between these two floats on the same row. The text of the company in between should always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the two floats.
It doesn't matter if I put the text in inline element or block element.
I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>
This is relatively simple to do if any two of the elements are fixed-width. You can implement it by using position: relative on the containing element, and position: absolute on the children (the blocks to be aligned left, right, and center).
See this jsFiddle for an example.
You could put your company name after the floated elements in the html:
<body>
<div style="background:red">
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
<p id="name">My company</p>
</div>
</body>
Adding margin 0 to p#right also ensures it will appear vertically centered with the other elements:
#imageone
{
float:left;
}
p#right
{
float:right;
margin: 0;
}
div #name
{
text-align : center;
}
}
See a fiddle here: http://jsfiddle.net/WDrVK/1/
Can you style the center element as margin: 0 auto;?
As in this example: http://bluerobot.com/web/css/center1.html

IE6 anchor wordwrapping (display:block, width:0)

Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>

div float to the right beside a centered div?

ive got one 4 links. i want them all in the same row. two of them in the center, and the other two in the right. ive wrapped them two and two, but i cant get it to work.
my css looks like this:
#links_center {
}
#links_right {
float: right;
}
but it doesnt work. the right links are under the first two links. could someone help me here.
Here's one way to do it, with the assumption that your links are in a fixed width container. Keep in mind that this isn't the only way, just a quick solution that may work for you:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Links Test</title>
<style type="text/css">
#links_center {
float: left;
width: 600px;
}
#links_right {
}
</style>
</head>
<body>
<div style="width: 800px">
<div id="links_center">
Link 1
Link 2
</div>
<div id="links_right">
Link 3
Link 4
</div>
</div>
</body>
</html>
float:right only works if the #links_right set comes before the #links_center set in the source code. Either rearrange the source code or use float:left on the center set and use padding/margins to place where you want.
It might help to CSS a determined width because it sounds like there might not be enough over all width for them to line horizontally. Also try to float left instead. Another option is making a table.