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>
Related
I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
image image2I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
Any help is greatly appreciated. Thanks!
body {
font-family: 'Poppins';
overflow: hidden;
}
.navbar-inverse {
background-color: #fff !important;
border-color: #ffffff !important;
border-bottom: 1px solid #979797 !important;
}
#media (min-width: 768px){
.navbar {
border-radius: 0px !important;
}
}
.color-1{
color: #FCB900;
}
.sidebar{
color: #FCB900;
font-size: 21px;
float: left;
padding: 10px 5px;
cursor: pointer;
margin: 0 10px;
}
.logo a{
color: #424242 !important;
}
.logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
font-weight: 600;
}
.logo-a{
padding: 0 !important;
font-size: 13px !important;
}
/* Sidebar CSS */
.sidebar-logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 10px 20px;
font-size: 14px;
width: 50%;
margin-left: 10%;
text-align: center;
font-weight: 600;
}
.sidebar-title{
margin-left: 10%;
font-size: 12px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fcb900;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 12px 8px 10px 25px;
text-decoration: none;
font-size: 14px;
color: #101010;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #101010;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 15px;
font-size: 25px;
margin-left: 50px;
}
.cart-icon{
font-size: 16px;
}
/*------------------------Profile Account----------------------------*/
.widget-author {
margin-bottom: 58px;
}
.author-card {
position: relative;
padding-bottom: 48px;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}
.author-card .author-card-cover {
position: relative;
width: 100%;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.author-card .author-card-cover::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5;
}
.author-card .author-card-cover > .btn {
position: absolute;
top: 12px;
right: 12px;
padding: 0 10px;
}
.author-card .author-card-profile {
display: table;
position: relative;
margin-top: -85px;
padding-right: 15px;
padding-bottom: 16px;
padding-left: 20px;
z-index: 5;
}
.author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
display: table-cell;
vertical-align: middle;
}
.author-card .author-card-profile .author-card-avatar {
width: 85px;
border-radius: 50%;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
overflow: hidden;
}
.author-card .author-card-profile .author-card-avatar > img {
display: block;
width: 100%;
}
.author-card .author-card-profile .author-card-details {
padding-top: 50px;
padding-left: 15px;
}
.author-card .author-card-profile .author-card-name {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
}
.author-card .author-card-profile .author-card-position {
display: block;
color: #8c8c8c;
font-size: 12px;
font-weight: 600;
}
.author-card .author-card-info {
margin-bottom: 0;
padding: 0 25px;
font-size: 13px;
}
.author-card .author-card-social-bar-wrap {
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
.author-card .author-card-social-bar-wrap .author-card-social-bar {
display: table;
margin: auto;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
}
.btn-style-1.btn-white {
background-color: #fff;
}
.list-group-item i {
display: inline-block;
margin-top: -1px;
margin-right: 8px;
font-size: 1.2em;
vertical-align: middle;
}
.mr-1, .mx-1 {
margin-right: .25rem !important;
}
.list-group-item.active:not(.disabled) {
border-color: #e7e7e7;
background: #fff;
color: #ac32e4;
cursor: default;
pointer-events: none;
}
.list-group-flush:last-child .list-group-item:last-child {
border-bottom: 0;
}
.list-group-flush .list-group-item {
border-right: 0 !important;
border-left: 0 !important;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
a.list-group-item, .list-group-item-action {
color: #404040;
font-weight: 600;
}
.list-group-item {
padding-top: 16px;
padding-bottom: 16px;
-webkit-transition: all .3s;
transition: all .3s;
border: 1px solid #e7e7e7 !important;
border-radius: 0 !important;
color: #404040;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.125);
}
.list-group-item.active:not(.disabled)::before {
background-color: #ac32e4;
}
.list-group-item::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: transparent;
content: '';
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 15px;
}
}
#exTab1 .tab-content {
color : #FCB900;
background-color: #fff;
padding : 5px 15px;
}
#exTab2 h3 {
color : #FCB900;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* Sidebar CSS */
.navbar-inverse .navbar-nav>li>a:hover {
color: #333;
}
.banner{
background-image: url('img/banner.jpg');
background-position: center center;
background-size: 100%;
margin: 0;
width: 100%;
height: 250px;
}
#media (min-width: 320px) and (max-width: 600px) {
.logo{
border: 1px solid #fff;
}
.head{
border-bottom: 0px solid #fff !important;
}
.header-right{
display: none !important;
}
.logo-media{
background: white;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
width: 50%;
text-align: center;
font-weight: 600;
}
.no-margin{
margin-top: 0px !important;
margin-bottom: 0px;
}
.icon{
position: absolute !important;
top: 11px;
right: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travelling | Account Settings </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">
<link rel="stylesheet" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-inverse head">
<div class="container-fluid">
<span style="" onclick="openNav()" class="sidebar">☰</span>
<div class="navbar-header logo">
<a class="logo-media" href="#">Logo</a>
</div>
<div id="mySidenav" class="sidenav">
×
<div class="sidebar-logo">
<a class="logo-a" href="#">Logo</a>
</div>
<span class="sidebar-title">My Account</span>
<span class="glyphicon glyphicon-home p-r-10"></span> Home
<span class="glyphicon glyphicon-road p-r-10"></span> My Booking
<span class="glyphicon glyphicon-envelope p-r-10"></span> Messages
<span class="glyphicon glyphicon-user p-r-10"></span> Account
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Settings</span>
Language
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Information</span>
Customer Service
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login
<span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up!
</div>
<ul class="nav navbar-nav navbar-right no-margin">
<li class="icon"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></li>
<li class="header-right">Login</li>
<li class="header-right">Sign Up</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-4 pb-5">
<!-- Account Sidebar-->
<div class="author-card pb-3">
<div class="author-card-cover">
<!-- <a class="btn btn-style-1 btn-white btn-sm" href="#" data-toggle="tooltip" title="" data-original-title="You currently have 290 Reward points to spend"><i class="fa fa-award text-md"></i> 290 points</a> --></div>
<div class="author-card-profile">
<div class="author-card-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</div>
<div class="author-card-details">
<h5 class="author-card-name text-lg">Daniel Adams</h5><span class="author-card-position">Joined February 06, 2017</span>
</div>
</div>
</div>
<div class="wizard">
<nav class="list-group list-group-flush">
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Account Setting</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">My Booking</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-tag mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Wish List</div>
</div>
</div>
</a>
</nav>
</div>
</div>
<!-- Profile Settings-->
<div class="col-lg-8 pb-5">
<!-- <form class="row">
<div class="col-md-6">
<div class="form-group">
<label for="account-fn">First Name</label>
<input class="form-control" type="text" id="account-fn" value="Daniel" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-ln">Last Name</label>
<input class="form-control" type="text" id="account-ln" value="Adams" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-email">E-mail Address</label>
<input class="form-control" type="email" id="account-email" value="daniel.adams#example.com" disabled="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-phone">Phone Number</label>
<input class="form-control" type="text" id="account-phone" value="+7 (805) 348 95 72" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-pass">New Password</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-confirm-pass">Confirm Password</label>
<input class="form-control" type="password" id="account-confirm-pass">
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="custom-control custom-checkbox d-block">
<input class="custom-control-input" type="checkbox" id="subscribe_me" checked="">
<label class="custom-control-label" for="subscribe_me">Subscribe me to Newsletter</label>
</div>
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form> -->
<h1>Account Settings </h1>
<div id="exTab1">
<ul class="nav nav-pills">
<li>
Personal Information
</li>
<li>Travel
</li>
<li>Security
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane" id="1a">
<form class="row">
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="sel1" placeholder="Gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Passport No.">Passport No.</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Date of Birth">Date of Birth</label>
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Country">Country</label>
<select class="selectpicker countrypicker form-control" data-flag="true" ></select>
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h4> Change Password </h4>
<form>
<div class="form-group">
<label for="email" style="color:#2EC4B6">Current Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Current Password">
</div>
<div class="form-group">
<label for="email" style="color:#2EC4B6">New Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<button type="submit" class="btn" style="background: #FCB900; color:#fff;">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Maybe you should consider something like this! :)
.author-card-shape {
width: 85px;
height: 85px;
border-radius: 50%;
overflow: hidden;
}
.author-card-img {
max-width: 100%;
height: auto;
}
<figure class="author-card-shape">
<img class="author-card-img" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</figure>
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've built a modified tab-chart. When you click on the tabs on the left hand side, they switch the content on the right. The only problem is the main content div on the right, even with a width of 100% is only going about a third of the way across the screen. Any ideas why?
* {
padding: 0;
margin: 0;
}
#container {
display: block;
height: 100%;
width: 100%;
}
#topBar1 {
height: 55px;
width: 100%;
background-color: #FAFAFA;
border-bottom: 1px solid #d9d9d9;
display: block;
position: relative;
z-index: 2;
}
#topBar2 {
height: 22px;
width: 100%;
background-color: #FAFAFA;
display: block;
border-radius: 11%;
box-shadow: 0 6px 10px -2.5px #ccc;
position: relative;
z-index: 2;
transition: all;
}
main {
display: block;
background-color: #EEEEEE;
height: 1000px;
width: 100%;
position: relative;
z-index: 1;
top: -5px;
}
nav {
height: 100%;
width: 261px;
}
nav::after {
height: 100%;
width: 1px;
content: "";
display: block;
background: #d9d9d9;
position: relative;
left: 260px;
top: -1000px;
}
input[type=radio] {
display: none;
}
.tabs {
list-style: none;
position: relative;
//border: 1px solid #ccc;
width: 260px;
height: 100%;
top: 15px;
}
.tabs li {
font-family: Roboto, sans-serif;
font-size: 13px;
padding: 10px 20px 20px 60px;
color: #222222;
//border: 1px solid #ccc;
background-color: none;
transition: all .2s ease-in-out;
}
.tabs li:hover {
background-color: #d9d9d9;
}
.tabs li:active {
background-color: #d9d9d9;
}
.tabs label {
display: block;
position: relative;
cursor: pointer;
top: 6px;
}
.tab-content {
position: absolute;
display: none;
z-index: 2;
height: 100%;
width: 100%;
left: 261px;
top: 0;
border: 1px solid #ccc;
}
[id^=tab]:checked~[class^=tab-content] {
display: block;
}
.contentItem {
//border: 1px solid #ccc;
height: 38px;
width: 200px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 10px;
background-color: #FAFAFA;
box-shadow: .5px 2px 6px #ccc;
float: left;
}
.documentIcon {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 3px;
margin-left: 5px;
margin-right: 10px;
float: left;
}
.contentText {
font-family: Roboto, sans-serif;
font-size: 12px;
color: #222222;
line-height: 3;
}
<div id="container">
<div id="topBar1"></div>
<!--topBar-->
<div id="topBar2"></div>
<!--topBar2-->
<main>
<nav>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked />
<label for="tab-1">Staff Directory</label>
<div class="tab-content" id="tab-content-1">
<div class="contentItem" id="ci1">
<img src="" alt="" class="documentIcon" />
<p class="contentText">Telephone Extension List</p>
</div>
</div>
<!--tab-content-->
</li>
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">How-To Guides</label>
<div class="tab-content" id="tab-content-2">
<p>Put Tab 2 Content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">OECTA Calendar</label>
<div class="tab-content" id="tab-content3">
<p>Put tab content 3 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-4" />
<label for="tab-4">Finance</label>
<div class="tab-content" id="tab-content-4">
<p>Put tab content for 4 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-5" />
<label for="tab-5">Directories and Contact Lists</label>
<div class="tab-content" id="tab-content-5">
<p>Put Tab 5 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-6" />
<label for="tab-6">Upcoming Meetings</label>
<div class="tab-content" id="tab-content-6">
<p>Put tab 6 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-7" />
<label for="tab-7">Manuals and Handbooks</label>
<div class="tab-content" id="tab-content-7">
<p>Tab Content 7</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-8" />
<label for="tab-8">Information and Forms</label>
<div class="tab-content" id="tab-content-8">
<p>Tab Content 8</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-9" />
<label for="tab-9">Visitor Information</label>
<div class="tab-content" id="tab-content-9">
<p>Tab Content 9</p>
</div>
</li>
</ul>
</nav>
</main>
</div>
You looking for something like this? https://jsfiddle.net/csgn6051/9/
.tabs
{
width: calc(100% - 270px);
}