HTML image positioning - html

I'm trying to create a html document to be shown on iphone and ipad.
It's a simple one but I've some problems with the image position and I'm not sure if I should use relative or absolute position.
What I'd like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.
This code is working on portrait but not on landscape as the image will not be in the center if the page.
I'd like also to have some space between the image and the youtube frame.
This is my actual code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
<div align="center">
<img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing" width=90 height=130>
<p>
</p>
<iframe width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
</body>
</html>

There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.
In a pure css solution, you should do the following to the html.
<div class="container">
<img class="rndImage" src="http://myimage.org" alt="image is missing"/>
<iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
And add the following CSS in style block or in an attached css style sheet.
iframe.youtube
{
width:320px;
height:180px;
display:block;
margin:15px auto;
}
img.rndImage
{
display:block;
width:90px;
height:130px;
margin:15px auto;
}
div.container
{
position:relative;
width:100%;
margin:5px, auto;
}
The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.

Related

Content.jsp is displayed in a small left top corner area, not full of the page with white background. How do I set the CSS?

Here is my Index.html; it made up of four JSP files. The three JSP files are placed correctly with the black background, and only content.jsp is weird to show only in the left top corner part with the white background.
**#content{
float: left;
}**
<div id="header">
<iframe frameborder="0" src="/header.jsp" name="header"></iframe>
</div>
<div id="nav">
<iframe frameborder="0" src="/navigator.jsp" name="nav"></iframe>
</div>
**<div id="content">**
**<iframe frameborder="0" src="/content.jsp" name="content";>**</iframe>
</div>
<div id="footer">
<iframe frameborder="0" src="/footer.jsp" name="footer"></iframe>
</div>
Content.jsp is below:
li{
list-style:none;
padding:0px 5px;
margin:0;
display:block;
float:left;
}
<ul>
<c:forEach items="${page.bookList}" var="book">
<li>
<a href="/book?method=book_detalis&b_id=${book.b_id}" ><img src="/${book.image_path}">
${book.name}<br>${book.price}</a>
</li>
</c:forEach>
</ul>
I ask for a piece of HTML element properties code in Index.html or Content.jsp that makes content.jsp to display fully.
The problem screenshot is below:
There seems to be nothing to specify the size of the iframe so it defaults to a small area.
iframe {
width: 100%;
}
See this question for more:
Full-screen iframe with a height of 100%

Image over iframe in html

I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}

Resizing my page make items disappear

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.

nested division tags different background

I can't get the second divsion tag's background image to show on top of the first. I assumed nesting these would work but neither the 2nd division tag or img i put it shows up.
Here is my code. It is supposed to put a white/gray image repeating down the middle with the image inside.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<html>
<HEAD>
<style type="text/css">
body { background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/Background-2013.gif') ;
background-repeat: no-repeat;
background-color:black; overflow:none;}
.bgimg-paisley {
background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/black-paisley-background.jpg');
height:87%;
background-repeat:no-repeat;
background-attachment:fixed;
}
.bgimgborder {
background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/runner-for-paisley-test.gif');
background-repeat: repeat-y;
width:720px;
height:87%;
}
-->
</style>
</head>
<body>
<div class="bgimg-paisley"
style="position:absolute;top:97px;left:0px;width:100%;>
<div class="bgimgborder" style="position:absolute;top:97px;left:200px;>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-
flowers/bride-and-bridesmaid.jpg" width="700px">
</div>
</div>
</body>
</html>
You were missing closing quotes for style attributes:
In your snippet:
style="position:absolute;top:97px;left:0px;width:100%;
style="position:absolute;top:97px;left:200px;
Should be:
style="position:absolute;top:97px;left:0px;width:100%;"
style="position:absolute;top:97px;left:200px;"
When overlapping html elements its useful to note the z-index css property of your tags in question. It essentially tells the browser which elements should be viewed on top of others. The higher the z-index the higher the precedence. I made this fiddle with your code and set the img tags z-index to 100 and it showed right up.

How do I center an embedded SVG File?

I'm using an embedded SVG file as the top element on my page. (a header?)
It loads just fine, but nothing I try seems to get it centered.
Here's what I'm using at the start of the body:
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
I've wrapped it up in a DIV and used CSS to "margin:auto" but can't get it to budge without just padding it. The problem is that it goes wonky when I resize the window.
HTML
<div class="parent">
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
</div>
CSS
.parent{
display:block;
margin:0 auto;
}
or use this css
.parent embed{
display:table;
margin:0 auto;
}
I am adding code here. Check it may be it helps you..
HTML:
<div>
<img class="papa" height="100" src="http://s.cdpn.io/3/kiwi.svg">
</div>
CSS:
<style>
div { text-align:center}
</style>
Here is a fiddle http://jsfiddle.net/6sRR2/
Hope. It Helps You :)