CSS stylesheet applies on some properties but not all - html

I have a css stylesheet that successfully changes the background color of the page. However, the properties I have set on my and tags do not work.
{% block body %}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<form class='formclass' action='/' method='post'>
<div class='input'>
<input name='link' placeholder='Enter YouTube URL' type ='text'>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
{% endblock %}
and my css stylesheet
body
{
background-color: #252C3E;
text-align: 'center';
font-family: 'Courier'
}
.formclass
{
border-radius: 8px;
}
.input
{
font-size: 2em;
height: 90px;
width: 190px;
}
#title
{
color: white;
}
Why is the background color the only property being applied?

<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
Not sure exactly what you're going for, but I think this should help you get going in the right direction. It looks like you're trying to modify values that don't exist. You can round the edges of a border if there is no border. You have to create one for your form.

Related

Can't position button element

I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it
how can I place it to be there?
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
If you're able to change the HTML, here's a way:
Wrap your button inside another div:
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
Then set the margin-left on that wrapper:
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
Check this snippet for the result.
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question"></span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I just define a button-container class and use flex & justify:
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
.button-container {
display: flex;
justify-content: start;
margin-left: 30%;
}
<!DOCTYPE html>
<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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-container">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>

How do I align text with a form?

I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>&copy Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>&copy Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/

How to remove rounded corners of select box in Bootstrap?

I have written this code for creating a select box in bootstrap but the corners are coming rounded which i want to remove. How to do so? I tried a lot but could not find any solution for this. Please help me.
Here is the link of jsfiddle.net also
https://jsfiddle.net/ankitshri774/2redLfnc/7/
body {
background-color: #E8E8E8;
}
label {
float: left;
}
#main_container {
background-color: white;
margin-left: 10px;
padding-left: 13px;
margin-right: 10px;
padding-right: 13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container {
background-color: aqua;
}
.select-wrapper {
border: 1px solid black;
border-radius: 0px;
}
<!doctype html>
<html lang="en">
<head>
<title>Master Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="masterpage1.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper"><select name="category" class="form-control no-radius">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Add the below line to your CSS file:
.no-radius{
border-radius:0px !important;
}
Use code below(set !important to prevent override)
The border-radius is 4px because you set to select form-control class and it is bootstrap definition by default
.no-radius{
border-radius: unset!important;
}
See fiddle:https://jsfiddle.net/2redLfnc/29/
body{
background-color:#E8E8E8;
}
label{
float: left;
}
#main_container{
background-color: white;
margin-left: 10px;
padding-left:13px;
margin-right: 10px;
padding-right:13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container
{
background-color: aqua;
}
.select-wrapper{
border: 1px solid black;
border-radius: 0px;
}
.no-radius{
border-radius: unset!important;
}
<!doctype html>
<html lang="en">
<head>
<title>Master Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="masterpage1.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper"><select name="category" class="form-control no-radius">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that the form-control-class sets a radius of 4px. So you can't overwrite it with a different class on the same element (at least I would not know how to that).
So as a quick fix, I have defined a different class form-control-without-radiusand am using that in my updated fiddle.
.form-control-without-radius {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
However, this is a fundamental change of the entire layout, and I guess it would collide with many other UI-Components. So you may have to build your own custom Bootstrap. Some people find it easy to do with sass, I had more fun using the Bootstrap Theme Builder. And there are others as well. If you're not familiar enough with BT, this may sound like a scary idea - but my experience doing so has been only positive, so I'd go for it ;-)
Update: I saw the unset !important-idea in other posts, neat idea! That make the whole thing simpler, of course. Have updated my fiddle accordingly.
Use rounded-0 but in Bootstrap-4 only.
body {
background-color: #E8E8E8;
}
label {
float: left;
}
#main_container {
background-color: white;
margin-left: 10px;
padding-left: 13px;
margin-right: 10px;
padding-right: 13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container {
background-color: aqua;
}
.select-wrapper {
border: 1px solid black;
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper">
<select name="category" class="form-control rounded-0">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>

divs don't consume the full width in mobile browsers

I have simple webpage with header and footer.
This is roughly the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("HtmlHeadTags", false)
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#RenderSection("Analytics", false)
#RenderSection("NortonSafe", false)
</head>
<body>
<div id="page-wrapper">
<header>
<div id="header-navbar">
<div id="header-navbar-active">
<a id="websiteLogo" href="/">
<img src="/Content/ankol-logo.png" alt="logo" />
</a>
<div class="clearfix"></div>
</div>
</div>
</header>
<div id="body-content">
#RenderSection("scripts_body", required: false)
#RenderBody()
</div>
<footer>
<p id="footer-links">
about
terms
contact
</p>
<p id="footer-copyright">2017 ©</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
</body>
</html>
with following (relevant) css parts:
#header-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
color: #FFF;
font-family: Arial;
font-size: large;
position: fixed;
z-index: 1000;
margin-bottom: 20px;
border: 1px solid transparent;
}
#footer-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
color: #FFF;
font-family: Arial;
font-size: large;
margin-top: 70px;
padding-top: 5px;
padding-bottom: 5px;
}
Now, while in pc browser both header and consume 100% of the width of the window, in mobile browser the header and the footer consume only part of the width (I have Android, but checked it on several emulators on Edge and all show the same results)
The red box is the header and the green box is the footer.
What might be the reason for that?? can anyone refer me to a good tutorial about the differences between pc browser and mobile browser? thanks.
Try adding this style:
body {
width: 100%;
height: 100%;
margin: 0;
}

Flexbox sticky footer in safari on mobile device

I've used flexbox to stick a form to the bottom of a page. The submit button is supposed to be the footer of the page. This does work in Chrome and Safari, however in mobile Safari, when the textarea is in focus and the keyboard pops out, there is a white space under the button and you can scroll a little bit down.
Normal
When textarea is focused
How can I prevent this? This is the code I'm using
* {
margin: 0;
padding: 0;
}
.Site {
background-color: green;
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
.text-wrapper {
padding: 0 15px;
}
.text {
resize: none;
border: none;
border-radius: 0;
width: 100%;
height: 160px;
}
.footer {
background-color: red;
height: 60px;
width: 100%;
font-size: 16px;
border-style: none;
border-width: 0;
border-radius: 0;
-webkit-appearance: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="Site">
<div class="main">
</div>
<div>
<form class="footer-form" action="index.html" method="post">
<div class="text-wrapper">
<textarea class="text"></textarea>
</div>
<input class="footer" type="submit" name="" value="Submit">
</form>
</div>
</div>
</body>
</html>