I am trying to create a editor page that allows you to preview HTML files.
The problem is however that the editors styles are being inherited by the previewed HTML file e.g.:
<div class="header">
<div class="top">
Editing HTML page - page1.html
</div>
</div>
<div class="preview">
<div class="header">
<div class="top">
Page 1.html
</div>
</div>
</div>
I know that a work around would be to use an IFRAME, however I would prefer not to do this as I will be allowing drag and drop capabilities.
A CSS solution would be great, I did have the idea of using jquery to add a class to every item in the 'preview' area and using the following CSS for the editor page:
.header:not(.preview) {
background-color:#000;
}
.top:not(.preview) {
color: #fff;
}
This however seems a bit of a hacky solution and it would be great if there was a neater solution!
If you ultimately need to use not, you should invert your selectors:
:not(.preview) > .header { background-color:#000; }
:not(.preview) > .header .top { color: #fff; }
But it's better to design selectors in some other way
Related
How will i create a link in my menu that point to that same page . like what happend in this site http://nightswatch.afrcreative.com/ the about us is still in the same page not another page
This is acheived using anchor tags.
Refer here
You need to use anchor tags like so:
.tall {
height: 600px;
background: cyan;
}
.about {
height: 500px;
}
<div class="tall">
About
</div>
<div class="about">
<a name="about" />
<h1>About</h1>
</div>
You can then get fancy and intercept this with js to smoothly animate or use the scroll-behavior css property.
I'm trying to find a way to create a "tabber" style navbar while using no scripting whatsoever. However I'm having issues figuring out how to make a default image appear when none of the other spans are the target. I am VERY new to CSS, so in addition to this question any recommendations are appreciated.
More in-depth description, usage, and restrictions can be found below the code.
CSS
/* Hide stage# images on page load */
.infobox .stages .stage1, .stage2, .stage3, .stage4 {
display:none;
}
/* Display Image when anchor link is clicked */
.infobox #thisstage1:target {
display:inline
}
.infobox #thisstage2:target {
display:inline
}
.infobox #thisstage3:target {
display:inline
}
.infobox #thisstage4:target {
display:inline
}
HTML
<table class="infobox">
<tbody>
<tr class="stages">
<!-- Tabber Style Navbar Containing Links -->
<td>
Stage 1
"-"
Stage 2
"-"
Stage 3
"-"
Stage 4
</td>
</tr>
<tr>
<!-- Images to show when corresponding span is targeted via above Links -->
<td>
<span class="stage1" id="thisstage1">
<a href="...stage1.png">
<img src="...stage1.png">
</a>
</span>
<span class="stage2" id="thisstage2">
<a href="...stage2.png">
<img src="...stage2.png">
</a>
</span>
<span class="stage3" id="thisstage3">
<a href="...stage3.png">
<img src="...stage3.png">
</a>
</span>
<span class="stage4" id="thisstage4">
<a href="...stage4.png">
<img src="...stage4.png">
</a>
</span>
</td>
</tr>
</tbody>
</table>
Detailed Description:
I have 4 links (Stage1, Stage2, Stage3, and Stage4). I also have 4 images. When I click on the links, I want the targeted image to be shown and all other images to disappear. The CSS is straightforward in accomplishing this much.
However, when the page is loaded and none of the links are the target, no image is displayed. I would like for Stage1.png to be shown if no other links are the target.
I tried this & a LOT of similar things with different selectors:
.thisstages .stage1 span:nth-last-of-type(4) [display=none] {
display:inline
}
.servantstages span:nth-last-of-type(4) [display=none] .stage1 {
display:inline
}
However, usually, Stage1 was shown directly before The targeted Stage. I'd also like to stay away from specifying attributes, like above, as I've read that it can slow things down. However, I'm new to this, so I don't have many options here. Any and all input is greatly appreciated.
Usage & Restrictions
I'm going to be implementing this on a Wikia specifically to reduce vertical scroll on mobile devices. On top of that, I am limited in what I can do as far as HTML is concerned. The HTML tags usable on Wikia are somewhat restricted, however I don't see this causing an issue. I'm avoiding scripting for 2 reasons. The first being that Wikia requires an approval window, and I have a bad habit of tweaking things. The second is mobile devices.
Other Notes
So it appears that using the method below by Mi-Creativity doesn't function correctly on some phones (Probably due to Wikia's JavaScript). So I played around some more with CSS trying to concentrate on using only display:. After a lot more searching I ran across several different methods of using combinators to achieve what I'm looking for. Here's the results (No guarantee on mobile compatibility, currently untested but hopeful):
CSS
.stages > .stage:target ~ .stage:last-child, .stages> stage {
display:none
}
.stages > :last-child, .stages > .stage:target {
display:block
}
HTML
<div>
Home
Link Text
Link Text
...More Links here if needed...
</div>
<div class="stages">
<div id="link2" class="stage">
...Content...
</div>
<div id="link3" class="stage">
...Content...
</div>
...More divs here if needed...
<div id="home" class="stage">
This is the default content, must be the last div nested in "stages"
</div>
</div>
This is from an answer to a similar one , JS Fiddle
As from a comment, to show the first panel when page load, set a display for only this one - depending on its id or add a unique class - , also giving the .show class an absolute positioning and top value to shift it down JS Fiddle 2
CSS:
.show {
display: none;
position:absolute;
top:38px;
width:calc(100vw - 10px);
height:300px;
}
#alarm {
top:38px;
display:block;
}
.2nd{
z-index: 10;
}
:target {
display:block;
}
HTML:
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009;height:300px"></div>
</div>
<div id="calendar" class="row show 2nd">
<div class="col-12" style="background-color:#C00;height:300px"></div>
</div>
<div id="weather" class="row show 2nd">
<div class="col-12" style="background-color:#0C0;height:300px"></div>
</div>
I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.
HTML
<body id="home">
<div id="mainNav">
<a href="/Dashboard/Index" id="navIndex">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
</div>
</a>
<a href="/samples/register/" id="navRegister">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
</div> </a>
<a href="/samples/search/">
.........
</div>
CSS
body#/samples/register a#navRegister .textStyle {
background-color:red !important
}
The syntax is wrong. Use this way:
body a#navRegister[href="/samples/register"] .textStyle {
background-color:red !important
}
Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.
Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:
#home #navIndex .textStyle {
background-color: red;
}
Then you can add a selector for each of your pages to catch the current page in the nav with css alone:
#home #navIndex .textStyle,
#register #navRegister .textStyle {
background-color: red;
}
Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).
You'd also benefit from using classes instead of ids as css selectors.
Caveat:
It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:
.selected-nav-text {
background-color: red;
}
This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.
I'm building a website with AngularJS. And I'm using Plangular in order to create a customized Soundcloud Player. So I include my template like this :
<body>
<div id="container">
<div id="header" ng-controller="HeaderCtrl"><div ng-include="'templates/Header.tpl.html'"></div></div>
<div id="body" ng-view></div>
<div id=""><div ng-include="'templates/Player.tpl.html'"></div></div>
<div id="footer" class="center" ng-controller="FooterCtrl"><div ng-include="'templates/Footer.tpl.html'"></div>
</div>
</body>
So as you can see I got a header, a body and a footer. In the middle of it I got a player. I included the specific CSS file in that template and only in that template, but the CSS are in a way applied to my whole page. I need those css. ANd I thought that included the css only on that page would help, but it's not.
Thanks for your help guys !
Just prefix the CSS rules
Player.tpl.html :
<div class="player"> whatever </div>
CSS
.player .someclass {
}
.player .some-other-class {
}
I have a main css file for the whole site called StyleSheetMain.css. I download a slider that has his own style.css file and there is a conflict on some items.I want to scope the slider's css file only to a div that it will contains only the slider items.I dont want to apply this css outside the slider div.
Any idea?thanksss
There is no such thing as scope in CSS. You can't nest a specific chunk of CSS in other CSS. The below code is WRONG and is just an example of what you CAN'T DO.
.some-class {
/* THIS */
.some-minor-class {
/* IS */
}
/* WRONG */
}
You also can't point certain .css file to work in only a part of html.
Your solution is simple - rename your classes.
There are so many words to describe this world we live in
You can make use of CSS Grouping / Nesting.
for example you have:
<div id="main">
<div id="slider">
</div>
</div>
<div id="newslider">
<div id="slider">
</div>
</div>
for you to change the style for the second slider:
#newslider #slider {
background: #fff;
}