I want to create Y-axis like line in HTML and CSS. I want this line should look like Y-axis only.
I tried the following approach. It is working as per my expectation but it doesn't look good.
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<table >
<tr>
<td><span style="writing-mode: vertical-lr;
transform: rotate(180deg);"> <b>Secondary Axis</b></span></td>
<td>
<ul>
<br><br><br>
<li>3</li><br><br><br><br>
<li>2</li><br><br><br><br>
<li>1</li><br><br><br><br>
<li> 0</li><br><br><br><br>
</ul>
</td>
<td>
<div style="border-left: 1px solid black; height:250px;position:left;left: 50%;">
</div>
</td>
</tr>
</table>
Also it is consuming space in the top or bottom. May be it is because I have used br tag.
Does anyone suggest what changes/modification I need to do, so that it looks like Y-Axis.
Thanks
Here is the way you can create it,
Use display: flex; on parent to make child flexible
flex-direction: column; to show items in a column, if you will not give this then items will appear on single line like X asix.
justify-content: space-between; to devide the equal gap between items
Note: You can increase and decrease the numbers in LI, they will auto adjust.
.wrapper {display: flex;}
ul {list-style:none; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid; }
li {
text-align:right;
position: relative;
padding-right: 5px;
}
li:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
transform: translate(60%, -50%);
}
<div class="wrapper">
<ul>
<li>0.0005</li>
<li>13</li>
<li>12.44</li>
<li>1</li>
<li>.100</li>
</ul>
</div>
I think there are a lot of mistakes in your code..
The space problem is because your
The second problem is because you have used the vertical line as div with height style (you can enlarge the 250px (to catch the you have added))
in button line, if you planning to use this for adding formula or something this will not work for you.
start with html canvas or svg
ul {
list-style:none;
border-right: 1px solid;
width: 20px;
}
li {
margin-bottom: 125px
}
li:after {
content: "-";
padding-left: 9px;
}
<ul>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
You can use Pseudo elements and CSS counters
*{
box-sizing: border-box;
padding: 0;
margin:0;
}
body{padding: 6rem}
ul{
position: relative;
counter-reset: timeline-counter -1;
border-left: 1px solid black;
transform: scale(-1) rotateY(180deg);
}
ul li{
position: relative;
counter-increment: timeline-counter;
height: 32px;
color: white;
background-color: grey;
margin-bottom: 1rem;
list-style: none;
transform:rotateX(180deg);
line-height: 32px;
padding-left: 1rem
}
ul li:before {
content: "0" counter(timeline-counter);
position: absolute;
top: 8px;
left: -32px;
font-size: 1rem;
color: black;
line-height: 1;
}
ul li:after {
content: "";
--height-lenght: 1px;
position: absolute;
top: calc(50% - var(--height-lenght));
left: -6px;
width: 12px;
height: var(--height-lenght);
background-color: hsl(0deg 0% 0%);
}
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
<li>Line 6</li>
</ul>
Or using flex box
*{
box-sizing: border-box;
padding: 0;
margin:0;
}
body{padding: 6rem}
ul{
position: relative;
counter-reset: timeline-counter -1;
border-left: 1px solid black;
flex-direction: column-reverse;
display: flex;
}
ul li{
position: relative;
counter-increment: timeline-counter;
height: 32px;
color: white;
background-color: grey;
margin-bottom: 1rem;
list-style: none;
padding-left: 1rem;
line-height: 32px;
}
ul li:before {
content: "0" counter(timeline-counter);
position: absolute;
top: 8px;
left: -32px;
font-size: 1rem;
color: black;
line-height: 1;
}
ul li:after {
content: "";
--height-lenght: 1px;
position: absolute;
top: calc(50% - var(--height-lenght));
left: -6px;
width: 12px;
height: var(--height-lenght);
background-color: hsl(0deg 0% 0%);
}
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>
Related
I have a status bar that looks like this
but I would like it to look like this
This code I am using for the current one is below. My question is this: would it be easier to do this using a non clickable formatted radio button, which I have seen with a similar look, or to use a totally different approach? I think I can figure out how to change the colors based on what the current status is, but I don't know how to do the basic drawing of the shape.
.container {
width: 800px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6666%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li class="active">NOI Recieved</li>
<li class="active">Request To Recieved</li>
<li class="active">Recieved to Compelte</li>
<li>Complete To Source</li>
<li>Public Comment</li>
<li>Branch Manager Issues</li>
</ul>
</div>
You could accomplish the basic shapes using a container with a border radius and overflow hidden, and skewed pseudo elements for the segments. Here's a quick proof-of-concept:
ul {
list-style: none;
display: inline-flex;
border: 1px solid black;
border-radius: 600px;
overflow: hidden;
}
li {
padding: 1em 2em;
position: relative;
}
li::before {
content: '';
position: absolute;
inset: 0;
border-right: 1px solid black;
transform: skew(-30deg);
background: bisque;
z-index: -1; /* behind the text */
}
li:first-child {
/* extend the first item leftward to fill the rest of the space */
margin-left: -4rem;
padding-left: 4rem;
}
li:last-child {
/* extend the last item rightward to fill the rest of the space */
margin-right: -2rem;
padding-right: 4rem;
}
.active::before {
background: skyblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li class="active">Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>
I wanted to create a navigation bar like this, " Artist News HH Blog Contact " With HH being the title of the page. I want the navigation alongside the heading. I attempted it but it isn't right and its very untidy.
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists</li>
<li>News</li>
<h1>HH</h1>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
heres my code
There's a few things wrong with your code, mainly the invalid html around the <h1>HH</h1> bit.
I updated your CSS as well to position the HH properly in between the other links. I change your h1 css as well as .main-nav h1.
Also if you remove the width: 10%; from the h1 css it will fix the border on the heading.
h1 {
text-align: center;
font-size: 50px;
padding-bottom: 1px;
margin-top: 0px;
border-bottom: 6px solid black;
}
#heading {
position: fixed;
z-index: 1;
width: 100%;
height: 134px;
text-align: left;
padding: 1em 0;
border-bottom: 2px solid black;
top: 0;
background-color: #f6f6f6;
}
/*================================================================================================================================*/
/* navigation styles*/
.main-nav-scrolled {
width: 100%;
position: fixed;
top: 0;
}
.main-nav a {
text-decoration: none;
color: Black;
text-transform: uppercase;
font-weight: 600;
display: block;
padding: 10px 10px;
opacity: 1;
}
.main-nav h1 {
font-weight: normal;
}
nav {
width: 100%;
margin: 0 auto;
position: relative;
}
nav ul {
display: inline-block;
list-style: none;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
margin-top: -1.7%;
margin-left: -5%;
}
nav ul li {
display: inline-block;
margin-left: 6%;
padding: 3px
}
.main-nav h1 a {
position: relative;
color: #000;
text-decoration: none;
}
/* navigation hover styles*/
/* nav ul */
nav ul a {
position: relative;
color: black;
text-decoration: none;
}
nav ul a:hover {
color: #000;
}
nav ul a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
top: -3px;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX (0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*================================================================================================================================*/
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists
</li>
<li>News
</li>
<li>
<h1>HH</h1>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
Move the <h1> element into a <li> and remove some of the css. Here is what my final looks like, and it works.
h1{
text-align: center;
font-size: 50px;
padding-bottom:1px;
margin-top:0%;
border-bottom: 6px solid black;
}
<ul>
<li>Artists</li>
<li>News</li>
<li><h1>HH</h1></li>
<li>About</li>
<li>Contact</li>
</ul>
I would not use h1 at all. Use
<li id=hs>HH </li>
In css use
#hs
Font-size:16;
Or something that fits your need. Sorry for layout I am writing on phone.
One thing is that you're putting your <h1>HH</h1> in there illegally. You've got your <ul>, so you need to make your header a list element by doing <li><h1>HH</h1></li>.
You can delete your margin-left: 44%; from your h1 in your css now. That should clean it up a bit.
i need to know, how to recreate the same effect that you can see on this page:
http://www.google.it/#q=meteo
There is a nice "widget" meteo, that i'm trying to recreate on my website.
When you click on one of the next day (bottom space of the widget) the middle content change.
How i can do it the same?
P.s.: sorry for my bad english.
If you don't have to load dynamic data, you can see this widget as a simple slider. Here's an example I made for you :
$('#widget .nav li').click(function(e) {
$('#widget .nav li').removeClass('active');
$(this).addClass('active');
$('#widget .content').animate({
left: $('#widget .nav li').index(this) * -265
}, 300);
});
#widget {
position: relative;
width: 265px; height: 200px;
overflow: hidden;
border: 1px solid #bcbcbc;
}
#widget ul {
list-style: none;
margin: 0; padding: 0;
}
#widget .nav {
position: absolute; bottom: 0; left: 0;
}
#widget .nav li {
display: block;
float: left; margin: 5px 0 5px 5px;
width: 30px; height: 30px;
text-align: center; line-height: 30px;
cursor: pointer;
border: 1px solid #dedede;
}
#widget .nav li:hover,
#widget .nav li.active {
background: #efefef;
border-color: #bcbcbc;
}
#widget .content {
position: absolute; top: 0; left: 0;
display: block;
width: 1855px; height: 150px; /* 1820 = 265*7 */
}
#widget .content li {
display: block;
float: left; padding: 5px;
width: 255px; height: 150px;
text-align: center; line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="widget">
<ul class="content">
<li>Content Monday</li>
<li>Content Tuesday</li>
<li>Content Wednesday</li>
<li>Content Thursday</li>
<li>Content Friday</li>
<li>Content Saturday</li>
<li>Content Sunday</li>
</ul>
<ul class="nav">
<li class="active">Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
</div>
I have a problem in my drop-down-menu (here's my fiddle: http://jsfiddle.net/iamthestig/Vhs2v/). When you click products there's a drop-down-menu on the left side, but the other navigation elements in the bottom slide down too. Is there a way to stop that from happening? I've been reading some tutorials for the drop-down-menu for a couple of hours. And that's why I have this code. But I can't achieve what I want to happen. Hope you guys can help me out. Thanks!
Here's my code:
HTML
<body>
<nav>
<ul class="nav">
<li>Home</li>
<li class="products">
Products
<ul class="subnav-products clearfix">
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
<li>Product Four</li>
<li>Product Five</li>
<li>Product Six</li>
</ul>
</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: darkgray;
}
.nav {
width: 100px;
position: absolute;
top: 30px;
right: 20px;
list-style: none;
}
.nav li {
margin: 0 0 10px 0;
font-family: Helvetica;
font-size: 11px;
text-align: right;
text-transform: uppercase;
line-height: 1;
}
.nav li:nth-child(5) {
margin: 0;
}
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
}
.subnav-products {
width: 300px;
position: relative;
top: -31px;
left: -300px;
display: none;
}
.subnav-products li {
width: 150px;
margin: 0;
text-align: center;
float: left;
}
.subnav-products li a {
display:block;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
JS/JQUERY
$(".products").on("click", function(){
$(".subnav-products").slideToggle();
$(this).toggleClass("active");
});
I gave the a elements relative positioning, and then the .subnav elements absolute positioning. After a bit of messing with the position this is what I came up with...
http://jsfiddle.net/Vhs2v/2/
CSS
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
position: relative;
}
.subnav-products {
width: 300px;
position: absolute;
top: 41px;
left: -300px;
display: none;
}