At #media only screen and (max-width: 991px) the content gets aligned centered. The eye icon which is positioned absolute gets way off. On large devices it is ok but col-sm-12 and below its position has problem.
The reason why i positioned it absolute is that i want the icon to not move. In the original code there is a functionality to hide and show password and the icon moved based on the length of the text.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
/* top: 78px; */
left: 300px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
left: 600px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars">****************************</span>
<i class="x fa fa-eye" aria-hidden="true"></i>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
When position absolute, make sure you have a good relative.
I placed your eye in the password xxxx field. And made that relative.
No media query is needed then.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.relative {
position: relative
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
right: -25px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
right: -25px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars relative">****************************<i class="x fa fa-eye" aria-hidden="true"></i></span>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have been trying to adapt the solution from the question Active link border/underline asked by me.
I tried to adopt the same solution in the bootstrap navbar but there are some other effects with that solution.
Like I changed the padding of nav.navbar to 15px 20px 0px, the actual problem was solved whereas the hover and the alignment of the icon moved slightly down from the center.
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
* {
margin: 0;
padding: 0;
}
nav.navbar {
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option.active:hover {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
</div>
</nav>
The effect I wanted to have while hovering the icon.
Updated questions to reflect what I also want:
You can add a "fake" bottom border same color as the background of navbar to the icons.
Like so -
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-items: center;
padding: 0px 20px 0px; /* REMOVED TOP PADDING */
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
/* REMOVED BORDER */
/*border-bottom: 1px solid #f8f9fa;*/ /* the fake border */
/*border-bottom-width: 3px;*/ /* fake border width */
/* ADDED BOX SHADOW */
box-shadow: inset 0 -3px #f8f9fa;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option.active:hover {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</nav>
Update: Changed border-bottom in header_options property to box-shadow.
2nd Update: removed top padding from nav.navbar to vertically center icons.
You could use inner box-shadow.
.header__option.active,
.header__option:hover {
color: #1877f2;
box-shadow: inset 0 -3px #1877f2;
/* border-bottom: 1px solid #1877f2; */
border-bottom-width: 3px;
background-color: #f8f9fa;
}
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option:hover {
color: #1877f2;
box-shadow: inset 0 -3px #1877f2;
/* border-bottom: 1px solid #1877f2; */
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
</div>
</nav>
I want a space between 1st and 2nd record.
I was playing around CSS but no luck so far. Please review my code below and suggest me the way to do.
I am looking for output like below image
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="container col-md-12">
<table style="background-color: rosybrown; border:dashed;">
#foreach (var item in Model)
{
<div class="card">
<div class="card-avatar col-md-2">
<img src="~/Content/images/logo3.png" style="width:100%" />
</div>
<div class="card-details">
<div class="name">#Html.DisplayFor(modelItem => item.DoctorName)</div>
<div class="degree">BDS, MDS - Oral Medicine and Radiology</div>
<div class="exp">14 years experience overall</div>
<div class="occupation">#Html.DisplayFor(modelItem => item.Specialization)</div>
<div class="like">96%</div>
<div class="feedback">120</div>
<div class="location">Hamilton, New Zealand</div>
<div class="fee">100$</div>
<div class="works">32 Smiles Multispeciality Dental Clinic and 15 more clinics</div>
<div class="available">Today</div>
<div class="card-avatar col-md-2">
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
</div>
<div class="card-about">
<div class="item">
<span class="value">Artificial Teeth</span>
<span class="label">Conservative</span>
</div>
<div class="item">
<span class="viewservice">40 services </span>
<span class="label">Weight</span>
</div>
<div class="item">
<span class="btn active">View Profile</span>
<span class="btn active">Contact Clinic</span>
<span class="btn active">Booking Appointment</span>
</div>
</div>
</div>
</div>
}
</table></div>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
{
box-sizing: border-box;
}
:root {
--background: white;
--primary: #ff1ead;
--secondary: #1effc3;
--card-size: 300px;
}
.card {
width: calc(var(--card-size) * 1.586);
height: var(--card-size);
border-radius: 0.75rem;
box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
background: darkslateblue;
display: grid;
grid-template-columns: 40% auto;
color: white;
align-items: center;
will-change: transform;
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
{
transform: scale(1.1);
box-shadow: 0 32px 80px 14px rgba(0,0,0,0.36), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.card-details {
padding: 1rem;
}
.name {
font-size: 1.25rem;
}
.occupation {
font-weight: 600;
color: var(--primary);
}
.card-avatar {
display: grid;
place-items: center;
}
svg {
fill: white;
width: 65%;
}
.card-about {
margin-top: 1rem;
display: grid;
grid-auto-flow: column;
}
.item {
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
.value
{
font-size: 1rem;
}
.label {
margin-top: 0.15rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
}
}
.skills {
display: flex;
flex-direction: column;
margin-top: 0.75rem;
.label
{
font-size: 1rem;
font-weight: 600;
color: var(--primary);
}
.value {
margin-top: 0.15rem;
font-size: 0.75rem;
line-height: 1.25rem;
}
}
</style>
A few tips to use.
Text always should be written inside <p> or at least in <span>
Spaces between cards can be created with margin
White spaces in general are made using padding and margin
Don't duplicate selectors in css
Wrap each section of your content in <div> for grouping
Structure your html to keep proper elements flow
Use this Guide to learn how to use grid
It took me too long to create the following snippet, adjust styles based on your liking.
:root {
--background: white;
--primary: #ff1ead;
--secondary: #1effc3;
--card-size: 350px;
}
.card {
margin: 10px;
width: calc(var(--card-size) * 1.586);
height: var(--card-size);
border-radius: 0.75rem;
box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
background: darkslateblue;
display: grid;
grid-template-columns: 10% auto 20%;
grid-template-rows: auto 20%;
color: white;
align-items: center;
will-change: transform;
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
.card-details {
padding: 1rem;
}
p {
margin: 0;
}
.white_space {
margin-top: 20px;
}
.name {
margin: 1rem 0;
font-size: 1.25rem;
}
.occupation {
font-weight: 600;
color: var(--primary);
}
.card-about {
margin-top: 1rem;
display: grid;
}
.item {
background-color: #bbb;
margin: 0 0.1rem;
padding: 7px;
border-radius: 3px;
}
.item.value {
font-size: 0.7rem;
}
.item.label {
margin-top: 0.15rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--primary);
}
.card-btns {
grid-column-start: 2;
grid-column-end: end;
grid-row-start: 2;
grid-row-end: end;
justify-self: end;
margin-right: 20px;
}
.card-btns .btn {
padding: 5px;
border-radius: 5px;
border: 1px solid white;
background-color: var(--primary);
}
<div class="container">
<div class="card">
<div class="card-avatar">
<img src="~/Content/images/logo3.png" style="width:100%" />
</div>
<div class="card-details">
<div class="details">
<h4 class="name">DoctorName</h4>
<p class="degree">BDS, MDS - Oral Medicine and Radiology</p>
<p class="exp">14 years experience overall</p>
<p class="occupation">Specialization</p>
<p class="works white_space">
32 Smiles Multispeciality Dental Clinic and 15 more clinics
</p>
</div>
<div class="card-avatar">
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
<img src="~/Content/images/logo3.png" style="width:100%" />
</div>
<div class="card-about">
<div class="tags">
<span class="item value">Artificial Teeth</span>
<span class="item label">Conservative</span>
<span class="item label">Weight</span>
</div>
<div class="viewservice white_space">40 services </div>
</div>
</div>
<div class="card-side">
<p class="like">96%</p>
<p class="feedback">120</p>
<p class="location">Hamilton, New Zealand</p>
<p class="fee">100$</p>
<p class="available">Today</p>
</div>
<div class="card-btns">
<span class="btn active">View Profile</span>
<span class="btn active">Contact Clinic</span>
<span class="btn active">Booking Appointment</span>
</div>
</div>
</div>
If I run the code without bootstraps container and rows etc.. it does work.
But if i run the code like this snippet inside container etc. the ahref's are not working!
Unless i remove the z-index, but i want the menu to look like it is now.
This have been bugging me for a couple of hours now, and i need someone with a different way of "look" at this problem.
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
z-index: -1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
<div id="somename">
somelink
somelink
</div>
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Your id somenname is inside of your outer id topHeader.
You simply need to use z-index on 2 separate div in your case
Separate topheader and somename
Now overlap topheader on somename by following code:
#topheader{
z-index:2;
position:relative;
}
#somename{
z-index:1;
}
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
margin: -10px 5px 0px 5px;
z-index: 1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
z-index: 2;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
</div>
<div id="somename">
somelink
somelink
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
How do I add a square onto a border between a div and an image? The square will be position on the left or the right depending on the position of the text (if the text is aligned right, the square will be bottom left; if the text is aligned left, the square will be top right).
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder {
border-bottom: 5px solid #000;
}
.topborder {
border-top: 5px solid #000;
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
You can achieve this using pseudoelements.
You can adjust the position as you need. I've used calc() here to take into account the width of the border.
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder:after,
.topborder:before {
content: '';
width: 3em;
height: 3em;
background: black;
transform: rotate(45deg);
position: absolute;
}
.bottomborder {
border-bottom: 5px solid #000;
position: relative;
}
.bottomborder:after {
left: 3em;
bottom: calc(-1.5em - 3px);
}
.topborder {
border-top: 5px solid #000;
position: relative;
}
.topborder:before {
right: 3em;
top: calc(-1.5em - 3px);
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
I have a problem with my css and html code.
When I open the page normally it works, but when I change screen resolution, the .content-body class (the light blue with diagonal) does not fulfill the entire page width (there is that pink column). Could anyone help? Thank you.
That's the whole css code:
html {
width: 100%;
}
body {
background-color: #ffe1d9;
width: inherit;
overflow-x: hidden;
}
.top-header {
width: 100%;
}
.container {
width: 100% - 25px;
}
.content {
background-color: #ffe1d9;
width: 100%;
}
.header {
padding: 40px;
width: 50%;
float: left;
}
.presentation-header {
//position: relative;
////padding-top: 0;
//top: 150px;
//z-index: 999;
max-width: 1000px;
//margin: 0 auto;
}
li.header-menu-item {
padding: 15px;
font-size: 16px;
a {
color: #666167;
text-decoration: none;
&:hover {
color: #111111;
font-weight: 400;
box-shadow: #111111;
}
span {
&:hover {
border-bottom: 1px solid #60629d;
}
}
}
}
.active {
border-bottom: 1px solid #60629d;
}
.header-menu {
display: block;
padding-top: 70px;
text-align: right;
}
#slogan {
width: 50%;
float: left;
}
#slogan-img {
width: 50%;
float: left;
}
#button {
background: #1d1c24;
padding: 15.5px 51px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: white;
font-size: 12px;
font-family: SansSerif, Serif;
text-decoration: none;
vertical-align: middle;
font-weight: bold;
}
#button:active {
background: #000000;
}
#sign-in-button, #submit {
background: white;
}
#sign-in-button, #next {
padding: 20px 20px 20px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#next {
background: #ffe1d9;
margin-left: 150px;
width: 50%;
}
#submit {
background-color: #ffe1d9;
padding: 15px 20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
}
#sign-in-button:active, #submit:active {
background: #ffe6e3;
}
select {
padding: 15px 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 0 solid;
color: black;
font-size: 14px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #e9f3f5;
background-position: 100%-15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 7.0rem;
line-height: 100%;
letter-spacing: -.5rem;
margin: initial;
}
//.padding {
//padding-top: 30px;
//padding-bottom: 50px;
//}
/*Line bellow Features*/
.span-decoration {
border-bottom: 5px solid #caafaf;
width: 30px;
margin: 10px 0 20px 0;
}
/*Draws a diagonal line in a box*/
.diagonal-line-box {
position: relative;
width: 100%;
height: 200px;
clear: both;
//background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( left top, #ffe1d9 49.75%, #989cdb 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%); /* Standard syntax */
}
/*Draws a diagonal line in a box*/
.second_diagonal-line-box {
position: relative;
width: 100%;
height: 300px;
//top: -150px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient( right top, #989cdb 49.75%, #60629d 50.25%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #989cdb 49.75%, #60629d 50.25%); /* Standard syntax */
}
//html, .content-body {
// width: 100%;
//}
.content-body {
position: relative;
width: 100%;
background-color: #989cdb;
margin: 0 auto;
//left: 50px;
}
#slogan-image {
}
section {
.cashflow {
width: 70%;
float: left;
//margin: -60px -80px;
margin-top: -60px;
margin-left: -90px;
//margin-right: -150px;
}
.cashflow-text {
width: 30%;
float: left;
}
.cashflow, .cashflow-text {display: inline-block;}
}
section {
.budget {
width: 70%;
float: left;
margin-left: 0px;
margin-right: -100px;
margin-top: -60px;
}
.budget-text {
width: 35%;
float: left;
}
.budget, .budget-text {
display: inline-block;
}
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59);
margin: auto;
position: relative;
float: left;
max-width: 800px;
width: 100%;
top: -280px;
}
.wrapper.box {
padding: 80px;
form {
padding-top: 50px;
}
}
.wrapper-payment {
background: -webkit-linear-gradient( 90deg, #ffffff 50%, #2e2935 50%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* Standard syntax */
}
#-moz-document url-prefix() {
.wrapper.box {
margin-left: 0px;
}
#button {
font-size: 11px;
}
}
.wrapper-image {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
//margin: auto;
}
.title{
font-family: 'Montserrat';
font-weight: 700;
font-size: 5.0rem;
line-height: 100%;
letter-spacing: -.5rem;
//margin: initial;
}
.title-body {
font-size: 2rem;
color: white;
}
//Form styling
input, label{
display: block;
}
label {
color: #7f7e83;
}
input {
width: 100%;
padding: 4px 0;
margin: 5px 0 15px 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 2px solid #83828a;
background-color: #282731;
color: white;
padding-left: 10px;
font-family: Georgia, Serif;
font-weight: bold;
}
.first-part-form {
width: 100%;
}
.form-first-left {
width: 46%;
float: left;
margin-right: 20px;
}
.form-first-right {
width: 46%;
float: right;
}
//End form styling
.post-content {
position: relative;
width: 100%;
//height: 750px;
background-color: #60629d;
//top: -150px;
//z-index: -10;
}
#post-content-div {
//height: 100px;
}
#next {
background-color: #ffe1d9;
color: #282731;
}
#login-or-company {
border: none;
border-radius: 0;
border-bottom: 1px solid white;
padding-left: 0;
}
#login-url {
color: white;
font-size: 16px;
//float: left;
padding-top: 18px;
padding-left: 0;
}
#login-url, #login-or-company {
display: block;
}
.footer {
position: relative;
display: block;
width: 100%;
background: #60629d;
padding-bottom: 50px;
margin: 0 auto;
img {
margin: 0 auto;
}
}
.halfwidth {
display: inline-block;
width:50%;
position: relative;
}
.second-part-form {
label {
color: #ffffff;
}
h3{
color: #ffffff;
}
}
And this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Now ‐ Sweety & Co. Pro</title>
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/base.css">
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/js/base.js"></script>
</head>
<body>
<div class="top-header">
<div class="row">
<div class="header col-md-6">
<img id="header-logo" src="/static/img/logo_escuro.svg" width="314" height="81">
</div>
<div class="col-md-6" id="div-header-menu">
<ul class="header-menu list-inline " id="nav">
<li class="header-menu-item"><a class="" href="/"><span>Home</span></a></li>
<li class="header-menu-item"><span>Features</span> </li>
<li class="header-menu-item"><span>Pricing</span></li>
<li class="header-menu-item"><span>Help</span> </li>
<li class="header-menu-item"><a href="#" type="button" role="button"
id="button" class="button">JOIN NOW</a> </li>
<li class="header-menu-item"><span>Sign in</span></li>
</ul>
</div>
</div>
</div>
<div class="container ">
<div>
<div class="container">
<div class="row presentation-header">
<div id="slogan" class="">
<h2>Because</h2>
<h2>you can't</h2>
<h2>create</h2>
<h2>money</h2>
<div style="margin: 50px"></div>
<div class="">
<a id="sign-in-button" href="/auth/login" role="button" type="button">Sign in ></a>
</div>
<div style="clear: both"></div>
</div>
<div id="slogan-img" class="">
<img id="slogan-image" src="/static/img/mac2.png">
<p style="margin-bottom: 50px"></p>
</div>
</div>
</div>
</div>
</div>
<div class="container diagonal-line-box">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="content-body">
<div class="container">
<div class="row">
<section class="">
<div class="container">
<section class="row ">
<h3 class="col-md-5">Features<p class="span-decoration"></p></h3>
</section>
<h4>Get to know SweetyPro & Co. Features</h4>
<section>
<img class="cashflow" src="/static/img/cashflow_144.png">
<div class="cashflow-text">
<h1 class="title ">Cashflow</h1>
<p class="title-body">Organize your expenses and incomes in a platform easy to use.</p>
<p class="title-body">Enough of losing control of the situation, your payments and outputs are always on time.</p>
</div>
</section>
<div style="clear: both;"></div>
<section>
<div class="budget-text">
<h1 class="title " style="text-align: right">Budgets</h1>
<p class="title-body" style="text-align: right">
Can you imagine creating budgets with just a few steps? Yes! It's possible.
</p>
<p class="title-body" style="text-align: right">
Sweety & Co. Pro helps you figure out how much to charge and making budgets turned into novice task.
</p>
</div>
<img class="budget" src="/static/img/budget_144.png">
</section>
<div style="clear: both;"></div>
<section class="row">
<div class="col-md-12">
<h1 class="title">Timeline</h1>
<p class="title-body">Time is money. Thus organize yourself and your time and don't stop until you earn money.</p>
</div>
<img class="col-md-12" src="/static/img/timeline_144.png">
</section>
<section class="row padding">
<div class="col-md-12">
<h1 class="title" style="text-align: center">Fastcreate</h1>
<p class="title-body" style="text-align: center">Running out of time? With a simple mouse click, you get access to foremost features of
Sweety & Co. Pro. in any gadget at any time.</p>
</div>
<img class="col-md-12" src="/static/img/fastcreate_144.png">
</section>
<section class="row">
<h3 class="col-md-5">Join now<p class="span-decoration"></p></h3>
</section>
<h4>The Status of Liberty Enlightening the World was a gift of the people of France...</h4>
</div>
</section>
</div>
</div>
</div>
<div class="container second_diagonal-line-box">
<div>
<div class="container">
<div class="row">
<section class="col-md-12">
</section>
</div>
</div>
</div>
</div>
<div class="container post-content">
<div class="container">
<section class="col-md-offset-1">
<div id="post-content-div" class="container">
<div id="wrapper" class=" wrapper box ">
<div class="first-part-form">
<h1 class="form-first-left" style="color: #FFFFFF;">Get your time and money on track</h1>
<img class="" style="padding-top: 10px; padding-left: 25px" src="/static/img/price.png">
</div>
<div style="clear: left"></div>
<div class="second-part col-md-6 col-sm-12">
<h3>Payment method</h3>
<p class="span-decoration"></p>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<select >
<option>Credit Card</option>
<option>Paypal</option>
</select>
</div>
<form method="post" role="form">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1471534484##5376f5b3fac93b1e7f29c731c668293a456aca13"></div>
<div class="first-part-form">
<div class="form-first-left">
<label for="name">First Name</label>
<input id="name" name="first_name" placeholder="John" required type="text" value="">
</div>
<div class="form-first-right">
<label for="surname">Last Name</label>
<input id="surname" name="last_name" placeholder="Smith" required type="text" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="login-or-company" id="login-or-company-label">Login (company's name or yours)</label>
<input class="col-md-6" id="login-or-company" name="username" required type="text" value="">
<p id="login-url" class="col-md-2">.sweetyand.co</p>
</div>
<div class="form-first-right">
<label for="password">Password (min. 6 characters)</label>
<input id="password" name="password" placeholder="******" required type="password" value="">
</div>
<div style="clear: both"></div>
<div class="form-first-left">
<label for="email">Email</label>
<input id="email" name="email" placeholder="john#example.com" required type="email" value="">
</div>
<div class="form-first-right">
<label for="reemail">Re-email</label>
<input id="reemail" name="re_email" placeholder="john#example.com" required type="email" value="">
</div>
</div>
<div class="second-part-form row">
<div class="col-md-6">
<div class="row">
<label class="col-md-offset-1" style="margin-top: -30px">You chose</label>
<h3 class="col-md-offset-1" id="dropdown-option">Credit Card</h3>
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-name">Name as in credit card</label>
<input class="col-md-12 col-md-offset-1" id="credit-card-name" name="credit_card_name" required type="text" value="">
</div>
<div class="row">
<label class="col-md-offset-1" for="credit-card-number">Credit card number</label>
<input class="col-md-9 col-md-offset-1" id="credit-card-number" name="credit_card_number" required type="text" value="">
</div>
<div class="row">
<div class="row">
<label class="col-md-4 col-md-offset-1" for="validate">Validate</label>
<label class="col-md-4 col-md-offset-3" for="cvc">CVC/CW</label>
</div>
<input class="col-md-3 col-md-offset-1" id="validate" name="month_card" placeholder="MM" required type="text" value="">
<input class="col-md-3" id="year" name="year_card" placeholder="YYYY" required type="text" value="">
<input class="col-md-4 col-md-offset-1" id="cvc" name="cvc" required type="text" value="">
</div>
<div class="row">
<p class="col-md-1"></p>
<input class="col-md-1 col-md-offset-2" id="accept_terms" name="accept_terms" required type="checkbox" value="y">
<p style="margin-left: 10px; color: white">I accept the terms of SweetyPro.</p>
</div>
<div class="row">
<input class="col-md-6 col-md-offset-1" id="submit" name="submit" type="submit" value="Next >">
</div>
</div>
</div>
</form>
<div class="form-first-left">
<img id="logo-form" src="/static/img/logo.svg" class="" width="200" height="71">
</div>
<div class="form-first-right">
<input id="next" class="" type="button" value="Next >">
</div>
<div class="row" id="flash">
<div class="col-md-offset-6">
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</section>
</div>
</div>
<div class="footer container">
<div class="container">
<img id="foot-logo" class="col-md-12" src="/static/img/sco.svg" width="129" height="79">
</div>
</div>
</body>
</html>
This is a simple topic:
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}