I am working on a website and I finally made a responsive menu that takes up the whole screen when you click on the label. The problem is, I cannot hide it(I want to use pure css) I created a new label in the menu that tries to close the menu but it doesn't work and I am assuming that it's because a child is trying to select a parent. I am new to CSS and would really appreciate any help on how to make a close button that closes the menu(width: 0%). Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
html,
body,
figure {
padding: 0;
margin: 0;
list-style: none;
}
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle2:checked < #myNav{
width: 0%;
}
#toggle:checked + #myNav{
width: 100%;
}
Unfortunately in CSS you cant go up the parent level.
But you can do this in Pure CSS.
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle:checked + #myNav{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle">☰</label>
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
As you can see I've removed one of the input fields (one inside the nav) and then changed the id of the for attribute inside the nav to point to the checkbox outside the nav making use of the selector
#toggle:checked + #myNav
What you want to affect is the overlay class but i do not believe you are able to do this with CSS.
You could do this with JQuery.
However, you can modify your current code so that the original toggle is still visible in the overlay and therefore when you untick that toggle, the overlay is removed.
So, in the html remove these two lines:
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
In your CSS change the 'top' to relative:
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: relative;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
Give that a try otherwise, I would recommend you look into JQuery and the hide function
I would also encourage checking out Bootstrap at some point once you are comfortable with CSS since it is a great framework for mobile-first design.
Related
I would like to fade in product description underneath its picture, using overlay effect on hover, in the e-mail. Unfortunately, Gmail doesn't support some CSS functions. When I send the e-mail, the product description displays below the picture. Is it possible to display text instead of picture when you hover your cursor over the image in the e-mail? Do you know which CSS function is not supported by the e-mail service providers?
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
font-size: 20px;
text-align: center;
width: 385px;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="container">
<img src="https://ecsmedia.pl/c/wojny-i-noce-b-iext73211797.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">„Wojny i Noce" to trzeci długogrający album Darii Zawiałow, którego zapowiedź stanowią dreampopowe hity „Kaonashi" oraz „Za krótki sen" nagrany z Dawidem Podsiadło. Nowy album to kolejny longplay, przygotowany w songwriterskim duecie Daria + Michał Kush. Oprócz wydania CD, Daria przygotowała dla fanów wyjątkowe LP - Picture Disc z motywem Sakury czyli kwiatu wiśni.</div>
</div>
</div>
</body>
</html>
As I mentioned in my comment, no support for CSS transitions in Gmail. Further to that, position is not supported in any Gmail client - https://www.caniemail.com/search/?s=position
You'll need to find an alternative method of showing your caption across the board.
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I am trying to create some Radio Buttons and Check Boxes that use CSS for styling and hide them. But i am running into being able to position them. I can get the buttons and boxes to disappear and change the look depending on being activated or not, but when i go to place them for example 100px from left and 100px down they dont move they stay in line.
#charset "utf-8";
/* CSS Document */
#COM1TX {
left:200px;
top:500px;
position:relative
}
#COMRX {
left: 0px;
top: 100x;
position: absolute;
cursor: crosshair;
}
.radios .radio{
display: inline-block;
background-color: #000000;
color: #FFFFFF;
left: 200px;
top: 500px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.radios input[type=radio]{
display:none;
}
.radios input[type=radio]:checked + .radio{
background-color: #ffffff;
color: #000000;
line-height: 100px;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="TEST2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="radios">
<input type="radio" name="COMTX" id="COM1TX">
<label class="radio" for="COM1TX">COM 1 Tx</label>
</div>
<div>
<input type="checkbox" name="COMRX" id="COMRX">
<label for="COMRX">COM 1,2 Rx</label>
</div>
<div class="radios">
<input type="radio" name="COMTX" id="COM2TX">
<label class="radio" for="COM2TX">COM 2 Tx</label>
</div>
</body>
</html>
use position: relative here and you will be able to move them wherever you want
.radios .radio{
position: relative;
display: block;
background-color: #000000;
color: #FFFFFF;
left: 200px;
top: 8px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
Live Demo
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
Use % layout responsive
HTML Source
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
<!-- Top -->
<div id="top"> TOP</div>
<!-- Menu MID LEFT -->
<div id="midleft"> Menu Meio Esquerda</div>
<!--MID-->
<div id="mid"> BANNER</div>
<!-- Back -->
<div id="back"> RordaPé </div>
</body>
</html>
CSS Soruce
html, body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
margin:0; height: 100%;
}
#top{
background-color: #bfb;
position: relative;
width: 100%;
height:18%
}
#midleft
{
background-color: #ddd;
position: relative;
width: 12%;
height: 65%;
padding: 1%;
padding-right: 2%;
}
#mid{
background-color: #ff9;
float: right;
width: 75%;
height: 35%
}
#back{
background-color: #bfb;
width: 100%;
height: 7%;
clear:both;
}
I need to make my layout like this!
I'm not able to do this Responsive Layout Mode.
Could someone send me link explaining Position BOX in CSS3?
Or should do another layout mode without BOX CSS?