I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.
This is the page source:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>
<script type="text/javascript">
/** var images = [
"/content/images/bghome.jpg",
"/content/images/background.jpg"
];
var index = 0;
$.backstretch(images[index], { speed: 500 });
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">
<ul>
<li>
home
</li>
<li>
profile
</li>
<li>
portfolio
</li>
<li>
news
</li>
<li>
current projects
</li>
<li class="on">
awards
</li>
<li>
contact
</li>
</ul> </div>
<div id="left-sidebar">
<div id ="logo">
<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
Privacy
</li>
<li>
Sitemap
</li>
<li class="last">
Terms & Conditions
</li>
</ul>
© 2012 SH Structures. All rights reserved. <image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>
Css:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#container {
height: 100%;
height: auto !important;
background: url("left-sidebar-back.gif") repeat-y top left;
}
div#main {
overflow: auto;
padding-bottom: 100px;
}
div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}
div#body {
overflow: hidden;
height: 100%;
}
div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}
div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}
div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}
div#footer {
background: #ba6f19;
border-top: 1px solid #000;
position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}
div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;
}
.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}
.menu-link ul {
padding:0px 0px 0px 20px;
}
.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}
.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}
.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}
.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}
/** Side Menu **/
.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.sideMenu h4{
display:none;
}
/** Footer **/
#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}
#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}
Am i missing something obvious? thanks
It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:
<body style="overflow:hidden;">
<!-- Page contents -->
</body>
$('body').on('touchmove', function (event) {
event.preventDefault();
});
this might work
Related
I am experimenting with following HTML code. It displays a paragraph and two buttons at the bottom (Back and Next).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<!-- stylesheet -->
<style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
<!-- to float left.Hopefully straightforward to understand -->
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
<!-- to float right. Hopefully straightforward to understand -->
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
<!-- for a in li. Hopefully straightforward to understand -->
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:centre; <!-- this isn't effective!-->
text-decoration:none;
}
</style>
</head>
<!-- mainbody-->
I want the text in to be centrally aligned but it doesn't. I have used text-align:centre to set style of . What am I doing wrong?
<body>
<p>
1. Some Para.
</p>
<ul id="navigation" >
<!-- The Back and Next should centre up but they are left aligned -->
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
</body>
</html>
You need to use text-align: center, rather than 'centre'.
ul#navigation li a {
display: block;
padding: .2 em;
color: #fff;
width: 5em;
background-color:#00f;
text-align: center;
text-decoration: none;
}
centre;<-- wrong word... it's center
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:center;/*centre;<-- wrong word... it's center */
text-decoration:none;
}
<p>
1. Some Para.
</p>
<ul id="navigation" >
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
#navigation {
list-style-type: none;
border-top: 1px solid red;
margin: 0;
padding: 0;
}
ul#navigation .left {
float: left;
width: 5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float: right;
width: 5em;
margin: 10px 0 0 0;
}
#navigation ul li {
color: #fff;
width: 100%;
background-color: #00f;
text-align: center;
text-decoration: none;
}
<p>1. Some Para.</p>
<ul id="navigation">
<li class="left"> Back
</li>
<li class="right"> Next
</li>
</ul>
I want to make a website and I am paragraphs with border. I tried margin on css but doesn't work. How to make paragraph margin on this?
This is my HTML code:
body{
margin:0px;
font-family:Calibri;
background-color:#58d68d ;
}
/* Navigation Bar */
ul{
margin:0px;
padding:0px;
overflow:hidden;
background-color:white;
top:0px;
width:100%;
}
li.brand{
margin-left:100px;
}
li.active{
background-color:#FAFAFA;
}
li.right{
float:right;
}
li.right-space{
float:right;
margin-right:100px;
}
li{
float: left;
}
li, a{
font-size:18px;
display:block;
color:#58d68d;
text-align:center;
padding:7px 12px;
text-decoration:none;
transition:0.4s;
}
li:hover, a:hover{
background-color:#FAFAFA;
}
/* Intro */
h1{
margin-top:20px;
margin-left:100px;
font-size:100px;
color:white;
margin-bottom:0px;
}
h2{
margin-top:0px;
margin-bottom:50px;
margin-left:100px;
color:white;
max-width:1000px;
opacity:0.7;
}
/* Packs Section */
div.packs{
width:100%;
height:500px;
background-color:white;
}
p{
margin:50px;
display:inline;
padding:7px 12px;
border-left:6px solid red;
background-color:lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml</li>
<li class="active">About</li>
<!-- Right -->
<li class="right-space">Application</li>
<li class="right">Download</li>
<li class="right">Packets</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
I tried margin:50px;, but not work. This command action only on margin-left and right.
Any ideas?
marginwon't work in inline elements, which you are setting the p so set p as inline-block
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
You are using display: inline; for paragraphs, try display: inline-block; instead.
Here is an working example:
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title>Packet</title>
<!-- PLUGINS -->
<link rel="icon" href="packet.ico" />
<script src="plugin/mobile.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/packet.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
</body>
</html>
I want my menu to stay on its place while I scroll, but when I add the following in my CSSposition:fixed; the whole thing goes out of the place from where I want it to be.
In this jsfiddle you can see how it is now and how I want it to be. The only thing wrong with it, is that if I change the position to fixed it doesn't stay where I want it to be anymore.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
EDIT:
I'm trying to achieve something like this:
http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html
Ok, i see what you want and i think you will code this behaviour in Javascript.
This kind of solution will be okay for you ??
Démo : http://jsfiddle.net/cc48t
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
}
);
Use menu inside the headercontainor and give position: fixed; fom #menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
position: fixed;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
Since you are not using JQuery, You can achieve it through the simple javascript
var header = document.querySelector('div'),
title = header.querySelector('ul'),
fix_class = 'fixnav';
function stickyScroll(e) {
if( window.pageYOffset > 310 ) {
title.classList.add(fix_class);
}
if( window.pageYOffset < 310 ) {
title.classList.remove(fix_class);
}
}
// Scroll handler to toggle classes.
window.addEventListener('scroll', stickyScroll, false);
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
.fixnav{
position:fixed;
z-index:9999;
top:0;
}
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
transition: 1s all;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/sank8893/mvmbtcby/3/
I create a jsfiddle.
I just add those lines in #menu and it works for me:
position : fixed;
top: 0;
The menu doesn't move.
JS:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 100) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 100) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Css:
.navbar-fixed{
position:fixed;
z-index:auto;
Top:0px;
}
Since you need this css to be appended only when you have scrolled a certain height in your webpage, Using this js code you can append navbar-fixed class to menu div after scrolling a certain amount of height.
Add the following script it will work fine
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 650) {
$('#menu').css('position', 'fixed').css('top', '0');
} else {
$('#menu').css('position', 'static');
}
});
</script>
Add these styles to your menu in css
.
position: fixed
top:0
The combination of these 2 will make sure the menu stays where it has to stay : always at the top.
As #Error404 said:
the fixed elements goes out of the normal flow of the document and this
is why you can position it on the top of the screen.
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.
I am adding some pictures to a website I am building for a client, and for some reason some of the pictures underlap other pictures when i change the resolution, and some don't. I am adding all the pictures the same way so I am a little confused as to why some are positioned staticly.
HTML PICTURES
<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Jay Cousins</title>
<link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
<div id="header">
<img id="papa" src="newImages/papaPic.jpg">
<img id ="jaytext" src="newImages/jaycousins.png">
<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
<img id ="commercialtext" src="newImages/commercialtext.png">
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
<ul>
<li class="selected">
home
</li>
<li>
Opportunities
</li>
<li>
Project Management
</li>
<li>
About Jay
</li>
<li>
Community
</li>
<li>
Contact
</li>
</ul>
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px; //
}
#jaytext{
position: absolute;
top:5.5%;
left:31.7%;
}
#darkTextBackground{
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
height:57px;
width:550px;
position:absolute;
top:23.5%;
left:29.0%;
}
#leftsidebackground{
width:300px;
height:523px;
position:absolute;
left:0%;
}
#text{
position:absolute;
top:0%;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
overflow: hidden;
padding: 0 0 0px 1px;
width: 970px;
position:relative;
left:5%;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
If you have fixed number of images here then wrap them in a div and set the div following properties div {-webkit-column-count: 5; /* Chrome, Safari, Opera /-moz-column-count: 5; / Firefox */column-count: 5;}