Anyway, I'm trying to create a toggle link, which is basically two buttons on top of each other. One of them would become display:none when it is clicked, and vice-versa.
Currently, my CSS is like this
#main-nav:target + .page-wrap {
position:absolute;
left:-80px;
#open-menu {
display: none;
}
#close-menu {
display: block;
}
}
...but the #open-menu and #close-menu display options don't seem to be showing. Any help?
EDIT:
Alright so I need a preprocessor okay ._.
EDIT AGAIN:
Got it working, thanks guys! Just wondering, is there a way for my entire page div (excluding the menu) to slide out of the page? Or is it some simple overflow-x:hidden?
If you're not using a preprocessor and you don't want to, I suspect you can rewrite your CSS like this, assuming your HTML structure actually corresponds to the selectors:
#main-nav:target + .page-wrap {
position: absolute;
left: -80px;
}
#main-nav:target + .page-wrap #open-menu {
display: none;
}
#main-nav:target + .page-wrap #close-menu {
display: block;
}
Of course, if #open-menu and #close-menu aren't descendants of .page-wrap, then this won't work at all, even if you do use a preprocessor to support writing nested style rules (as a preprocessor can't do something if it cannot already be done with plain CSS).
As mentioned, if these elements aren't related in a way that can be expressed with descendant and sibling combinators, you'll have to make use of JavaScript to achieve what you're trying to do.
As a demonstration, I tried the following:
<div class="page-wrap">
<a id="close-menu" href="#open-menu">Close</a>
<a id="open-menu" href="#close-menu">Open</a>
</div>
with the following CSS:
.page-wrap #open-menu {
display: block;
}
.page-wrap #close-menu {
display: none;
}
.page-wrap #open-menu:target {
display: block;
}
.page-wrap #open-menu:target + #close-menu {
display: none;
}
.page-wrap #close-menu:target {
display: block;
}
.page-wrap #close-menu:target + #open-menu {
display: none;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/5aSdW/
Demo Link: http://jsfiddle.net/audetwebdesign/5aSdW/show
Every time you click the Open or Close link, the alternate link is displayed.
I am not sure if this is overly useful, but it can be done.
Related
I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
content: ": ";
display: inline;
white-space: nowrap;
}
h4 {
display: block; }
h4~p {
display: block; }
h4:first-child {
display: inline;}
h4+p {
display: inline;
}
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!
I am using a edit CSS extension from the slim jetpack plugin for my wordpress project. Unfortunately it is placed on the internal server so I cant share the link with you.
The issue: I have a round 30 sub-menus to present under the menu on the header. Decided that the best way would be to use custom CSS to edit that specific menu instead of changing all the menus look.
So i followed the guide presented here:
added the sub-menu-columns as a custom CSS class on the desired menu
and added this to my CSS file:
.sub-menu {
width: 410px;
}
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I am ended up with all the sub menus being 410px wide (instead of original 184px). And the sub-menus in the desired place are still in one column but simply have spaces on right and left sides.
I am new to CSS but it seems that the first .sub-menu declaration is wrongly placed here as it affects all the sub-menus. As well i am struggling to get 2 sub-menu items on the same row.
I kinda understand where are the "legs" growing from but it seems i am missing something here.
I searched for the similar cases but could not find clear explanations on this subject.
Would appreciate any help.
After some research i found that a
.sub-menu class
had clear: both; defined that caused the issues.
This the code i ended up which worked perfectly fine:
.sub-menu-columns ul.sub-menu li {
clear: initial;
float: left;
width: 50%;
}
Just in case someone comes here looking for a similar solution, here is what worked for me, on WordPress 5.7, theme Chaplin:
#media (min-width: 999px) {
.submenu-columns>ul {
width:50rem;
}
.submenu-columns>ul>li {
width:50%;
float:left;
}
.submenu-columns>ul>li a {
width:100%;
}
.submenu-columns.odd>ul>li:last-child {
width:100%;
}
}
Is there any advantage or disadvantage in using :not() over an inverted selector logic? May it be in performance, safety or browser support, which approach is recommended?
Either:
.imageSlider img:not(:first-child) {
display: none;
}
Or:
.imageSlider img {
display: none;
}
.imageSlider img:first-child {
display: block;
}
Sometimes it's could be better to use :not.
<p class="my-paragraph">
<div class="something"></div>
<div class="something-else"></div>
<div class="an-other-thing"></div>
<div class="an-other-thing"></div>
<div class="last-one"></div>
</p>
In this case, if you want to hide everything except div .an-other-thing it will be quicker to write :
.my-paragraph div:not(.an-other-thing) {
display: none;
}
Instead of:
.my-paragraph div {
display: none;
}
.my-paragraph div.an-other-thing {
display: block;
}
In most of cases, a longer CSS means longer time to execute it
As of January 2017, the :not selector is currently only supported by Safari browsers with a mere 11% global browser support. I would stay away from using it in production code.
I want to open a subbreddit in hebrew and i want to "mirror" the site using the css sytlesheet so it will fit nicely with the hebrew. I want that the tree structure of the comments will be aligned to the right.
here is an example of what i want to achieve:
before:
image1
after (with damaged text):
image2
so, i want to make the structure of the site to look like in image2, but without damaging the text.
is it possible?
update:
here is the css code that i have right now:
there could be non-relevant selections, i'm just experimenting withe the stylesheet by trial and error:
.thing {
display: inline;
}
.sitetable {
display: inline;
}
div.content {
display: block;
float: right;
}
body {
direction: rtl;
}
.midcol.likes {
float: right;
}
Update2: solved!
i added this line and it fix it:
.child {
padding-right: 25px;
}
solved! i added this line and it fix it:
.child {
padding-right: 25px;
}
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..