I am learning HTML/CSS for school.
I wanted to create a bar menu that if someone hover one button shows the blue bar (see snippet) and it creates below a Box for a Dropdownmenu. The Problem I get it only to work for one object the second one gets ignored even if I put my second object into so that both balken and Dconfig are directly under the button-class.
I really dont know how to solve it and it.
I hope you can help me :)
header {
background-color: black;
height: 70px;
width: 100%;
}
/*ButtonsCSS*/
.button{
height: 73px;
top: -2px;
background-color: transparent;
background-repeat:no-repeat;
border-color: transparent;
cursor:pointer;
overflow: hidden;
outline:none;
font-family:Arial, Helvetica, sans-serif ;
font-size: 12pt;
color: white;
position: absolute;
}
.balken{
opacity: 1;
}
.button:hover + .balken{
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
position: absolute;
top: 66px;
}
.UeberCG{
left: 470px;
border-right-width: 17px;
}
.balkenUeberCG{
width: 80px;
/**/
left: 475px;
}
/*DropdownCSS*/
.Dconfig{
opacity: 1;
}
.button:hover + .Dconfig{
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top:70px;
}
.DUeberCG{
left: 470px;
}
<!DOCTYPE html>
<html lang="de">
<body>
<header>
<div class="Buttons">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
</div>
<div class="Dropdownmenue">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</header>
</body>
</html>
I hope so I understanded your requirements well. On button hover you want to show Dropdownmenu? If that is the case you have to wrap everything into one parent div, applying hover on that div will trigger actions on children divs (this is the only possible way with pure CSS while in Javascript it is different and html elements can be in different places).
Here is an example of how I figured out your requirements.
.Buttons {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.button-wrapper {
position: relative;
}
.button {
outline: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: white;
background: none;
display: block;
padding: 10px 20px;
cursor: pointer;
}
.balken {
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
opacity: 0;
visibility: hidden;
}
.button-wrapper:hover .balken {
opacity: 1;
visibility: visible;
}
.Dropdownmenu {
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
}
.button-wrapper:hover .Dropdownmenu {
visibility: visible;
opacity: 1;
}
<div class="Buttons">
<div class="button-wrapper">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
<div class="Dropdownmenu">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</div>
</div>
I hope so this is what you need.
Related
I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
text-align: right;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p,
ul,
ol,
li,
select {
font-family: 'Poppins', sans-serif;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
display: inline-block;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color: rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
<div class="nav-bar">
<nav class="desktop-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
<nav class="mobile-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
</button>
</div>
</nav>
</div>
You can use float: right;.
You can also find other solutions here How do I right align div elements?
You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.
See MDN on position for more info
:root {
--padding: .5em;
}
/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
background: red;
padding: .5em;
position: relative;
}
#first-div {
background: yellow;
padding: var(--padding);
}
p {
padding: var(--padding);
background: white;
}
/* set this divs position to absolute so its top, left, bottom, right
positioning props will be relative to its closest parent set to relative */
#right-div {
position: absolute;
right: calc(var(--padding) + 0px);
top: calc(var(--padding) + 0px);
background: green;
color: white;
padding: var(--padding);
<div id="parent">
<div id="first-div">This is the first div</div>
<p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
<div id="right-div">This is the right div</div>
</div>
I ended up setting the position to absolute and using vw as the property for the left attribute.
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 80vw;
margin-right: 5vw;
}
Hey I started to learn Html.
But I have a problem with the :hover-function.
I created buttons and when i go with the mouse over them the text gets underlined so you see which button you are on. But i wanted also that a Dropdownmenu appears. And thats the Problem my second class that is connected with a :hover function doesn't appear.
Here the snippet for the blue bar(working)
/*Übergruppe*/
.button{
height: 73px;
top: -2px;
background-color: transparent;
background-repeat:no-repeat;
border-color: transparent;
cursor:pointer;
overflow: hidden;
outline:none;
/*Font*/
font-family:Arial, Helvetica, sans-serif ;
font-size: 12pt;
color: white;
position: absolute;
/*cursor*/
}
.balken{
opacity: 1;
}
.button:hover + .balken{
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
/*Position*/
position: absolute;
top: 66px;
}
/*CSS-Klassen*/
.UeberCFG{
left: 470px;
border-right-width: 17px;
}
.balkenUeberCFG{
width: 80px;
/**/
left: 475px;
And here in another CSS-file the text for the dropdownmenu. I imported the needed CSSfile. I once also tried to put all into one CSS file but this showed also no succes and yes it is linked to the HTML-file.
#import url(../CSS-Data/Buttons.css);
#import url(../CSS-Data/Header.css);
/*Übergruppen*/
.Dconfig{
opacity: 1;
}
.button:hover + .Dconfig{
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
/*Position*/
position: absolute;
top:70px;
}
/*Untergruppen*/
.DUeberCFG{
left: 470px;
}
Here how it looks like(I miss a light-grey box below the blue bar)
Snippet
header {
background-color: black;
height: 70px;
width: 100%;
}
/*ButtonsCSS*/
.button{
height: 73px;
top: -2px;
background-color: transparent;
background-repeat:no-repeat;
border-color: transparent;
cursor:pointer;
overflow: hidden;
outline:none;
font-family:Arial, Helvetica, sans-serif ;
font-size: 12pt;
color: white;
position: absolute;
}
.balken{
opacity: 1;
}
.button:hover + .balken{
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
position: absolute;
top: 66px;
}
.UeberCFG{
left: 470px;
border-right-width: 17px;
}
.balkenUeberCFG{
width: 80px;
/**/
left: 475px;
}
/*DropdownCSS*/
.Dconfig{
opacity: 1;
}
.button:hover + .Dconfig{
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top:70px;
}
.DUeberCFG{
left: 470px;
}
<!DOCTYPE html>
<html lang="de">
<body>
<header>
<div class="Buttons">
<button class="button UeberCFG">Über CFG</button>
<div class="balken balkenUeberCFG"></div>
</div>
<div class="Dropdownmenue">
<div class="Dconfig DUeberCFG"></div>
<div class="Suchleiste"></div>
</div>
</header>
</body>
</html>
You can only work with .class + .class if the second is direct next after the first closing.
Look here: [W3CSchools]
[1]: https://www.w3schools.com/cssref/sel_element_pluss.asp
Another example is, to work in one container, so you dont need to use the element selector + from css2. The better way for trainees is to work with a framework like bootstrap. There you got everything you need.
But here is an example about what i mean, to work in the same container.
Its just a example, not a more recommendable codesnippet. More like a mess ;)
<div id="mainwrapper">
<div class="button">Ich bin ein Button
<div class="dropdown">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
</div>
</div>
#mainwrapper {
max-width: 300px;
text-align: center;
}
.button, .dropdown {
background: #ccc;
color: #000;
display: flex;
flex-direction: column;
}
.button {
font-size: 2rem;
line-height: 3rem;
text-decoration: none;
color: #181818;
font-family: arial;
}
.dropdown {
height: 0px;
padding:0px;
transition: all .5s;
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
margin: 10px 0px;
padding: 5px 0px;
}
li:hover {
background: red;
color: #ffffff;
}
.button:hover .dropdown {display:block;height: 410px;}
[An here is the Fiddle:]
[2]: https://jsfiddle.net/ew7cu3oj/3/
I am trying to build a basic website with CSS and HTML. I have right now adjusted the code in the following file to shrink the images down to displayable size. But let's suppose i tried decreasing the width of my browser(i am using my laptop) the contents get reorganized and the text moves below the picture as expected. But the problem i am unable to scroll down. I have tried various solutions like setting overflow of html to scroll, setting overflow-x property to hidden in html.
<!DOCTYPE html>
<html>
<head>
<script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>
W3Coders
</title>
<link rel="stylesheet" href="better-style.css">
</head>
<body>
<div class = "topping">
<h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
<h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
<img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
</div>
<div class="navbar">
Home
Resources
Skills
Rate
Contact
</div>
<div class="contents">
<img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
<h1>Purpose Of Existence</h1>
<h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
<h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
<h1>Random stuff cuz i have idea what do with space:</h1>
<h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
</div>
</body>
Here is my CSS file:
.topping
background-color: white;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 9%;
color: rgb(92, 84, 84);
padding: 0%;
}
.navbar{
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position:fixed;
top:68px;
left:0px;
}
.people{
background-color: rgb(58,118,209);
overflow: hidden;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.navbar a{
float:left;
color: white;
padding:14px 26px;
text-decoration: none;
text-align: center;
font-size: 17px;
}
.people a{
float:left;
color: white;
padding: 14px 26px;
text-decoration: none;
text-align: center;
font-size: 15px;
}
.navbar a.active{
color: white;
background-color: rgb(58,118,209);
}
.people a.active{
background-color:black;
color: white;
}
.navbar a:hover{
color: white;
background-color: cyan;
}
.people a:hover{
color:white;
background-color: rgb(92, 84, 84);
}
.contents{
background:url("images/background.jpg");
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
}
.card{
background-color: white;
width: fit-content;
color: black;
padding: 20px;
margin: 10px;
border-radius: 5px;
border-width: 10px;
float: left;
border-color: black;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
border-radius: 10px;
border-width: 3px;
border-color: grey;
border-style: solid;
animation-name: links;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes links{
0%{
border-color: grey;
}
25%{
border-color: red;
}
50%{
border-color: green;
}
100%{
border-color:blue;
}
}
I am using github pages to host my site: https://godofgames0070.github.io
Also, i am using Google Chrome to view my site.
from the live link I think it will help to amend the below:
//content will be scrollable
.contents {
background: url(images/background.jpg);
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
overflow: scroll;
}
Navbar looks squeezed too, I have updated the top style, so it fixed and not hidden. Try the below:
.navbar {
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position: fixed;
top: 9%;
left: 0px;
}
You're content has a CSS property position: fixed applied. You'll need to remove that in order to scroll your content.
If you are looking for a fixed background effect, consider background-attachment: fixed instead.
You can put your img in the contents with float: right to start and after reducing the screen using a media query to change the float
something like this :
.contents{
background-image: url("images/background.jpg");
width: 100%;
margin-top: 100px;
height: 85%;
}
.contents>img {
width: 30%;
float: left;
}
#media screen and (max-width:1000px) {
.contents>img {
width: 100%;
float: none;
}
}
I am trying to implement button I took from codepen on my existing "box-list" div.
But in my form the button gets fathers background and I cant perform my original button blue background as it should be.
On the bottom of the page you can see the button outside the "box-list" how it should look.
<link rel="stylesheet" type="text/css" href="style.css">
<div class="box-list">
<!-- FREE TEXT BOX -->
<div class="box" >
<div class="box__inner">
<h1>Free Text</h1>
Get you free text processed and analyzed, and get opinion summery about.
<button class="analyzeBtn mybtn1" >hover</button>
</div>
</div>
<!-- TWITTER BOX -->
<div class="box" >
<div class="box__inner">
<h1>Twitter Search</h1>
Get Twitter post and comments about any subject you choose and analyze the dat
</div>
</div>
<div class="box" >
<div class="box__inner">
<h1>URL</h1>
Get your URL article analyzed
</div>
</div>
</div>
<button class="analyzeBtn mybtn1" >hover</button>
.box-list {
background: #119bc9;
overflow: hidden;
display: flex;
}
.box {
min-height: 300px;
color: #fff;
transition: all 0.5s;
max-height: 300px;
background-image: url('http://lorempixel.com/400/300/sports');
background-size: cover;
width: 33.33%;
}
.box__inner {
padding: 20px;
min-height: 300px;
background-color: rgba(17, 155, 201, 0.7);
}
.box:hover {
width: 150%!important;
font-size: 18px;
}
.box:nth-child(odd) {
background-image: url('/images/text.jpg');
}
.box:nth-child(odd) .box__inner{
background: rgba(71, 83, 157, 0.8);
}
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
}
.mybtn1 {
color: #fff;
}
.mybtn1:hover {
color: #3498db;
transform: translateY(-7px);
transition: 0.4s;
}
.analyzeBtn::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.6s;
}
.mybtn1::before {
top:0;
border-radius: 0 0 50% 50%;
height: 180%;
}
.mybtn1:hover::before {
height: 0%;
}
JSfiddle example
You need to add z-index: 1; to the button so that it is displayed on top of the backgrounds:
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
z-index: 1;
}
Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.
As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.
How can I solve this problem? I want the image with the border to have a full opacity.
body {
background-color: #f2f2f2;
color: #404040;
}
div.navbar {
height: 600px;
background: rgba(255, 255, 255, 0.7);
background-image: linear-gradient(25deg, #ec008c, #fc6767);
margin-top: -10px;
margin-left: -5px;
position: relative;
width: 105%;
}
img.logo {
position: absolute;
margin-top: 4%;
margin-left: 25%;
height: 40%;
padding: 25px;
border: 25px solid #f2f2f2;
border-radius: 50%;
}
div.image {
position: relative;
height: 100%;
opacity: 0.2;
background-image: url("img/slide1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div.nav {
position: absolute;
bottom: 0;
margin-left: 600px;
margin-bottom: 50px;
}
a.nav-item {
color: #f2f2f2;
font-weight: bold;
font-size: 25pt;
margin-right: 50px;
text-decoration: underline;
}
a.nav-item:hover,
a.nav-item .active {
text-decoration: overline underline;
}
<div class="navbar">
<img class="logo" src="img/logo.png">
<div class="image">
</div>
<div class="nav">
<a class="nav-item">Home</a>
<a class="nav-item">Twee</a>
</div>
</div>
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body {
margin: 0;
}
div.navbar {
height: 100vh;
/*
IMPORTANT BITS:
- ADDED image and gradient to navbar background and
- REMOVED opacity
THE REST:
The rest was just to make the demo look better/simpler
*/
background:
linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
url(http://placeimg.com/1000/600/arch) no-repeat center;
background-size: cover;
position: relative;
}
.logo-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
height: 0;
padding-top: 25%;
border:25px solid #f2f2f2;
border-radius: 50%;
overflow: hidden;
}
.logo {
width: 90%;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="navbar">
<div class="logo-wrapper">
<img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
</div>
</div>
</body>
</html>
Child can't override opacity of parent due to how opacity is managed by the browsers.
Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.
.frame{
background-color: #AAAAAA;
opacity: 0.2;
border-radius: 13px;
padding: 21px;
color: #000000;
height: 73px;
}
.frametxt{
margin-top: -73px;
color: #000000 !important;
opacity: 1.0;
}