I have a huge amount of elements in my website... And since I added the following css... Some elements inherit from these css styles... While they don't have anything to do with it: other scope, no direct definition to the css style etc... What am I doing wrong?
#InformationForDiv
{
width: 205px;
height: 180px;
background: #FFFFFF;
clear: both;
float: left;
margin: 0 35px 0 35px;
text-align: center;
}
#InformationForDiv ul
{
text-align: left;
padding: 0px;
display:block;
}
#InformationForDiv li
{
border-bottom: solid 1px #D6D6D6;
padding: 0px;
list-style: none;
line-height: 20px;
display: block;
}
#InformationForDiv p
{
display:inline;
float:right;
margin:0;
text-align:right;
font-size: 16px;
color: #B02229;
}
#InformationForDiv li a:link, a:visited
{
color: #544B42;
text-decoration: none;
font-size: 12px;
width:100%;
display:block;
}
#InformationForDiv li a:hover
{
color: #544B42;
border-bottom: 1px solid #544B42;
font-size: 12px;
}
#InformationForDiv li a:visited
{
color: #544B42;
text-decoration: none;
font-size: 12px;
}
#InformationForDiv img
{
margin: 10px 0 5px 0;
}
At least this one:
#InformationForDiv li a:link, a:visited
will select all a:visited elements and it doesn't look like your intention.
Perhaps because those elements have an ancestor in the HTML document in which they exist that has the ID "InformationForDiv".
Its generally not a good idea to include in an external css selectors the use of specific element IDs. External CSS ought to rely on class names to select appropriate elements.
Related
is there a CSS method to get rid of the white box behind the Google ad on my Wordpress site here
Is it possible to get rid of the white box behind the Google ad only and not the other widgets within the sidebar. If this is not possible, is there a way the box could be shrunken with css?
I assumed if I went to the widgets section of the style.css file I could resolve the issue there, but I tried editing this snippet of code but I couldn't find anything that could resolve this issue.this is probably the wrong location where the issue could be found which is why I provided the full script here.
I hope my issue makes sense as this is my first stack overflow question
Full CSS file here
The script below is the section I tried editing one time
/*
* 09: Widgets
*/
.widget {
margin: 0 0 20px;
padding: 15px 20px;
color: #757575;
background-color: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.06);
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
word-wrap: break-word;
}
.widget-title {
color: #353535;
font-size: 1.154em;
margin: 0 0 10px 0;
line-height: 1.3;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 0.5em 0;
list-style-type: none;
}
.widget p:last-child {
margin-bottom: 0;
}
.widget_archive li a:before,
.widget_links li a:before,
.widget_categories li a:before,
.widget_meta li a:before,
.widget_recent_entries li a:before,
.widget_recent_comments li .comment-author-link:before {
font-family: "icons-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
width: 14px;
text-align: left;
display: inline-block;
vertical-align: -15%;
}
.widget_archive li a:before,
.widget_links li a:before,
.widget_categories li a:before,
.widget_meta li a:before,
.widget_recent_entries li a:before {
content: "\66";
}
.widget_recent_comments li .comment-author-link:before {
content: "\4a";
padding-right: 0.25em;
}
.widget select {
max-width: 100%;
}
.widget_media_image img {
display: block;
}
Try background-color: transparent;
#custom_html-4 {
background-color: transparent;
}
for temporary solution by css you can use. if you need to hide only white background from yellow box
div#custom_html-4{
background:none;
box-shadow:none;
}
I have designed a navigation bar for my website using the following CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
li {
float: left;
border-right: 1px solid #ffb366;
}
li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
li a:hover {
background-color: #e67300;
}
</style>
This is a version of the horizontal navigation bar example documented at w3schools.com: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
My problem is that it affects other <li> and <ul> elements used in my website as well, not just the navbar. How do I ensure the navbar ones stay separate from other <li> and <ul> elements, using solely CSS? I've started learning CSS quite recently, so I'm certain I'm missing something pretty fundamental here.
Use may want to use css classes
http://www.w3schools.com/cssref/sel_class.asp
ul.mylist {
.....
}
ul.mylist li {
.....
}
ul.mylist li a {
.....
}
ul.mylist li a:hover {
.....
}
Also make sure to add the class to the html
<ul class='mylist'>
<li>......
Similar to man's answer, enclose the ul elements in a div and set the class of the div to navbar, for example. Then change your CSS code to this:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.navbar li {
float: left;
border-right: 1px solid #ffb366;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
I'll modify your code to demonstrate how you can use classes to specify which ul tag you wish to style
<style>
ul.myNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.myNav > li {
float: left;
border-right: 1px solid #ffb366;
}
ul.myNav > li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.myNav > li a:hover {
background-color: #e67300;
}
</style>
And all you have to do is add the class to your preferred ul element in your html.
<ul class="myNav"> .... </ul>
li:not(:first-child){
code...
}
li:not(:last-child){
code...
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
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 have a css class called navigation which will hold some link and when i'll add some extra link it will go from left to right and then again it'll come to bottom of the LHS. i use background-repeat: repeat-y; and height:auto; but the image is not repeating instead of a white background is coming. I'm working on IE8. the css codes are given below:
#navigation {
background: url(../images/custom/lite/navigation_bg.gif);
border-top: 7px solid #455660;
height: auto;
background-repeat:repeat-y;
}
#navigation ul,
#add-page {
float: left;
}
#navigation a {
color: #FFF;
display: block;
font: 14px/56px Arial,Helvetica,sans-serif;
font-weight:bold;
height: 50px;
padding: 0 24px;
text-decoration: none;
}
#navigation a:hover {
color: #000;
}
#navigation .selected a {
color:#000
}
#navigation .selected a {
font-size: large;
text-transform: uppercase;
}
#reuben, you given float in your ul so you have clear it #navigation
like this:
#navigation {
overflow:hidden;
}
may that's help you
What does your HTML look like? You say you have a class called navigation but your selector syntax is that of an ID.
For your CSS to work as shown here, you should have something like
<div id="navigation">...</div>
change your css to the below:
.navigation {
background: url(../images/custom/lite/navigation_bg.gif);
border-top: 7px solid #455660;
height: auto;
background-repeat:repeat-y; }
.navigation ul,
#add-page {
float: left; }
.navigation a {
color: #FFF;
display: block;
font: 14px/56px Arial,Helvetica,sans-serif;
font-weight:bold;
height: 50px;
padding: 0 24px;
text-decoration: none; }
.navigation a:hover {
color: #000; }
.navigation .selected a {
color:#000 }
.navigation .selected a {
font-size: large;
text-transform: uppercase; }