I have a combined local docs, group docs, and f.a.q. page I've been collating my documentation into. It's turning out very well and is easily updated and added to. There's a static navbar at the top with drop-down menus to navigate to parts of the document. Ideally, I'd like to hide all content other than that which is currently linked.
CSS:
<style>
/* Block Elements */
body { margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
...
</style>
I've also tried:
section:active { display: block; }
section:focus { display: block; }
I've also tried to add !important to the section:target { display: block !important; } without success. In a simpler page without additional CSS I can get it to work, but I can't seem to get it to work with my full styles.
Suggestions?
Edit: A sample that seems to work as I'd like albeit with divs and not sections:
<html>
<head>
<title> Test Target Selector </title>
<style>
div { display: none; }
div:target { display: block; }
</style>
</head>
<body>
<nav>
1
2
3
</nav>
<section>
<div id="1"> <h2> 1 </h2> <p> Content 1 </p> </div>
<div id="2"> <h2> 2 </h2> <p> Content 2 </p> </div>
<div id="3"> <h2> 3 </h2> <p> Content 3 </p> </div>
</section>
</body>
</html>
Edit2: Adding original full CSS and framework HTML.
<html>
<head>
<style>
/* Block Elements */
body { font-family: "Antic Slab", "Source Sans Pro", Helvetica, sans-serif; margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
/* Block Elements Continued */
h1 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.4em; }
h2 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.3em; }
h3 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.2em; }
h4 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.1em; }
h5 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.0em; }
p { text-align: justify; font-size: 1.0em; margin-right: 50px; }
blockquote { margin: 15px 0 0 15px; margin-right: 50px; }
blockquote p { padding-left: 15px; margin-right: 50px; }
ol, ul, dl { margin: 15px 0 0 15px; margin-right: 50px; }
li { padding: 5px; }
dt { padding: 5px; font-weight: bold; float: left; }
dd { padding: 5px; }
img { display: none; border: 1px solid black; margin: 20px; padding: 0; width: 200px; }
/* Inline Elements */
a { text-decoration: none; color: blue; }
a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.1em; }
cite { color: darkgray; font-style: italic; }
cite a { color: navy; }
cite a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.10em; }
blockquote.email { margin: 25px; border-left: 1px solid lightgray; }
/* Classes */
.email { border-left: 1px solid gray; }
.lower-alpha { list-style-type: lower-alpha; }
.outdated { color: red; }
.indent { margin-left: 50px; }
.center { text-align: center; }
.indent { margin-left: 25px; }
.no-wrap { white-space: nowrap; }
.outdated { text-decoration: none; font-size: 0.9em; color: lightgray; }
/* Main Navigation */
nav ul { margin: 0 2px; position: fixed; top: 0; width: 100%; list-style: none; background-color: black; padding: 0; text-align: center; }
nav ul li { position: relative; float: left; color: white; background-color: black; display: inline-block; text-align: center; margin: 0; padding: 10px; font-size: 0.90em; }
nav ul li:before { content: ""; }
nav ul li a { color: white; margin: 0; padding: 10px; text-decoration: none; -webkit-transition: color 0.2s linear, background 0.2s linear; -moz-transition: color 0.2s linear, background 0.2s linear; -o-transition: color 0.2s linear, background 0.2s linear; transition: color 0.2s linear, background 0.2s linear; }
nav ul li a:hover { color: white; }
nav ul li:hover > a { background: black; }
/* Drop-Down Navigation */
nav ul li:hover > ul { visibility: visible; opacity: 1; }
nav ul ul, nav ul ul li ul { list-style: none; margin: 0; padding: 10px; visibility: hidden; opacity: 0; position: absolute; z-index: 99999; width: 180px; background: white; -webkit-transition: opacity 0.2s linear, visibility 0.2s linear; -moz-transition: opacity 0.2s linear, visibility 0.2s linear; -o-transition: opacity 0.2s linear, visibility 0.2s linear; transition: opacity 0.2s linear, visibility 0.2s linear; }
nav ul ul { top: 43px; left: 1px; }
nav ul ul li ul { top: 0; left: 181px; }
nav ul ul li { clear: both; width: 100%; border: 0 none; border-bottom: 1px solid #c9c9c9; }
nav ul ul li a { background: none; padding: 7px 15px; color: white; text-decoration: none; display: inline-block; border: 0 none; float: left; clear: both; width: 150px; }
/* Lists */
ul { margin: 25px; list-style-type: none; }
ul li { padding: 5px; font-size: 0.90em; text-align: justify; }
ul li:before { content: "\2022"; }
ol { margin: 25px; }
ol li { padding: 5px; font-size: 0.90em; text-align: justify; }
ol li.lower-alpha { list-style-type: lower-alpha; }
/* Tables */
table { margin: 25px 25px auto; border-collapse: collapse; }
table caption { margin: 25px 0 25px 0; text-align: left; color: gray; }
th, td { padding: 5px; border: 1px solid lightgray; vertical-align: center; }
th { font-size: 0.8em; font-weight: bold; text-align: center; }
td { font-size: 0.8em; text-align: justify; white-space: nowrap; }
td:hover { background-color: lightcyan; }
</style>
</head>
<body>
<nav>
<ul id="sitemap">
<li class="h1"> Site Doc
<ul>
<li class="h2"> Backup </li>
<li class="h2"> Data </li>
</ul>
</li>
<li class="h1"> Notes
<ul>
<li class="h2"> Manual </li>
</ul>
</li>
</ul>
</nav>
<section id="welcome">
<h1> Documentation Page </h1>
<p> Welcome to the documentation page. </p>
<p> This page is under development. </p>
</section>
<section id="site_doc">
<h1> Site Doc </h1>
<section id="backup">
<h2> Backup </h2>
<p> Backup procedures. </p>
</section>
<section id="data">
<h2> Data </h2>
<p> Data storage procedures. </p>
</section>
</section>
<section id="notes">
<h1> Notes </h1>
<section id="manual">
<h2> Manual </h2>
<p> Manual. </p>
</section>
</section>
</body>
</html>
The only reason your simplified example didn't work is because you had all sections wrapped in yet another section. Replace that wrapper with something else and it will work. As for the more generic problem with your other CSS, there's two ways of approaching it: either find out which rules are mixing up your custom CSS, or add more specific rules, e.g. CSS classes to your toggable sections.
<html>
<head>
<title> Test Target Selector </title>
<style>
section { display: none; }
section:target { display: block; }
</style>
</head>
<body>
<nav>
1
2
3
</nav>
<div>
<section id="1"> <h2> 1 </h2> <p> Content 1 </p> </section>
<section id="2"> <h2> 2 </h2> <p> Content 2 </p> </section>
<section id="3"> <h2> 3 </h2> <p> Content 3 </p> </section>
</div>
</body>
</html>
Related
the title sounds weird, idk how to explain it. so i'm building a skill progression bar section on my website. i'm using a sticky navbar so that it'll be easier to click the section. when i'm scrolling down, the progress bar kinda overflowing to the navbar(?) anyone know how to fix this? this is not my code and i'm just following so i don't really understand how this works *edit this is not the entire code cz ain't no way i'm posting all of it.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
/*STICKY NAVBAR*/
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/*NO UNDERLINE LINK*/
a,
a:hover,
a:visited,
a:focus {
text-decoration: none;
}
/*navbar*/
nav {
background-color: black;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 0px 100px;
font-family: 'DM Serif Display', serif;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
text-transform: uppercase;
font-family: 'DM Serif Display', serif;
}
a.onactive,
a:hover {
background-color: white;
color: #444444;
transition: .5s;
padding: 5px;
border-radius: 3px;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
}
#media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li {
font-size: 16px;
}
}
#media (max-width: 858px) {
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: #444444;
bottom: -100%;
top: 80px;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
text-align: center;
}
nav ul li a {
font-size: 20px;
}
a.onactive,
a:hover {
background: none;
}
/*NAVBAR ENDS*/
.details {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.bar {
position: relative;
border: 2px solid #0d96e0;
border-radius: 20px;
}
.bar div {
position: relative;
width: 0;
height: 9px;
border-radius: 10px;
background-color: #0d96e0;
}
.skills:not(:last-child) {
margin-bottom: 30px;
}
#html-bar {
animation: html-fill 2s forwards;
}
#keyframes html-fill {
100% {
width: 90%;
}
}
#css-bar {
animation: css-fill 2s forwards;
}
#keyframes css-fill {
100% {
width: 75%;
}
}
#javascript-bar {
animation: js-fill 2s forwards;
}
#keyframes js-fill {
100% {
width: 72%;
}
}
#jQuery-bar {
animation: jQuery-fill 2s forwards;
}
#keyframes jQuery-fill {
100% {
width: 68%;
}
}
span {
color: white;
font-family: 'Poppins', sans-serif;
}
<nav class="sticky">
<label class="logo" id="nav">Shira</label>
<ul>
<li>Home</li>
<li>About</li>
<li>Career</li>
</ul>
</nav>
<section id="section1">
<div class="skills">
<div class="details">
<span>HTML</span>
<span>90%</span>
</div>
<div class="bar">
<div id="html-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>CSS</span>
<span>75%</span>
</div>
<div class="bar">
<div id="css-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>jQuery</span>
<span>68%</span>
</div>
<div class="bar">
<div id="jQuery-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>Javascript</span>
<span>72%</span>
</div>
<div class="bar">
<div id="javascript-bar"></div>
</div>
</div>
</section>
One way would be to put the navbar on the top layer.
I recommend you to take a look at CSS z-index, which you could use to accomplish this.
Basically boils down to; select your navbar and give it a z-index value higher than the other element(s).
eg;
.sticky {
z-index: 999;
}
I'm having trouble making a dropdown menu. My dropdown menu just won't show upon hover, but if I change my display from none to block in .submenu ul li, the dropdown is in the right place.
Can anyone please help me?
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'montserrat';
}
.container {
height: 80px;
width: 100%;
background: #34495e;
display: block;
float: right;
}
h1.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 40px;
line-height: 80px;
float: left;
width: auto;
/* border: 1px red solid; */
}
.logo span {
color: #3498db;
}
nav ul {
float: right;
margin-right: 40px;
/* border: 1px red solid; */
}
nav li {
display: inline-block;
margin: 0 5px;
line-height: 80px;
text-align: center;
/* border: 1px red solid; */
}
nav a {
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
}
a.active,
a:hover {
border: 1px solid white;
transition: .5s ease-in;
}
nav #icon {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
background: #34495e;
border: none;
}
#media (min-width: 980px) {
h1.logo {
font-size: 32px;
padding-left: 60px;
}
nav ul {
margin-right: 20px;
}
nav a {
font-size: 17px;
}
nav #icon {
display: none;
}
div button {
display: none;
}
}
#media(max-width:980px) {
nav #icon {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s ease-in;
}
.submenu ul {
top: 100%;
}
nav li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav a {
font-size: 20px;
text-align: center;
}
a.active,
a:hover {
border: none;
color: #3498db;
}
#btn1:hover {
border: none;
color: #3498db;
}
#btn2:hover {
border: none;
color: #3498db;
}
#btn3:hover {
border: none;
color: #3498db;
}
nav ul.show {
left: 0;
}
}
body {
background-image: url('../images/workout.jpg');
background-size: cover;
height: calc(100vh-80px);
}
div .connect {
background: #2f364e;
display: inline-block;
width: auto;
height: auto;
}
#btn1 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn2 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn3 {
background: #2f364e;
color: white;
padding: .5em .7em;
border: none;
font-size: 20px;
margin: 0 5px;
}
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
.submenu ul {
margin: 0;
padding: 0;
}
.submenu li a {
margin: 0;
padding: .5em;
}
.main-nav li :hover .submenu {
display: block;
}
<header>
<nav class="container">
<h1 class="logo">Fitness Fir<span>st</span></h1>
<nav class="navbar">
<div class="main-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services
<div class="submenu">
<ul>
<li>Membership</li>
<li>Coaching</li>
</ul>
</div>
</li>
<li>Timetables</li>
<li>Contact</li>
<div class="connect" class="button">
<button id="btn1"><i class="fa fa-facebook"></i></button>
<button id="btn2"><i class="fa fa-instagram"></i></button>
<button id="btn3"><i class="fa fa-twitter"></i></button>
</div>
</ul>
<button id="icon"><i class="fa fa-bars" style="font-size:36px"></i></button>
</div>
</nav>
</nav>
</header>
Issue
In your CSS file, you have only hidden the li elements in your submenu:
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
But here, you're trying to display the .submenu class, rather than the lis inside. In addition, the :hover selector is not attached to the li
.main-nav li :hover .submenu {
display: block;
}
Fix
To fix this we can change the above selector to the below, so that it is now un-hiding the submenu's lis, when you hover over the parent li (Services button)
.main-nav li:hover .submenu li {
display: block;
}
So I am extremely new to coding and I am doing this for my career school capstone project and I am running into a lot of problems. Mainly two: How to put the image above the content box? (even with a transparent background).
Here is my Code:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: #FFFFFF;
opacity: 0.5;
display: flex;
position: relative;
}
#box img:logo.png {
opacity: 1;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
The white box appears next to the image. I wanted it to be inside the box. I also wanted to box to have it's own set of opacity and colors. Which I know that I need to adjust my DIV boxes and create better ones but I'm not sure where to start #1, and I don't necessarily have any guidance on how to do so.
So first at all:
If you want to make the background of the box a bit transparent then you should not give an opacity: 0.5; but a background: rgba(255,255,255,0.5);
Then I also saw this in your CSS code:
You used a class for the box in the HTML. For the box-image in CSS you used an ID. And if you want to address the image in the Box class then you don't say .box img:logo.png but .box img
The correct CSS code should look like this:
Here is the whole revised code again. If something is missing then let us know:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: rgba(255,255,255,0.5);
display: flex;
position: relative;
}
.box img {
opacity: 1;
margin: 0 auto;
display: block;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
Try this
#box img:logo.png {
float: none;
opacity: 1;
}
I'm not sure why hover isn't working for this page, the other work fine. Can anybody find a solution to this, because I tried but for some reason I can't get it to work?
My CSS code is below my HTML.
I think it the issue may lie here but I can't seem to figure it out.
Everything seems fine to me when I validated it.
Could it be I used too many hover for this CSS?
HTML
<body>
<input type="checkbox" id="menutoggle">
<label for="menutoggle" class="menu-icon">☰</label>
<header>
<div id="brand"><img src="http://www.grazinburger.com/images/menu_icon.png" alt="menu"></div>
</header>
<nav class="menu">
<ul>
<li id="video">Favorites</li>
<li id="portfolio">Portfolio</li>
<li id="blog">Blog</li>
</ul>
</nav>
</body>
CSS
body {
font-family: sans-serif;
}
a { color: red;
text-decoration: none;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 50px;
margin: auto;
color: red;
}
#brand {
float: left;
line-height: 50px;
color: #EEE;
font-size: 25px;
font-weight: bolder;
font-family: 'Anonymous Pro', ;
}
#brand img {
max-width: 12%;
}
nav { width:100%;
text-align:center;
}
nav a:hover {
background-color: black;
opacity: .4;
}
nav a {
display: block;
padding: 15px 0;
border-bottom: 1px solid gray;
color: antiquewhite;
font-family: 'Anonymous Pro', ;
font-weight: bold;
font-size: 1.25em;
}
nav li:last-child a {
border-bottom: none;
}
.menu li {
border-left: none;
}
#video {
background-image: url(http://clearancebinreview.com/wp-content/uploads/2011/01/1-30-11_news_video_game_backgrounds1.jpg);
}
#portfolio {
background-image: url(http://www.digitalgov.gov/files/2015/01/600-x-400-Composite-image-of-file-transfer-background-Wavebreakmedia-Ltd-Wavebreak-Media-Thinkstock-488641549.jpg);
background-position: center;
}
#blog {
background-image:url(../img/Anime-Panti-Ando-with-Gun-and-Sword-600x375.jpg);
background-position: top;
}
.menu {
width: 240px;
height: 210px;
position: absolute;
left: -240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
padding: 10px 20px;
color: aquamarine;
cursor:pointer;
float: right;
}
#menutoggle {
display: none;
}
#menutoggle:checked ~ .menu {
position:absolute; left: 0; }
Hover appears to work for me:
https://jsfiddle.net/bd2d6jac/
Assuming your referring to nav a:hover
Hey this is extremely frustrating and i can NOT figure it out. I am a novice html/css coder. this problem is specifically with the links and text styling. It appears correct in the theme preview editor... but when i open up my blog directly from its url it is not the same here is what what I have in reference to the problem code.
Please help this is driving me crazy, the url is http://www.ensu3.tumblr.com
the meta for custom options
`
<style type="text/css">
body {
background: {color:Background} url('{image:Background Image}')
{text:BackgroundProperties};
}
.wrapper {
width: 960px;
margin: 0px auto;
padding-top: 25px;
background-color: white;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: none;
}
.header {
width: 100%;
padding: 5px 0px 5px 0px;
margin: 0px;
background-color: gray;
}
#logo img {
margin: 0px;
padding: 0px;
text-align: center;
}
#title {
margin: 0px;
padding: 0px;
text-align: center;
font-family: {font:Title};
font-size: {text:HeaderSize};
color: {color:Title};
}
#title h1 {
margin:0px;
padding:0px;
text-transform: uppercase;
color: black;
}
#title a:link, #title a:visited {
text-decoration: none;
}
#title a:hover, #title a:active {
color: {color:LinksHover};
}
#title a {
transition: color .7s;
-moz-transition: color .7s;
-webkit-transition: color .7s;
-o-transition: color .7s;
}
#nav {
margin: 0px;
padding: 0px;
background-color: blue;
color: {color:Links};
font-family: {font:Links};
letter-spacing: 1.5px;
margin: 0px;
padding: 15px 0px 15px 0px;
word-spacing: 10px;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
text-transform: uppercase;
margin: 0px auto;
padding: 0px;
}
<div class="header">
{block:IfLogoImage}
<div class="header" id="logo"><img src="{image:Logo}" /></div>
{/block:IfLogoImage}
{block:IfNotLogoImage}
<div class="header" id="title"><h1>{Title}</h1>
{/block:IfNotLogoImage}
</div>
<div class="header">
<ul id="nav">
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:HasPages}
{block:Pages}
<li>{Label}</li>
{/block:Pages}
{/block:HasPages}
<li>TestLink</li>
<li>TextLink2</li>
</ul>
</div>`
Did you remember to hit save?
Also, it can take a while for changes to show up, since Tumblr caches page templates very aggressively.