I followed this youtube video exactly on how to make some professional tabs
https://www.youtube.com/watch?v=FvzZjg-uP2k&t=241s
But my code didn't turn out the same way. I want it like theirs so i can scroll through the different tabs and make a separate html file for each one
I have tried following the video ( new at css) and i think i formatted it correctly
Here is my css/ html code:
Css code:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0px 20px 0px 20px;
height: 64px
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration:none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover{
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover;{
background: #ffffff;
color: #000000;
}
.main_container{
margin auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
My html code:
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>
I expect the html link to look like what he has at the end of the video, but the actual output is a bit off and cant scroll through the pages http://prntscr.com/nrkf6v this is my output not correct
You haven't formatted it correctly.
You had 5 or 6 CSS errors and a big one in HTML. (<body tag wasn't closed). As a rule of thumb, in web, every character counts. There are some exceptions, but that's exactly what they are: exceptions.
The rule is: "every mistake breaks something".
Here's the correct output.
The tool you want to check your code against is called validator. (HTML validator, CSS validator, etc...). Or you can use an IDE (a smart editor which understands and suggests code as you type, also letting you know when it thinks you've made a mistake, considering current web standards).
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>
Related
The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>
I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.
I'm trying to build a expanded menu using jQuery and css animations, so far the animations runs smothly the first time but the second time they're played they dont work.
I've seen people doing a similar menu using javascript classes but I need to keep this simple because this code will be maintened by people that don't know much about js
$('#button').on('click',function(){
if(!$('.menu').hasClass('stay')){
$('.menu').removeClass('close')
$('.menu').addClass('open')
setTimeout(function(){
$('.menu').addClass('stay')
$('.menu').removeClass('open')
},1000)
}else{
$('.menu').removeClass('stay')
$('.menu').addClass('close')
}
});
*{
font-family: monospace;
}
.menu{
background-color: gray;
color: white;
width: min-content;
padding: .5rem;
clip-path: circle(10% at 22px 22px);
}
ul{
list-style-type: none;
font-size: large;
font-weigth: 800;
padding: 1rem;
}
li{
border-bottom: solid 1px white;
padding-top: .4rem;
padding-bottom: .4rem;
cursor: pointer;
}
button{
border: solid 1px white;
cursor: pointer;
font-size: 2rem;
border-radius: 100%;
background-color: gray;
color: white;
}
.open{
animation: 1s circle-path;
}
.stay{
clip-path: circle(100%);
}
.close{
animation: 1s circle-path reverse;
}
#keyframes circle-path {
100% { clip-path: circle(100%); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="button">+</button>
<ul>
<li>Chat</li>
<li>Video</li>
<li>Minuta</li>
</ul>
</div>
You don't need to use an animation to open and close the menu. Just toggle a class. You can simplify your code like this:
$('#button').on('click', function() {
$('.menu').toggleClass('active')
});
* {
font-family: monospace;
}
.menu {
background-color: gray;
color: white;
width: min-content;
padding: .5rem;
clip-path: circle(10% at 22px 22px);
transition: 1s clip-path;
}
.active {
clip-path: circle(100%);
}
ul {
list-style-type: none;
font-size: large;
font-weigth: 800;
padding: 1rem;
}
li {
border-bottom: solid 1px white;
padding-top: .4rem;
padding-bottom: .4rem;
cursor: pointer;
}
button {
border: solid 1px white;
cursor: pointer;
font-size: 2rem;
border-radius: 100%;
background-color: gray;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="button">+</button>
<ul>
<li>Chat</li>
<li>Video</li>
<li>Minuta</li>
</ul>
</div>
I am trying to add a style to angularjs Directive with a seprated css file.
index-nav-bar-directive{
ul{
list-style: none;
margin: 0;
padding: 0;
}
h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus{
float: right;
}`[![enter code here][1]][1]`
}
And my html file is :
<body ng-app="IndexApp" ng-controller="indexController">
<index-nav-bar-directive> </index-nav-bar-directive>
</body>
And my directive HTML File:
<div class="root">
<div id="container" class="col-md-2">
<h1> Mongo : Data Bases</h1>
<ul id="todoList">
<li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
<li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
<li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
</ul>
</div>
</div>
I already saw that answer :
How to CSS style angular directive?
But its didn't work out.
Thank you very much!
Solved by Checking The Css inside :
Suppose to be like this form (in css you can't reach to inner attribute like i did)
div[index-nav-bar-directive] ul{
list-style: none;
margin: 0;
padding: 0;
}
div[index-nav-bar-directive] h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
div[index-nav-bar-directive] .fa-plus{
float: right;
}
div[index-nav-bar-directive] li{
cursor: pointer;
background-color: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
div[index-nav-bar-directive] span{
background-color: #e74c3c;
height: 40px;
margin-right:20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
transition: 0.2s linear;
}
div[index-nav-bar-directive] li:hover span{
width: 40px;
opacity: 1.0
}
div[index-nav-bar-directive] input{
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
div[index-nav-bar-directive] #container{
background-color: #f7f7f7;
width: 360px;
margin: 100px auto;
box-shadow: 0px 0px 7px 1px grey;
}
Trying to slide reveal a div but it seems there's a jitter or div won't be inline due to the display:block or something. What I want is when I click Share button, the div with social-icon reveals smoothly beside Share button. Someone please shed some light. Thanks in advance.
Codepen: http://codepen.io/rezasan/pen/XjgppW
Snippet Example below
$('.social').click(function(){
$('.social-icons').toggle("slide");
});
.social {
display: inline-block;
height: 47px;
color: #58585b;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
transition:width .2s ease;
-webkit- transition:width .2s ease;
}
.social-icons {
display: inline-block;
height: 47px;
color: #58585b;
font-family: "freight-text-pro",sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
margin-left: -5px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
<a>SHARE</a>
</div>
<div class="social-icons">
<a>FB</a>
<a>TW</a>
<a>G+</a>
<a>WS</a>
</div>
Update Css Using Float:left.
$('.social').click(function(){
$('.social-icons').toggle("slide");
});
.social {
display: inline-block;
height: 47px;
color: #58585b;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
transition: width .2s ease;
float: left;
}
.social-icons {
display: inline-block;
height: 47px;
color: #58585b;
font-family: "freight-text-pro",sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
/* margin-left: -5px; */
display: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
<a>SHARE</a>
</div>
<div class="social-icons">
<a>FB</a>
<a>TW</a>
<a>G+</a>
<a>WS</a>
</div>
Change the display properties of .social,.social-icons to float:left.
Heres the working Fiddle
Change
display: inline-block;
to
float: left;
I'm not saying I agree with your technique, but this should do the trick:
.social{
display: block;
width:46px;
height: 47px;
color: #58585b;
font-family: "freight-text-pro",sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
transition:width .2s ease;
-webkit- transition:width .2s ease;
float:left;
}
.social-icons{
display:none;
width:100px;
height: 47px;
color: #58585b;
font-family: "freight-text-pro",sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 47px;
padding: 0px 20px;
border: 1px solid rgba(88,88,91,0.5);
margin-left: 88px;
}
I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).