I can't workout how to get the second paragraph to display in this example code. I've only tried it in Firefox.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: none;
}
.show {
display: initial;
}
</style>
</head>
<body>
<p>para 1</p>
<div class="show">
<p>para 2</p>
</div>
</body>
</html>
body{
visibility:hidden}
.show {
visibility: visible;
}
<p>para 1</p>
<div class="show">
<p>para 2</p>
</div>
you can try this instead
I'm going with this:
p {display: none} .show p {display: initial}
It's more work for me, but it does what I want. Thanks.
Related
I am making a basic slide demo and i got a problem with :not(:target) selector
i want to have my base slide at first. but when i try this code i got a blank page.
here my code and my css file.
thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>order form</title>
<link href="slide.css" rel="stylesheet" type="text/css">
</head>
<section>
<header class="slide" id="foo">
<h1>Θέμα ενότητας</h1>
</header>
<article class="slide" id="main">
<h1>Σκυλος :</h1>
next
</article>
<article class="slide" id="setter">
<h1>Setter</h1>
<p> </p>
next
<footer class="slide" id="thankyou">
<h1>Ευχαριστώ!</h1>
<p>Closing credits</p>
</footer>
</section>
*csss
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
:not(:target){
display:none;
}
:first-of-type:not(:target) {display:block;}
You get a blank page because the :not(:target) applies to all elements.
You probably want article:not(:target) (the same goes for the :first-of-type rule)
Keep in mind though that if you make an overriding rule to display your first slide, it will always remain active.
To use this technique you will have to place your first slide as the last one (in the DOM). This way you can target it with article:last-of-type to show it at start and then use the more specific article:target ~ article:last-of-type to hide it when another one is active.
Something like this
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
article,
article:target ~ article:last-of-type{
display:none;
}
article:target,
article:last-of-type{display:block;}
<section>
<header class="slide" id="foo">
<h1>Θέμα ενότητας</h1>
</header>
<article class="slide" id="setter">
<h1>Setter</h1>
<p> </p>
next
</article>
<article class="slide" id="Beagle">
<h1>Beagle</h1>
<p> </p>
start
</article>
<article class="slide" id="main">
<h1>Σκυλος :</h1>
next
</article>
<footer class="slide" id="thankyou">
<h1>Ευχαριστώ!</h1>
<p>Closing credits</p>
</footer>
</section>
HTML code:
<html class="mobile portrait">
<body>
<div>
<header>
<img class="company_logo">
</header>
<section>
<div>
<img class="company_logo">
</div>
</section>
<footer>
<img class="company_logo">
</footer>
</div>
</body>
</html>
In order to display: none;, How can I apply one rule to .company_logo while .mobile .portrait?:
Update: Edited HTML code to add multiple company_logo. Code deleted from the question:
/* CSS code */
.mobile .portrait > body > div > header > .company_logo {
display: none;
}
/* Matches elements with the class of company_logo
that are inside an element
with both "mobile" and "portrait" classes */
.mobile.portrait .company_logo {
/* style here */
}
With the CSS code posted below, I thought that I would be making a nav bar that extends the width of the browser and has a red background. I also thought I would be making the logo for the page appear ont he far left, with the text immediately to the right. What do I need to do to make a #ff0000 nav bar extend the whole width of the browser? How can I align this text to be to the right of the logo and at the top of the browser window?
Here is the CSS code:
.logo{
float:left
}
.titletext {
text-align: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Here is the HTML code:
<DOCCTYPE = HTML>
<html>
<head>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</head>
</html>
JS Fiddle
Never write code inside the <head> tag, you should use float:right for .titletext
HTML
<body>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<div class="clearfix"></div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
CSS
.clearfix
{
clear:both;
}
.logo{
float:left
}
.titletext {
float: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Your HTML is not valid. You insert content into head tag.
Check this DEMO
<head>
<title>Your title</title>
</head>
<body>
<!-- Place here your content -->
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
I run into this a lot and it's fairly annoying. Does anyone know about this:
#content h5 {
color:red;
}
#next h5 {
color:blue;
}
When the markup looks like this:
<div id="content>
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
The blue h5 will actually appear red, what gives?!
I had no problems with it. You do have a quote mark missing after content though. Below is what I tested with
<html>
<head>
<style>
#content h5 {
color:red;
}
#next h5 {
color:blue;
}
</style>
</head>
<body>
<div id="content">
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
</body>
</html>
No, it won't.
That's because of what is known as CSS Specificity, here is a good tutorial about it:
Specifics On CSS Specificity
Code and preview:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
My question is: is it possible to place another date section next to the first one, so it appears like this: what i want http://img505.imageshack.us/img505/2787/previewsp2.gif
EDIT: strange, I tried floating before I asked the question and it didn't work...thanks everyone :D
use style="float:left" on each DIV (either directly or via a stylesheet)
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
border:1px solid green;
display:table;
height:3.25em;
float: left;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div id="dContainer2">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
float:left if you want block elements to sit next to each other.
Copy dContainer and place the copy immediately after it.
Change the ID and the new ID to the #dContainer style.
Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.dDate {
display:table-cell;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding-left:1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
[EDIT] Looking at the other answers:
- Float is of course the right answer, I just went with the initial logic, actually finishing it (making a real table might be actually the logical final step...)
- Note: doesn't look nice in IE (6, 7).
Is there any reason why you can't use <span> tags instead of <div>'s? That way your page would still make sense when read without CSS.