I would like the body to be centered horizontally based on the percentage width of my image (when there is one) instead of text. But I have to keep the width of the body to 50% because it may happen that I have only text in my HTML page. Also, I can't give a fixed dimension to my image because its size can vary from one to another.
An image is better than text : https://i.stack.imgur.com/KZTRj.jpg
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{width:50%;margin:auto;}
img{width:70%;}
.container{page-break-inside:avoid;margin-bottom:30px;}
.sender{color:#008040;font-size:16px;}
.recipient{color:#0000FF;font-size:16px;}
.msg{font-size:16px;text-align:justify;}
</style>
</head>
<body>
<div class="container"><div class="sender">nov. 01 2020 05:50 PM - From: John (+xxxxx123456)</div><div class="message">Hello, please see the attached image.</div></div>
<div class="container"><div class="sender">nov. 01 2020 05:51 PM - From: John (+xxxxx123456)</div><div class="message"><br/><div class="attachment"><img src="files/image.jpg"></div></div></div>
<div class="container"><div class="recipient">nov. 01 2020 05:53 PM - To: John (+xxxxx123456)</div><div class="message">Hello, well received.</div></div>
</body>
</html>
Any idea how to do this ? Thank you.
use flex.
#container{
display:flex;
align-items:center;
flex-direction:column;
}
img, p{
width:50%;
text-align:center;
border:solid 2px red;
}
<div id='container'>
<p> some text</p>
<img src = "https://picsum.photos/200/150">
<p>more text</p>
</div>
body {
text-align: center;
}
Add this to your css
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
I am writing a website and am having an odd problem.
#Text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
body {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<img src="someUnimportantImage.jpg" height="100vh">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
</body>
</html>
My problem is that when I load my page in google chrome (I haven't tried other browsers),
there is a mysterious white space at the top that I can't get rid of
the <html> element doesn't fill the browers height, and therefore
setting the images height="100vh" makes it fill the <html> element, but not the page.
What I need is for <html> to fill the page and for the white space at the top to disappear.
EDIT
I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.
When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.
img {
height:100vh;
}
And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.
body {
margin:0;
}
img {
height:100vh;
}
#text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
Is there a way to make the height of the <iframe> reach exactly the bottom of the page? It is hard to judge by using height:xx%, and it might be dependent on browser.
The code is below:
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
Using JavaScript/jQuery, you can precisely set the right dimension for the IFRAME element, without the need to access to DOM of the frame itself (cross-domain issues), relying on tables or absolute positioning (useless if the content above the frame is dynamic in height):
$(function() {
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function() {
$('#frame').height( $(window).height() - aboveHeight );
}).resize();
});
Example: http://jsfiddle.net/hongaar/jsdYz/
As annoying as it is to use tables for layout, they're still the best way to consistently handle vertical dimensions. The following still displays a few white pixels around the edge of the iframe, and has an extra scrollbar in some versions of Firefox, but is as close as I've been able to achieve:
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
If you really want to avoid the table elements, you might get some traction out of div tags with display:table, display:table-row, and display:table-cell, but be prepared for even more annoying quirks in certain browsers.
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
Well, this seems to be a tricky but you have to keep <html> OR <body> tag height 100% to achieve this
If your <p> tag content is fixed then you can try this way by adjusting the height of <p> and <iframe> relatively..and you have to keep <html> OR <body> tag height 100% otherwise it wont work
I had this same problem recently. I believe you are wanting to expand the height to fit the content that is dynamically loaded. This works like a dream. :)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
Iframe which is a child to the body element is of 100% height with it's parent and before you can make iframe full page you have to declare the height of the body and make it full page too.
Try this. (I thought it would be better if you put your CSS in an external file or just inside the head)
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
Demo
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
#divHeader
{
height:25px;
}
#divContent
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
}
iframe
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
you can't. I tried this before, but it is an issue with the iframe it will remain this way, until they find a way to expose the height of the inner html document... following the standards. If you remove the DOCTYPE of the inner document, I guess you'll have some access to it. Make Iframe to fit 100% of container's remaining height
Try this...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
You could check the demo here
I have always used height:100vh; to give you 100% of the view port