I am new to css and web design so please be gentle ;-)
I was wondering if it is possible to define the background of a page (i.e. what color the screen is) without referring to the tag. So not doing the typical:
body { background-color: #fff; }
I need to do this since I am writing css to stylize our login page, but only have access to the template html to be inserted into the page body. So my html looks something like this (very simplified):
<div id="loginpage">
<div id="title"/>
<div id="content"/>
</div>
I couldn't find any answers online since this seems to be an unusual way of doing it.
So: Is this possible, if yes - how?
How about:
<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999;"> </div>
(put it above all your other html, and maybe use z-index: 1; if necessary)
You can use the :root selector if you don't mind about losing IE6-8 support.
But have you tried targeting body or html, in spite of the fact that they're not in the code? They still get inserted into the DOM.
In my opinion you need to discuss this with your team members and a superior. If you find a work around you may come to work tomorrow and find that someone has added
body {
background-color: #not-white !important;
}
after your code and your next question is how to override !important in css.
On a side note, whoever made the restriction of not giving you access to css/main template should really not do that. If you continue working like that you'd end up with a lot of workarounds that will likely bite you.
Regardless of the restiction you could add a style tag like so:
<style type="text/css">
body {background-color:#fff;}
</style>
which would take priority over the original body rule (assuming the body flow is not tampered with). This would be safer than setting background colour for * which would have unexpected side-effects. You may also want to set it through the shorthand background:#fff; which will reset any background image etc. previosly applied.
Update
I've just seen your comment
I did do that first (just target body) , but was friendly reminded by
my team members to only style elements that are actually on the page I
am working on... (which is not the case for body).
Assuming it's a valid argument and not some sort of petty tyranny going on, maybe it could be appropriate setting the background on the loginpage element? You could reference elements by ID like so:
<style type="text/css">
#loginpage {background-color:#fff;}
</style>
Related
We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
Let's say I have 5 webpages and on each webpage I want the background color to be different. I am using only 1 css file. Each webpage will be accessed like this: domain.com/page1
Do I simply using 5 different CSS files and just change the background-color in the body or is there a more simpler way to achieve this?
Add different class to your <body> on each site, and then use that class to get proper background color.
Of course, you don't have to multiply code, that is common to all sites.
For example:
On "page1":
<body id="page1">
On "page2":
<body id="page2">
Your CSS:
body#page1 {
background: red;
}
body#page2 {
background: blue;
}
well if all pages use the same css file the same background will be used to all...
one easy way to do it is to overrule existing background-color in body. so if you have like a css file containing:
body
{
background-color: aqua;
}
then below that (after the css file is implemented) and on the page you need to have a new color you can just overrule it with following:
<style type="test/css">
body
{
background-color: blue;
}
</style>
How about adding a simple inline style to the body tag of each page such as this?
Page 01
<body style="background-color:#111;">
Page 02
<body style="background-color:#222;">
Page 03
<body style="background-color:#333;">
Bare in mind that in regards to design, such proposed variation in colour scheme is often a bad idea. There might be some function behind your idea which would make sense but otherwise I would recommend minimalism coupled with consistency throughout the design process.
Lately I'm using a CSS structure that makes HTML much cleaner but I don't know if there's something wrong with this.
Instead of using:
.top { //properties }
.top-wrapper { //properties }
.top-logo { //properties }
And for HTML:
<div class="top">
<div class="top-wrapper">
Logo
</div>
</div>
I'm actually coding like this:
.top { //properties }
.top .wrapper { //properties }
.top .wrapper .logo { //properties }
And for HTML:
<div class="top">
<div class="wrapper">
Logo
</div>
</div>
Is it wrong to do this?
It is not wrong, but the more selectors you have, the higher the resulting specifity of your style. For more information about specifity see http://www.w3.org/TR/CSS21/cascade.html#specificity.
Imagine your example
.top .wrapper .logo { font-size: 10px; }
followed by this:
.logo { font-size: 20px; }
The <a class="logo"> will have a font-size of 10px, even though you specified it to be 20px for the second declaration.
It isn't necessarily "wrong" to do this, it works and if you find it easy to use I'd say go for it!
However - there are some drawbacks to this approach, for example your CSS file will end up larger, which will mean longer download times for anybody viewing the website (granted this effect may be negligible)
There's also the issue that, if you want to re-use the styles of top-wrapper on another element, you have to place that element inside a div with a top class, this ends up cluttering your HTML.
(For more information on the above point see OOCSS)
At the end of the day there are benefits and drawbacks to any approach, if you feel really comfortable with this approach, and it is working for you - then stick with it!
EDIT:
It should also be noted that you're second approach will take longer for the browser to render than you're first approach (the browser has to check multiple conditions instead of just one) for more info see this question
Nope.
What your second code is doing is saying, "target all the elements inside elements that have class top, that have the class wrapper and apply such and such properties"
On the other hand, your first code is only targeting the elements that have the class top-wrapper (or whatever) regardless of their parents class.
Depends how you will use that specified class
.logo { //general properties }
.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }
.bottom .wrapper .logo { //specific property to bottom wrapper that overrides .logo }
HTML
<div class="top">
<div class="wrapper>
Logo
</div>
</div>
<div class="bottom">
<div class="wrapper>
Logo
</div>
</div>
Generally, it is better
It's not wrong, but it may get verbose and a little slower if you are have 10 levels of nesting. The result may also be harder to debug if both .logo and .wrapper .logo are styled.
On the other hand it may be nice to have a .button looking different in .content or in .menu. In general, use what makes sense in a specific use case.
No right and wrong here: everything depends on the site you are building, if you are in a team and what makes sense to you.
Personally I don't think the html is any cleaner now than it was previously (in this small example) but your CSS specificity has increased and that could have a detrimental knock on effect.
I now ask myself 'why do I want this element styled in this way?'. Sometimes it's because of inheritance, sometimes because it's a specific case that happens to be in a certain area. The example you use seem a good candidate for inheritance, but looking at the rest of the site might lead to a different conclusion.
Adding longer class names doesn't, to my knowledge, greatly decrease performance. I suspect the only effect would be marginal and is unlikely to be noticeable. Really dependant on the implementation
Additionally if you were 'reading' the html it may make more sense to read have class names like top-logo, other wise you need to look for the appropriate ancestor (bearing in mind there may be more than one that could be applicable).
I'm busy moving toward an OOCSS / BEM method (google these for more, so many resources out there...) myself because I believe it will make maintenance easier in the future, plus I find it makes more sense within a team environment. These are approaches that could lead to 'classitis' or otherwise 'messy' html. I don't mind that though and think the larger the site the more sense this makes. If you're making a 4 page site, maybe don't bother.
But this works for me and may not for you. So I go back to my original statement, there's no right or wrong here :)
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.