This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I have:
<div id="header"><button id="button1"/></div>
<div id="footer"></div>
Can I change (just in css, not js) the layout so button1 belongs to footer?
If this is not possible are there alternatives? (such as flex order allow dynamically to change the order of elements). My goal is to propose many different themes of an application without to modify the DOM layout (e.g. some people want the button to be in header, other prefer in footer).
Can I change (just in css, not js) the layout so button1 belongs to footer ?
In a word, no.
What you are trying to do is change the actual structure of the page, which is not what CSS is for. CSS is (for the most part) about controlling the visual aspect of a web page, and HTML is for the structure. You could, I suppose, apply CSS styling to make the button appear as though it were a child of #footer (you might set position: relative and give it the appropriate offset so that it appears where it would have appeared if it were), but that’s hardly a reliable solution.
If you find yourself needing to do this, perhaps pure CSS is not really the appropriate solution? Could you offer the themes in the form of styles and scripts (where you could use the script to move the button)? Or perhaps offer HTML templates to be chosen from (e.g. whether the button should be in the header or footer), and then apply the CSS theme on top of that.
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Why are my CSS properties being overridden/ignored?
(5 answers)
How can I detect overwritten css properties?
(3 answers)
Closed 3 years ago.
I am using timeline.js to add a timeline to my page. Unfortunately the width of an element with class .tl-slide-content is set somewhere I cannot see. As a result, the width is 940px or 448px depending on viewport width. This is causing issues with how the text next to the photo is being displayed.
I have tried selecting the element with every ascendant class available, including any IDs that I could find. Still there is no change and I am unable to figure this out.
What I want to know is this:
what is 'element' in this context?
are there tools in the developer console that enable me to find where width is being set to 940px?
If anyone has any experience with this particular library and could point me in the direction of the appropriate selectors that would be fantastic
I have tried putting my stylesheet after the timeline, I even tried putting it right at the bottom of the body tag. Still no change.
The 'element' selector is displaying all the properties set by the inline styling within the HTML file itself. Inline styles supersede all other styling because of cascading (first to last). Last iteration is displayed.
You can see the word inline to the right of the 'element' box.
If you do not have write access to the HTML file you are working with then you may need to use !important after your width: 100%. This is really a last resort.
My suggestion is to look at their CSS source code:
https://github.com/NUKnightLab/TimelineJS/tree/master/source/less
Overwriting their CSS would just bloat your code.
Duplicate the library(if you intend to use it again) and then use the duplicate to internally mess with their source code to achieve the results you want.
I know I didn't give you a direct answer, but libraries typically have their own conventional styling, etc. without looking at the source you're just guessing...
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I am creating a print stylesheet and would like to hide all figure tags only if that tag contains an iframe, which happen to be embedded YouTube videos. If the figure tag contains anything else (i.e. an img), I want the tag and its contents to still be shown on the printed page.
I know that I could simply apply a class of "video", for example, to my figure tag where appropriate, but I want to see if there is a way to accomplish this via CSS without resorting to adding classes throughout my site. Also, even though I know they exist, I am not looking for a jQuery solution.
Thank you!
You are looking for a parent selector
CSS3 has none, but CSS4 has one that is like selecting using $.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS 3 content selector?
I was wondering, is it possible to select an element based on its content with CSS?
I realize I can use something like this:
.this[href="./foo.php"] {
/* And the styles... */
}
But is there a way to select based on inner content?
So if I have this:
<p>[ Continued ]</p>
How can I select it based on it's content, [ Continued ], if I can?
No, not with CSS, and there really should never be a need too. If you're making a "Continued" button, link, or whatever: specify a class, maybe an ID, or even use an attribute, and select it. There really is no need for a content selector with how many options you already have.
Not to mention, not adding a class or some kind of identification to this link makes it look like regular text within the document, possibly removing some of its semantic meaning. Giving it a separate class makes it stand out. If I give a link the class "button," that makes it stand out from the rest of the links on the page, saying "I'm a button, not just an ordinary link." Selecting based on the content does nothing of the sort; it's just another link.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
In every design tool or art principle I've heard of, relationships are a central theme. By relationships I mean the thing you can do in Adobe Illustrator to specify that the height of one shape is equal to half the height of another. You cannot express this information in CSS. CSS hard-codes all values. Using a language like LESS that allows variables and arithmetic you can get closer to relationships but it's still a CSS variant.
This inability in my mind is the biggest problem with CSS. CSS is supposed to be a language that describes the visual component of a Web page but it ignores relationships and contraints, ideas that are at the core of art.
How possible is it to imagine a new Web design language that can express relationships and contraints that can be implemented in JavaScript using the current CSS properties?
Are you looking for something like CSS Scripting Layout Specification or Constraint Cascading Style Sheets for the Web? Both are still in the research/prototype stage though.
The CSS Scripting Layout Specification has been implemented as a Google Chrome plugin, it seems.
If you set the size attributes using a percentage, and place the element as a child of the one you're sizing, you will be able to size an element relatively to another. Then, use positioning to move the child outside the parent physically.
There was also a JavaScript Style Sheets spec from Netscape back in 1996, http://en.wikipedia.org/wiki/JavaScript_Style_Sheets.
The CSS Scripting Layout Specification is not a Chrome plugin. What is provided is a proof of concept. Many people are not convinced that JavaScript can perform well enough for CSS layout due to Microsoft's CSS Expressions implementation that had severe performance issues.
It is limited to layout as this seems to be the biggest complaint with CSS. It's aim is to give power users the ability to do nearly anything they want, but at the same time make it such that layouts can be encapsulated, referenced, and reused by novice users.
Directly, this isn't something you can do in pure CSS without causing more trouble than helping due to varying amounts of support from different browsers.
Indirectly,frameworks like Less or by running your CSS through a server-side script before sending it to the client are your best bet but, like you said, not ideal.
In Javascript, using jQuery to set one element's height property based on another's outerHeight is probably the start of a decent solution, but I can't find any code examples people have written to solve your specific problem. I'd imagine it might be something like this, though:
var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());
That would set the height of one based on the height + border + padding of the other. In order to be more robust, there's more that needs to go into it than that, but it's the beginning of a solution.
You may want to take a look at Clever CSS, a pythonic approach to writing CSS. It includes variables, arithmetic, you can even do operations on colors.
I'm also looking after one such approach to writing styles, something that is a higher level over CSS. But one of the big problems, I believe, will be the fact that CSS style sheets are often written by designers and not programmers, using design tools that probably allow them to work at a higher level and generate the CSS afterwards. What for us programmers could be a good flexible approach may not work because it is too geekish for designers.
Use of percentages to determine the height is to express a relationship with a hard-coded value.
"if you set the size attributes using a percentage, and place the element as a child of the one you're sizing, you will be able to size an element relatively to another" BUT ONLY IF parent elements heights are expressed explicitly (and this apply iterating until the html element).
In CSS Level 2 "The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'".
But from Revision 1 "percentage heights on absolutely-positioned elements are no longer treated as 'auto' when the containing block's height is not explicitly specified."
With absolute positioning this solution breaks because "For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element."
In the following code the inner wrapper divs heights will collaps using absolute positioning, losing the ability to use them to place margins.
<body>
<style type="text/css">
html, body {
height: 100%;
}
div#wrapper {
height: 100%;
}
div#content-wrap {
height: auto;
}
div#wrapper-upper-half {
height: 50%;
background-color:aqua;
}
div#wrapper-lower-half {
height: 50%;
background-color:fuchsia;
}
</style>
<div id="wrapper">
<div id="wrapper-upper-half">
</div>
<div id="content">
</div>
<div id="wrapper-lower-half">
</div>
</div>
</body>