I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.
But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id 'main' to be displayed over the top of the img with the id 'mainImg' (but the div also needs to be/remain centred).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
#mainImg { z-index: -1; }
#main { text-align: center; width: 1000px; height: 700px; top: 0px; }
#navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
#content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
-->
</style>
</head>
<body>
<div id="heading">
<img src="images/heading.png" alt="" width="100%" height="300px"/>
</div>
<img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>
<!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
<div id="main">
<div id="navBar">
<img src="images/navBackground.png" alt="" width="100%" height="700px"/>
</div>
<div id="content">
<img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
Instead of using an img tag for your site's background I would strongly suggest applying a background image style to a div or your body tag.
That way you can keep a floated layout & the contents will appear above the image since your #main div can be nested inside the element with the backgrund image applied.
so for example css would be:
body { background:url('images/mainBackground.png'); }
and just remove the img (#mainImg) tag from your markup
you may also want to do this for your navigation
you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.
Instead of referencing the image as an inline tag, try setting the CSS background properties of the content div itself. Something like this should do the trick:
#main {
background-image:url('images/mainBackground.png');
background-repeat:no-repeat;
}
try this:
#mainImg {
left: 100px;/*adjust accordingly*/
position: relative;
top: 100px;/*adjust accordingly*/
z-index: 2;
}
z-index is for layering html elements.
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I have been struggling for the past few hours with a positioning problem. I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial. The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well. Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section. That part works just fine.
The problem is that the tutorial includes this little X, using the html code × I will include the full code below. The × is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). I circled the xelement The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail. I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring. At least with inline styles, I was able to color the element. But padding-left, margin-left, text-align:center. I tried separately and all at once. None of these work, and I just simply cannot figure this out. Here is the javascript, which is included in the section. Thanks a million times for your time.
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Here is the CSS:
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
**.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}**
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
And here is the entire page with HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Dream of Bonsai</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<!--The grid of four equal columsn-->
<div class="container">
<h1 style="text-align:center">Image Gallery</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-3">
<img src="images/cherrySquare.jpg" id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
</div>
<!--End of the row-->
<div class="mycontainer">
<!--close the image-->
<span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">×</span>
<!--Expanded image-->
<img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
<!--Image text-->
<div id="imgtext"></div>
</div>
</div>
</body>
</html>
I took a look at your CSS. I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.
How to create div with 2 element's (text and img) on two oppoiste sides? Length of text is variable (it's a list of months to select). So the text should be on the left side of the div or "p" and img should be on the right. Between them is gap. Like on this page:
https://zapodaj.net/acb40b1461eaf.jpg.html
There's multiple ways to do this, either using float or a margin on each object in the container.
The CSS-Property Float could help you!
.parent {
width: 90%;
height: 100px;
background: #EFEFEF;
}
.left-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: left;
}
.right-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: right;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div>
You can achieve it by using float as below:
<!DOCTYPE html>
<html>
<head>
<style>
.left {
float:left;
}
.right {
float:right;
}
img {
margin:0.5em;
}
</style>
<body>
<div class="container">
<p class="left">Text will come here</p>
<img src="" width="" height="" class="right" />
</div>
</body>
</html>
Please specify image properties.
Thanks!
There are many ways, including margin, float or even position: absolute in some cases, but it's worth noting that there is a fairly new set of css properties - flex:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>a</div>
<div>b</div>
</div>
I need to position header and footer accordingly to content height.
So the header and footer are adjacent to content, even when the content size change.
I would like to know if a CSS solution exists (even CSS 3), if no a JS solution.
Notes: I cannot change the order of DIV in the HTML.
Below pictures of the desired layout.
In more details:
I need the top side of the content positioned just after the end
bottom side of header.
I need the top side of the footer positioned just after the end
bottom side of content.
If header change height, content should move up/down.
If content change height, footer should move up/down.
Live code: http://jsfiddle.net/wkfcnj6c/
Example is welcome :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
</script>
<style>
#content-a, #content-b{
position: absolute;
width: 500px;
height: 250px;
}
#content-a {
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
position: absolute;
left: 60px;
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
</body>
</html>
with your html structure this isn't possible with pure css, especially with a dynamic height for the header and footer - as they are in a seperate div, it will be impossible for the content divs to know how much space is left to take up. You would need to use js to either move your divs and calculate the heights, but I would do something along the following:
body, html {
height:100%;
position:relative;
margin:0;
padding:0;
}
#master {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#master > div {
display:table;
width:100%;
height:100%;
}
#master > div > div {
display:table-row;
width:100%;
}
and with the help of jquery, reorder your elements:
$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));
Example
Example with expanded content and header
Got it I think: http://jsfiddle.net/Preben/80a6q40x/1/
What I did:
Since all is in correct order except the header, we can do this:
Remove ALL position:absolute;
Put margin-top: 50px on the content-a
Put position:ansolute; top:0px; on the #header
You may also edit the #content-a to have min-height: 250px; to adjust to the content in height: http://jsfiddle.net/Preben/80a6q40x/4/
That's it.
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
CSS:
#content-a, #content-b{
width: 500px;
height: 250px;
}
#content-a {
margin-top:50px;
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
position:absolute;
top:0px;
}
#footer {
background-color: blue;
}
Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size.
At the moment using the following code it seems to resize the height but not the width?
This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.
function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );
}
var sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;
});
$('#img-container').width( sum );
}
$(window).resize(function() {
resizeit();
});
$(window).load(function(){
resizeit();
});
And this is my PHP
<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version
/>'></script>
<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1></div>
<div id='index'>
<div class='menu'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by Neptik</p>
{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
And my images end up sitting in a stack like this
I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?
Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.
<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>
background-image:url(''); - Sets the background image
background-size:cover; - Set how the image should fill the div
This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.
I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.
Demo Here: http://jsfiddle.net/T9Zz5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
overflow-y: hidden;
margin:0;
padding:0;
}
.wrap
{
overflow-x: visible;
white-space: nowrap;
height: 100%;
width: 100%;
}
.left
{
width: 200px;
float: left;
}
.item
{
display: inline-block;
width: 100%;
height: 100%;
padding: 4px;
background-color: green;
margin-left: -4px;
text-align: center;
vertical-align: top;
}
.item img
{
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.item:before
{
display: inline-block;
content:"";
vertical-align: middle;
height: inherit;
}
/* First Item width - nav width */
.left + .item
{
width: calc( 100% - 200px );
margin-left: 0px;
}
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(3){
background-color: purple;
}
HTML:
<div class="wrap">
<div class="left">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
<div class="item"><img src="http://www.placehold.it/1000x100" /></div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>