Hi I'm learning html and css by Youtube tutorial, how to slide out navigation with css/html, but I've stucked with some codes.
Everything is working fine except
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
this one. When I click this, the sidebar should come out but it isn't.
I tried to fix the problem, trying to find anything wrong on my code for two days, but I couldn't and exhausted.
It would be a great help for me to figure what is wrong.
Please help me
ps. youtube link is https://www.youtube.com/watch?v=d4P8s-mkMvs
#import 'bourbon'
.page-content
position: relative
z-index:0
.toggle
text-decoration: none
font-size:30px
color: black
+position(fixed, 20px 0 0 200px)
z-index:1
.sidebar
+position(fixed, 0px 0 0px 0px)
width: 120px
padding: 30px
background: #333
z-index:0
li
color: rgba(255,255,255,0.8)
font-family: "Ubuntu",sans-serif
font-size: 16px
-webkit-font-smoothing: antialiased
margin-bottom: 16px
cursor:pointer
&:hover
color: rgba(255,255,255,1)
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
<!doctype html>
<html>
<head>
<title>GagaPro</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/slidebar.css">
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<label for="sidebartoggler" class="toggle">☰</label>
</div>
<div class="page-content">
<div class="wrapper">
</div>
</div>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Project</li>
<li>Client</li>
<li>Blog</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
I have tried your code using normal css and i found some thing cool.
No need to change any thing in HTML, only css will change little bit
CSS :
.page-content{
position: relative;
z-index:0;
}
.toggle{
text-decoration: none;
font-size:30px;
color: black;
+position(fixed, 20px 0 0 200px);
z-index:1;
}
.sidebar{
+position(fixed, 0px 0 0px 0px);
width: 120px;
padding: 30px;
background: #333;
z-index:0;
display:none;
}
li{
color: rgba(255,255,255,0.8);
font-family: "Ubuntu",sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
margin-bottom: 16px;
cursor:pointer;
}
li:hover{
color: rgba(255,255,255,1);
}
#sidebartoggler{
display:none;
}
#sidebartoggler:checked ~ .sidebar{
display:block;
}
Related
I am learning HTML and CSS and I was trying to create menu button with drop down list of another menu items showing on hover. It is working fine, but there is one thing, which is not correct in my opinion. And that is fact, that this drop down menu shows up for half second after every page reload/refresh. Can somebody pls help and check, what is wrong in code I was trying to use?
Thank you very much in advance. Below is my HTML and CSS code.
body{
background-color: tomato;
height: 100vh;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.logo{
float:left;
font-family: arial;
}
.logo h2{
color:#fff;s
}
.menu_button{
background-color: transparent;
color:#fff;
padding:15px;
font-size:15px;
cursor: pointer;
border: 1px solid #fff;
width: 100px;
}
.right_menu{
position:relative;
display: inline-block;
float: right;
}
.dropdown_menu{
visibility: hidden;
text-align: center;
position: absolute;
background-color: #f9f9f9;
width: 100px;
box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: .3s;
}
.dropdown_menu a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_menu a:hover{
background-color: #000;
color:#fff;
transition: .3s;
}
.right_menu:hover .dropdown_menu{
visibility: visible;
opacity: 1;
transition: .4s;
}
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Hello world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetStyle.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<h2>LOGO</h2>
</div>
<div class="right_menu">
<button class="menu_button">Menu</button>
<div class="dropdown_menu">
Home
About us
Contacts
</div>
</div>
</div>
</body>
</html>
What you're seeing on that flicker is the time between which the browser has downloaded and rendered the HTML, and it has downloaded interpreted and applied the CSS.
Depending on the speed of their computer, a user may or may not see the same artifact you're describing.
I recently started to make a web-server, I'm usually working with back-end code, but now I got a project to do. I'm still very green on CSS and HTML. So basically I need to somehow move the bank logo down and the Label - "Maze bank of Los-Santos" a bit closer to the logo, I have researched a lot of, but I still don't understand the working principle of the position, width, display, margin, top sometimes work, sometimes doesn't, at some times I use right, left positioning, but at this point I don't know how to do it.
This is how my website looks:
My index code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/style2.css">
<title>Maze bank - Log In</title>
<link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<br>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
<form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
<div class="login-box">
<div class="textbox">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
</div>
<div class="textbox">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
</div>
<button class="link">Forgot password ?</button>
<input class="btn" type="submit" name="" value="Log in">
</form>
</div>
<div class="copyright">
<h4>©™ 2019 Copyright All Rights Reserved</h4>
</div>
</body>
</html>**strong text**
Here's my CSS Code:
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
p{
display:block;
color: #2ECC71;
font-family: 'Teko', sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
border-block: 2px solid black;
text-shadow: 2px 2px #1a1111;
}
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:4px 4px 0 5px!important;
/*set font family color and size*/
color:#2ECC71;
font-size:1.5em;
font-family: 'Teko', sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}
html, body{
margin: auto;
background: white;
background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}
.logo{
font-family: fantasy;
}
.login-box{
width: 280px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #e16a74;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
width: 80%;
margin: 0 10px;
}
.btn{
width: 100%;
background: #e16a74;
border: 2px solid #e16a74;
margin: 12px 0 ;
cursor: pointer;
font-size: 18px;
padding: 5px;
color: white;
}
.btn {border-radius: 12px;}
.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
bottom:0;
}
.copyright h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10;
text-align: center;
}
.login-box button.link
{
background:none;
border:none;
color: wheat;
font-family: 'Teko', sans-serif;
font-weight: normal;
font-size: 20px;
position:relative;
bottom:1000%;
left:55%;
}
Firsts, check your code to be valid :) For example, <img> element should not have a closing tag. You should always try to have valid html because html with errors can affect rendering in browsers.
Secondly, I see that you added a <br> after <body> and before <img>. Possibly this is to make a small margin above the logo. Don't do that because this way you will never get a reliable distance from the top across browsers. Remove <br> and use margin-top: 16px or so style in your css for img.
Next, give a css class to your p element, like <p class="bank-name"> and style it in css:
.bank-name {
color: white;
margin-top: 10px;
}
This p is very specific, so you should give it a dedicated class because you can have other <p>s on the page that do not need the same appearance.
Two more things:
Avoid inline styles in html.
Do not use !important unless you have a huge reason to do it.
Also <p> is block by default, so you do not need that display: block in html. You can often find default styles at W3school.
Hope, this helps!
You just need to have a div tag to regroup your image and text. That div must have display: block so that the text won't be on the same line, but under. Now depending of the width of the image, you will probably need to align the text with text-align: center
You can read more about css rules on w3Schools
img {
display: block;
text-align: center;
}
<div>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span>Maze Bank Of </span>Los-Santos</p>
</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>
My CSS works fine but after adding Bootstrap through source files, some CSS styles were removed and were overridden by bootstrap's. I also tried using Bootstrap CDN but still, the same results. I also tried my previous projects as a reference, everything's the same but this one's not working. Here's my code:
This is my CSS and HTML File:
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
#font-face {
font-family: Minima;
src: url(font/Minima.TTF);
font-family: Arial;
src: url(font/arial.TTF);
}
/*home background image*/
#header {
background-image: url("../images/home.jpg");
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#mytitle {
color:#f2f2f2;
font-size: 60pt;
padding-top:20%;
font-family: Minima;
text-align:center;
}
#subtitle {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
#subtitle2 {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
/*navigation */
.div-menu .sub-menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
margin-right:5%;
margin-left:5%;
float:right;
font-family: Arial;
}
.div-menu .sub-menu li {
float:left;
}
.div-menu .sub-menu li a {
display: block;
text-decoration: none;
color: #FFF;
text-align:center;
padding: 14px 16px;
}
/*for ghost button*/
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
border-radius: 7px;
font-size:15pt;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAME | Web Profile</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="header">
<div class="div-menu">
<ul class="sub-menu">
<li>LOGO</li>
<li>Home</li>
<li>Profile</li>
<li>Experiences</li>
<li>Education</li>
</ul>
</div>
<div class="text">
<h1 id="mytitle">SOME CAPTION HERE</h1>
<h2 id="subtitle">CAPTION AGAIN</h2>
<br>
<br>
<h2 id="subtitle2">CAPTION AGAIN</h2>
</div>
</div>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
Your order should be like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
you should change the order in which your css file is loaded ie,
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Read more about it here: http://www.w3.org/TR/CSS2/cascade.html
Edit1:
As shown below * and body(tags) has lower precedence than class selectors, because of that your custom CSS is getting overridden by bootstrap, as bootstrap gives styles based on the classes such as container. To resolve this you can give a class to the body and apply all styles to that class.
* {
color: red;
}
.class{
color:purple;
}
span{
color: orange;
}
<p>p tag with out any class</p>
<p class="class"> Class has more precedence than * <p>
<span class="class"> Class has more precedence than tag(such as body, span, p etc) </span>
I know that this should be a simple fix, but I just can't seem to figure out how to place my nav to sit directly on top of the h4 that is positioned on the bottom of the page. I want to have this feature continue throughout my site and don't want to move forward until I can resolve this issue. Any Help is very much appreciated.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper=">
<div id="name">
<h1>Nathan Langer</h1>
</div>
<div id="content"></div>
<div id="footer">
<nav>
<ul>
<li><strong>home</strong><img class="logos" src="images/homelogo.png" width="45"height="35"></li>
<li><strong>resume</strong><img class="logos" src="images/resume logo.png" width="36"height="37"></li>
<li><strong>portfolio</strong><img class="logos" src="images/portfolio logo.png" width="45"height="35"></li>
<li><strong>what i do</strong><img class="logos" src="images/camera logo.png" width="60"height="37"></li>
</ul>
</nav>
<h4>for professional video and media production</h4>
</div>
</div> <!-- close for wrapper -->
</body>
</html>
CSS
body {
background: url(images/test.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
margin: auto}
#name {
text-align: center;
margin-top: -65px;
font-size: 40px;
color: white;
font-family: 'Dr Sugiyama', cursive;
text-shadow: 0 1px 0 #333,
0 2px 0 #333,
0 3px 0 #333,
0 4px 0 #333,
0 5px 0 #333,
0 5px 4px #989898;
}
#footer {
width:100%;
height:93px;
position:absolute;
bottom:0;
left:0;
right:0;
}
nav{position: relative;text-align: center;}
nav ul {list-style: none; }
li {
display: inline;
border: 2px solid rgb(256,256,256);
font-family:'Ubuntu', sans-serif;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3 ;
padding: 13px;
margin: 10px;
}
img.logos{vertical-align: -11px; padding-left: 3px;}
nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: white;}
h4 {
text-decoration:none ;
text-align: center;
background-color: #A3A3A3;
color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* resume page */
/* end resume page */
/* portfolio page */
#warning {
text-align: center;
color: white;
font-size: 35px;
padding-top: 100px;
}
Check if this works: http://jsfiddle.net/IronFeast/n85Cd/2/
Changed the h4 to div.production, removed the height of the footer and added position:relative
Try adding "clear:both" to the main nav designation:
nav{position: relative;text-align: center; clear:both}