I want to create a page with a black box in the middle, which has 30px of padding on the left and right hand side.
The following code works on desktop browsers without having a horizontal scroll, but on mobile safari you can scroll left and right. How do I prevent this horizontal scroll?
I have tried adding overflow: hidden to the body, the outer div and the inner div, this doesn't seem to help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>hello world</title>
</head>
<body style="margin:0;padding:0;">
<div style="padding:0 30px">
<div style="background-color:#000;height: 50px;">
</div>
</div>
</body>
</html>
OK, the answer was to wrap the div with the padding on it with another div.
<body style="margin:0;padding:0;">
<div>
<div style="padding:0 30px">
<div style="background-color:#000;height: 50px;">
</div>
</div>
</div>
</body>
Related
On Safari on Ipad the white X appears on the right hand part of the black. This is the only Safari I have though so unsure if iPad issue or Safari issue or my issue.
https://jsfiddle.net/juvpxa8q/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>title</title>
</head>
<body>
<div id="main">
<div id="piece-info-container">
<div id="piece-info">
<div id="piece-info-top">
<div class="piece-info-row">
<i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add position: relative to #piece-info-container.
It has to do with the resetting of the children's positions.
To be honest, it'd be best to rethink your CSS from the ground up because position:absolute inside of a sticky inside of a fixed is a recipe for trouble.
It's quite common to be wanting to position icons in the top right corner... A good place to start could be taking a look at Bootstrap's modals. Look at the .modal-header separation and using float to position the x it to the right.
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
I am new to HTML & CSS.
I have tried the code below
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="div1" style="width:300;background-color:olive">
<div id="div2" style="width:100px; margin-left:auto; margin-right:auto; background-color:gray"></div>
</div>
</body>
</html>
The "div2" is in centered horizontally.
Then I change the width to height & margin-left/right to margin-top/bottom. (the code below)
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="div1" style="height:100px;background-color:olive">
<div id="div2" style="height:20px; margin-top:auto; margin-bottom:auto; background-color:gray"></div>
</div>
</body>
</html>
It is not centered vertically as I expected.
Any can help me to explain this, why they don't have the same behaviors?
Thanks,
Hoang
margin-auto only works on horizontal margin. i.e margin-left and right.
There is no way you can set vertical margin to auto. instead you can make it an inline block and set it vertically middle. read this answer
MDN says:
margin: auto; /* box is horizontally centered, 0 margin on top and bottom */
I tried below
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Center</title>
</head>
<body style="height:100%; width:100%">
<div style="display:table; width:100%; height:100%">
<div id="div1" style="display:table-cell;vertical-align:middle">
<div id="div2" style="display:table-cell;vertical-align:middle;height:20px; margin:0 auto; background-color:gray">Text is vertical alignment</div>
</div>
</div>
</body>
</html>
I am having an annoying issue to position an element on top of a background image. Say we have a html as :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="background:url('image.png'); background-size:cover;">
<button>Button </button>
</div>
</body>
</html>
The button should be placed at left: 50px; top: 100px; against the original image, but because the device screen ( desktop chrome or ios safari ) change, and the background-size: cover; property, the image is actually scaled, so the button would not appear at the right position.
I tried another way :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="width:100%;">
<img src="image.png" width="100%" />
<button style="top: -100;z-index: 5;">Button </button>
</div>
</body>
</html>
This way the page may scroll because the image might beyond screen height, once i positioned the button to the right place, and changed to another device resolution, the position was altered again.
I also tried javascript to listen to resize event to absolutely position the button, it still has obvious difference between desktop and ios screens.
How can i make it ? Thanks in advance!
Edit:
If the image is scaled due to screen resolution, i want the button be scaled same ratio too. It would be great to find a way without complex javascript.
If you want the button size change with the scale of the page, so you must add width and height style for that in% unit. Because pixel is a fix unit on different devices but % depends on device resolution. And finally you can add min-width and min-height or max-width and max-height to your div style to have a good control on other devices. Good luck.
Add CSS position absolute to your image and button elements. In this way you will be able to set their position accordingly to their parent element <div>.
http://jsbin.com/mevuxizuzu/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
</div>
</body>
</html>
You can use the position:absolute; for your button and set the right place with top and left position with %, because your width and height are based on % not pixels .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
</div>
</body>
</html>
Try the following code that use relative position for the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
left: 20px;
top:100px;
}
.bd{
background-image: url('http://lorempixel.com/650/1000/sports/1/');
background-size: cover;
height: 1000px;
width: 650px;
}
</style>
</head>
<body>
<div class="bd" style="width:100%;">
<img style="position:absolute" src="" width="100%" />
<button>Button </button>
</div>
</body>
</html>
Checkout this DEMO: http://jsbin.com/pemafigafa/3/
I'm trying to get the second textbox to be across from the first one. Right it is at the bottom righthand side.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div>
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
One way is adding float: left; to the first container div, as this shrinks its width to the width of its content, allowing both inputs to appear side by side.
http://jsfiddle.net/uwFyp/
Just float the first one left
<div style="float:left;">
fiddle
You basically just need to float both of the divs containing your h2 and input elements. You can either float both left or float the first one left and the second one right (as in this example from your code above):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div style="float:left;">
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Floating both div's left would position the second div right after the first one.
You might also find you need to put a clearing div <div style="clear:both;"></div> immediately after your second floating div. This will prevent elements following these two from being positioned immediately after the last floated element.
floating divs for alignment of inputs gets tricky messy with lots of extra code try this cleaner approach that can be styled via CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.horz-inputs label, .horz-inputs input {display: inline-block;}
/*add any css you want to the inputs and labels from this point forward
</style>
<body>
<div class="horz-inputs">
<h2>Top</h2>
<label>TextBox 1</label>
<input type="text" />
<label>TextBox 2</label>
<input type="text" />
</div>
</body>
</html>