Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?
edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .largebutton:hover
{
background-color: #9999FF;
}
edit - Full files
HTML
<html>
<head>
<link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
</head>
<body>
<div class="top">
<div class="content">
</div>
<div class="leftbuttonbox">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
</div>
<div class="bottombar">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
<div class="label">
This is a label, it grows as large as it needs to
</div>
</div>
<div class="cap">
<div class="capinner">
</div>
</div>
</div>
</body>
</html>
CSS
#font-face {
font-family: "LCARS";
src: url('../FONT/lcars.ttf');
}
body
{
font-family: "LCARS";
position: relative;
background-color: black;
padding: 0px;
margin: 0px;
}
.top
{
position: relative;
height: 220px;
min-width: 100px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #6666FF;
-moz-border-radius-bottomleft: 50px;
}
.top .content
{
position: absolute;
top: 0px;
right: 0px;
left: 100px;
bottom: 25px;
background-color: black;
-moz-border-radius-bottomleft: 25px;
}
.top .leftbuttonbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
bottom: 60px;
background-color: black;
overflow: hidden;
}
/*
* the button is 1/2 the size of the large button
* the button box can hold 4 buttons or 2 large
* buttons or any combination of equal size
*/
.top .leftbuttonbox .button
{
position: relative;
height: 35px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 53px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .button:hover
{
background-color: #9999FF;
}
.top .leftbuttonbox .largebutton
{
position: relative;
height: 75px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 133px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.top .bottombar .button
{
position: relative;
float: left;
height: 100%;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .button:hover
{
background-color: #9999FF;
}
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top:hover .bottombar:hover .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar .label
{
position: relative;
float: left;
height: 100%;
min-width: 50px;
font-size: 22px;
letter-spacing: 1px;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
background-color: #CC99CC;
margin-left: 5px;
cursor: default;
}
.top .cap
{
position: absolute;
height: 25px;
width: 20px;
right: 0px;
bottom: 0px;
padding-left: 5px;
padding-right: 5px;
background-color: black;
cursor: default;
}
.top .cap .capinner
{
position: relative;
height: 100%;
width: 100%;
background-color: #6666FF;
cursor: default;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
}
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)
I suggest this solution:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
This worked for me when I tried it with your full code.
Hope it works for you :)
Amit
The key concept of styling a link stands toward following steps:
You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
Eventhough you don't need styling one or more of conditions, nevertheless, style them all.
If you pay attention to these, you may have perfectly styled links.
I hope it helps.
Related
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
I am building bootstrap based web and I am trying to make title inside of a frame with text attached in the middle of bottom border and still be responsive. Small text on small devices can go in multiple rows, or even go inside the box.
All I could do is. And I want to do it like .
I hope someone already done this and/or could help me doing it.
Thanks in advance.
One big detail is it should be completely transparent so it can go over a backround picture.
And it is much differend than fieldset because the "legend" is on bottom.
Update:
See fiddle
CSS:
.navbar-brand {
margin: 0;
color: #ffffff;
text-align: center;
position: relative;
display: inline-block;
border-top: 8px solid #ffffff;
padding: 5px 32px 0px 32px;
line-height: 1.08333333;
height: auto;
}
.navbar-brand:before {
position: absolute;
content: '';
left: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand:after {
position: absolute;
content: '';
right: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #ffffff;
text-decoration: none;
}
.navbar-header + h3 {
margin-top: 61px;
}
.navbar-header {
text-align: center;
}
.small-lines:before {
position: absolute;
content: '';
left: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines:after {
position: absolute;
content: '';
right: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines1:before {
width: 38%;
background: #009fb6;
}
.small-lines1:after {
width: 38%;
background: #009fb6;
}
.navbar-brand a{
font-size: 48px;
}
.container{
margin-top: 150px;
}
small {
line-height: 1.2;
font-size: 24px;
letter-spacing: 4.8px;
display: block;
position: relative;
}
HTML:
<body style="background: black">
<header class="">
<div class="container text-center">
<div class="navbar-header">
<h1 class="navbar-brand ">
<a href="./">BIG TITLE ONE<br>
<small class="small-lines">Here comes small text</small>
</a>
</h1>
</div>
</div>
</header>
</body>
I have an relative button
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative
}
I am trying to center it in the middle of screen. But it is stuck on the same place , the margins does not affect it. Parent element of this button is div with styles as follows:
parent {
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
}
What could possibly cause this? Demo is here
html,
body {
height: 100%;
}
body {
margin: 0;
}
.button {
width: 305.4px;
height: 60px;
background: #E43B40;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.parent{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-color: #F8F8F8;
text-align: center;
}
<div class="parent">
<button class="button" type="button">Button</button>
</div>
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
display:inline-block;
float:none;
}
parent{
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
text-align:center;
}
i have updated both classes. apply it in your css.
I currently have this HTML:
#circle {
background-color: orange;
max-width: 40px;
margin-right: 20px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float:left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv{
float:left;
}
<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>
I'm trying to achieve this effect:
Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?
The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.
The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.
Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.
#circle {
background-color: orange;
max-width: 40px;
margin-right: 50px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
clear: both;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
position: relative;
height: 40px;
line-height: 40px;
}
#pointerDiv:before {
content: '';
position: absolute;
border: 1px solid black;
top: 50%;
left: -58px;
width: 55px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>
You can either use a CSS border or a SVG to draw a line (may not be compatible with some browser)
#circle {
background-color: orange;
max-width: 40px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
line-height: 40px;
}
#line-svg {
float: left;
margin-top: 20px;
margin-left: -6px;
width: 100px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>
You could always use pseudo elements? I've created a basic mockup below:
.circle {
height: 55px;
width: 55px;
border-radius: 50%;
background: orange;
position: relative;
display: inline-block;
}
.circle:before {
position: absolute;
content: "hi";
height: 60%;
top: 20%;
left: 20%;
width: 60%;
border: 2px solid black;
}
.circle:after {
position: absolute;
content: "";
width: 100%;
right: -85%;
top: 50%;
border-bottom: 1px solid black;
}
.tooltip {
display: inline-block;
margin-left: 55px;
height: 60px;
width:60px;
}
.wrapper{
display:block;
}
<div class="wrapper">
<div class="circle"></div>
<div class="tooltip">text goes here</div>
</div>
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.