I'm trying to move my text up so that it's not in the center of the page. I would like to move the text "GET YOUR LICENSE & PERMIT BONDS FAST & EASY" up a little bit on my split-screen. I tried top and bottom px but that isn't working. I just would like it to move up a little bit. Any help will be greatly appreciated!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input[type=text], select {
position: relative;
left: 140px;
width: 50%;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button: {
position: relative;
left: 140px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<button type="button">Click Me!</button>
</div>
</body>
</html>
You are having this issue because of the top: 50% style applied to the centered class style applied to the parent container of the <h1> element. I've applied the following changes to avoid this issue and allow you to apply the manual margin-top style.
.centered{
position: absolute;
/* I disabled the style below. */
/* top: 50%; */
/* Added the following style for spacing from above. */
margin-top: 125px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Change the margin-top value defined in the centered class style to set the position of the corresponding <h1> element. Below is the executable snippet.
body {
margin: 0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear: both;
}
.subnav class {
margin: 0;
position: relative;
}
.subnav>div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered{
position: absolute;
/* I disabled the style below. */
/* top: 50%; */
/* Added the following style for spacing from above. */
margin-top: 125px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input[type=text],
select {
position: relative;
left: 140px;
width: 50%;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button: {
position: relative;
left: 140px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Contact Us</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Sign In</a></li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light"><img src="universallogo.jpg" class="logo" />
<div class="container-fluid"><a class="subnav=brand" href="#"><a class="nav-link active" aria-current="page" href="#">Bonds</a></a><a class="nav-link active" aria-current="page" href="#">Report a Claim</a><a class="nav-link active" aria-current="page" href="#">About Us</a><a class="nav-link active" aria-current="page" href="#">Search</a></div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes. </p>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php"><select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select><br><br><select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select><br><br><select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select><br><br><select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select><br><br></form>
<form action="/action_page.php"><input type="text" id="date" name="startdate" placeholder="Effective Start Date"><br><br><input type="text" id="email" name="typeemail" placeholder=" Type E-mail"></form><button type="button">Click Me!</button>
</div>
</body>
</html>
Related
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
This question already has an answer here:
How to get images side by side
(1 answer)
Closed last year.
I'm trying to move my images over so they are at the center of the page. If you look at the image you can see that they are to the left of my page and they are overlapping each other. Right now they are overlapping each other so how do I get them to not overlap and that they are side by side in the center of the page below my text? Any help will be greatly appreciated!
body {
margin: 0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear: both;
}
.subnav class {
margin: 0;
position: relative;
}
.subnav>div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.flex-container {
display: flex;
}
.split {
width: 50%;
z-index: 1;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
}
h1 {
line-height: 1.2;
font-size: 35px;
bottom: 20px;
}
p1 {
font-size: 30;
}
.row {
display: flex;
justify-content: center;
left: 100px;
}
.row .column img {
width: 100px;
left: 50px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input,
select {
position: relative;
left: 140px;
width: 50%;
height: 30px;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #282C41;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 225px;
border-radius: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" </head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo" />
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="flex-container">
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p1>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p1>
</div>
<div class="row">
<div class="column">
<img src="Demotech.png" alt="rating" style="width:150%">
</div>
<div class="column">
<img src="USTreasury.png" alt="treas" style="width:40%">
</div>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<br><br>
<button class="button button4">GET QUOTE NOW</button>
<p> Don’t see your Bond? Click Here to Submit Request</p>
</div>
</div>
</body>
</html>
I would suggest having the width of your column class set to 50% since you have two items and then have them display inline or inline-block.
I hope that you are intended to center the images of 'row' div inside 'split left' div.
<div class="row">
<div class="column">
<img src="ss.png" alt="rating" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶1̶5̶0̶%̶"̶ />
</div>
<div class="column">
<img src="ss.png" alt="treas" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶4̶0̶%̶"̶ />
</div>
</div>
Remove those inline style for image.
.row {
display: flex;
justify-content: space-around;
j̶u̶s̶t̶i̶f̶y̶-̶c̶o̶n̶t̶e̶n̶t̶:̶ ̶c̶e̶n̶t̶e̶r̶;̶
l̶e̶f̶t̶:̶ ̶1̶0̶0̶p̶x̶;̶
}
.row .column img {
height: 100px; /*height you needed for the image*/
width: 100px; /*width you needed for the image*/
l̶e̶f̶t̶:̶ ̶5̶0̶p̶x̶;̶
}
Do the above modification in your styles.css. Hope now the image will not be overlapped.
I have this simple html page, with css it is working good except when I scroll the page down, the input form is above the header. I would like the header to always be above the content When I scroll.
Can anyone help ?
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
When an element has position: absolute or position: fixed, it happens that it can overlap with other elements. When it happens, the container that will be rendered above will be the one that has the higher z-index value. If the z-index isn't set, then it's the lowest possible.
For this reason, you can just add:
z-index: 1;
to your sticky class:
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
this is my button (this is my Scipt):
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats" >
<li class="seat">
<input type="button" id="1A" value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Fahrer'"; $query = mysql_query($sql,$connection); $result=mysql_fetch_assoc($query); echo $result['Name'];?>" />
</li>
<li class="seat">
<input type="button" id="1B" value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Beifahrer'"; $query = mysql_query($sql,$connection); $result=mysql_fetch_assoc($query); echo $result['Name'];?>" />
</li>
</ol>
</li>
I want to have the color stay red if the value is empty and green if there is any value ( value="" vs value="blasamplename" )
Is there a way?
EDIT:
I figured out that:
input[value=""]
{
background: #bada55;
}
Will make the text field greenish, is there a way to do that for the whole parent input?
Using the value atrribute which, I assume with be value=""
input[value=""] {
background: red;
}
input {
background: lightgreen;
}
ol {
list-style: none;
}
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats">
<li class="seat"> No Value
<input type="button" id="1A" value="" />
</li>
<li class="seat"> With Value
<input type="button" id="1B" value="I have a Value" />
</li>
</ol>
</li>
</ol>
Here is how you can do it.
Removed your php code. Link to Codepen: https://codepen.io/agamj474/pen/xamRZN
$(function(){
$('input[type="button"]').each(function(i, d){
var el = $(d);
var color = el.val() ? "red" :"green";
el.parent("li").css("background", color);
})
});
*, *:before, *:after
{
box-sizing: border-box;
}
html
{
font-size: 16px;
}
.car
{
margin: 20px auto;
max-width: 500px;
}
.caption
{
height: 250px;
position: relative;
overflow: hidden;
text-align: center;
border-bottom: 5px solid #d8d8d8;
}
.caption:before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 100%;
border-radius: 50%;
border-right: 5px solid #d8d8d8;
border-left: 5px solid #d8d8d8;
}
.caption h1
{
width: 60%;
margin: 100px auto 35px auto;
}
.fuselage
{
border-right: 5px solid #d8d8d8;
border-left: 5px solid #d8d8d8;
border-bottom: 5px solid #d8d8d8;
}
ol
{
list-style: none;
padding: 0;
margin: 0;
}
.seats
{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
input[type=button]
{
font-weight: bold;
color: #000000;
background-color: Transparent;
text-align: center;
border: none;
}
.seat,.seatlow:active
{
background: #bada55;
}
.seat , .seatlow
{
display: block;
position: relative;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0;
background: #F42536;
border-radius: 5px;
animation-duration: 300ms;
animation-fill-mode: both;
}
.seat:before, .seatlow:before
{
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat:hover , .seatlow:hover
{
cursor: pointer;
box-shadow: 0 0 0px 2px #5C6AFF;
}
.seatlow:nth-child(1)
{
margin-right: 12.5%;
}
.seatlow:nth-child(2)
{
margin-right: 12.5%;
}
.seat:nth-child(1)
{
margin-right: 50%;
}
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autoreservierung</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="includes/style.css">
<script type="text/javascript">
</script>
</head>
<body>
<div class="car">
<div class="caption">
<h1>Please select a seat</h1>
</div>
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats" >
<li class="seat">
<input type="button" id="1A" value="" />
</li>
<li class="seat">
<input type="button" id="1B" value="" />
</li>
</ol>
</li>
<br/><br/>
<li class="row 2">
<ol class="seats" >
<li class="seatlow">
<input type="button" id="2A" value="xyz" />
</li>
<li class="seatlow">
<input type="button" id="2B" value="xyz"/>
</li>
<li class="seatlow">
<input type="button" id="2C" value=""/>
</li>
</ol>
</li>
</ol>
</div>
<script src="includes/index.js"></script>
</body>
</html>
I have these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.
Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>