Given the layout below, how can I hide #header-precursor if it's under #link-preview or #linkPreviewIframe?
Here is the basic layout in text form:
<p id="link-preview>
<iframe id=linkPreviewIframe>
#document
<html>
<head>..</head>
<body>
<div id="page">
<div id="header-precursor">
This is the one I want to hide
</div>
</div>
</body>
</html>
I tried #link-preview #header-precursor { display: none;} but it didn't work. I don't know much about Shadow DOM but I think that's what #document indicates, so I tried this too with no luck: #link-preview::shadow #header-precursor { display: none;}
Related
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
I'm trying to apply an overlay to create an effect similar to https://fancy.com when the login or signup link is clicked i.e the background should be dimmed.
The problem is that my nav bar and content boxes are not subjected to the overlay for some reason but not sure why?
I have created a fiddle to explain: https://jsfiddle.net/p861yfLp/1/
My Code:
<body>
<div class="overlay">
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</div>
</body>
Change these files
CSS - set the position to absolute
.overlay {
position: absolute;
}
EDIT: Following #DaniP answer the changes to the css are not required if you want a 'modal' feel for the overlay. Tho if you want to overlay everything I would recommend using the absolute position.
HTML - no need to make your overlay contain all other html
<body>
<div class="overlay"></div>
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</body>
Now your overlay will 'overlay'.
The half-black background-color is actually applied, but the nav (as child-element) has its own background-color (#FFF) defined. If you remove its background-color, it works:
.nav {
background-color: transparent;
}
https://jsfiddle.net/rw60gzbz/
I need to display some text that alternates between one color and another. I've used CSS and <div style=""> to mark any text that should be a particular color:
<html>
<head>
<style type="text/css">
div {
.dark{ color: black }
.light{ color: blue }
}
</style>
</head>
<body>
<div style="dark">This</div><div style="light">text</div><div style="dark">should</div><div style="light">alternate</div><div style="dark">between</div><div style="light">light</div><div style="dark">and</div><div style="light">dark</div>.
</body>
</html>
When I open this in a Web browser, it only displays text in black. What do I need to fix to make this alternate the colors properly?
The HTML is wrong. dark/light are not styles, they should be classes in this instance.
jsFiddle example
Your HTML should be..
<div class="dark">This</div>
<div class="light">text</div>
<div class="dark">should</div>
<div class="light">alternate</div>
<div class="dark">between</div>
<div class="light">light</div>
<div class="dark">and</div>
<div class="light">dark</div>
If you wanted to achieve this via the style attribute, you would use the following:
jsFiddle example
<div style="color:blue">This</div>
<div style="color:black">text</div>
<div style="color:blue">should</div>
<div style="color:black">alternate</div>
<div style="color:blue">between</div>
<div style="color:black">light</div>
<div style="color:blue">and</div>
<div style="color:black">dark</div>
Classes are obviously the better way to achieve this though.
Twitter Bootstrap Scaffolding section on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
<div class="span2 well">
Sidebar content
</div>
The Bootstrap docs have an additional style property show-grid that is used to display a background (boxes) on the span* (columns) inside of rows. The CSS looks like this:
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
Demo: http://www.bootply.com/68856
I am trying to develop a web site from scratch. Here is the code
<html>
<head>
</head>
<body >
<div id="top" style="height:200px;background-color:green">
</div>
<div id="middle" style="height:800px;background-color:white">
</div>
<div id="footer" style="height:200px;background-color:green">
</div>
</body>
</html>
Problem is that there is a white space around above div tags. I can remove white space using margin: -10px; property. But I don't like to handle it that way. Is there way to handle this in decent way in css?
<body style="margin: 0;">
Set the margin for the body to 0;
<body style = "margin:0">