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>
Related
I'm new to CSS. The tutorials taught me, that settings defined in the upper part of the css file are overwritten by the settings defined below. Now I try to create a custom cursor for my whole page, which is animated while clicking on a link. My code looks like this:
* {
cursor: url("../dartpfeil.cur"), auto;
}
...
.menu a:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
}
But this doesn't work. The cursor defined in the * section works, but if I click on the menu link, the cursor doesn't change. If I delete the * section and add the following code:
.menu a:hover {
cursor: url("../dartpfeil.cur"), auto;
}
it works, but the "dartpfeil.cur" cursor is only shown by hovering the links. I also tried
*:hover {
cursor: url("../dartpfeil.cur"), auto;
}
but then the cursor is also only shown by hovering a link. I want to use the "dartpfeil.cur" on the whole page as if it is defined in *, but i want also the "dartpfeil_steckt.cur" while link is active. Is there any possible solution for this problem?
Thanks and a happy new year to all!
EDIT: Error in code fixed
EDIT2: As asked, the html code below:
<html>
<head>
<title>Dartverein XY</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="index.php" id="headerLink">
<section id="header">
<div id="title">Steeldartverein<br>Mühldorf e.V.</div>
</section>
</a>
<div class="horizontalBorder"></div>
<section class="menu">
<p class="verticalBorder"></p>
<div class="menuElementRed">News</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Über uns</div>
<p class="verticalBorder"></p>
<div class="menuElementRed">Weiteres</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Login</div>
<p class="verticalBorder"></p>
<p class="lastVerticalBorder"></p>
</section>
<div class="horizontalBorder"></div>
</body>
</html>
Why it does not work is because it is your div that is the active element and for a div to respond to the :active class it need tabindex.
I added tabindex (and an extra CSS rule) to/for the News link div so you see how that work, and I also removed the div on the Über uns link and now that one work too
* {
cursor: url("../dartpfeil.cur"), auto;
color: lime;
}
.menu a:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
color: red;
}
.menu a div:active {
cursor: url("../dartpfeil_steckt.cur"), auto;
color: red;
}
<html>
<head>
<title>Dartverein XY</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="index.php" id="headerLink">
<section id="header">
<div id="title">Steeldartverein<br>Mühldorf e.V.</div>
</section>
</a>
<div class="horizontalBorder"></div>
<section class="menu">
<p class="verticalBorder"></p>
<div tabindex="0" class="menuElementRed">News</div>
<p class="verticalBorder"></p>
Über uns
<p class="verticalBorder"></p>
<div class="menuElementRed">Weiteres</div>
<p class="verticalBorder"></p>
<div class="menuElementGreen">Login</div>
<p class="verticalBorder"></p>
<p class="lastVerticalBorder"></p>
</section>
<div class="horizontalBorder"></div>
</body>
</html>
Does "dartpfeil_steckt.cur" work for *? Your code looks fine, and it should override the wildcard because it's more specific. My best guess is that you have misplaced the file, or misspelled the filename.
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.
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>
The title needs to be at bottom of the text, and just above the video. The border for the wrapper is breaking near the bottom left corner (because of the YouTube video) when viewed in Chrome.
<head>
<style type="text/css">
body{font:15px arial,sans-serif;}
img{border-style: none;}
a:link {color:#0000FF;} /* unvisited link */
a:visited {color:#0000FF;} /* visited link */
a:hover {color:#0000FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
#title{
font-size:130%;
vertical-align:bottom; /*What am I doing wrong here? */
white-space:nowrap;
}
#arrows{
float:left;
margin-top:25px;
margin-left: 25px;
}
#list{
float:right;
margin-right:60px;
}
#wrapper{
width:300px;
border: 10px solid orange; /*Why is the YouTube video breaking this when viewed in Chrome? */
}
#video{
margin:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="arrows">
<br />
<img src='img/up.png'><br />
<img src='img/down.png'>
</div>
<div id="list">
<ul>
<li><a href='...' id='0' >zero</a></li>
<li><a href='...' id='1' >one</a></li>
<li><a href='...' id='2' >two</a></li>
<li><a href='...' id='3' >three</a></li>
<li><a href='...' id='4' >four</li>
<li><a href='...' id='5' >five</a></li>
</ul>
</div>
<div id='title'>Beginner Tutorial 1</div>
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
</div>
</body>
</html>
Just move
<div id='title'>Beginner Tutorial 1</div>
below the
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
but before the last
</div>
This happened because your other elements are floated and, therefore, are outside the flow of the document.
EDIT: I don't see the border issue in Chrome, BTW.
EDIT #2: To place the div id-title above the video, add the following line above the title:
<br style="clear:both;" />