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
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 am targeting the 320x480 and 320x568. The issue i am facing in 320x568 Portrait view. Everything is working fine on 320x480 but in 320x568 portrait view, the size of the container is very large. I tried everything to adjust the height but it is not showing the same as 320*480 portrait view. I can't find the way to solve this issue. You can check the screenshot below:
You can check the site here through your mobile - bit.ly/1bD6EhX
I have to move the text to top position but when i do this, this will also affect the 320*480 portrait view. Here is my code below:
.container3 {
margin:0;
height:750px;
overflow:hidden;
}
.fullwidth3 {
width:100%;
}
.mobtxt {
margin:0 0 0 25px;
font-size:22px;
font-weight:600;
font-family:'Open Sans', arial, helvetica;
letter-spacing:0;
text-align:center;
width:80%;
border-bottom:2px solid #e0e0e0;
}
.mobdes {
margin:15px 0 0 10px;
font-size:16px;
font-weight:normal;
font-family:arial;
letter-spacing:0;
text-align:left;
width:95%;
}
.mobdes2 {
position:absolute;
top:320%;
width:95%;
margin:15px 0 0 10px;
font-size:arial;
font-size:15px;
color:#adadad;
padding:0;
}
.mobimg {
width:100%;
clear:both;
float:none;
margin-left:0;
margin-right:0;
right:10px;
margin-top:30px;
}
HTML File
<div class="container3">
<div class="fullwidth3">
<p class="mobtxt">We have an experience of 10 Years</p>
<p class="mobdes">Mandaremus veniam dolor ita sunt, duis praesentibus vidisse velit ingeniis qui
sed est dolore fore eram a do aute incurreret transferrem ab se qui culpa
eiusmod, quem iis pariatur, an culpa magna legam occaecat o in qui quorum legam
quem. Singulis exquisitaque ut quamquam, ita ea tractavissent, nam sint de quis
est quo a tractavissent. </p>
<img src="img/mobimg.png" alt="mob image" class="mobimg" >
<hr class="hr"/>
<p class="mobdes2">Laborum duis malis in duis, duis ingeniis nam transferrem, nam quis commodo, de
nisi varias illum nescius si probant ipsum in laborum exercitation, ut a
comprehenderit, iis aliqua praesentibus, e nisi litteris expetendis.</p>
</div>
</div>
I dont understand, why you are doing top:320%; in .mobdes2. I think you want to do it top:320px. However, it would be better if you'd have provided the HTML as well.
But, I would recomend you to use vh unit of css 3. This just mean the viewport height as unit.
Example: http://snook.ca/archives/html_and_css/vm-vh-units
Browser support: http://caniuse.com/#feat=viewport-units
Good luck!!
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;
}
Good Day
I want to align text in the center of a div. Now that is easy with text-align: center on parent div.
But If I want to left align the text inside the div to the left of the centered div, how do I do that?
See my fiddle: http://jsfiddle.net/DvXzB/5/
HTML:
<div id="aboutContent" class="row-fluid">
<div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
<div id="aboutHeaderBody" class="span12">
<p><a title="">asdasd</a> is a free mobile application available for <a href="#"
title="">iOS</a>, Androidand the Blackberry operating
systems.</p>
<p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
<div id="cities"><a title="">asdasdasd</a> currently only displays events and
specials in <strong>asdasd</strong> (our hometown), but the following locations
will be available before you know it:
<ul>
<li><span>asdg</span>
</li>
<li><span>asdwn</span>
</li>
<li><span>Pasdasdroom</span>
</li>
<li><span>Dasdaf</span>
</li>
<li><span>Bergrin</span>
</li>
<li><span>Sersch</span>
</li>
<li><span>Graergwn</span>
</li>
</ul>
</div>
<p>Visit our Facebook page for more
up to date information, and feel free to contact us with
any queries.</p>
<br />
</div>
</div>
CSS:
#aboutContent {
color: #222;
margin-top: 50px;
margin: 0 auto;
text-align: center;
}
#aboutHeaderText span {
font-family:"Kozuka Gothic Pr6N", sans-serif !important;
color: #eeeeee;
font-size: 26px;
font-weight: bold;
}
#aboutHeaderText img {
margin-top: -18px;
margin-left: 8px;
}
#aboutHeaderBody {
position: relative;
padding: 0px;
font-size: 16px;
}
#cities ul {
list-style: none;
margin-top: 10px;
}
#cities ul li {
font-family:'Open Sans', sand-serif;
padding: 3px 0px;
font-size: 20px;
color: #222;
}
I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): http://www.villagebicycle.co.za/
Note: I am using a fluid layout, so fixed paddings etc won't work
Thank you
You need to center align the container with margin:0 auto after setting its width to a specific size like width:400px. Then align each element separately using text-align.
See this demo: http://jsfiddle.net/DvXzB/16/
If you want your container to have 100% width then do not use text-align:center to your parent div. Instead, use width:100% (optional) and again text-align each block as desired.
You've to use a wraper div to envolve all content. I've done a JsFiddle, I think is what you're looking for :)
.wraper {
position: relative;
width: 500px;
margin:0 auto;
}
Afther that you can align a <p> to the left, right, justify, etc. as you can see:
p.left{text-align:left;}
p.justify{text-align:justify;}
And the HTML for testing:
<div class="wraper">
<p class="left">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. </p>
<p class="justify">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>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>