button that duplicates html but counts up css and html code

button that duplicates html but counts up css and html code - javascript

Im trying to make a form with a button to add info from multiple people and delete them but I have 2 issues that I believe can be fixed together. I just don't have any idea how to do it or what would be the best way to achieve my goal.
When a person clicks on adding info it replicates the same html. So when I make the phpmailer it would have the same name 3 times (name="radio1")
I need to make it when the person presses the button it will count up the number (name="radio1",name="radio2",name="radio3")
The second problem is that the male/female buttons wont work independent of each other click the button 3 times and click on one of the male buttons and only the top one would select. Now im assuming I can use the same type of script to fix both problems by counting up the id or class of the div as they are pure css (section class="plan cf1",section class="plan cf2",section class="plan cf3") and then making css for up to 10 sets of divs and make 10 sets of php.
However im not sure this is the best method to achieve my goal or even possible. Any insight would be appreciated on how to best go about fixing my problem?
Code is not cleaned up so please forgive the mess
#KenoClayton yes when Someone clicks the add info button it increases the number inside of name IE name="radio1" and id or class IE so this way I can make them post separately and the male/female buttons to operate independently. The male/female I did for you so u can see what I mean just click around on any of the last 2 male/female things. I need to make it to where no matter how many times they add and remove the formwrap div by clicking on the add/remove buttons it keeps counting up the numbers so they will display and post properly. and by adding a number is the only way I can think of to make it work.. Is there a better way? https://jsfiddle.net/8frqx97h/26/
$radio1 = $_POST['radio1'] ;
$radio2 = $_POST['radio2'] ;
$radio3 = $_POST['radio3'] ;
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#F5F5F5;
}
/****adding a driver****/
#addingdriver{
margin-top:10px;
margin-bottom:50px;
border: 1px solid blue;
width:100%;
display:table;
}
#driverinfo{
border: 1px solid red;
width:60%;
margin-bottom:20px;
margin-left:10px;
}
#test1{
height:50px;
width:150px;
border: 1px solid green;
float:left;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
}
#test2{
float:right;
height:25px;
border: px solid red;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
width:100px;
font-size: 10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
/*form styles*/
#msform {
border:none; display: table;
width: 780px;
position: relative;
margin :0 auto;
}
fieldset{border:none;}
#lefttxt{
width: 100%;
margin-bottom:15px;
}
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98%;
text-align: center;
line-height: 30px;
height: 30px;
}
#ftx2{
border: px solid black;
border-radius: 2px 2px 0px 0px;
width: 40%;
text-align: center;
line-height: 30px;
height: 30px;
}
#formwrap{
vertical-align:top;
padding:5px;
width: 45%;
border: 1px solid green;
display: inline-block;
}
#formwrap2{
padding:5px;
width: 45%;
border: px solid red;
float:right;
}
date,input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
box-sizing:initial;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
text-align: center;
text-align-last: center;
}
input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
select{ border: 1px solid green;
width: 98%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
option {
text-align: left;
/* reset to left*/
}
#media screen and (-webkit-min-device-pixel-ratio:0){
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 97.5%;
text-align: center;
line-height: 30px;
height: 30px;
}
select{ border: 1px solid green;
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
width:97.1%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------mozilla ----------------*/
#-moz-document url-prefix() {
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98.1%;
text-align: center;
line-height: 30px;
height: 30px;
}
input[type=date]{
line-height: 30px;
height: 30px;
width:97.3%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------radio buttons ----------------*/
/* CONTAINERS */
.container {max-width: 850px; width: 100%; margin: 0 auto;border: 1px solid black;}
.four { width: 49%; max-width: 49%;border: 1px solid red;}
/* COLUMNS */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-of-type { margin-left: 0; }
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* FORM */
#msform .plan input, #msform .payment-plan input, #msform .payment-type input{
display: none;
}
#msform label{
position: relative;
color: #fff;
background-color: #aaa;
font-size: 26px;
text-align: center;
height: ;
line-height: ;
display: block;
cursor: pointer;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#msform .plan input:checked + label, #msform .payment-plan input:checked + label, #msform .payment-type input:checked + label{
border: 2px solid #333;
background-color: #2fcc71;
}
#msform .plan input:checked + label:after, msform .payment-plan input:checked + label:after, #msform .payment-type input:checked + label:after{
content: "\2713";
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 100%;
border: 2px solid #333;
background-color: #2fcc71;
z-index: 999;
position: absolute;
top: -10px;
right: -10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
.submit:hover{
cursor: pointer;
transform: rotateX(360deg);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="canonical" href="" />
<title>title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:url" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/quick.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form id="msform" method="post" action="inc/test.php"/>
<h2 class="fs-title">Personal Info</h2>
<div id="formwrap">
<div id="ftx1">GENDER:</div>
<section class="plan cf">
<input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
<input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
</section>
</div>
<div id="addingdriver">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" id="test1" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">Click to Add info</span></button></th>
</tr>
</table>
</div>
<input id="submit" class="button_text" type="submit" name="submit" value="SUBMIT" />
</form>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><br><div id="ddd"><div id="driverinfo">Info<button type="button" name="remove" id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove info</span></button></div><div id="formwrap"><div id="ftx1">FIRST NAME</div><input type="text" name="fname" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">LAST NAME</div><input type="text" name="lastn" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">DATE OF BIRTH</div><input type="date" name="dob" class="element text" size="" maxlength="15" value="" type="text" placeholder="" required></div><div id="formwrap"><div id="ftx1">input#:</div><input id="element_1" name="ddn" class="element text medium" type="text" maxlength="40" value="" placeholder=""></div><div id="formwrap"><div id="ftx1">MARITAL STATUS:</div><select id="status" name="drop" onChange="showDiv(this)"><option value="">Select One</option><option value="Single">Single</option><option value="married">Married</option></select></div><div id="formwrap"><div id="ftx1">GENDER:</div><section class="plan cf"><input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label><input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label></section></div></div><br><br><br></td>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>

<script>
$(document).ready(function(){
var count = 0;
$(document).on('click', '.add', function(){
var html = '<div id="formwrap2" class="test'+count+'" name="test'+count+'">content goes here</div>';
count++;
$('#item_table').append(html);
$(document).on('click', '.remove', function(){
$(this).closest('#formwrap2').remove();
});
});
});
</script>

Related

Jquery With Button Onclick not display window

sorry for my English..I'm very new with javascript...
I want my Jquery code to open a Window,
Here is my code in javascript, Html and Css,
function layer_show_3()
{
$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
if(posTop<0)
posTop=0;
$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
$('#layerPreviewContent-3').show(600);
}
function layer_close_3()
{
$('#layerPreviewContent-3').hide(300);
$('#layerPreview-3').hide();
}
.kaufen {
float: right;
width: 45%;
background-color: #cccccc;
padding-right: 10%;
padding-bottom: 1%;
margin-left: 3%;
margin-top: 11%;
padding-top: 1%;
}
.tittle-kaufen {margin-left: 15%; font-weight: bold; width: 100%; float: left; }
.preis {margin-left: 4%; font-weight: bold; margin-top: 5%; float: left; }
.piece {float: right; font-weight: bold; padding-top: 20%; margin-right: 55%; }
.quantity {
float: left;
margin-top: 5%;
background-color: #eee;
position: relative;
width: 18%;
overflow: hidden;
margin-left: 3%;
border: 1px solid #b3b3b3;
margin-left: 9%;
}
.quantity input {
margin: 0;
text-align: center;
width: 5%;
padding: 0;
float: right;
color: #000;
font-size: 1.5rem;
border: 0;
outline: 0;
background-color: #d9d9d9;
}
.quantity input.qty {
position: relative;
border: 0;
width: 100%;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
text-align: center;
font-weight: 400;
font-size: 15px;
border-radius: 0;
background-clip: padding-box
}
.quantity .minus, .quantity .plus {
line-height: 0;
background-clip: padding-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-background-size: 0.375rem 1.875rem;
-moz-background-size: 0.375rem 1.875rem;
color: black;
font-size: 1.25rem;
position: absolute;
height: 50%;
border: 0;
right: 0;
padding: 0;
width: 33%;
z-index: 3
}
.quantity .minus:hover, .quantity .plus:hover {background-color: #dad8da}
.quantity .minus {bottom: 0}
.button_wrap {
float: right;
min-width: 75%;
background-color: transparent;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
font-family: 'Open Sans', sans-serif;
color: #111;
margin-right: 1%;
padding-right: 1%;
}
.button_wrap_buttom {margin-top: 15%; margin-left: 6%; color: white; background-color: #b3b3b3; padding: 3%;}
.button_wrap_buttom:hover {background-color: #666666; }
.form-basket {
margin-top: 30px;
margin-bottom: 0px;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 18px;
line-height: 18px;
}
.addtobasket-container {
padding: 0;
margin: 0;
border: 0;
margin: 0;
padding: 0;
border: 0;
outline: 0 none;
font-size: 100%;
background: transparent;
font-family: 'Open Sans', sans-serif;
color: #111;
font-size: 1rem;
line-height: 18px;
}
/* ***** Anfang Fenster 1 producut **** */
#layerPreview-3 {position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;
background-color: rgba(50, 50, 50, 0.5);
}
#layerPreviewContent-3{position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
width:30%;
margin-left:-250px;
height:40%;
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="kaufen">
<form class="form-basket" method="post" enctype="multipart/form-data">
<fieldset class="addtobasket-container">
<span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>
<span class="preis"> Preis 40 € </span>
<span class="piece">Stück</span>
<div class="quantity">
<input type="button" value="+" class="plus">
<input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
<input type="button" value="-" class="minus">
</div>
<div class="button_wrap" >
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
</div>
</fieldset>
</form>
<!-- En el momento que se pulse sobre la capa transparente se cerrara -->
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text" onclick="layer_close-3();">Schließen</span></div>
<div id="bild-text"><img alt="" src="photo/113.jpg"></div>
<div id="text-pruduct">
<p>Verfügbarkeit: <b>eine Menge</b></p>
<p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
</div>
</div>
</div>
</div>
My Problem is when clicking the Botton Zum warenkorb hinzufügen nothing displays, when it should open a window..
Here is the JSFiddle Link for the code
Can someone please help me and explain with easy Words what I am doing wrong?

The problem is with how are you trying to handle an onclick event on a button, without taking into consideration that this button is a part of a form
In simple words, whenever a button is pressed inside of a form it tries to submit that form via html post request if not declared otherwise.
So if you want this to work you can do something like this.
Change this
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
to
<button class="button_wrap_buttom" type="buttom" onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
with event being passed as parameter to layer_show_3 function.
Change your function declaration to
function layer_show_3(event) { ... }
and add this line at starting of the function
event.preventDefault();
this will override the default functionality of a button inside of a form.

Change the content(icon) of a div when clicked

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!

You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>

$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});

HTML Popup not displaying

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.show {
visibility: visible;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
bottom: -1000%;
left: 0%;
margin-left: -500px;
}
</style>
</head>
<body>
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>
<!--JS for all actions on main page-->
<script>
//open myPopup
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
</script>
</body>
</html>
Can someone help me figure out the problem with this? Initially, "myPopup"'s visibility attribute is set to "hidden". Later, when "loginbutton" is clicked (onclick() ), the function "openPopup()" is called which sets "myPopup"'s visibility attribute is set to "visible" via the class "show". However, "myPopup" remains hidden. Is there something I've overlooked? Thanks

Your javascript correctly adds show class to #myPopup. However, that doesn't change anything in how it is displayed because:
.popuptext is defined later in CSS than .show and, having the same specificity (1 class) effectively overrides it.
.popuptext has a bottom:-1000% (that's a lot) and also a margin-left of -500px, which makes it render outside the screen.
I removed the offending rules and also placed .show below .popuptext in CSS.
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
left: 0%;
}
.show {
visibility: visible;
}
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>

Your element is positioned way off the page.
Remove bottom:1000% and margin-left:-500px from .popuptext and it'll work fine.

The problem is your positioning. Your code is actually working as expected, but the popup is being pushed off of the page. Try this css:
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
/*bottom: -1000%;*/
/*margin-left: -500px;*/
left: 0%;
}

A quick inspection in Chrome Dev Tools inspector shows this after you click on the 'Login':
The class is correctly added, but the "visibility" property in 'show' class gets overridden by "visibility" property in 'popuptext' class. This is because 'popuptext' is defined AFTER 'show' class inside your style tag and both the classes have same weightage (or Specificity in CSS terms).
Correction 1 : Place the 'popuptext' class BEFORE 'show' class.
This will override the "visibility" property as you would have wanted.
The pop-up still won't be visible on UI. This is because of huge negative margin set for margin-left property in "popuptext" class. Also, the bottom property has a very high value. This will place your popup far below at the bottom of page.
Correction 2 : Adjust your margin-left and bottom property as well.

Make a p tag into an input field by pressing on a random card

I am new to JS, HTML and CSS. So far I created a button which creates random cards. On the card is a p tag "title". When you click on the card you will see two input fields and a save- and a delete button.
I need help with the design. I tried my best but i cant make this two buttons and the two input fields look good. Can you help me on that.
When I click on a card I want the p tag title goes into one of the input fields. When I click on the input field the p tag should disappear again.
And what I want to make last is that only one card can be in edit mode.
This is my Code:
$(document).ready(function() {
$("button.plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('form').show();
$(this).find('span').remove();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
button div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 3px;
width: 260px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: 0;
position: absolute;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: greenyellow;
border-radius: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: red;
border-radius: 5px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="plus">
<div class="item">
<p>+</p>
</div>
</button>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete">x</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld " type="text">
<br>
<input class="speichern"type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
</form>
</div>

Try This - May be this might help you
I have changed
some design changes with CSS
Input will have a placeholder for the corresponding title in span tag
Only One Item .class will be visible in edit mode
$(".plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('.input-feld').attr("placeholder", $(this).find('span').text());
$(this).find('span').hide();
$(this).find('.minimize').show();
$(this).find('form').show();
});
$('.card').on('click', function() {
$('.card').find('form').hide();
$('.card').find('span').show();
$('.card').find('.minimize').hide();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
/*min button*/
$('body').on('click', '.card .minimize', function() {
return false;
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
.item p {
margin: 0px;
}
div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 5px 3px;
padding: 3px;
width: 250px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #F4F4f4;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: -10px;
color: red;
position: absolute;
font-weight: bold;
cursor: pointer;
}
.minimize {
font-family: 'TheSans Swisscom';
right: 28px;
top: -10px;
color: grey;
position: absolute;
font-weight: bold;
cursor: pointer;
display: none;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: lightgreen;
border-radius: 5px;
color: darkgreen;
border-color: lightgreen;
margin-top: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: orangered;
border-radius: 5px;
margin-left: 10px;
color: white;
border-color: orangered;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="plus">
<div class="item">
<p>+</p>
</div>
</div>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete" title="delete">×</p>
<p class="minimize" title="minimize">–</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld" type="text">
<br>
<input class="speichern" type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>

Why does internet explorer push my content halfway down the page as if creating a huge margin above?

I've created a single html page that will be used within a .aspx template. The html code I used is pretty basic and includes an email subscribe form. The form and it's code is taken directly from Mailchimp as they are the email client I'm using. The problem is that the page loads fine in all browsers apart from Internet Explorer, which pushes my whole html code down underneath the page. I have a jquery file included in the form (jquery-1.8.2.min.js) and I'm not sure if that is interfering with my html code or if it's a problem within the code itself that I havent specified correctly for Internet Explorer. I'm not sure also if it has something to do with the Mailchimp form. I've tried everything possible to fix this but nothing seems to work. If anyone could help with this or has any ideas I would really appreciate it. Please see my code and screenshots below. Thanks, Gary
Heres my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" name="EMAIL" class="required email"
id="mce-EMAIL" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response"
style="display:none"></div> <div class="response"
id="mce-success-response" style="display:none"></div> </div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
Heres my CSS
#charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }

Not sure if it is how you pasted into stackoverflow or not, but you need to indent your content.
The days are mainly gone where you need to save that extra overhead for the filesize.
Using notepad++ would have helped you find this error pretty quickly, what file editor do you use?

Some elements are missiong from this code:
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
CLOSE THIS DIV ABOVE mc-field-group. ALSO FORM IS NOT CLOSED, BEST TO DOUBLE CHECK SIGN-UP FORM CODE
</div><!--end form section-->

We Keep Coding

JavaScript is the programming language of the Web.

button that duplicates html but counts up css and html code - javascript

Related

Jquery With Button Onclick not display window

Change the content(icon) of a div when clicked

HTML Popup not displaying

Make a p tag into an input field by pressing on a random card

Why does internet explorer push my content halfway down the page as if creating a huge margin above?

Categories

Resources