<!DOCTYPE html>
<html>
<head>
<title>replit </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=""dropin">
<button class="dropdownbutton">dropdown button</button>
<div class="dropdownmenu">
List
List
List
List
</div>
</div>
</body>
</html>
css code:
.dropdownbutton{
background-color: blue;
color:white;
padding:13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropin{
position:relative;
display:inline;
}
.dropdownmenu{
display: none;
position: absolute;
background-color: orangered;
min-width: 150px;
}
.dropdownmenu a{
color: black;
padding: 11px 15px;
display: block;
text-decoration:none ;
}
.dropdownmenu a:hover {
background-color: aliceblue;
}
.dropin:hover .dropdownmenu{
display: block;
}
.dropin:hover .dropdownbutton{
background-color: grey;
}
I checked every single words and tags that I followed the process in YouTube by free code camp but it still does not work. This is the link to that YouTube video. (https://youtu.be/nu_pCVPKzTk?t=11602)
You have a typo in the class name, here's the working demo: https://codepen.io/dreambold/pen/eYjZejd
So it should be <div class="dropin">
Related
This question already has answers here:
Different Color Links on the Same HTML Page
(5 answers)
Closed last year.
I'm trying to apply CSS to this specific button, but it keeps cascading for all the buttons on the page. How do I make the style specific to this one button? I have no preference on what type of selector is used. Please help, I have 0.0 coding knowledge.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
Instead of doing this:
Buy Here
Use it as this:
<a id="buy_button" href="URL" target="_blank">Buy Here</a>
Then apply the CSS to that specific id like this:
#buy_button{
background-color: gray;}
This is a good example of a time where you can use an ID selector. You can do this by adding id="idValue" to your html element and target it with CSS using #idValue. Here's an example of how that'd look:
<html>
<head>
<style>
#customButton:link,
#customButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#customButton:hover,
#customButton:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
As mentioned in the comments, you can use the id - but there are maybe better ways to handle it.
<html>
<head>
<style>
#myButton:link,
#myButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#myButton:hover,
#myButton:active {
background-color: gray;
}
</style>
</head>
<body>
<a id="myButton" href="URL" target="_blank">Buy Here</a>
</body>
</html>
is this what you need?
a.btn:link,
a.btn:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.btn:hover,
a.btn:active {
background-color: gray;
}
Buy Here
<a class="btn" href="URL" target="_blank">Buy Here</a>
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
Hi I want to place my small image on exactly the same place than the text
So i'm able to achieve it but the image is a little bit up, and need to b moved a bit left.
Can you please assist?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
width: 200px;
border-radius: 10px;
border: 6px solid #4CAF50;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Vertical Menu</h1>
<div class="vertical-menu">
Home
<img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100
Link 2
Link 3
Link 4
</div>
</body>
</html>
Use this.
img {
position: relative;
top: 3px;
}
I've updated your code. Try this.
.vertical-menu {
width: 200px;
border-radius: 10px;
border: 6px solid #4CAF50;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 8px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
img {
position: relative;
top: 3px;
}
<h1>Vertical Menu</h1>
<div class="vertical-menu">
Home
<img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100
Link 2
Link 3
Link 4
</div>
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I want to lift the navigation links in my header section. They all are in a div class "links" which is under div class "headers".
But the margin-bottom property doesn't have any impact.
So to check whether there is any change in position I made the border around the div class "links".
But when border appeared all the navigation links are shown out of the box.
Also there is no impact of margin-bottom on the border box.
Jsfiddle: http://jsfiddle.net/L2k67eyx/
PLEASE let me know whats wrong with my code? Also is there any rules I must know when does margin properties work?
CODE Snippet:
body{
height: 100vh;
margin: 0px;
}
.header{
background-color: white;
height:50%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
.content{
position: relative;
background-color: white;
height: 90%;
overflow-y: auto;
}
.logo{
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-bottom: 10px;/*NOT WORKING*/
/*right: 100px;*/
border-style:solid;
border-color: black;
outline-style: solid;
outline-color: green;
}
a{
position: relative;
right: 0px;
top: 25px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home Page</title>
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="Logo">
</div>
<div class="links">
Home
Offers
Login
Register
Contact
About
</div>
</div>
<div clear="both"></div>
<div class="content">
</div>
<script type="text/javascript" src="home.js"></script>
</body>
</html>
you should to remove margin top:0px in tag a style to be
a{
position: relative;
right: 0px;
top: 0px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}