I am developing an ASP.NET web application which in its site master (in the ContentPlaceHolder3) I put some css style which should apply to the whole website. Part from this style is the following:
.Welcome {
width:531px;
margin:5px 15px;
float:left;
padding:5px 10px;
}
.Welcome ul {
width:250px;
float: left;
margin:5px 3px;
padding:0;
list-style:none;
}
.Welcome li {
background:url(images/ul_li.gif) left no-repeat;
padding:5px 20px;
margin:0;
font: normal 12px Georgia, "Times New Roman", Times, serif; /* the original font-size was 11px. */
color:#5c5c5c;
}
Now, in one of the website pages, I want to put some content inside that ContentPlaceHolder with the following specific style:
/*body { font: 0.8em Arial, sans-serif; }*/
.tipsMenu { padding: 0; clear: both; }
.tipsMenu li { display: inline; }
.tipsMenu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.tipsMenu li.active a { background: #eef; }
.tipsContent { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 60px; width: 400px; }
EDIT:
*When I tried to do it, I got some style from the CSS file that is in the site.master page. So how can I override the style in the master page with the inline style?*
Apart from making sure the specific style is loaded after the one embedded in the site.master page, you can try a couple of things:
1. Check the css specificity of your new styles. Basically you need to make sure that the selectors used in your new styles are more specific than the ones used in the other stylesheet. In short, inline styles are more specific than ids, ids are more specific than classes and classes are more specific than html elements. e.g.:
#selector {
// High specificity
}
.selector1 .selector2 .selector3 {
// Less specificity than #selector, #selector styles applied
}
2. Add the !important clause to the styles. This overrides the specificity rules and forces the browser to use the important style. Although easier, this method isn't recommended for the sake of maintainability, among other reasons. like this:
.tipsMenu { padding: 0 !important; clear: both !important; }
.tipsMenu li { display: inline !important; }
Related
I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
CSS
.title{
margin-top: 200px; // does not work!
margin-left: 20px;
font-weight: bold;
color: $green;
font-size: 2.5em;
}
.title:hover{
background-color: transparent;
}
.title:visited{
color: $green;
}
rails / html.erb
<body>
.....
<%if current_page?(login_path) or request.path == "/signup"%>
<%= link_to "TITLE", "#", class: "title"%>
<%= yield %>
<% else %>
.....
</body>
My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.
What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !
Just in case below is the portion where it defines the fundamental layout
/* BASIC CONFIGURATION */
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
table{
border-collapse: separate;
border-spacing: 10px 5px;
}
td{
margin-right: 10px;
}
#main-content{
font-family: 'Lato', sans-serif;
}
ul li {
list-style: none;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
a:hover{
background-color: inherit;
}
::selection {
background: #68dff0;
color: #fff;
}
::-moz-selection {
background: #68dff0;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
Your problem is right here:
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.
I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.
You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I am setting the style of list items like so:
ul.list li {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
ul.list li:hover {
background: #F7F7F7;
}
but I want to define a special list item for the title of the list only it inherits the previously defined style too. I know I could just give the above styling a class but that feels cumbersome. Do I have to manually "undo" everything just for the special list item or give the above styling a class? or is there a better way to do it? Maybe I shouldn't be using a list item for the title?
ul.list li.header {
font-size: 16px;
font-weight: bold;
}
If you're at liberty to use advanced CSS3 selectors, you can use the :not() selector:
ul.list li:not(.header) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
Otherwise, you'll just have to manually override them.
If the title of the list must be inside the list, I'd probably just (as you mentioned) "manually undo" them:
ul.list li.header {
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 0;
height: auto;
}
It's not so bad.
If you only need to support modern browsers, you could do this:
.list li:not(:first-child) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
.list li:first-child {
font-size: 16px;
font-weight: bold;
}
.list li:hover {
background: #F7F7F7;
}
This eliminates the need for any classes (though you could replace :first-child with .header if you do want to keep that class).
I hope you can help my with a exercise I have been stacking. I am wondering why the header is not appears in blue - as I actually have assigned: Please not the header area. I have assigned color "blue". BUt I have tried any color as well. The header keeps white
This is the CSS Code. (HTML is ok according to Dreamwaver)
Thanks a lot!
Best regards from Berlin, Germany.
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
/*1.1em/1.3 typischer Code für: Schriftgröße 1.1em und Zeilenhöhe 1.3em*/
}
h1, h2, h3 {
padding: 0.7em 0;
}
p {
padding: 0.3em 0;
}
/*-------- CONTAINER POSITION (#CONTAINER)----------*/
#container {
margin: 1em 6%;
background-color:#ffffff;
border:1px solid #1166cc;
}
/*-------- TOP AREA POSITION (#HEADER)----------*/
#header {
background-color: blue;
}
#header h1 {
color: white;
float: left;
width: 65%;
padding: 0.5em 2%;
}
#header form {
padding: 0.4em 1%;
float: right;
background-color: #77aadd;
width: 20%;
margin: 0.5em;
}
#header input {
padding:5px;
background-color: #ffffff;
border: 2px solid;
font-size: 1em;
color: #999999;
width: 70%;
}
/*-------- CONTAINER NAVIGATION POSITION (#NAVBAR)----------*/
#navbar {
clear:both;
background-color:#77aadd;
padding: 0.1em;
}
#navbar ul {
padding: 0.6em;
}
#navbar li {
display:inline;
list-style:none;
}
#navbar li a {
padding: 0.3em;
color: #fafafa;
}
/*-------- CONTENT POSITION (#CONTENT)----------*/
#content {
float: left;
width: 65%;
padding: 0.5em 3%;
}
/*-------- INFOBAR DESIGN (#SIDEBAR)----------*/
#sidebar {
float:right;
padding: 0.5em 3%;
font-size: 0.95em;
background-color:#cceeff;
width: 23%;
}
/*-------- FOOTER POSITION (#FOOTER)----------*/
#footer {
clear:both;
background-color:#5599dd;
text-align: right;
color: white;
}
#footer p {
padding: 0.5em;
}
Use firebug to debug it.
Select the elemnt (with the arrow icon) then see the CSS style panel. It will tell you all css styles and where they were defined for the element.
Double check your use of ID's and Classes.
Make sure your Header container has a height value (Use Firebug). If you are using floating elements in your Header, remember to place <div style='clear:both'></div> just before closing Header Container.
Add position, width and height to #header, for example:
#header {
background-color: blue;
position: absolute;
width: 80%;
height: 20%;
}
If you don't, the browser have no way of knowing how big #header is supposed to be.
Also, use http://validator.w3.org to check that your code is OK. It's much more reliable than Dreamweaver. At least Dreamweaver 8, that I'm using; later versions may be better.
By the way, if you're learning HTML, CSS or one of several other computer languages, http://www.w3schools.com is a great resource.