I'm trying to create an active state for a div.
Got the hover working but when i'm on the page in question the active won't show.
What i'm trying to implement is the same style as the hover.
Here's the css for the div.
#fp-design a { width: 240px; height: 47px; float: left; display: block; background:url(images/assets/break.jpg) no-repeat; background-position: top right; }
#fp-design a:hover { height: 44px; border-bottom: 3px solid #d3028e; text-decoration:none; }
#fp-design a:active { height: 44px; border-bottom: 3px solid #d3028e; text-decoration:none; }
#fp-design h2 { height: 20px; font-size: 16px; font-weight: bold; margin: 0; padding: 4px 0 0 12px; text-align: left; color: #FFF; text-decoration:none; }
#fp-design h3 { height: 11px; font-size: 10px; font-weight: bold; margin: 0; padding: 0 0 0 12px; text-align: left; color: #FFF; text-decoration:none; }
Here's the page code
<div id="fp-design">
<a href="<?php bloginfo('url'); ?>/web-design/"><h2>WEB DESIGN</h2>
<h3>PROFESSIONAL WEBSITE DESIGN</h3></a>
</div>
TIA
a:active means "is being clicked". Not "is loaded". is that what you are after?
It somewhat reads as if you want the div to change appearance if a page is being viewed. in order to do that you'll need to add a class to the div, the hover/active states won't do it. a:link = link sitting on a page, a:visited = a link that has been clicked previously, a:hover = a link when the mouse is over it, a:active = a link when the mouse clicks on it.
Related
How do I add an underline for an active or hovered link, where the underline shows up at the bottom of the menu bar it's a part of? With the code I currently I have (see below) the underline is showing up directly UNDERNEATH the menu bar, rather than showing up at the bottom of the menu bar. I tried using negative padding/margin, but that didn't work. Right now I have this:
.horiz-tab, .horiz-tab-active {
background: #actionBar;
float: left;
font-size: 1.2rem;
padding: 1.5rem 1.125rem;
position: relative;
}
a.horiz-tab:link, a.horiz-tab:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
a.horiz-tab:hover {
color: #fff;
text-decoration: none;
border-bottom: #4c7296 6px solid;
overflow: none;
bottom: 0px;
}
.tab-count {
background-color: #689dcd;
border-radius: 15px;
color: #fff;
font-size: .9rem;
margin-left: 0.35rem;
padding: 2px 6px;
}
The HTML looks like this:
<div *ngFor="let record of records; let i = index;">
<a routerLink="/organization" routerLinkActive="horiz-tab-active" class="horiz-tab">{{record._id.sub}}<span class="tab-count">{{record.count}}</span></a>
</div>
The OP has .main as a class in CSS yet there is none in HTML
.horiz-menu {
color: #fff;
background: #000;
height: 34px;
padding:6px 0 0 3px;
}
a.horiz-menu-tab:hover {
color: #fff;
background: #000;
display: block;
text-decoration: none;
border-bottom: 6px solid #fb4;
height:28px;
margin:0;
}
<div class="horiz-menu" *ngFor="let record of records">
<a routerLink="/" routerLinkActive="horiz-menu-active" class="horiz-menu-tab">{{info}}</a>
</div>
I'm trying to edit the border-top of each element in the navigation bar in weebly so that I can style each of them a different color. However, when I jump into the HTML file, I only see "{menu}" within the navigation div. I want to be able to ID out each individual element so that I can style it. Thanks!
Got it! I used :nth-child(). Awesome!
Could you provide an example of how you were able to edit individual navigation items in Weebly using nth-child()?
Here is the code from my Weebly site, but I can't get it to work. I'm just trying to round the top-left corner on the first menu item of the navigation bar. Right now, when I click on a different item, it shows it with a rounded corner on the top left. I always want the top left corner to remain rounded. I'm a newbie...
#topnav {
clear: both;
margin: 70px 0 0 150px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
}
#topnav ul {
list-style: none;
background: #404040;
width: 504px;
float: left;
}
#topnav li {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#topnav a {
float: left;
display: block;
color: #fff;
background: #404040;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 16px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
}
#topnav li#active a {
color: #fff;
background: #8fa944;
}
#topnav a:hover {
color: #fff;
background: #8fa944;
}
In have created a new simple ASP.Net Web Application, in the Default.aspx file added new div as below
<div id="TestDiv"> Hi, This is CSS test. </div>
And for styling the above div, added below css in Site.css file
#TestDiv{ color:Red; }
If I check the Default.aspx page in Design view, found that the above text color is changed to Red.
But when I ran this application and check in browser, found that color is not changed and css is not applied to it.
I want to use the same Site.css which is declared in master page to be applied for the above div and I don't want to declare css style explicitly in Default.aspx page.
Could you please help me out how can I make it work.
Sharing Site.css content on request
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color: #3a4f63;
width: 100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
#TestDiv
{
color:Red;
}
One of the reason of it not working is Directory Structure , which is making the CSS not reachable from your Default.aspx . otherwise there is no reason why it will not WORK. You can use the IE developer tool by pressing F12 and select the div and see if your site.css is applied or not. You also see the view source and copy the CSS path in the browser to see if it renders or not or your are getting 404
Make sure you made a tag that containing your currect css file location, and your link tag have to be on header but the div part has to be on body.
There are several reasons for this issue. It's always best to use a browser's dev tools to see what is actually being affected by your front-end changes. Chrome offers the absolute best suite for debugging...just right-click on your page and select "Inspect Element" on your div.
As for the specifics of this problem:
Check to see you have referenced Site.css specifically.
Ensure there are no other parent css definitions overriding yours
If there is a conflict (eg: a "div" definition for color), make sure your css ID definition comes AFTER it in the page flow
Alternative options:
Define CSS on a per-page basis using script closures.
Use inline styling for the particular element.
Response To Comments
Well, every browser has default rules that are assigned to the majority of elements. If you find a style that has been inherited from the body, it's likely due to a css "reset" stylesheet and/or schema where body has been given more reasonable default values. I doubt you'll even find that in an ASP.NET application.
I would suggest creating your own stylesheet and referencing it in your default.aspx page. It doesn't actually matter (so long as you reference YOUR stylesheet AFTER the GENERATED stylesheet) but it keeps everything separate. You don't have a need to change the generated CSS for the most part.
Got 2 answers for you:
Tell me where your deafult.aspx file is located? inside a follder something like site/asp/deafult.aspx and your style is in site/style/site.css, if it does then add in link tag <link href="../Style/Site.css" rel="stylesheet" type="text/css" />
If your website is in Site/deafult.aspx and css is in Site/Styles/Site.css then make sure the different bettwen the big and small words are same.
I want to duplicate the style of buttons on this page http://oakespavers.com/ (left-hand side) with the same hover effect. Every time I try, only the text in the boxes are affected. I want the entire div to change colors on mouseover and keep the code really simple.
This might do it:
HTML:
Home
Our Blog
Contact US
CSS:
a {
border-radius: 5px;
font-weight: 600;
text-align: left;
font-family: "Verdana", "Geneva", "sans-serif";
text-transform: none;
letter-spacing: 0px;
font-weight: bold;
font-size: 12px;
display: block;
padding: 10px 20px;
color: #666;
background-color: #E1E1E1;
text-decoration: none;
width: 225px;
margin: 5px;
}
a:hover {
color: white;
background-color: #75D039;
}
Here's a fiddle with an example
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/