I wanted to design a simple page where buttons will be displayed on the top in a fixed position with some hover, box-shadow and cursor attributes whereby once one of them hovered there would be some shade around them. For that I utilized position: fixed attribute in a div tag as a button frame for convenience so that I could change the position of all buttons at once when all set by means of CSS styling.
However, this works only if I do not scroll down the page. When I scroll down, it loses those three (hover, box-shadow and cursor) attributes. I could not get around this issue. How can I fix it?
Here is the block of code I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="User">
<title>Home Page</title>
<style>
body {
background-color: rgb(255, 255, 255);
margin: 0px;
padding: 0px;
border-style: none;
}
.mainFrame {
position: absolute;
top: 0px;
left: 131px;
width: 700px;
height: 800px;
margin: 0px 0px 31px 0px;
padding: 0px;
border-style: solid;
border-color: rgb(0, 0, 0);
border-width: 0px 2px 2px 2px;
border-radius: 0px 0px 131px 0px;
}
.buttonFrame {
position: fixed;
top: 0px;
left: 133px;
width: 500px;
height: 39px;
margin: 0px;
padding: 0px;
border-style: none;
}
.button {
height: 29px;
margin: 0px;
padding: 4px 7px 4px 7px;
background-color: rgb(255, 99, 71);
border-style: solid;
border-color: rgb(0, 0, 0);
border-width: 0px 2px 2px 2px;
border-radius: 0px 0px 131px 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 23px;
text-align: left;
cursor: pointer;
outline: none;
}
.buttonEffect:hover {
box-shadow: 0 13px 17px 0 rgba(0,0,0,0.25), 0 13px 17px 0 rgba(0,0,0,0.25);
outline: none;
}
.Home {
position: absolute;
top: 0px;
left: 31px;
width: 64px;
}
.Notes {
position: absolute;
top:0 px;
left: 144px;
width: 64px;
}
.AboutMe {
position: absolute;
top: 0px;
left: 257px;
width: 105px;
}
.contentFrame {
position: absolute;
top: 40px;
left: 0px;
width: 500px;
height: 400px;
margin: 0px;
padding: 0px;
border-style: none;
}
</style>
</head>
<body>
<div class="mainFrame">
<div class="buttonFrame">
<a class="button Home buttonEffect" title="Home">Home</a>
<a class="button Notes buttonEffect" title="Notes">Notes</a>
<a class="button AboutMe buttonEffect" title="About Me">About Me</a>
</div>
<div class="contentFrame">
</div>
</div>
</body>
</html>
remove position absolute from the class .contentFrame
Related
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>
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.
How do I scroll the line only without scrolling the image in the scrollpane?
I'm currently doing it on html, any suggestions please? I've yet to learn jQuery, is there anyway that this can be done with just html coding?
these are my current coding:
#charset "utf-8";
/* CSS Document */
/* bhoechie tab */
div.bhoechie-tab-container{
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #ddd;
margin-top: 20px;
margin-left: 50px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #5A55A3;
background-image: #5A55A3;
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #5A55A3;
}
div.bhoechie-tab-content{
background-color: #ffffff;
/* border: 1px solid #eeeeee; */
padding-left: 20px;
padding-top: 10px;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="../Documents/Unnamed Site 2/Untitled-4.css" rel="stylesheet" type="text/css">
</head>
<div style="height:380px;width:380px;overflow:auto;">
<img src="scroll/src/denso.jpg" alt="Sample picture for scroll box">
<hr COLOR="BLACK" WIDTH="60%" >
<div class="vertical_line"></div>
</div>
<style>
.vertical_line{position: relative; top: 0; left:0; right:0;}
.vertical_line{position: absolute; top:10px; left:190px; right: 190px; height:360px; width:3px;background:#000; }
</style>
<body>
</body>
</html>
If images is not dependent on the line, then instead of using Position:absolute,
you can change that to
.image{
Position:fixed;
}
so that it will fit in to the container.
I'm quite new at front-end development. I was just experimenting with HTML/CSS. After making a simple poster, I was trying to make simple freestyle(not specific to any kind of website) page layout.
Here is what I did.
https://github.com/imdpm/CodoSapiens/tree/master/LayAtt
I'm trying to add a "content" type division. I've created a style for it in style.css and invoked it in index.html without any content. Just the division.
But output does not have any "content" division. I can't seem to understand where I have made a mistake.
Could anyone help?
body{
background-image: url("BackIm.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
#icon{
position: absolute;
left: 5px;
height:40px;
width:40px;
}
.topmenu{
background-color: #001a00;
position: absolute;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
padding: 0;
border-bottom: 1px solid red;
}
.sidemenu{
background-color: darkgrey;
color: black;
position: left fixed relative;
margin: 190px 80px 0 40px;
padding: 8px 6px 0 8px;
border: 1px solid black;
border-radius: 8px;
max-width: 155px;
font-size: 30px;
font-family: sans-serif;
}
.banner{
background-color: #FFA500;
position: absolute;
top:44px;
left: 0;
right: 0;
height: 125px;
border-bottom: 1px solid #228B22;
}
.content{
background-color: #5651F3;
position: relative;
top: 60px;
right: 30px;
left: 25px;
}
#link{
color: black;
text-decoration: none;
padding: 2px 0 1px 0;
color:grey;
font-size:35px;
font-family:"Times New Roman";
font-weight:bold
}
a{
text-decoration: none;
color: black;
padding: 0;
}
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
<html>
<head>
<title>LayoutAtt</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topmenu">
<img id="icon" src="https://github.com/imdpm/CodoSapiens/blob/master/LayAtt/BackIm.jpg?raw=true" alt="Icon">
<a id="link" href="index.html">BackToBeg</a>
</div>
<div class="banner">
</div>
<div class="sidemenu">
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
</div>
<div class="content">
</div>
</body>
</html>
You need to add a width and a height to your content div.
Try this
.content{
background-color: #5651F3;
position: relative;
top: 60px;
right: 30px;
left: 25px;
width:100px;
height:100px;
}
Use the inspector in the browser to look at the html and css being rendered. You can see what styles are being applied to which elements.
I want to display the range input slider in "Vertical".
i use this code to display vertical -webkit-appearance: slider-vertical it displays the slider but css is not working it showing ordinary inputrange slider.
Can anyone help me how to do that .
this is my code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<title>How to style an HTML5 range input with CSS</title>
<style type="text/css" media="screen">
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
}
input[type='range'] {
-webkit-appearance: slider-vertical !important;
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
height: 15px;
left: 10px;
margin: -100px 0 0 100px;
position: absolute;
right: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
height: 33px;
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="range">0</span>
<input type=range name=salary min="0" max="5" value="0" step="1" onchange="showValue(this.value)" />
</div>
<script type="text/javascript">
function showValue(newValue) {
document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
Don't of height in your css. You forcing to a fixed dimension.
here is my suggestion for your style
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
overflow:hidden;
}
input[type='range'] {
-webkit-appearance: slider-vertical;/*comment this to see the result*/
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
/*height: 15px;*/
left: 10px;
/*margin: -100px 0 0 100px;*/
/*position: absolute;*/
right: 10px;
margin-top:50px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
/* height: 33px;*/
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
A here is a preview on fiddle: http://jsfiddle.net/QXzLT/