I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?
Related
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
I'm having difficulties getting an embedded YouTube video to not show on my site. The thing is there are two of the same embedded videos on the page and I would like to hide one.
There are 2 because one is generated by the wordpress theme (I have to paste the embed code somewhere in the theme settings) while the other is the direct youtube link pasted into the editor, the sole purpose being to auto generate featured image from the video thumbnail.
I would like to hide the second one, preferrably. I know it can easily be deleted by deleting the YouTUbe link in the text editor after publishing. But I want it to not to have to show at all at the time the page is initially published.
In attempt to hide any of the 2 videos, I have tried this CSS and it doesn't seem to work
div.entry-video-wrapper {display:none !important;}
div.entry-video iframe {display:none !important;}
div.fluid-with-video-wrapper {visibility:hidden !important;}
Is there anything I might be doing wrong?
Here's the sample page I'm working on http://wazobiajournal.tv/gallery/game-of-thrones-season-4-fire-and-ice-foreshadowing/
If you want to hide first video then use:
.entry-video .fluid-width-video-wrapper{
display: none;
}
If you want to hide second video then use:
.embed-youtube .fluid-width-video-wrapper{
display: none;
}
Although your code is also working and it seems that you have to clear cache to see it in action.
Note: Avoid using !important, it is not a good practice.
Try to clean cache maybe. I'm just trying to add display: none; for .entry-video-wrapper in CSS and it's work for me:
.entry-video-wrapper {
margin: 0 -30px;
display: none;
}
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
There are two CSS files referenced on the same page: A generic.css file and a custom.css file. The generic file has default styles in it that are overridden by the custom.css file for the same elements. This allows users of the site to customize or "skin" their pages without needing to recreate the entire generic.css file. Only a few styles would be overridden.
My question is the following: If the generic.css file has a style for an element with a background image and that same style is overridden in the custom.css with a different background image, is the first image ever downloaded by the browser?
Also, I want to find out if this is bad practice - customizing or "skinning" a generic CSS file with another custom CSS file to override a few styles, including specifying different background images.
While not totally definitive, this site ran some tests regarding this. The significant statement from that site that is related to your question is:
CSS images are kicked off not in the order in which they appear in the
CSS but in the order in which they’re called in the HTML. I’m not sure
of the precise moment when the download is initiated, but my guess is
that it happens just after the CSS rules have been matched, when the
property values are assigned to the DOM elements.
This at least tentatively confirms what I thought I remembered in the back of my mind reading on this a few years back, namely, that background images which are not ever displayed (as in the generic.css images being overridden by the custom.css images) are not ever downloaded.
Further confirmation of this would be the typical image preloader script that used to be so common prior to sprite images (and is still found in certain uses). It was designed to download images that would be used on :hover in css, because without it, the image would not load until the first hover was initiated, and this caused an unsightly delay. So that, also, argues for the fact that unless actually displayed (or preloaded), the background images themselves are never loaded.
I don't think there are generally any issues with "skinning," unless you are essentially overwriting most or all of the generic.css with custom.css, then one could argue, why load the generic at all. But as you said, normally there are just a few styles overwritten.
I think i answered NO and NO BAD PRACTICE. Because when the css file readable / executable by the browser, the browser will make comparisons to find the same value or the difference between css file and then combine them.
Easy example:
css1.css on file there is a line:
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
then the css2.css there is also the line:
.test {background: #991100 url("image2.jpg") no-repeat center center;}
the result of a combination that will be executed and run by the browser are:
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
where the "background: # 991100 url("image1.jpg") center top;" read but not called / executed by the browser.
Far as I know the value of the file css1.css be stacked by the value of the css2.css. What if there a css3.css file? then the file css3.css will also stacking on the combination of css1.css and css2.css.
Hope it helps.