Hey lets say i got two links on my page and i have some sub links(show up when main link clicked). Those two links have different background image.
*link1
-link1underlinkone
-link1underlinktwo
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
I can easily change background image on those two main links, but how should i pass same background style to my under-links? And underunder-links if i would have any?
edit: woops forgot to tell i want change background image of BODY not the link/links ;)
You should try putting both the main links in seperate div's with their sub-links. Set the background on the div (set display to none so it is invisible), and then set the background on all the links to inherit, so they take the background from their parent div.
Edit: Use the code I made below
<head>
<style type="text/css">
#link1wrapper {
background-image: url(background1.jpg);
visiblity:hidden;
}
#link2wrapper {
background-image: url(background2.jpg);
visiblity:hidden;
}
.linkmenu a{
background-image: inherit;
visibility: visible;
}
</style>
</head>
<body>
<div id="link1wrapper" class="linkmenu">
*link1
-link1underlinkone
-link1underlinktwo
</div>
<div id="link2wrapper" class="linkmenu">
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
</div>
</body>
Edit: I fixed the code. Now, it puts a background on the div's and hides the div's, then I set the links in the div's to visible and voila, all the links have inherited it's background. The things you should be aware of are not to put anything else in the div's. If you do, you have to style them to set them to visible and set their background to none.
That's all I could come up with based on the very limited information you have given me. You didn't use any code, any examples, or any references, so it's very hard to answer your question accurately.
I better get an upvote for this one =p
Guessing you want to make a proper menu structure here is a little demo I made.
http://jsfiddle.net/sg3s/fPu9S/
The two key properties used are background-image: inherit and visibility: hidden.
background-image: inherit will make the element inherit properties from its direct parent, if no image is specified this means no properties will be inherited. Due to this we need to make the ul for the sublinks / menu inherit the properties from its parent too... Then we mask this image on the ul using visibility: hidden and since visibility default setting is inherit we need to make the lis visible again with visibility:visible.
So thats the explanation of what is actually going on. inheriting the styles can't be used together with the anchor tags unless you nest the sub links inside the main anchors and I don't think that is even valid or accepted code.
Related
tl;dr
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
My page starts with 13 elements where I set their url(), when you scroll to the footer our lazy-loader will then load 9 (up to 12) more elements that again have their own unique "dynamic" images set.
I think we'll just have to take a hit to our SEO score, as I don't believe a better solution is available.
NOTE: I can create a JS Fiddle if needed, but I think this is described well/generic enough that it's not needed. Please let me know if this is needed for answering.
Purpose
Our company is trying to improve their site SEO score, one of the items identified for us to fix is to move all HTML style attributes into a single CSS file (or <style></style> declaration). I believe the reason this is being called out as an issue is because we have several elements using this to set their article background-image: url();.
Why not just use <img> tag instead?
Our client has alot of different type of images (dimensions, center of focus, etc) they want to use when publishing an article. In order for us to have the most consistent design regardless of screen size is by using CSS background-image styles instead of an <img> HTML tag. We're also working with some WP/XMLRPC publishing constraints, where we're not able to create a custom solution for this.
So we cannot use HTML for this, if we could this would be an easy fix.
Why this is currently set in the style attribute?
This is the best "dynamic" solution we've found so far. Up until now (with this effecting our SEO score), this has never been an issue. In our CSS styles, we have our .class {} specific background image styles that are shared. The only thing that differs for each article is the image URL, so we set that in the style="background-image: url();" attribute dynamically through PHP.
The problem
My page starts with 13 elements where I set their url(). I "could" have inline CSS at the top where I set dynamic classes for these elements that will have their unique background-image: url();'s, this could work even if it sounds painful to setup/do.
BUT we have lazy-loading happening when you scroll to the footer. We load 9 (up to 12) more elements that again have their own unique "dynamic" images set, all via AJAX. I could do the same thing here, creating another inline <style></style> CSS bit... but here's the kicker. One of our other SEO complaints is for us to combine our multiple inline CSS (as well as JS) into a single declaration. If I keep creating more <style></style> declarations to fix this SEO issue, I'll create/worsen another SEO issue.
The Question
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
I think we'll just have to take a hit to our SEO score on this one, as I don't believe a better solution is available.
An idea is to change the background-image inline style with a data attribute that has no effect on the SEO score, then you may add some JS code in order to change them as inline style.
Of course this may have an impact on other script as I don't know excatly how your site is built so you may add this JS code as the first JS code so that all your inline style are changed and you have them ready for any futur script.
$('.box').each(function() {
var url = $(this).data('background');
$(this).css('background-image','url('+url+')');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>
By the way we can generalize this solution to any inline style. So the idea is to have all the style set as a data attribute and then we simply change them to inline style:
$('[data-style]').each(function() {
$(this).attr('style',$(this).data('style'));
/*Not mandatory*/
$(this).removeAttr('data-style');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>
NB: as I commented above, we need to have a balance between the complexity of the site and the score we obtain. If we can easily obtain 80% no need to over complicate the site in order to have 85% or 90% and maybe create some bugs or make the maintenance of webiste site difficult.
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I have a problem with Wordpress Theme.
I'm trying to put sidebar in header.. and because of sidebar class style it receives "colored" backround. if I will change it then all sidebars will have a change.
How I can override that style class only so a change will be only in a place I need it?
part of section in template page.php
<?php display_ca_sidebar( $args ); ?>
css section of sidebar
#sidebar ul li{width:298px;float:left; background:url(i/Modern/sidebar.jpg) left top no-repeat #83b1cd; margin:0 0 19px 0;padding:0 0 10px 0; list-style:none; list-style-type:none; border:1px solid #536867;}
I need to override "background"
Thanks for Help!
Give it an unique id and use that id as css selector.
According to this https://wordpress.org/extend/plugins/content-aware-sidebars/faq/ you are in control of the HTML. So when you are creating the sidebar div, just give it a different class with which you can style that particular sidebar.
You shouldn't have to overwrite anything. When using #sidebar, you should try to use that ID for CSS that applies to all "sidebars", then use a specific class to make each sidebar appear the way you want. That gives you the ability to reuse classes and also create a default class, but you'll never have to worry about conflicts or overwriting things.
I'm not entirely sure what you mean, but if you're trying to change the background of one element in a list of elements (which I'm guessing it is if it's inside li tags), then this may be of use:
#sidebar ul li:nth-child(2)
{
background:blue;
}
and replace the number two with whichever number you need to get your sidebar to work
hope that helps
How to make an external PHP widget page have its own CSS.
The catch is - when the external page is included it's been affected by the stylesheet of the host page.
The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.
The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.
Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.
How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?
You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.
You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.
You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.
Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.
For example, in both of the below samples, the second rule will overwrite the first one:
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
or
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:
<div id="widget">
<!--your code here-->
</div>
Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/
Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.
Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.
ex.
<div id="widget"><p class="nav">hello</p></div>
instead of,
.nav{
// styles
}
do
#widget.nav{
// styles
}
CSS Styles prioritize like this:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.
If I understood correctly, your included page has some CSS rules such as:
div {/*rules*/};
p {/*rules*/};
and so on.
You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.
For example, say your included page is wrapped in a div, the PHP code would be:
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
Then, all your rules for the page should refer only to the children of the element with the id my_page:
Instead of
div {/*rules*/};
you'll have
#my_page div {/*rules*/};