Why can't I scroll on my webpage?

Why can't I scroll on my webpage? - javascript

I am on a Chromebook and I can't scroll on my web page. I don't have any other device to test it on so maybe it's just the Chromebook. My code is below. Click the contact me button that's where the problem is. You might have to copy and paste the code in your editor because the preview on SO is small.
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}
body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
ABOUT ME<br/><br/>
CONTACT ME<br/><br/>
MY PROJECTS<br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>

You need to add overflow-y: scroll to your #main rule. The fixed position is making it non-scrollable:
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}
body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
overflow-y: scroll;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
ABOUT ME<br/><br/>
CONTACT ME<br/><br/>
MY PROJECTS<br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>

Related

Cannot add click event to dynamically appended list item in jquery

I tried what this question's answer says. This is my code:
$("document").ready(function() {
$("#add-receiver").on("click", function() {
$("#userlist").append("<li class=\"userlist-item\">user 1</li>");
});
$("#userlist li").on("click", '.userlist-item', function() {
alert($(this).text());
});
});
.top-heading {
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
.input-boxes {
position: relative;
left: 35%;
top: 20px;
}
.button {
position: relative;
left: 30px;
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
#userlist {
list-style-type: none;
width: 30%;
padding: 0;
margin: 0;
}
#userlist li {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 8px;
text-decoration: none;
font-size: 14px;
color: black;
display: block;
}
#userlist li:hover:not(.header) {
background-color: #eee;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h3 class="top-heading">Welcome
<%= data.username%>
</h3>
</div>
<div class="container">
<div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
<ul id="userlist">
</ul>
</div>
<div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
</div>
</div>
</body>
</html>
First click on add receiver button. An item will be appended to userlist. As you click on this item, an alert should apper with the text of clicked item.
But my code doesn't work as expected. I couldn't spot any error. Please help me to get this thing working.
Thank you!

You need to remove li from the selector when you delegate because your second parameter is now the object that is clicked
$("#userlist").on("click", '.userlist-item', function() {
console.log($(this).text());
});
$("document").ready(function() {
$("#add-receiver").on("click", function() {
$("#userlist").append("<li class=\"userlist-item\">user 1</li>");
});
$("#userlist").on("click", '.userlist-item', function() {
console.log($(this).text());
});
});
.top-heading {
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
.input-boxes {
position: relative;
left: 35%;
top: 20px;
}
.button {
position: relative;
left: 30px;
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
#userlist {
list-style-type: none;
width: 30%;
padding: 0;
margin: 0;
}
#userlist li {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 8px;
text-decoration: none;
font-size: 14px;
color: black;
display: block;
}
#userlist li:hover:not(.header) {
background-color: #eee;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h3 class="top-heading">Welcome
<%= data.username%>
</h3>
</div>
<div class="container">
<div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
<ul id="userlist">
</ul>
</div>
<div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
</div>
</div>
</body>
</html>

Page is not scrolling on div overflow

I have a static page with 1 HTML and 1 CSS file.
When I test the page and type into the multiline textarea (last one on the page) until the page should overflow, it doesn't. The div with the id of 'centered' has a height of 'fit-content' and inspecting it shows that it does correcty fit the content and does overflow, but the browser doesn't show me a scrollbar. Also scrollBy doesn't work. And it isn't only one browser (Chrome desktop, android; Firefox desktop, android).
Here is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formr.io</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="index.css">
<script defer>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".long-answer").forEach((el) => {
let offset = el.offsetHeight - el.clientHeight;
el.addEventListener('input', function (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px';
});
});
});
</script>
</head>
<body>
<div id="centered">
<!-- Header -->
<div class="question-container">
<div class="form-header-color-bar"></div>
<div class="form-header-title">Тест върху "Неразделни"</div>
<div class="form-header-desc">Упражнителен тест върху "Неразделни"</div>
</div>
<br>
<!-- Questions -->
<div class="question-container">
<div class="question-title">Име и клас <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Какво мислите за решението на Иво? Прекалил ли е? <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Теза: "Той ме прегърнал с клони, аз съм в него вейки свряла." <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<textarea placeholder="Вашия отговор." class="long-answer"></textarea>
</div>
</div>
</div>
</body>
</html>
And here is index.css:
:root {
--main-color: #d08aff;
/*--background-color: #f8edff;*/
--background-color: rgb(240, 235, 248);
}
body {
background-color: var(--background-color);
margin: 0px;
}
#centered {
margin-top: 15px;
position: fixed;
transform: translate(-50%, 0%);
left: 50%;
width: 90%;
height: fit-content;
min-width: 100px;
max-width: 600px;
}
.question-container {
background-color: white;
padding: 0px 0px 15px 0px;
border-radius: 13px;
border: 1px solid #e6e3e8;
width: 100%;
height: fit-content;
}
.question-container .form-header-title {
font-family: 'Source Sans Pro', sans-serif;
word-break: break-all;
font-size: 24pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
}
.question-container .form-header-desc {
font-family: 'Source Sans Pro', sans-serif;
font-size: 10.5pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .form-header-color-bar {
margin: 0px;
width: 100%;
height: 15px;
background-color: var(--main-color);
border-radius: 13px 13px 0px 0px;
}
.question-container .question-title {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .text-answer-container .short-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
height: 25px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
}
.question-container .text-answer-container .short-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
.text-answer-container {
margin-left: 15px;
margin-right: 15px;
}
.question-container .text-answer-container .long-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
resize: none;
overflow: hidden;
}
.question-container .text-answer-container .long-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
Thanks for your time.

If the div is fixed it can't scroll.
Try this:
#centered {
position: absolute;
}
instead of
#centered {
position: fixed;
}

How do I add a video instead of a photo on top wrapper?

I would like to use a video on my top wrapper place instead of using a photo as background img.
I am really beginner of html5 & css3, so I am really sorry if my question isn't clear.
That would be really appreciate if someone could teach me how I can code to add a background video not as full screen type background, only for my top wrapper.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
CSS:
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(background-photo.jpg);
background-size: cover;
color: white;
text-align: center;
opacity: 0.8;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
}
.top-wrapper p {
font-size: 25px;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
z-index: 10;
}
.logo {
width: 124px;
margin-top: 20px;
}
.header-left {
float: left;
}
.header-right {
float: right;
transition: all 0.5s;
}
.header-right a {
line-height: 65px;
padding: 0 25px;
color: white;
display: block;
float: right;
}
.about-me {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
}
.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}
.heading h1 {
font-weight: normal;
}
.profile {
float: left;
width: 25%;
}
.lesson-icon {
position: relative;
}
.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.txt-contents {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
}
.heading h3 {
font-weight: normal;
}
.message-wrapper {
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
}
.message {
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
}
.message:active {
position: relative;
top: 7px;
box-shadow: none;
}
.bottom-btn-list {
text-align: center;
}
footer p {
color: #b3aeb5;
font-size: 12px;
margin: auto;
width: 50%;
padding: 30px;
text-align: center;
}
footer {
padding-top: 30px;
text-align: center;
background-color: #333631
}
.my-skyblue {
color: skyblue;
}
.my-white {
color: white;
}

It's pretty simple. You can add video from following methods.
<video src="/myvideo.mp4"></video>
<video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>

Add a video element inside top-wrapper, see the styling below
.top-wrapper {
position:relative;
background:rgba(255,0,0,0.1);
}
.top-wrapper .video {
position:absolute;
width:100%;
height:100%;
background:green;
z-index:-1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video class="video" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Storforsen_video_12.webm" autoplay></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>

Here is a thought, you can try that:
you can use video tag to import your video file
set style of video, like:
video {
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
}

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>

master page does not load css file

so i referenced css file in master page like this:
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
and it actually shows in visual studio in design view, but for some reason does not show in web browser. why is that? btw the css file and masterpage and the image folder are all in the root directory.
css file:
*
{
padding: 0em;
margin: 0em;
}
body
{
background:url('images/bg1.jpg');
padding: 30px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img
{
border: solid 1px #6F5230;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.divider1
{
position: relative;
background: #fff url('images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}
.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('images/bg2.jpg') repeat-x;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
width: 82%;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
height: 8.0em;
background: #2B2B2B url('images/topbg.gif') repeat-x;
margin-bottom: 2px;
}
#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#search
{
position: absolute;
top: 5.5em;
right: 2.0em;
padding-right: 0.0em;
}
#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}
#search input.submit
{
background: #939B00 url('images/buttonbg.gif') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}
#headerpic
{
position: relative;
height: 200px;
background: #fff url('images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}
#menu
{
position: relative;
background: #7F8400 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}
#menu ul
{
position: absolute;
top: 1.1em;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover
{
text-decoration: underline;
}
#menu ul li a.active
{
background: #7F8400 url('images/menuactive.gif') repeat-x top left;
}
#menubottom
{
background: #fff url('images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Project3.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Zahra Moradi</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div id="upbg">
</div>
<div id="outer">
<div id="header">
<div id="headercontent">
<h1>
E-Library</h1>
</div>
</div>
<form method="post" action="">
<div id="search">
<input type="text" class="text" maxlength="64" name="keywords" />
<input type="submit" class="submit" value="Search" />
</div>
</form>
<div id="headerpic">
</div>
<div id="menu">
<!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Library</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="menubottom">
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<div class="left">
© 2015 Zahra Moradi. All rights reserved.</div>
<div class="right">
Design by NodeThirtyThree Design</div>
</div>
</div>
</form>
</body>
</html>
I've already tried other solutions posted on similar questions but didn't work for me. like adding runat="server" and so on...

Same suggestion as #Tyr. Try loading the CSS file as a web link instead of a local file. For example:
<link rel="stylesheet" type="text/css" href="https://example.com/website/css/default.css"/>
That should work. If it doesn't, use the developer tools on your browser (Google Chrome is the best). In Chrome, right click anywhere on the page and click 'Inspect Element'. Are there any errors coming up to do with your CSS file being displayed on the bar on the right? If there is, what are they?

We Keep Coding

JavaScript is the programming language of the Web.

Why can't I scroll on my webpage? - javascript

Related

Cannot add click event to dynamically appended list item in jquery

Page is not scrolling on div overflow

How do I add a video instead of a photo on top wrapper?

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

master page does not load css file

Categories

Resources