I'm very new to HTML (as you can tell from the title) but I do have some coding experience. Here's an example of what I'm trying to do:
#rect {
width:20px;
height:40px;
}
div {
width: rect width;
height: rect height;
}
I know code in the div is completely wrong, it's just to give an idea of what I'm trying to achieve. How would I get the code in div to retrieve and use the values in rect?
You cannot refer to the value of a property of an element when setting a value for a property of another element – except in the case of nested elements in a sense (e.g., setting font-size: 100% on an element means using the value of the font-size property of the parent element).
What you can do, though, is to use multiple selectors in a rule. In your example, you can set
#rect, div {
width: 20px;
height: 40px;
}
This can't be done just in CSS. You could however, use JavaScript to accomplish this though.
Related
I have the following html structure (inside a wiki-content div) and I don't know how to reach it.
This doesn't seem to work, would you know why?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100%;
}
Thank you
It doesnt work because you have an inline CSS value of width set to 99.9315%. Inline styles get processed after your css so this will override any other setting for width in your css file.
Try removing the inline width setting.
Have you tried using !important?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100% !important;
}
You can try doing this and the try to put !important to override the existing width.
.table-wrap .relative-table.wrapped.confluenceTable
{
width: 100%!important;
}
If the inline style width is generated by a certain javascript, you need to re initialized it using also a javascript. because you can't override a inline style using css since it has the most specificity value. Please read this link about https://css-tricks.com/specifics-on-css-specificity/
Please see below javascript code to re initialized the width.
document.getElementsByClassName("relative-table").style.width = "100%";
Basic question but I can't find it anywhere, is it possible to set the width and the height on the same line at the same time with the same value in my CSS?
I'm not asking for something like:
width:100%;height:100%;
But more like one of those:
width, height: 100%; // Same for both
width, height: 100%, 90%; // Different for each ones
dimensions: 100% 90%; // Like padding/margin,
I'm just asking about declaration, not Javascript on how to do that.
I found a related question to this one but for border and the short answer was no.
If it's not possible with CSS, is it with SCSS ?
There is no short hand for setting the height and width of the element in a single property declaration. You cannot do it with SASS as well.
But yea, SASS will provide you a feature to hold the common value shared in both property by declaring a variable like
$some-var-name: 100px;
.some-class {
height: $some-var-name;
width: $some-var-name;
}
As I said, even SASS won't help you writing height and width at the same time but you can use change the value of both from a single variable.
Ok I was about to add the #extend in the answer but since other user has already answered the same, (which is now deleted)
.size{
height:100%;
width:100%;
}
element {
#extend .size; //Sets element to height:100%;width:100%;
// more stuff here
}
I would suggest you to use a declaration of % instead of . so instead of using .size suggested use %size. This way your literal class of .size used only for extend purpose won't be included in the compiled stylesheet.
you can use css variable
/* css file */
:root {
--length: 50px;
--ratio: 1;
}
.box {
background: cornflowerblue;
width: calc(var(--ratio) * var(--length));
height: var(--length);
}
<!-- html file -->
<div class="box"></div>
then you can change --length in many ways and box width and height will respect to changes.
and Its better method than the SCSS variable for debugging purposes.
Articles
Comparison between CSS variable vs SCSS variable
Why we prefer CSS Custom Properties to SASS variables
You can set up Sass Mixin, like this:
#mixin size($width, $height) {
width: $width;
height: $height;
}
Then write just:
#include size(100%, 100%);
My little contribution if both w & h are equals :
div {
width: 100%;
aspect-ratio: 1;
}
This doesn't help much in typing, but with this, there is only one place to update.
To add onto the mixin solution by #Allrightman, you could even account for when the width and height are the same by setting a default value for the second parameter to equal the first:
#mixin size($width, $height: $width) {
width: $width;
height: $height;
}
If a user inputs a single value opposed to two, this will set them both to the same thing, covering both use cases.
There is no way to declare height and width at the same time in pure CSS, but you can use preprocessors css like SASS or LESS to declare the value to avoid repetition, but don't forget that after they get complied to CSS, they become pure CSS again...
Fo example in SASS you can do:
$width-height: 100%;
body {
height: $width-height;
width: $width-height;
}
So as you see, you can define it, but after it gets complied to CSS, it becomes like this again:
body {
height: 100%;
width: 100%;
}
But we all know this is not always the case, the CSS for the big applications could be much more complex, and reusing and declaring values using preprocessors css will help a lot to manage your css in a tidier way!...
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am unable to get the width and heigh properties to work for my custom tags please see code below:
CSS
x-slider
{
width: 1000px;
height: 300px;
border: 1px black solid;
background-color: #0000ff;
}
HTML
<body><x-slider id="CoolPics" page="home"></x-slider></body>
Javascript
var x = document.registerElement('x-slider', {
prototype: Object.create(HTMLDivElement.prototype), extends: 'div'
});
I added the Extension of the DIV object to see if that would allow me to specify heigh since some tags do not allow for height. Is it only certain css properties that work with custom tags? Both the border and background color show up, I have tried changing over to both min and max height as well. Please limit response to the question and not the subjective argument of whether you should use custom tags, It made it significantly harder to search for answer for this with every post about custom tags overloaded with those kinda of responses.
Add display: block or display: inline-block to x-slider.
I am trying to set a background image to be outside the actual containing div.
<div class="expandable">Show Details</div>
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
so the "expand" image should basically appear just to the left of the div.
I can't get this working, the image doesn't show when it's positioned outside the borders of the container. I'm not sure if there's a CSS trick I am missing, or if it's something to do with my page layout (the "expandable" div is nested inside several other divs).
Is it possible to do this? Any hints?
Edit: here is a jsFiddle showing the problem: link
I know this is an old thread but I just wanted update it and add that this is possible using CSS pseudo elements.
.class:before {
content: "";
display: inline-block;
width: {width of background img};
height: {height of background img};
background-image: url("/path/to/img.png");
background-repeat: no-repeat;
position: relative;
left: -5px; //adjust your positioning as necessary
}
You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.
edit your question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)
edit — Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.
You can't do this how you want to exactly, but there is a pretty straightforward solution. You can put another div inside of .expandable like:
<div class="expandable">Show Details<div class="expandable-image"></div></div>
Then your CSS would look something like:
.expandable{ position:relative; }
.expandable-image{
position:absolute; top:0px; left:-20px;
width:<width>px; height:<height>px;
background: url('./images/expand.gif') no-repeat;
}
Depending on the details of your situation, you might be able to get away with CSS3's border-image-* rules. For instance, I used them effectively to place "dummy search buttons" in the filter row of a CGridView widget in yii (clicking anywhere outside the filter's input boxes will trigger the ajax call, but these "buttons" give the user something intuitive to do). It wasn't worth it to me to subclass the CGridColumn widget just to hack the html in its renderFilterCell() method * -- I wanted a pure CSS solution.
.myclass .grid-view .items {
border-collapse: separate ;
}
.myclass .grid-view .filters td + td {
border-image-source: url("/path/to/my/img_32x32.png");
border-image-slice: 0 0 0 100%;
border-image-width: 0 0 0 32;
border-image-outset: 0 0 0 40px;
border-width: 1px;
}
.myclass .grid-view .filters input {
width: 80%;
}
There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier not a length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, I didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, I hope this helps people looking for a pure CSS solution 😀 :-D
* Not long after writing this, I discovered I can just concatenate code for an image in the 'filter' property of the array used to construct the CGridColumn, so my rationale turns out to be moot. Plus there seems to be an issue (in Firefox, anyway) with the border-image-repeat being forced to stretch even when space is specified. Still, maybe this might come in handy for someone 😕 :-\