I come here to ask a question I've begin yesterday a project so I currently do a prototype of my design
I've begin my CSS in mobile first but when I using my media query, the mobile first property get override and take the tablet query as my main css and i don't understand why :/
here is the html
<div id="container">
<section id="mysect1">
<h2> Presentation </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="mysect2">
<h2> Produits </h2>
<img src="./assets/images/fauteuil.png">
<img src="./assets/images/tensio.png">
<img src="./assets/images/inco.png">
<img src="./assets/images/lit.png">
</section>
and here my CSS
#mysect1 p {
font-size:1.1em;
}
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
#media (min-width:768px) {
#mysect1 p {
font-size:1.8em;
}
#mysect2 {
text-align:center;
}
#mysect2 img {
width:70%;
}
}
thanks !
You need to define a separate media query for mobile
#media (min-width:480px) {
#mysect1 p {
font-size:1.1em;
}
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
}
the problem here is my #media(min-width:768px) override my phone query when i'm on phone emulator ( on google dev)
here is my complet HTMl
<!DOCTYPE html>
<html>
<head>
<title> BLCM Tunisie </title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<header>
<nav id="navbar">
<div id="logo"><img src="./assets/images/bastide.jpg"></div>
<div id="op-horizontalnav">
<ul class="op-sectionlist">
<li class="op-v-item"><a class="op-v-link" href="#mysect1">PRESENTATION</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect2">PRODUITS</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect3">EQUIPE</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect4">CONTACT</a></li>
</ul>
</div>
</nav>
</header>
<div id="container">
<section id="mysect1">
<h2> Presentation </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="mysect2">
<h2> Produits </h2>
<img src="./assets/images/fauteuil.png">
<img src="./assets/images/tensio.png">
<img src="./assets/images/inco.png">
<img src="./assets/images/lit.png">
</section>
<section id="mysect3">
<h2> Equipe </h2>
<div id="imageTeam">
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerome Yvanez <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jean bon <br/> Web marketer</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jesui Palas <br/> CM</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Sylla Bique <br/> Graphiste </p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Mac Donald <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
</div>
</section>
<section id="mysect4">
<h2> Nous contacter </h2>
<form action="post">
<input placeholder=" Nom et Prénom" type="text" id="firstname">
<input type="text" id="email" placeholder="email">
<input type="text"size="6" id="contactContent" placeholder ="contenue du message">
<input type="submit" id="send"/>
</form>
</section>
</div>
<footer></footer>
</body>
</html>
and here my complet CSS
html, body {
border: 0;
font-family: Helvetica LT Condensed;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width:100%;
}
body{
background: url(../images/fond.png);
background-size: 200%;
background-repeat: repeat;
background-position-x: 60%;
background-position-y: 118%;
}
section {
padding:20px;
}
h2, h3 {
text-align:center;
font-size:4em;
}
#container{
margin-top:150px;
}
/*============ CSS 'Header' mobile first ========== */
header.active #logo img {
width:100px;
height:40px;
margin:4px 0 0 20px;
padding-left:40px;
}
#logo { text-align:left; }
#logo img{
width:140px;
height:55px;
transition: .4s all linear;
-moz-transition: .4s all linear;
-webkit-transition: .4s all linear;
-o-transition: .4s all;
margin:14px 0 0 20px;
display:block;
}
header{
color:white;
position:fixed;
background-color:black;
text-align:right;
right:0;
top:0;
left:0;
z-index:501;
height:80px;
}
#navbar {
text-align:right;
position:relative;
font-size:19px;
}
ul { margin-top:-34px; }
li{
display:inline;
margin-top:;
padding-right:50px;
transition: .4s all linear;
-moz-transition: .4s all linear;
-webkit-transition: .4s all linear;
-o-transition: .4s all linear;
}
.active li{
font-size:0.8em;
padding-top:20px,
padding-right:40px;
}
.active ul { margin-top:-30px; }
a.active {
background-color:red;
color:white;
padding:5px;
font-weight:bold;
}
a{ text-decoration: none; color:white;}
#media(min-width: 480px){
/* =========== CSS 'Presentation' mobile first =========== */
#mysect1 p {
font-size:1.1em;
}
/* =========== CSS 'Produits' ============= */
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
/* ========== CSS 'Equipe' mobile-first ===========*/
#imageTeam {
text-align:center;
padding-top:20px;
order:2;
}
.imgWrapper { display:inline-block; width: 42%; }
.imgWrapper p {
background-color:red;
padding:20px 117px 21px 110px;
color:white;
margin-top:-5px;
width:inherit;
font-size:39px;
display:inline-block;
}
#imageTeam img{ width:100%;
}
/*=========== CSS 'Contact' mobile first ============= */
form {
width:100%;
}
input, textarea, select {
font-size:44px;
margin-top:25px;
padding:10px;
box-sizing:border-box;
background:none;
outline:none;
resize:none;
border:0;
transition:all .3s;
border-bottom:1px solid #F7941D;
border-right:1px solid #F7941D;
width:100%;
}
input:focus { border-bottom:3px solid #F7941D; border-right:3px solid #F7941D;}
#send {
padding: 15px;
background-color: #F7941D;
margin-bottom: -6px; }
#send:hover{ background-color:#B40303; }
#contactContent { height:100px; }
#mysect4 {
padding: 0 10px 0 0px;
margin-left: -6px;
}
}
/*============== DEBUT CSS TABLETTE ============= */
#media (min-width:768px) {
/*============== CSS 'Presentation' TABLETTE =============*/
#mysect1 p {
font-size:1.8em;
}
/*============= CSS 'Produits' TABLETTE =================*/
#mysect2 {
text-align:center;
}
#mysect2 img {
width:70%;
}
.imgWrapper {
width:35%;
}
#imageTeam img {
width: 86%;
}
#imageTeam p {
padding:10px 85px 12px 84px;
font-size: 21px;
}
}
this is a pics of what I tell
Related
I have just created a grid layout with old techniques (float and inline elements). It works enough nicely. Briefly I have a top-level wrapper class to center and limit size content. There are 2 main sections, each one with a header (20%) ,and the remainder (80%) is subdivided in different ways. There is even an elastic gutter (in em) setted with padding. I have designed the layout with in mind a good separation between content and presentation for high code maintainability and for this rason there is some redundant tag (especially divs).
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float layout plus wrapping rows using inline-block</title>
<!-- the base styles and "housekeeping" styles are in here: -->
<link rel="stylesheet" href="css/grid-base.css">
<!-- the HTML5 shiv, to help older browsers understand styling
on newer HTML5 elements: -->
<script src="js/html5shiv.min.js"></script>
<style>
/* grid styling */
.row {
margin: 0 -.6875em;
padding: 0;
list-style: none;
}
.row:after {
content: '';
display: block;
clear: both;
}
.row-quartet > * {
width: 25%;
}
.row-trio > * {
width: 33.3333%;
}
.col {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0 .6875em 1.375em;
}
.col:last-child {
float: right;
}
.row-wrapping {
font-size: 0;
margin: 0 -11px;
margin: 0 -.6875rem;
}
.row-wrapping > * {
float: none;
vertical-align: top;
display: inline-block;
font-size: 16px;
font-size: 1rem;
}
/* content styling */
.subcategory {
margin-top: 1.5em;
border-bottom: 1px solid #8e3339;
}
.subcategory-featured {
width: 50%;
}
.subcategory-content {
width: 80%;
}
.subcategory-header {
width: 20%;
}
.story {
padding: .6875em;
background-color: #eee;
}
.story + .story {
margin-top: 1.375em;
}
.story img {
width: 100%;
}
</style>
</head>
<body>
<header class="masthead">
<div class="wrapper">
<h1>Important News</h1>
</div>
</header>
<nav role="navigation" class="navbar">
<div class="wrapper">
<ul class="navlist">
<li>Home</li>
<li>World</li>
<li>Local</li>
<li>Sports</li>
</ul>
</div>
</nav>
<main class="wrapper">
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Lorem ipsum</h2>
</header>
<div class="col subcategory-content">
<div class="row row-quartet">
<div class="col subcategory-featured">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Cras suscipit nec leo id.</h3>
<p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Perferendis, ipsam!</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Curabitur mattis purus nec velit.</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
<ul class="row row-quartet row-wrapping">
<li class="col">
<div class="story">
<h3>Perferendis, ipsam! Dolor sit amet consectetur</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Perferendis, ipsam!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
</div>
</div>
</div>
</section>
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Dolor sit amet</h2>
</header>
<div class="col subcategory-content">
<div class="row row-trio">
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Ut sit amet mi massa</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<h3>Nunc mollis sit amet nunc</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
<article class="story">
<h3>Duis sed ante enim. Cras</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Animi, explicabo, ipsum</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
And the extern .css:
body {
margin: 0;
line-height: 1.375;
font-family: Georgia, Times New Roman, Times, serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: Avenir Next, Avenir, Franklin Gothic, Trebuchet MS, Arial, sans-serif;
margin-top: 0;
}
a {
color: #8E3339;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
/* here's our wrapper */
.wrapper {
width: 95%;
max-width: 76em;
margin: 0 auto;
}
/* masthead styling */
.masthead {
background-color: #8E3339;
}
.masthead h1 {
margin: 0;
padding: 0.5em 0;
color: #fff;
text-shadow: -.1em .1em 0 rgba(0,0,0,0.3);
}
/* navbar styling */
.navbar {
background-color: #5E2126;
margin-bottom: 1.375em;
}
nav {
display: block;
}
.navbar ul {
font-family: 'Avenir Next', Avenir, Corbel, 'Franklin Gothic', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
list-style: none;
padding: 0;
margin: 0;
background-color: #752A2F;
display: flex;
overflow: hidden;
}
.navbar li {
float: left;
text-transform: uppercase;
text-align: center;
box-sizing: border-box;
flex: 1 1 auto;
border-left: 1px solid #8E3339;
}
.navbar li:first-child {
border-left: 0;
}
.navbar li a {
display: block;
text-decoration: none;
line-height: 1.75em;
padding: 1em 2em;
color: #fff;
}
https://jsfiddle.net/36q59rav/
To improve the code I introduced in a second moment (A sort of progressive enhancement) the power of flexbox, to add several embellishments as box of equal height that is a tricky feature to have with float (in actual fact there was already flexbox for the navbar with float like fallback).
I'm using Modernizr to test specific flexbox support (class flexbox and flexwrap). I have reached an awesome result in Firefox (for my limited experience) but with my big surprise when I test the code in Google Chrome there is a visual mistake: the second nested row of first section is overlapped to first row and I'm not able to understand why.
Here is the code:
https://jsfiddle.net/rs7n8hLm/
You can see the same problem in the jsfiddle browser.
Advice is also appreciated because I'm in a blind alley, and I'm very available if some line of code is obscure.
Thanks in advance.
Here a screenshot of the problem.
https://ibb.co/jkNKRnY
Well, this is my first question here!
I've been having a problem in making background-attachment: fixed; happen on a <div> which is also assigned this property :- transform: translateZ(-1px) scale(2);. Actually on the first slide, the background image is rendering correctly, but on the rest slides, the image is not visible.
Also, the scroll bar is not working when I click or drag it.
I've tried a lot of times on google and it's been two days. At last I tried Stackoverflow, 'cause I was not able to get the specific answer which I wanted.
If I missed some link then please do help and pardon me.
Here's the page which I'm making - http://mynk-9.github.io/test/
[edit] Now, I've also added the code.
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Effect</title>
<style>
body {
margin: 0px;
padding: 0px;
}
div.parallax-page {
position: relative;
height: 100vh;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
-webkit-perspective-origin-x: 50%;
perspective-origin-x: 50%;
}
div.parallax-page > div.group {
position: relative;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.parallax-page > div.group {
margin-bottom: calc(100vh);
}
div.parallax-page > div.group:last-child {
margin-bottom: -25vh;
}
div.parallax-page > div.group > div.background {
transform: translateZ(-1px) scale(2);
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
/*background-attachment: fixed;*/
}
div.parallax-page > div.group > div.slide {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.5);
}
div.parallax-page::-webkit-scrollbar {
/*display: none;*/
}
/* using formula -> scale = 1 + (translateZ * -1) / perspective */
</style>
</head>
<body>
<div class="parallax-page">
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image */
.bgimg-1 {
background-image: url('https://pixabay.com/static/uploads/photo/2016/01/19/17/16/rainbow-background-1149610_960_720.jpg');
min-height: 100%;
}
/* Second image */
.bgimg-2 {
background-image: url("https://i.ytimg.com/vi/4AA4qYGunr4/maxresdefault.jpg");
min-height: 400px;
}
/* Adjust the position of the parallax image text */
.w3-display-middle {bottom: 45%;}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<ul class="w3-navbar" id="myNavbar">
<li>HOME</li>
<li class="w3-hide-small w3-right">
<i class="fa fa-search"></i>
</li>
</ul>
</div>
<!-- First Parallax Image with Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
<div class="w3-display-middle">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em>I love photography</em></p>
<p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
</div>
</div>
<footer class="w3-container w3-theme-dark w3-padding-16">
<p>Powered by csandreas1</p>
</footer>
</body>
</html>
How does toggle a class in vue.js?
I have the following:
<th class="initial " v-on="click: myFilter">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {},
methods: {
myFilter: function(){
// some code to filter users
}
}
});
When I click <th> tag I want to apply active as a class as follows:
<th class="initial active" v-on="click: myFilter">
<span class="wkday">M</span>
</th>
This needs to toggle i.e. each time its clicked it needs to add/remove the class.
You could have the active class be dependent upon a boolean data value:
<th
class="initial "
v-on="click: myFilter"
v-class="{active: isActive}">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {
isActive: false
},
methods: {
myFilter: function() {
this.isActive = !this.isActive;
// some code to filter users
}
}
})
Without the need of a method:
<!-- html element, will display'active' class if showMobile is true -->
<!-- clicking on the elment will toggle showMobileMenu to true and false alternatively -->
<div id="mobile-toggle"
:class="{ active: showMobileMenu }"
#click="showMobileMenu = !showMobileMenu">
</div>
vue.js app
data: {
showMobileMenu: false
}
If you don't need to access the toggle from outside the element, this code works without a data variable:
<a #click="e => e.target.classList.toggle('active')"></a>
This answer relevant for Vue.js version 2
<th
class="initial "
v-on:click="myFilter"
v-bind:class="{ active: isActive }"
>
<span class="wkday">M</span>
</th>
The rest of the answer by Douglas is still applicable (setting up the new Vue instance with isActive: false, etc).
Relevant docs: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax and https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers
This example is using Lists: When clicking in some li it turn red
html:
<div id="app">
<ul>
<li #click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>
</ul>
</div>
JS:
var app = new Vue({
el:"#app",
data:{
lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
active_el:0
},
methods:{
activate:function(el){
this.active_el = el;
}
}
});
css
ul > li:hover {
cursor:pointer;
}
.active {
color:red;
font-weight:bold;
}
Fiddle:
https://jsfiddle.net/w37vLL68/158/
#click="$event.target.classList.toggle('active')"
:class="{ active }"
#click="active = !active"
:class="'initial ' + (active ? 'active' : '')"
#click="active = !active"
:class="['initial', { active }]"
#click="active = !active"
Reference link: https://v2.vuejs.org/v2/guide/class-and-style.html
Demo:
new Vue({
el: '#app1'
});
new Vue({
el: '#app2',
data: { active: false }
});
new Vue({
el: '#app3',
data: { active: false }
});
new Vue({
el: '#app4',
data: { active: false }
});
.initial {
width: 300px;
height: 100px;
background: gray;
}
.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- directly manipulation: not recommended -->
<div id="app1">
<button
class="initial"
#click="$event.target.classList.toggle('active')"
>$event.target.classList.toggle('active')</button>
</div>
<!-- binding by object -->
<div id="app2">
<button
class="initial"
:class="{ active }"
#click="active = !active"
>class="initial" :class="{ active }"</button>
</div>
<!-- binding by expression -->
<div id="app3">
<button
:class="'initial ' + (active ? 'active' : '')"
#click="active = !active"
>'initial ' + (active ? 'active' : '')</button>
</div>
<!-- binding with object combined array -->
<div id="app4">
<button
:class="['initial', { active }]"
#click="active = !active"
>['initial', { active }]</button>
</div>
In addition to NateW's answer, if you have hyphens in your css class name, you should wrap that class within (single) quotes:
<th
class="initial "
v-on:click="myFilter"
v-bind:class="{ 'is-active' : isActive}"
>
<span class="wkday">M</span>
</th>
See this topic for more on the subject.
If you need more than 1 class
You can do this:
<i id="icon"
v-bind:class="{ 'fa fa-star': showStar }"
v-on:click="showStar = !showStar"
>
</i>
data: {
showStar: true
}
Notice the single quotes ' around the classes!
Thanks to everyone else's solutions.
This is how you would achieve that one with Vue3 + Composition API
<script setup>
import { ref } from 'vue'
const isTextRed = ref(false)
function toggleClass() {
isTextRed.value = !isTextRed.value
}
</script>
<template>
<h1 :class="isTextRed && 'fancy-color'">Hi community 👋🏻</h1>
<button #click="toggleClass">Toggle color</button>
</template>
<style scoped>
.fancy-color {
color: Coral;
}
</style>
Here is a playground.
I've got a solution that allows you to check for different values of a prop and thus different <th> elements will become active/inactive. Using vue 2 syntax.
<th
class="initial "
#click.stop.prevent="myFilter('M')"
:class="[(activeDay == 'M' ? 'active' : '')]">
<span class="wkday">M</span>
</th>
...
<th
class="initial "
#click.stop.prevent="myFilter('T')"
:class="[(activeDay == 'T' ? 'active' : '')]">
<span class="wkday">T</span>
</th>
new Vue({
el: '#my-container',
data: {
activeDay: 'M'
},
methods: {
myFilter: function(day){
this.activeDay = day;
// some code to filter users
}
}
})
for nuxt link and bootstrap v5 navbar-nav, I used a child component
<nuxt-link
#click.prevent.native="isDropdwonMenuVisible = !isDropdwonMenuVisible"
to=""
:title="item.title"
:class="[item.cssClasses, {show: isDropdwonMenuVisible}]"
:id="`navbarDropdownMenuLink-${index}`"
:aria-expanded="[isDropdwonMenuVisible ? true : false]"
class="nav-link dropdown-toggle"
aria-current="page"
role="button"
data-toggle="dropdown"
>
{{ item.label }}
</nuxt-link>
data() {
return {
isDropdwonMenuVisible: false
}
},
You don't need to use a prop, you can alternatively call the data into another data variable set using an axios response or any other way you use to pull data into a specified vue component.
You can modify the number 32 below in all places to change the length of text you want to display before and after selecting more/less.
Works with Vue2 & Vue3.
"fw-bold" is a Bootstrap 5 class. It has no affect on this implementation.
props: {
content: Object,
},
data() {
return {
// UX
showComplete: false,
// DATA
shortText: "",
longText: "",
};
},
methods: {
shortenText(body) {
const length = body.length;
if (length >= 32) {
this.shortText = body.slice(0, 32);
this.longText = body.slice(32, -1);
}
},
toggleFull() {
this.showComplete = !this.showComplete;
}
},
created() {
this.shortenText(this.content.body);
},
In the vue template simply do this:
<span>{{ shortText }}</span>
<span v-if="showComplete">{{ longText }}</span>
<span v-if="!showComplete" class="fw-bold" #click="toggleFull"> more...</span>
<span v-if="showComplete" class="fw-bold" #click="toggleFull"> less...</span>
new Vue({
el: '#fsbar',
data:{
isActive: false
},
methods: {
toggle: function(){
this.isActive = !this.isActive;
}
}
});
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper" id="fsbar">
<!-- Sidebar Holder -->
<nav id="sidebar" :class="{ active: isActive }">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-duplicate"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-paperclip"></i>
FAQ
isActive: false, </a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-send"></i>
Contact
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn" #click="toggle()">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
</div>
</nav>
<h2>Collapsible Sidebar Using Bootstrap 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
/<script type="text/javascript">
// $(document).ready(function () {
// $('#sidebarCollapse').on('click', function () {
// $('#sidebar').toggleClass('active');
// });
// }); jquery equivalent to vue
</script>
</body>
</html>
Try :
<template>
<th :class="'initial '+ active" v-on="click: myFilter">
<span class="wkday">M</span>
</th>
</template>
<script lang="ts">
active:string=''
myFilter(){
this.active='active'
}
</script>
<style>
.active{
/***your action***/
}
</style>
I have an issue with the white background on my mainbody div. I have had to specify a fixed px and this is 750px. I dont want to have to do this I want to just be able to use auto. This is because I need to use the same CSS file for other pages and they will be different heights. Also when using the value of height: auto on the manibody div it dosent cover all the content in that div.
Here is a link to see what its like http://jsfiddle.net/#&togetherjs=KksjUfFlxS
Please can you help me to be able to fix this.
Here is my HTML code:
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Home || Web Design Coursework</title>
<meta name="description" content="">
<meta name="author" content="Elliott Davidson">
<meta name="language" content="english">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>
<body>
<div id="container">
<!-- start of header -->
<div id="header">
<img src="images/header-image.png" width="980" height="170" alt="kayaking header logo" /> </div>
</div><!-- end of header -->
<!-- start of navigation bar -->
<div id="navmenu">
<ul id="list-nav">
<li id="topnavleft">Home</li>
<li>Design</li>
<li>About</li>
<li>Kayaking Disciplines</li>
<li id="topnavright">Useful links</li>
</ul><!-- ul end list-nav -->
</div><!-- div end navmenu -->
<div id="mainbody">
<div id="homepagevideo">
<iframe width="560" height="315" src="http://www.youtube.com/embed/3WabVsBugGQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div><!-- end div homepagevideo -->
<div id="homepagekayakingdisciplines">
<h1 id="homepageh1kayakingdiscipline">Kayaking Disciplines</h1>
<p>Aliquid delicatissimi et vix. Ut cum tation ridens. Mea ei impetus gubergren, sit natum doming quodsi et. Usu cu sonet debitis. Mea nullam tamquam ea. Ex vis vocibus splendide, ut eum ullum assum impedit.</p>
<p>Decore facete mei ei. Eam ea maluisset dissentias, graece labore ocurreret has eu. Cu usu quem officiis maiestatis, cu quis assueverit mea. Primis deserunt consectetuer quo et, vim numquam aliquam eruditi ut.</p>
<p>Sint erroribus imperdiet ex quo, et sit habeo dolorum molestiae, commodo dissentiet no duo. Mucius essent repudiare te pri, te tale accumsan reprimique pro. Mel cu ignota argumentum. Vis dolor efficiantur ex, ei mei reque oporteat percipitur. Sea corrumpit voluptaria referrentur ea, ei sensibus definitionem vel. No verterem elaboraret sit, velit apeirian vim ea.</p>
</div><!-- end div homepagekayakingdisciplines -->
<div id="homepagedesign">
<h2>Design</h2>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis. Eum dicant mollis denique cu, an fastidii ocurreret instructior sit. His discere mediocrem no, an sit recteque tincidunt.</p>
<p>Mea ea animal inciderint, cum nulla saepe libris an. Modo meliore argumentum vel ei, mei cu option facilisis. Et enim detraxit vix. In clita mollis feugiat quo. Nobis soluta pri te, cum brute latine cotidieque ei.</p>
</div><!-- end div homepagedesign -->
<div id="homepageaboutme">
<h3>About</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepageaboutme -->
<div id="homepagelinks">
<h3>Links</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepagelinks -->
</div><!-- end div mainbody -->
<div id="footer">
<div id="footerimage">
<img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
<div id="footertext">
<div id="footernavmenu">
<ul id="list-footer-nav">
<li>Home</li>
<li>Design</li>
<li>About</li>
<li>kayaking Disciplines</li>
<li>Useful links</li>
</ul><!-- ul end list-footer-nav -->
</div><!-- div end footernavmenu -->
<div id="copyright">
<div class="copyrigttext">
Copyright © 2013 Elliott Davidson, All Rights Reserved.
</div><!-- end div copyrighttext -->
</div><!-- end div copyright -->
</div><!-- end div footertext -->
</div><!-- footer image -->
</div><!-- end of footer -->
</div><!-- end of container -->
</body>
</html>
Here is my CSS code:
#charset "UTF-8";
/* CSS Document */
#html, body{
background-color : #32B7FF;
font-family: Tahoma;
}
#container {
margin-left : auto;
margin-right : auto;
width:980px;
height:auto;
}
/********************************** header **********************************/
/********************************** nav bar **********************************/
#navmenu {
width : 980px;
margin-left : auto;
margin-right : auto;
height: 33px;
}
ul#list-nav {
list-style : none;
padding : 0;
background-color : #32B7FF;
font-family:Tahoma, Geneva, sans-serif;
border-radius:10px 10px 0 0;
overflow:hidden;
}
ul#list-nav li {
display : inline;
width : 980px;
height : 33px;
}
ul#list-nav li a {
text-decoration : none;
padding : 8px 0;
width : 196px;
background : #1173A8;
color : #fff;
float : left;
text-align : center;
}
ul#list-nav li a:hover {
background : #4B98C1;
}
ul#list-nav li a:active {
background : #4B98C1;
}
ul#list-nav li:first-child, ul#list-nav li:last-child {
border-radius:10px;
}
/********************************** mainbody **********************************/
#mainbody {
background-color:#FFF;
width:980px;
height:750px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
}
#homepagevideo {
padding:10px;
width:auto;
height:auto;
float:left;
}
#homepageh1kayakingdiscipline {
padding-top:5px;
}
#homepagekayakingdisciplines {
text-align:justify;
padding-left:10px;
padding-right:10px;
}
#homepagedesign {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:left;
height:auto;
}
#homepageaboutme {
width:470px;
padding-left:10px;
padding-top:10px;
padding-right:10px;
float:right;
height:auto;
}
#homepagelinks {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:right;
height:auto;
}
/********************************** footer **********************************/
#footer {
margin-left:auto;
margin-right:auto;
height:175px;
width:980;
}
#footertext {
position:absolute;
width:980px;
height:auto;
bottom: 0
}
#footerimage {
margin-left:auto;
margin-right:auto;
width:980px;
height:140px;
position: relative;
}
#footernavmenu {
width : 540px;
right:0px;
margin-right:0px;
float:left;
color:#FFF;
}
ul#list-footer-nav li {
display : inline;
padding-right: 8px;
}
ul#list-footer-nav li a {
text-decoration : none;
width:auto;
float : left;
color:#FFF;
padding:6px;
}
ul#list-footer-nav li a:hover {
color:#4B98C1;
}
ul#list-footer-nav li a:active {
color:#4B98C1;
}
#copyright {
width:440px;
height:auto;
right:0;
position: absolute;
bottom: 0;
margin: 1em;
text-align: right;
color:#FFF;
}
.copyrighttext {
}
You just need to add an overflow:auto; to your #mainbody. Thats it.
#mainbody {
background-color:#FFF;
width:980px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
overflow:auto; /* Use THIS one */
}
WORKING DEMO
You can get this done by adding a clear like this before closing of mainbody div, like this
HTML
<div class="clear"></div>
CSS:
.clear {
clear:both;
}
I am having allot of trouble with layering, My current issue is that vistors can not click on links inside div layers for some reason. They can't highlight text, click on the images in the sidebar which are linked up. I don't know what is wrong. Any help would be much appreciated.
Site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video-js/video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;}
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script>
</head>
<body onload="chgbg()">
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
HOME
</li>
<li id="top">
GUIDE
<ul>
<li id="submenu">CLASSES</li>
<li id="submenu">DUNGEONS</li>
<li id="submenu">MONSTERS</li>
<li id="submenu">PETS</li>
<li id="submenu">RACES</li>
<li id="submenu">TOWN BUILDINGS</li>
<li id="submenu">UNIVERSE</li>
<li id="submenu">WIKI</li>
</ul>
</li>
<li id="top">
BLOG
<ul>
<li id="submenu">ARAKION</li>
<li id="submenu">CHRIS TAYLOR</li>
</ul>
</li>
<li id="top">
MEDIA
<ul>
<li id="submenu">CONCEPT ART</li>
<li id="submenu">SCREENSHOTS</li>
<li id="submenu">VIDEOS</li>
</ul>
</li>
<li id="top">
FORUM</li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
<div id="Sidebar_content">
<p> </p>
<p class="title">Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" class="title" /></p>
<p><img src="images/IndieDBIcon.png" width="35" height="35" />
<img src="images/FacebookIcon.png" width="35" height="35" /> <a href="http://twitter.com/arakiongame" target="_new">
<img src="images/TwitterICon.png" width="35" height="35" /> </a> <img src="images/YoutubeICon.png" width="35" height="35" /> </p>
<p> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
</div></div>
<div style="display: inline-block;" id="main_background">
<div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
<table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
<tr>
<td width="140"><img src="images/MainImages/Placeholder1.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder2.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder3.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder4.jpg" height="100%" width="100%"/></td>
</tr>
<tr>
<td width="140">How Housing Works and why we have it <p> </p></td>
<td width="140">An In depth look at the Satyr race <p> </p></td>
<td width="140">We take a look at the role the alchemist plays in a group <p> </p></td>
<td width="140">Our doors are offically open to new employees apply today <p> </p></td>
</tr>
</table>
<p> </p>
</div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text" style="z-index:9;">
<video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="js/video-js/Posters/Test.png"
data-setup="{}">
<source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div id="footer_background" style=" text-align: center; ">
<img src="images/Footer_Divider.png" height="10px" width="600px"/>
<p> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
<div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
<div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>
CSS Code:
#font-face {
font-family: 'KingthingsExeterRegular';
src: url('font/kingthings_exeter-webfont.eot');
src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kingthings_exeter-webfont.woff') format('woff'),
url('font/kingthings_exeter-webfont.ttf') format('truetype'),
url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
overflow-y: auto;
}
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 15px;
zoom: 110%
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
/*Body Css */
#header{
z-index: -999;
width:900px ;
height:800px ;
position: relative;
top:0;
left:0;
}
#left{
z-index:-9;
width:239px;
height:600px ;
float: left;
clear: both;
position: absolute;
left:-215px;
top:150px;
}
#right{
z-index:-2;
width:239px;
height:600px ;
float:right;
clear: both;
position: absolute;
left:960px;
top:120px;
}
#Wrapper {
width:1040px;
margin:auto;
margin-top:-40px;
height:2000px;
position: relative;
z-index:0;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#navbar{
position: relative;
top:91px;
float:left;
margin-top:50px;
margin-left:5px;
width:649px;
height: 50px;
z-index:4;
margin-bottom:10px;
clear:both;
}
#nav{
list-style:none;
font-weight:bold;
width:600;
height:50;
margin-bottom:5px;
}
#top{
float:left;
position:relative;
background-image:url("images/Button_NavBar_Unselected.png");
height:55px;
width:119px;
font-size:15px;
}
#top:hover{
background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#submenu_bottem{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
text-align:center;
width:100px;
height:18px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:-30px;
top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
width:680px;
height:519px;
float:left;
background-image:url(images/MainSection.png);
}
#main_content{
width:590px;
height:430px;
text-align:left;
margin-top:20px;
margin-left:45px;
}
#main_img{
margin:0 auto;
margin-top:5px;
background-image:url(images/MainSection_BigImageHighlight.png);
width:520px;
height:300px;
text-align:center;
padding-top:4px;
}
#main_section_img{
margin-top:10px;
background-image:url(mages/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
text-align:center;
vertical-align:top;
margin-top:0;
}
#main_section_img td{
vertical-align:top;
margin-top:0;
}
/* Sub Block */
/* Sub Background Hierarchy */
#sub_background_1{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-1;
margin-left:30px;
top:-38px;
background-repeat:no-repeat;
}
#sub_background_2{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-2;
margin-left:30px;
top:-52px;
background-repeat:no-repeat;
}
#sub_background_3{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-3;
margin-left:30px;
top:-65px;
background-repeat:no-repeat;
}
#sub_background_4{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-4;
margin-left:30px;
top:-77px;
background-repeat:no-repeat;
}
#sub_background_5{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-5;
margin-left:30px;
top:-83px;
background-repeat:no-repeat;
}
#sub_background_6{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-6;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_7{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-7;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_8{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-8;
margin-left:30px;
top:-85px;
background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
width:580px;
height:220px;
margin:0 auto;
margin-top:10px;
clear: both;
}
#Sub_title{
height:35px;
width:400px;
margin-top:30px;
margin-left:10px;
font-size:30px;
text-align: left;
}
#Sub_subtitle{
height:20px;
width:200px;
margin-left:10px;
margin-top:65;
font-size:15px;
text-align: left;
}
#Sub_image{
height:100px;
width:100px;
margin-top:10px;
margin-left:15px;
float:left;
}
#Sub_text{
height:180px;
width:400px;
float:right;
margin-top:5px;
text-align: left;
z-index:9;
position: relative;
}
/* SideBar Block */
#sidebar_header{
position:relative;
height:80px;
width:350px;
float:right;
background-image:url(images/Kickstarter.png);
margin-right:5px;
left:-20px;
margin-top:10px;
z-index:1;
clear: both;
top:1px;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(images/Side%20Banner.png);
left:-20px;
z-index:-1;
clear: both;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
#Kickstarter_donationcount{
width: 119px;
height: 26px;
text-align:center;
top:8px;
left:230px;
background-image:url("images/Progress/GoalNumber.png");
position: absolute;
padding-top:6px;
}
#Kickstarter_progressbar{
position:relative;
top:62px;
margin:0 auto;
width: 310px;
height: 18px;
background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
color: #000;
font:"arial";
font-size: 18px;
}
#Sidebar_content .title{
line-break: 1px;
}
/* Footer */
#footer_background{
position:relative;
background-image:url(images/Footer.png);
width:605px;
height:75px;
float:left;
margin-left:35px;
top:-89px;
z-index:-9;
line-height:1px;
font-family:"Arial";
font-size:12px;
}
#footer_background a:link{
color: #000;
text-decoration: underline;
}
#footer_background img {
margin-top:100px;
}
Wrapper is covering other stuff so you want to just push it to the bottom. Add z-index: 0; to #wrapper.
Or you can remove the z-index: -1 from the divs inside #wrapper
In the future, post only relevant code inside the post. Nobody will bother going through your site to figure out the issue for you. If you can't narrow the problem down to something specific, then you need to troubleshoot better.
While sachleen's answer did provide a workaround for your imminent problem, your page is facing several critical issues that will become problems very soon.
Give me the code!
Here's the link to your page fully working and without any validation issues. Images are not optimized, but I had to adapt one of them to prevent the usage of z-index all the time:
View it online
Download the files
Compare the files with your own and see what has been done to improve and make the document valid.
Here's a list of the most significant issues:
Element ID
Elements can have an ID, but the ID must be unique on the page, this because the ID purpose is to identify a specific element. If you need to provide a style to multiple elements, the proper way is to use classes.
From MDN :: id
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
Images
While this is more related with performance, I'm sure that visitors of this webpage will not be please to have to wait a considerable amount of time while 4Mb of images that you currently use get downloaded.
You can use Google Pagespeed Tools, that provides you with a tool to analyze the webpage for errors, and also if images aren't optimized, a link is presented on the analyse report to download an optimized version.
Document Stack
This is the reason as to why you've placed your question. You are messing around with your document stack to overcome issues that should be solved with images usage or a proper markup. While you're free to move elements up and down within the document stack, your page will be facing issues when it comes to cross-browser compatibilities.
The document stack should be used to overcome small details or provide a way to interact with the user without forcing a page refresh, among others. Shouldn't be used for the majority of the elements present as a way to solve layout issues.
Document Type
The document type is used to tell the browser how we should interpreter the document, and what rules should be respected to present it the way you intended.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
You can read about it at W3c - Doctype Declarations
HTML Markup
Your page lacks a proper markup, that in turn will prevent the browser from presenting elements the way they are supposed to be presented.
You can read about it at W3C - HTML: The Markup Language
Additionally, you can use the W3C validation service to validate and identify issues with your HTML Markup. Keep in mind that recent features aren't properly validated, mainly with CSS. But that's just a small portion.