I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
Related
a {
text-decoration: none;
}
.header {
position: relative;
top: 1px;
left: 589px;
padding-top: 20px;
padding-bottom: 10px;
}
.subtitle {
position: relative;
right: 26px;
letter-spacing: 2px;
padding-top: 5px;
font-size: 21px;
font-family: arial;
font-weight: bold;
color: #6b6b6b;
text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}
/* Menu*/
nav {
position: relative;
left: 210px;
height: 70px;
border-radius: 60px;
background: #dc67e9;
width: 1000px;
}
ul {
margin-left: 17%;
}
ul li {
display: inline-block;
line-height: 80px
}
ul li a {
text-decoration: none;
font-family: 'Coiny', cursive;
font-size: 19px;
color: white;
padding: 0 20px
}
ul li a:hover {
color: black;
}
.bannerimage {
margin-left: 5px;
margin-top: 4px;
}
.banner {
margin-top: 4px;
background-color: #dc67e9;
width: 100%;
height: 589px;
}
.bannerpromo1 {
position: relative;
bottom: 500px;
margin-left: 60px;
font-family: 'Lobster', cursive;
color: black;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 70px;
}
.bannerpromo2 {
position: relative;
bottom: 470px;
margin-left: -780px;
font-family: 'Lobster', cursive;
color: #585656;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 50px;
text-align: center;
}
.subscribebanner {
width: 250px;
height: 50px;
background-color: #dc67e9;
position: relative;
left: 190px;
bottom: 430px;
border: 4px solid white;
}
.subscribebannertext {
margin-left: 30px;
margin-top: 15px;
font-family: 'Coiny', cursive;
word-spacing: 2px;
font-size: 30px;
}
.howitworks {
font-size: 60px;
font-family: 'Lobster', cursive;
text-shadow: #a8a8a8 4px 6px;
margin-top: 50px;
position: relative;
left: 555px;
}
.subheaderbox1 {
position: relative;
margin-top: 20px;
right: 315px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox2 {
position: relative;
bottom: 100px;
left: 65px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox3 {
position: relative;
bottom: 200px;
left: 450px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaders {
position: relative;
bottom: 275px;
font-size: 40px;
margin-left: -265px;
word-spacing: 250px;
letter-spacing: 3px;
color: white;
}
.box1 {
position: relative;
right: 370px;
bottom: 225px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box2 {
position: relative;
right: -15px;
bottom: 500px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box3 {
position: relative;
right: -405px;
bottom: 780px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.step1 {
position: relative;
right: 932px;
bottom: 219px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step2 {
position: relative;
right: 546px;
bottom: 493px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step3 {
position: relative;
right: 153px;
bottom: 766px;
color: #666666;
font-size: 30px;
text-align: center;
}
.section1 {
position: relative;
margin-top: 20px;
bottom: 660px;
background-color: #adcae1;
margin-left: -570px;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section2 {
position: relative;
left: 149px;
bottom: 660px;
background-color: #adcae1;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section1title {
padding-top: 80px;
font-size: 70px;
}
.section1text {
font-size: 40px;
text-shadow: none;
color: #f0f0f0;
}
.section2title {
padding-top: 100px;
font-size: 70px;
}
.section2text {
font-size: 35px;
text-shadow: none;
color: #f0f0f0;
padding-left: 1px;
}
.imgsect1 {
margin-left: 148px;
position: relative;
bottom: 1660px
}
.imgsect2 {
position: relative;
bottom: 1668px;
right: 571px;
}
<!DOCTYPE html>
<html>
<head>
<title>SweetVie-Home-Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="indexstyle.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link rel="stylesheet" href="indexstyle.css">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="topfiller"></div>
<div class="header">
<img src="images/logo.jpg" height="90" alt="SweetVieLogo">
<h2 class="subtitle">Vegan Baking Made Easy</h2>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COMMUNITY</li>
<li>FAQ</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
<div class="banner">
<img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
<h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
<h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
<div class="subscribebanner">
<h3 class="subscribebannertext"> SUBSCRIBE</h3>
</div>
</div>
<div class="howitworks">
<h1>How It Works</h1>
<div class="subheaderbox1"></div>
<div class="subheaderbox2"></div>
<div class="subheaderbox3"></div>
<div class="subheaders">
<h2>Click Prepare Enjoy</h2>
</div>
<div>
<img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
</div>
<h3 class="step1">Select one of the three<br>subscription options</h3>
<div>
<img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
</div>
<h3 class="step2">Get involved and play<br>with your food</h3>
<div>
<img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
</div>
<h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>
<div class="section1">
<h2 class="section1title">Food Time<br> Family Time</h2>
<br>
<p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
</div>
<div class="section2">
<h2 class="section2title">The Next Step</h2>
<br>
<p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
</div>
<div class="imgsect1">
<img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
</div>
<div class="imgsect2">
<img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
</div>
</body>
</html>
I'm currently making a website for a school project that requires a menu bar. The menu bar changed to black whenever the cursor hovered over it previously, but recently stopped and now only changes color when it is selected/clicked.
I'm very new to html and css so I know my syntax or method of positioning my elements/divs may be poor.
But if there are any tips or guidance on what I should do to fix this problem, that would be great.
As pointed out in the comments, the div with class bannerpromo2 is getting in front of the menu, blocking hover and clicks.
As for the strange behavior you are getting when "inspecting", there is no magic there. Since bannerpromo2 is positioned relative to the bottom (it has bottom: 470px;), the position could be changing when you "inspect" it, because the developer panel opens from the bottom of your browser window, thus changing the bottom property of bannerpromo2.
If you want to see all of that in play, give bannerpromo2 a background color:
.bannerpromo2 {
background-color: green;
/* ...other props */
}
I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I'm having troubles with positioning the textbox for my chat. I can only make it look good for one specific resolution. On other screen sizes it just looks terrible. How can I adjust the position of the textbox for all resolutions (>1360px) to fit in the little darkgrey area on the bottom. When I try to adjust it for one resolution it won't look good on the other resolutions.
https://jsfiddle.net/4pvfwz11/1/
<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
<ol class="chat">
<div id="fullchat">
<li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
</div>
<div class="chat_error"></div>
</ol>
</div>
<div class="toggle-sound"></div>
<input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>
<style type="text/css">
div.chat_error {
color: #e20f0f;
padding-left: 10px;
padding-top: 1rem;
}
.chatdiv
{
position: fixed;
left: 40px;
background-color: #101010;
height: 90vh;
}
.chatdiv .name{
top: 3px;
left: 110px;
font-size: 10px;
font-weight: bold;
color: rgba(256,256,256,0.80);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar img {
margin-top: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #187006;
margin-left: 10px;
background-color: #27af0c;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #0a95db;
box-shadow: 1px 2px 0px #055f8c;
margin-left: 10px;
}
.bot .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #a50808;
box-shadow: 1px 2px 0px #6b0606;
margin-left: 10px;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 15px;
margin: 0 0 0.2rem 0;
color: white;
}
.msg time {
font-size: 10px;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* T Y P E */
input.textarea {
position: absolute;
width: 89%;
height: 50px;
left: 15px;
bottom: 3vh;
background: white;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
color: #666;
font-weight: 400;
}
div.toggle-sound {
position: fixed;
bottom: 13vh;
left: 65px;
font-weight: bold;
font-size: 20px;
}
.scrollbar
{
float: left;
height: 80vh;
background-color: #232323;
overflow-y: scroll;
margin-bottom: 25px;
width: 100%;
}
.force-overflow
{
min-height: 90vh;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #232323;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #232323;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E20F0F;
}
</style>
If you want different CSS for different screen sizes you can use something called media queries. I don't know exactly what rules you want to change for different screen sizes, but let's do a quick example. Let's say you want to make the background color of the textbox red on screens with a width less than or equal to 900px. This can be done with the following media query:
#media (max-width: 900px) {
input.textarea {
background-color: red;
}
}
So what you can do is just to figure out what CSS changes you want to do on different screen sizes, and then make media queries for all of them. You can read more about media queries here.
I basically want something like this:
The oval is a button called specific, its size depends on the text. The border belongs to a div called player. The button should always align to the center of the top border no matter what the sizes they are. Thanks.
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
}
HTML code, if it is relevant:
<input type="button" id="specific" value="<?php echo $id; ?>" onclick='window.open("<?php echo $specific; ?>")'>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>
Put #specific inside the player div and position it absolutely.
Then it can be managed into place using position values and a transform.
body {
text-align: center;
}
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
position: absolute;
top: 0;
left: 50%;
transform:translate(-50%, -50%);
background: lightblue;
border:inherit;
}
.player
{
width: 560px;
padding: 20px;
display: inline-block;
margin: 2em;
border-style: solid;
border-color:blue;
border-radius: 20px;
text-align: center;
position: relative;
}
<div class="player">
<div id="specific">Specific</div>
</div>
I would recommend to add position: relative to .player, and wrap your button with a div (let's call it .buttonWrap), which has the following css attached:
.buttonWrap {
position: absolute;
left: 0;
top: -20px; /* the number of pixels here should be calculated like (buttonHeight / 2) */
width: 100%;
text-align: center;
}
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
margin: auto;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
position: absolute;
}
.button{
width: 560px;
margin: auto;
text-align: center;
position: relative;
margin-bottom: -1em;
z-index: 10;
}
<div class="button">
<input type="button" id="specific" value="Play" onclick='window.open("<?php echo $specific; ?>")'>
</div>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>
here is the Demo
.container-lg {
border: 4px solid rgba(50, 150, 255, 1);
border-radius: 50px;
width: 400px;
height: 400px;
margin-top: 50px;
}
button.container-sm {
background-color: rgba(100, 175, 255, 1);
border: 2px solid rgba(50, 150, 255, 1);
border-radius: 40px;
width: 150px;
height: 40px;
display: block;
margin: auto;
margin-top: -22px;
}
<div class="container-lg">
<button class="container-sm"></button>
</div>