I'm trying to use a css wizard type component i found:
.wizard li {
background-color: #E4E4E4;
border-radius: 5px;
display: inline;
padding: 10px 30px 10px 40px;
margin-right: -7px;
width: auto;
}
.wizard li::before, .wizard li::after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-color: transparent;
border-left-color: #fff;
border-radius: 10px;
}
.wizard li::before {
border-width: 25px;
margin-top: -16px;
margin-left: 84px;
}
.wizard li::after {
border-left-color: #E4E4E4;
border-width: 21px;
margin-top: -12px;
margin-left: 24px;
}
.wizard li.selected {
background-color: #FF4F65;
color: #fff;
}
.wizard li.selected::after {
border-left-color: #FF4F65;
}
.wizard li:last-child::after {
border-left-color: transparent;
}
I want to use this on a large site that does not use a normalize/reset. The component only seems to work when you use normalize.css. Is there any way that i can just use normalize.css on this component rather than an entire page?
If you inspect the element, you'll see that the font-family is causing the issue.
From normalize.css:
html {
font-family: sans-serif; /* i'm causing it */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
So simply add some font-family to the .wizard li, like arial.
Check the codepen
Or if you're using some custom font, then you have to modify the values (border-width, margin-top, margin-left) for the pseudo elements (.wizard li::before and .wizard li::after).
Related
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
I've created a custom breadcrumb in jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/ . When you shrink the width of the page the text is on 2 lines on the last 2 breadcrumbs but is only on one line on the first breadcrumb. This causes the grey background to be out of line on the first breadcrumb with the other 2.
How can I get this to always be the max height of the largest breadcrumb so they're all uniform height no matter if one has got one line of text and another 2 lines of text?
<div id="breadcrumb-container">
<ul class="breadcrumb">
<li>Surgery Started</li>
<li class="current">Surgery Started</li>
<li>Surgery Compl'd</li>
</ul>
</div>
div#breadcrumb-container {
width:100%;
}
div#breadcrumb-container li {
width: 33%;
}
div#breadcrumb-container li:last-child {
width: 34%;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 13px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
background: #C7C7C7;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 5px 5px 5px 45px;
position: relative;
display: block;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #C7C7C7;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #001940;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
}
.breadcrumb li:first-child a {
padding-left: 12px;
border:none;
}
.breadcrumb li:last-child a:after {
border:none;
}
.breadcrumb .current {
background:#007ACC; color:#fff;
pointer-events: none;
cursor: default;
}
.breadcrumb .current a:after {
border-left-color:#007ACC;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: #007ACC; }
.breadcrumb li a:hover:after { border-left-color: #007ACC !important; }
Also, how do I get all 3 breadcrumbs to be exactly the same size? At the minute the first one is bigger than the other 2.
Thanks in advance to anyone who can help!
I am just cleaning up some CSS for a client.
I am not a front-end person, but have been saved by bootstrap (thank you, twitter).
However, I am having a really hard time cleaning up a custom navigation panel
(no twitter). I have provided the CSS below. I need it to be able to:
1) close gracefully at the end (the beginning starts with a vertical border, not an arrow.
I would like the end to have symmetry and close the way it began).
2) Get the container to not expand to the end of the page.
3) I can't seem to get it to work in chrome. It falls apart in chrome but works in IE and Ff.
Here is the link. Any advice? Thanks so much.
http://annualdinnerdev.elasticbeanstalk.com/
/* ------- Wizard Interface ---------- */
#wizHeader
{
border: solid 3px #fff;
margin-bottom:25px;
-moz-box-shadow: 3px 3px 4px #C2CBCE;
-webkit-box-shadow: 3px 3px 4px #C2CBCE;
box-shadow: 3px 3px 4px #C2CBCE; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C2CBCE')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color= '#C2CBCE' );
}
#wizHeader li label
{
font-size:x-large;
}
#wizHeader li a
{
font-size:large;
}
#wizHeader li .prevStep
{
background-color: #D6E6FA;
color:#000;
}
#wizHeader li .prevStep:after
{
border-left-color: #D6E6FA !important;
}
#wizHeader li .currentStep
{
background-color: #6699CC;
color:#fff;
}
#wizHeader li .currentStep:after
{
border-left-color: #6699CC !important;
}
#wizHeader li .nextStep
{
background-color: #F0E9EA;
color:gray;
}
#wizHeader li .nextStep:after
{
border-left-color: #F0E9EA !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 18px;
}
Add a background color to #wizHeader to create the visual of a right-side border.
Specify a width value in #wizHeader to prevent it from expanding to the right of the page.
It seems to be working fine on Chrome for me (latest version)
Here are some examples of declarations to add to #wizHeader (add these to the ones currently in the CSS declaration)
#wizHeader {
background: #6699CC;
width: 960px;
}
Adding more based on comment...
The reason the arrows are being bumped down is because the 's are block elements, floated left, so they'll flow to fit whatever width they have available and drop down onto the next line when they run out.
If you want to cut off the last arrow, you'll have better luck by targeting the that wraps the last . This worked for me, editing in Chrome's Inspector:
#wizHeader li:last-child {
width: 172px; /* you might have to tweak this a bit*/
overflow: hidden;
padding-right: 0;
}
Then, change the width of the #wizHeader accordingly. 930px wide seemed to do the trick with the above snippet.
At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx
I am using the nice style of the wizard mentioned in this blog
but unfortunately it does not work well in the IE, because as mentioned in the blog:
For browsers that don’t support :after/:before/ nth-child, the code will not work.
So is there any way to fix this problem to make work well in the IE browser.
FYI, the CSS is:
#wizHeader li .prevStep
{
background-color: #669966;
}
#wizHeader li .prevStep:after
{
border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
background-color: #C36615;
}
#wizHeader li .currentStep:after
{
border-left-color: #C36615 !important;
}
#wizHeader li .nextStep
{
background-color:#C2C2C2;
}
#wizHeader li .nextStep:after
{
border-left-color:#C2C2C2 !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 50px;
}
#wizHeader li a:hover
{
background: #FE9400;
}
#wizHeader li a:hover:after
{
border-left-color: #FE9400 !important;
}
.content
{
height:150px;
padding-top:75px;
text-align:center;
background-color:#F9F9F9;
font-size:48px;
}
The before and after css elements should work in ie8 and up.
For IE7 you can use something like Use the IE7.js hack to add after & before pseudo element support.
I would recommend using a conditional statement to include the file such as;
<!--[if IE 7]>
insert script here
<![endif]-->
For IE6, I personally would not bother and just degrade gracefully.
Another option is to use ie-css3.js.