The following code with its output is also available in: https://jsfiddle.net/rupali317/rj4ashxq/
Goal: In the following code I am trying to create a workflow bar, showing step 1 , step 2 and so on.
Expected results: These steps are highlighted as green circular buttons and there should be blue arrows in between the circular green buttons.
Actual result: As depicted in my fiddle, the arrow lines appear first, followed by the three circular buttons and finally the two arrow heads.
Question: I have clearly specified the order of the html elements (which should give me my expected results). Question is, why the ordering is happening differently?
<html>
<head>
<style type="text/css">
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width: 120px;
}
.line {
margin-top: 25px;
width: 110px;
background: blue;
height: 1px;
float: left;
}
.head {
margin-top: 15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float: right;
}
</style>
</head>
<body>
<div>
<button class="green-button">1</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">2</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">3</button>
</div>
</body>
</html>
The float line in your css is going to force the line to appear to the left of the circles.
Try this:
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width:120px;
}
.line {
margin-top:25px;
width:100px;
padding:0 50px;
height:1px;
border-style:solid;
border-width:1px;
border-color:blue;
background:blue;
}
.head {
margin-top:15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Give your .arrow display inline block. This will order your arrows as the expected result indicates
.arrow {
width:120px;
display: inline-block;
}
Hope this helps :)
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width:120px;
display: inline-block;
}
.line {
margin-top:25px;
width:110px;
background:blue;
height:1px;
float:left;
}
.head {
margin-top:15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float:right;
}
<html>
<head>
</head>
<body>
<div>
<button class="green-button">1</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">2</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">3</button>
</div>
</body>
</html>
Related
I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
I am trying to learn CSS and as part of it I am trying to recreate the menu on
news.ycombinator.com without looking at how it is organized on the actually page.
Here is my css
body{
margin:0;
}
#outerdiv {
height:100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background:#fcfaf4;
position: relative;
left: 15%;
width:70%;
}
#menudiv{
background-color: rgb(255, 102, 0);
height:4%;
width:100%;
white-space:nowrap;
}
#ycimage{
border: 1px solid white;
width="18";
height="18";
padding:1px;
position: relative;
left:2px;
top:2px;
margin:2px;
}
p{
white-space:nowrap;
}
My html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="outerdiv">
<div id ="menudiv">
<img src="y18.gif" id="ycimage" >
<p>
<b id="companyname" >Hacker News </b>
|
new
|
comments
|
show
</p>
</div>
</div>
</body>
I have tried to define nowrap property on element inside div "menudiv"
HOwever, the word Hacker News appears on the new line, after the image. How can I keep it on the same line?
This is because <p> is for paragraph and clears both sides of it with a new-line. Remove the <p> or set it to be an inline object using Display
Something along the lines of:
p{display:inline;}
Consider using the <span> tag instead of the <p> tag.
I dont think you can achieve the way you have tried.
Make the elements display:inline-block.
body {
margin: 0;
}
#outerdiv {
height: 100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background: #fcfaf4;
position: relative;
left: 15%;
width: 70%;
}
#menudiv {
background-color: rgb(255, 102, 0);
height: 4%;
width: 100%;
}
ul {
list-style-type: none;
display: inline-block;
margin: 0;
}
ul li {
display: inline-block;
}
#ycimage {
border: 1px solid white;
width: 18px;
height: 18px;
padding: 1px;
position: relative;
left: 2px;
top: 2px;
margin: 2px;
}
<div id="outerdiv">
<div id="menudiv">
<img src="y18.gif" id="ycimage">
<ul>
<li> <b id="companyname">Hacker News | </b>
</li>
<li>new <strong>|</strong>
</li>
<li>comments <strong>|</strong>
</li>
<li>show</li>
</ul>
</div>
Hope it helps
How would i go about hiding or showing an element that is contained in a container, based on another container's hover state?
Here's what i have so far, as an example:
HTML5
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<a href="AppsDashboard" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</div>
</div>
</div>
CSS3
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
div.left-menu-item-first:hover left-menu-item-container.sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
However, that simply does not work. Hovering over the left-menu-item-first div does not show the submenu contained in the left-menu-item-container parent. Do they really and absolutely must be children of the parent for this to work with Pure CSS? I can and already had a JQuery version setup and going but i wanted to do it via CSS only if possible.
You can only alter child elements and sibling elements on hover, never a completely different element.
if you put the submenu right after the first menu element, you can use the sibling selector + as follows:
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
.left-menu-link:hover + .sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<span class="AppsDashboard">
<a href="AppsDashboard1" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</span>
</div>
</div>
</div>
Since there is no CSS parent selector, try altering your html such that the hovered item is a sibling of left-menu-item-container.sub-menu
Try using a CSS sibling selector:
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
div.left-menu-item-first:hover + left-menu-item-container.sub-menu
Or
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
.left-menu-link:hover + left-menu-item-container.sub-menu
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>