Simply trying to get my page to scroll, simply added 'br' to test. This can be seen in the file below -
<?php
session_start();
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Menu Flexbox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style6.css">
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Hind:400,300,600,500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style9.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="table" id="main">
<div class="table-cell">
<div class="menu">
<div class="menu-item"><i class="fa fa-home"></i><span>Home</span></div>
<div class="menu-item"><i class="fa fa-globe"></i><span>Panel</span></div>
<div class="menu-item"><i class="fa fa-user"></i><span>Profile</span></div>
<div class="menu-item"><i class="fa fa-envelope"></i><span>Support</span></div>
<a class="menu-item" href="index.php?logout='1'"><i class="fa fa-power-off"></i><span>Logout</span></a>
</div>
</div>
</div>
</div>
</div>
<div>
<a target="_blank" style="display: block; position: fixed; bottom: 45px; right: 10px; width: 200px;" href=""><img src="https://i.imgur.com/EV5CGy2.png" alt="logo"/></a>
<a target="_blank" style="display: block; position: fixed; bottom: 15px; right: -24px; width: 200px;" href="http://www.abr.business.gov.au/ABN/View/93742390655"><img src="" alt=""/>ABN: 93 742 390 655</a>
</div>
<div id="wrap1">
<div class="ml-auto pt-5">
<?php if (isset($_SESSION['username'])) : ?>
Welcome, <strong><?php echo $_SESSION['username']; ?></strong>.
<?php endif ?>
</div>
</div>
<div id="wrap">
<br><br><br><h1 style="font-weight: 300; padding-left: 80px">Shopping cart -</h1>
<p style="font-weight: 300; padding-left: 80px ">Check out with your items</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
example
<br>
example
<br>
example
<br>
</div>
</body>
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5b7d1d95afc2c34e96e7ca57/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
</script>
</html>
enter image description here
I simply can not scroll down -
Please ensure you let me know if you need anything other than what has been provied
CSS -
body{
margin: 0;
overflow: hidden;
}
#main{
position: fixed;
top: 0;
left: 0;
width: 15%;
height: 100%;
background-color: #ddeaf1;
}
.table{
display: table;
width: 100vw;
height: 100vh;
}
.table-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.menu{
background-color: white;
width: 30%;
margin: auto;
display: flex;
align-content: flex-start;
flex-flow: row wrap;
justify-content: space-around;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
}
#media all and (max-width: 900px){
.menu{
width: 80%;
}
}
.menu-item{
font-size: 17px;
flex: 1;
padding: 25px;
transition: all .2s;
cursor: pointer;
color: #636363;
background-color: white;
border-radius: 10px;
position: relative;
}
.menu-item > span{
display: block;
position: absolute;
text-transform: uppercase;
font-size: 10px;
font-weight: 200;
color: white;
left: 5px;
right: 5px;
border-radius: 5px;
background-color: #226eab;
padding: 5px;
opacity: 0;
transition: all .2s .1s;
transform: translateY(70px);
z-index: -1;
}
.menu-item:hover{
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
flex: 2;
color: #226eab;
transform: scale(1.1);
z-index: 3;
}
.menu-item:hover > span{
transform: translateY(35px);
opacity: 1;
}
#wrap{
width: 95%;
min-width: 900px;
margin-left: 18%;
}
#wrap1{
width: 95%;
min-width: 900px;
margin-left: 80%;
}
Any suggestions would be greatly appreciated, this is my first project so don't judge to hard :)
Remove overflow: hidden; from your CSS body element. If you do not want to let page elements cause your page to be wider than the actual viewport’s width, replace it with max-width: 100vw; and overflow-x: hidden;. vw is the unit for a percentage of the viewport width.
You have added
overflow: hidden;
to the body, so you can't scroll. Please remove the hidden so that you can scroll
please check you have enough data (> your view port) for scrollbar to appear.
Please refer here for css changes if needed
enter link description here
enter link description here
enter link description here
Try css on body
overflow-y: scroll;
*remove overflow:hidden on body
Related
my login page is not implementing the css i have used for it my code is designed using mvc and php i tried changing background to pink to see if its working but the css isnt working at all
my code isnt complete so dont worry about missing stuff for the form etc but this is login page code.
<?php
require APPROOT . '/views/includes/head.php';
?>
<div class="navbar">
<?php
require APPROOT . '/views/includes/navigation.php';
?>
</div>
<div class="container-login">
<div class="wrapper-login">
<h2>Sign in</h2>
<form action="<?php echo URLROOT; ?>/users/login" method="POST">
<input type="text" placeholder="Username *" name="username">
<span class="invalidFeedback">
<?php echo $data['usernameError']; ?>
</span>
<input type="password" placeholder="Password *" name="password">
<span class="invalidFeedback">
<?php echo $data['passwordError']; ?>
</span>
<button id="submit" type="submit" value="submit">Submit</button>
<p class="options">Not registered yet? Create an account! </p>
</form>
</div>
</div>
this is my css for the page.
.container-login {
width: 100%;
margin: 0 auto;
position: relative;
top: 20%;
}
.wrapper-login{
width: 80%;
margin: 0 auto;
text-align: center;
}
.wrapper-login input {
width: 200px;
height: 26px;
border: 1px solid #cccccc;
background-color: #f5f5f5;
font-size: 18px;
display: block;
position: relative;
margin: 20px auto;
}
input::placeholder{
color: #a1a1a1;
font-size: 14px;
}
.wrapper-login h2 {
font-size: 40px;
text-transform: uppercase;
}
.btn-submit {
width: 200px;
height: 42px;
border: 1px solid #000000;
background-color: #000000;
color: #ffffff;
font-size: 20px;
margin: 20px 0 0 0;
}
#submit:hover {
border: 1px solid #a1a1a1;
background-color: #a1a1a1;
transition: 0.15s ease-in;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta htttp-equiv="Cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auction System</title>
<link rel="stylesheet" href="http://localhost/mframe/css/style.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700&display=swap" rel="stylesheet">
</head>
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but
i used other program and now it's working
after checking network tab i saw that css file appear after some time and when it appear
it has an old version of it im not sure why but i used PhpStorm and then i make localhost
using PhpStorm and now it's working thank you for people tried to help me :)
Hi im working on a page wich allows my viewers on twitch to donate for my stream...
When a user clicks on paypal he gets redirected to paypal and if he clicks on visa it opens the popup
The problem i have now is that the donation ammount alway has the same opacity as the popup....
Popup screenshot
Did someone knows what the problem could be?
My index.php:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- META -->
<meta name="description" content="RyuZockt.at StreamDonations" />
<meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
<meta name="author" content="RyuZockt">
<meta name="revisit-after" content="3 days" />
<title> RyuZockt.at Donations</title>
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
<!-- STYLE -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Font Awesome 4.1.0 -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/popup.css" rel="stylesheet">
<!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">
<!-- Modal PopUp-->
<div id="myModal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
<p><strong>Diese Zahlungsmethode ist momentan noch nicht verfügbar <img src="assets/img/sad.png"></strong></p>
</div>
</div>
<div class="col-md-12">
<div class="container-md">
<div class="panel cart panel-default">
<div class="panel-heading text-center">
<img class="avatar" src="assets/img/ryu.jpg">
<h1>RyuZockt</h1>
</div>
<div class="panel-body cart-form">
<form method="post" enctype="multipart/form-data" action="startDonation.php">
<!-- Name und Betrag -->
<div class="row">
<!-- Name -->
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
</div>
</div>
<!-- Betrag -->
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei wählbar)" value="5">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<!-- /Name und Betrag -->
<!-- Nachricht -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
</div>
</div>
</div>
<!-- /Nachricht -->
<!-- Spacer -->
<div class="labelled-separator">
<div class="label-wrapper">
<label class="required"> Donaten mit</label>
</div>
</div>
<!-- /Spacer -->
<!-- Pay Buttons -->
<div class="row small-gap">
<!-- PayPal -->
<div class="col-md-6 col-xs-6 payment-mean payment-paypal">
<div class="form-group">
<button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
</div>
</div>
<!-- /PayPal -->
<!-- Sofort -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="sofort" type="button" style="width: 100%;" name="mangopay-sofort" required="required" class="btn btn-default btn-bump btn-mangopay-sofort" value="MANGOPAY_SOFORT">MangoPay-Sofort</button>
</div>
</div>
<!-- /Sofort -->
<!-- Paysafe Card -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="psc" type="button" style="width: 100%;" name="mangopay-psc" required="required" class="btn btn-default btn-bump btn-mangopay-psc" value="MANGOPAY_PSC">MangoPay-PSC</button>
</div>
</div>
<!-- /Paysafe Card -->
<!-- Visa-Mastercard -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="visa" type="button" style="width: 100%;" name="mangopay-visa" required="required" class="btn btn-default btn-bump btn-mangopay-visa" value="MANGOPAY_VISA_MASTERCARD">MangoPay-Visa-Mastercard</button>
</div>
</div>
<!-- /Visa-Mastercard -->
</div>
<!-- /Pay Buttons -->
</form>
</div>
</div>
</div>
</div>
<!-- Scripte -->
<script src="assets/js/modal-popup.js"></script>
</body>
</html>
My style.css:
html, body{
min-height: 100%;
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
width: 100%;
}
h1{
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
font-size: 2.6rem;
word-break: break-word;
}
.div{
display: block;
}
.img{
vertical-align: middle;
}
.h1{
font-size: 2.6rem;
margin-top: 0;
margin-bottom: 20px;
}
.form{
display: block;
margin-top: 0em;
}
.form-group{
margin-bottom: 15px;
}
.textarea{
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 12px 6px 12px;
resize: none;
overflow: hidden;
border-bottom: 0;
}
.input-group{
position: relative;
display: table;
border-collapse: separate;
font-family:
}
.input-group-addon{
border-radius: 0;
background-color: #f9f9f9;
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555555;
text-align: center;
border: 1px solid #ccc;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
}
.cart-body .form-control{
font-size: 1.8rem;
line-height: 3rem;
min-height: 45px;
}
.form-control{
display: block;
width: 100%;
padding: 6px 12px;
color: #555555;
background-color: #FFF;
border: 1px solid #ccc;
border-radius: 2px;
height: 40px;
border-width: 1px;
}
textarea {
resize: none;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.cart{
position: relative;
margin-top: 100px;
border: none;
box-shadow: none;
}
.panel{
margin-bottom: 20px;
background-color: #FFF;
border: 1px solid transparent;
border-radius: 2px;
}
.cart .avatar{
margin-top: -60px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFF;
}
.cart-body .panel-body{
padding: 20px;
background-color: #FFF;
box-sizing: border-box;
}
.col-md-12{
width: 100%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.container-md{
width: auto;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
max-width: 500px;
}
.labelled-separator{
border-top: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 40px;
position: relative;
}
.labelled-separator .label-wrapper{
position: absolute;
top: -13px;
width: 100%;
text-align: center;
}
.cart-body .labelled-separator label{
background-color: #f4f4f4;
}
.labelled-separator label{
display: inline-block;
padding: 0 10px;
background: #fff;
}
label{
font-size: 10px;
font-family: sans-serif;
color: #777788;
text-transform: uppercase;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.row.small-gap{
margin-left: -3px;
margin-right: -3px;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.btn-bump{
line-height: 3rem;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
border-width: 2px;
}
.btn-paypal{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-sofort{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-psc{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-visa{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
background-size: auto 60%;
}
and at least
my popup style.css
/* Modal PopUp */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 45%;
text-align: center;
}
/* The Close Button */
.close {
float: right;
font-size: 20px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
It looks like the z-index of the input is greater than the z-index of the modal. I removed this line from the code and the donation amount has the same opacity as the background...
change this styling:
.input-group .form-control{
z-index: 2;
}
to this:
.input-group .form-control{
z-index: 0;
}
As mentioned by the other answer the problem is due to the z-index. I would not recommend you changing or generally overwriting the bootstrap code as long as you are not 100% secure in what you do. Better just increase the z-index of your modal like this.
.modal {
/* your other properties */
z-index: 10; /* Sit on top */
}
I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:
What I want is so that the divs are lined up properly. Here is my code:
body {
background-color: #558C89;
/*background-color: #1FDA9A;*/
color: #000305; /*remove if background is not working */
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
margin-left: 21.5%;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
}
form {
display: inline;
}
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
height: 50px;
vertical-align: top;
}
.mainheader img {
width: 100%;
height: auto;
margin: 0% 0%;
}
.mainheader nav {
background-color: #424242;
/*background-color: #008BBA; /* Here for color of navigated buttons*/
height: 65px;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: right;
display: inline;
margin-top: 0px;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
font-weight: bold;
display: inline-block;
padding: 18px 25px;
height: 10px;
/* Come back here to continue to edit buttons */
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #638CA6;
opacity: 0.85;
height: 63px;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.newsClass{
position: absolute;
width: 1000px;
background-color: #404040;
border-style: solid;
border-color: black;
border-width: 1px;
text-align: center;
color: #FFF;
margin: -100px 0 0 -150px;
top: 25%;
left: 27%;
z-index: 2;
}
.topcontent {
background-color: #404040;
width: 850px;
position: absolute;
text-align: center;
color: #FFF;
margin-top: 120px;
border-style: solid;
border-color: black;
border-width: 1px;
line-height: 1;
display: inline-block;
left: 21.5%;
}
#box{
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
border-radius: 4px;
top:50px;
}
h2{
text-align:center;
color:#fff;
}
#footer {
color: #FFF;
}
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
include("blog.php");
$posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts();
$username = $_SESSION['username'];
?>
<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">
<title>Home</title>
<!-- CSS -->
<link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="indexCSS/bootstrap.min.css">
<link rel="stylesheet" href="indexCSS/font-awesome.min.css">
<link rel="stylesheet" href="indexCSS/form-elements.css">
<link rel="stylesheet" href="indexCSS/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="icon" href="images/favicon.gif">
</head>
<body>
<img src="images/logo.gif" id="logo"/>
<header class="mainheader">
<nav><ul>
<?php
if(isset($_SESSION['user_id'])){
echo '<li>Log out</li>';
}else{
echo '<li>Log in</li>';
}
?>
<li>My Account</li>
<li>Contact</li>
<li>Play</li>
<li>Home</li>
</ul></nav>
</header>
<h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo 'New Post'; }?>
</h2>
<?php
foreach($posts as $post) {
?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h2 class ="title"><?php echo $post['title'];?></h2>
<p> Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in <?php echo $post['name']; ?>
<br></br>
<?php
if(getPermissions($username)) {
?>
Edit Post |
Delete Post
<?php
}
?>
</p>
<div class="contents"> <?php echo nl2br($post['contents']); ?></div>
<?php
}
?>
</div>
<div class="form-top-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88077370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
NOTE: I guess the "run snipped" doesn't seem to run php.
It sounds like you are not closing the divs in the correct places.
Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.
I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.
<?php foreach ($posts as $post):?>
<div>
<h2 class ="title">
<?php echo $post['title'];?>
</h2>
<p>
Posted on
<?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in
<a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
<?php echo $post['name']; ?>
</a>
<br></br>
<?php if(getPermissions($username)): ?>
Edit Post |
Delete Post
<?php endif; ?>
</p>
<div class="contents">
<?php echo nl2br($post['contents']); ?></div>
<div>
</div>
<?php endforeach;?>
Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.
I'm not entirely sure how I managed to jack this up.
http://pretty-senshi.com
If you take a look at that, where the left item and right item are, the right item is sticking out for whatever reason, so I think I'm doing something wrong. Or maybe my coding/css is jacked up, I'm not entirely sure about the coding anyway, I just know it "works" somewhat. See below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty Senshi - Sailor Moon </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />
</head>
<body class="home blog logged-in admin-bar">
<body>
<div id="container">
<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png" alt="text" id="picture">
</caption></div>
<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
About Us<br>
Gallery<br>
Links In/Out<br>
</div>
<div id="content">
<div class="post-1 post type-post status-publish
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn’t ready yet. This site is not ONLY dedicated to
Sailor Moon but to all anime.</p>
<div id="commentbar">
<div class="left">left stuff</div>
<div class="right">right stuff</div></div>
</div>
<div id="footer"></div>
</body>
</html>
And here is the CSS to it:
/*
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description:
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/
body {background: url(http://pretty-senshi.com/images/sideone.png);
background-repeat:repeat-x;background-color: #fcefd8;
margin-top:0px;line-height: 20px;font-size: 10.5pt;
font-family: Tahoma;color:#998574;}
div#container {
width:100%;z-index: -1;}
.header {font-weight: bold;
font-size: 14px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:3px;
padding-left: 10px;
padding-bottom: 3px;
padding-top: 3px;
text-align:center;}
.headernav {font-weight: bold;
font-size: 13px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:20px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
text-align:right;}
.header:first-letter {color:#b970be;}
.headernav:first-letter {color:#b970be;}
div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}
#rightHalf {
background: url(http://pretty-senshi.com/images/sidetwo.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: -1;}
p {padding: 10px;z-index: 1;}
#wrapper {position:relative;
margin:0 auto;
width: 650px;
height:100%;}
#content {
float: right;
text-align:justify;margin-top:-80px;
width: 440px;z-index: 999;height:100%;}
#leftcolumn {position:absolute;
text-align:justify;
width: 200px;margin-top:-80px;
float: left;z-index: 999;height:100%;}
#commentbar {width:100%;padding:10px;}
.left {float:left; width:50%;}
.right {float:right; width:50%;text-align:right;}
A:link, A:visited, A:active {
color:#175f8b;
text-decoration:none;
text-transform:uppercase;
font-size: 9pt;
font-weight:bold;}
A:hover{
color:#d76b92;
text-decoration:none;
text-transform:uppercase;
cursor:default;
border-bottom: 1px solid #7d8f9a;
font-weight:bold;}
#date
{font:10pt "Century Gothic", sans-serif;
border-top:2px solid #d4aabc;
margin-top:10px;
color:#7ea558;
text-align:right;
font-weight:bold;
text-transform:uppercase;}
div.comment a {
width:100px
float:left;
height:22px;
background-color:#72a2c6;
text-align:center;
display:block;
letter-spacing:0px;
text-shadow:none;
text-transform:uppercase;
margin-top:-16px;
padding:3px;
opacity:.8;
filter:alpha(opacity=80);
filter:"alpha(opacity=80)";}
What can I add or change to make it align with the body text?
It is because you are using padding: 10px; in #commentbar, just remove it and you are good to go..and secondly just saw this that you are also using padding: 10px; for p in your CSS, so if you remove that too, both things will align exactly same
The padding is causing your mis-alignment...remove the padding in this CSS declaration and it will line up
#commentbar {
width: 100%;
/*padding: 10px;*/
}