I am trying to add a mini triangle to the hover state of navigation bar.
HTML:
<div id="menu_bars">
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri">Over</li>
<li class="maintabs maintabs_tri">Collar</li>
<li class="maintabs maintabs_tri">Bod</li>
</ul>
</div>
<div id="css_arrow" class="maintabs_tri">
</div>
</div>
The 'main_bar' div creates a horizontal navigation menu.
The div id 'css_arrow' is being use to create an arrow which will show up on hover state.
I game them all a class called 'maintabs_tri' which includes the triangle and the 'main_tab' navigation menu, so that when the hover state becomes active, the triangle appears on the navigation bar.
CSS:
/* START OF MAIN BAR */
#main_bar ul {
float: left;
width: 630px;
height: 48px;
}
.maintabs {
display: inline-block;
width: 25%;
list-style-type: none;
background: rgba(237,237,237,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(237,237,237,1));
background: -webkit-gradient(linear, top, bottom, from(rgba(255,255,255,1)), to(rgba(237,237,237,1)));
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-transition-property:
}
.maintabs:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.maintabs:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.maintabs a {
display: block;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 14px;
text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 18px 0px;
}
.maintabs ul {
display: none;
list-style-type: none;
}
.maintabs ul li a {
text-decoration: none;
}
/* END OF MAIN BAR */
/* TRIANGLE ------ for testing, to be used with hover later */
#css_arrow {
border-color: transparent transparent rgba(111,46,11,0.0) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
top: 34px;
left: 78px;
}
.maintabs_tri a:hover {
border-color: transparent transparent rgba(111,46,11,1) transparent;
}
Could someone share why this is not working? I cannot figure out for the life of me...
Adding to .maintabs_tri a:hover this: border-bottom: 3px solid #000 fixes it in Chrome.
The issue was that there was no border-width or border-style defined.
Related
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
JSFiddle
HTML
<div class="Progress">
<div class="Step">
</div>
<div class="Tri-Fwd"></div>
</div>
CSS
.Progress .Step {
float:left;
width:140px;
height:40px;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
}
.Progress .Tri-Fwd {
float:left;
border-top: 20px solid transparent;
border-left: 20px solid;
border-bottom: 20px solid transparent;
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
}
Reference Image
The Problem
I'm trying to make a CSS only only step-by-step progress however I am having problems with my inner box shadows.
ADVANCED
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background: linear-gradient(#fff, #ccc);
margin: 40px auto;
border: 1px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden;
box-shadow: inset 0px 0px 2px #333, 0 0 1px #333;
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 30px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
background: linear-gradient(#f6e6b4 0%, #ed9017 100%);
}
menu li:before, menu li:after{
content: '';
position: absolute;
}
menu li:before{
top: 5px;
width: 30px;
height: 30px;
transform: rotate(45deg);
right: -13px;
box-shadow: 2px -2px 1px 0px #BABABA;
background: linear-gradient(135deg, #f6e6b4, #ed9017);
}
menu li.active{color: white}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
menu li:not(:nth-child(1)){margin-left: -4px; padding-left: 40px}
<menu>
<li>Stage 1</li>
<li class=active>Stage 2</li>
</menu>
THE BASIC
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background-color: #ccc;
margin: 40px auto;
border: 2px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 4px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
box-shadow: -2px 0 0 orange;
background-color: orange
}
menu li:before, menu li:after{
content: '';
position: absolute;
top: -2px;
border-bottom: 22px solid transparent;
border-top: 22px solid transparent
}
menu li:before{
border-left: 20px solid #ccc;
left: 100%;
}
menu li:after{
border-left: 20px solid orange;
left: 98%;
}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
<menu>
<li>Stage 1</li>
<li>Stage 2</li>
</menu>
I have uploaded a web page
The problem is that when I resize the window of browser, the content overlaps with each other. I saw multiple posts related to the topic online, but was not able to find a reasonable answer. I have tried position relative and everything I knew of. If you know, anything about how to solve this issue, please tell me.
CSS:
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#charset 'UTF-8';
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
#intro
{
position:relative;
width:100%;
height:30%;
background: #566074;
min-width:50%;
min-height:20%;
}
#nav
{
position:relative;
width: 100%;
height: 7%;
}
#buffer
{
position:relative;
width:100%;
height:1%;
}
/* Base Styles */
#nav ul,
#nav li,
#nav a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family: 'Lato', sans-serif;
}
#nav {
border: 1px solid #133e40;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
width: auto;
}
#nav ul {
zoom: 1;
background: #36b0b6;
background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#top-color', endColorstr='#bottom-color', GradientType=0);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#nav ul:before {
content: '';
display: block;
}
#nav ul:after {
content: '';
display: table;
clear: both;
}
#nav li {
float: left;
margin: 0 5px 0 0;
border: 1px solid transparent;
}
#nav li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
}
#nav li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}
#nav li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #36b0b6;
}
#nav li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}
img
{
height:100%;
position:relative;
width:15%;
padding-right:2%;
float:left;
}
#intro p
{
color: white;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:150%;
padding-top:2%;
font-weight:bolder;
}
#buffer1
{
width:100%;
height:1%;
position:relative;
}
#content {
position : absolute;
width : 99%;
height : 60%;
background-color : #566074;
text-align: center;
}
#content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<html>
<head>
<title>
HomePage
</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div id= 'intro'>
<img src="pics/Sushil_Parti.jpg" alt="Sushil Parti">
<p>
Sushil Parti <br>
Graduate Student <br>
Dept. of Computer Science <br>
University of Windsor
</p>
</div>
<div id='buffer'></div>
<div id='nav'>
<ul>
<li class='active'> <a href='#'><span>About</span></a></li>
<li> <a href='academics.html'><span>Courses</span></a></li>
<li> <a href='research.html'><span>Research</span></a></li>
<li> <a href='work.html'><span>Work Experience</span></a></li>
<li> <a href='activities.html'><span>Activities</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Me</span></a></li>
</ul>
</div>
<div id='buffer1'></div>
<div id ='content'>
<div id='info'>
<p>
Hi, I am a first year MSc student in Computer Science at
University of Windsor. </br>
I am currently working under the supervision of Prof. Dan Wu. My research interests
include Computer Vision, Robotics, Machine Learning and AI.
<br> <br>
I have completed my bachelors degree (B.Tech) in Computer Science with specialization in Software Engineering from Lovely Professional University
in 2011.<br><br>
Curriculum Vitae [PDF]
</p>
</div>
</div>
</body>
</html>
Image of webpage after window is resized.
![enter image description here][1
This is doing what you told it to do. You have min-height of #intro set to 20%. If you make the browser too small, then that 20% is not tall enough to show all of your text.
Try setting the min-height to be 150px. That seems to be enough to keep your text from being clipped. Then it will still grow if you make the window taller.
I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/
You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/
I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
jsFiddle
How do I fix this?
ETA I tried #jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you #jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also?
Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";
Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}
Since CSS is not giving you the desired result, you may have to do a right-aligned background image for this one.
HTML
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
CSS
.guideList .active{
background: url('images/right-arrow.png') #0390d1 center right no-repeat;
color: white;
}
you can use this html And Css for this :
Css:
.Rectangular{
width: 100px;
height: 30px;
text-align: left;
position: relative;
background-color: #0390D1;
color: #fff;
padding-left: 10px;
font: 12px/30px tahoma;
margin-right: 100px;}
.Rectangular>span{
display: inline-block;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0390D1;
border-left: 30px solid #0390D1;
border-right: 30px solid rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px;
position: absolute;
right: -29px;
top: 0;
}
HTML :
<div class="Rectangular">Law <span></span></div>