Can someone please take a look at my code and see what I am doing wrong...
I'm a beginner jquery person and
I tried reading all the forum post and implementing them my self and I still get errors... this is taking me two days and I'm about to kill my laptop
thanks so much in advance,
~ grace
$(document).ready(function() {
//parent. on click anchor
$('.tab').on('click', '.clk', function(event) {
event.stopPropagation();
//Find the child by traversing
$(this).closest('.clk').find('.reveal').slideToggle();
//Show the child
});
});
body {
width: 350px;
margin: 0 auto;
}
h1 {
font-size: 1em;
color: #FF7F50;
}
.tbCont {
/* width: 100%;float:left; this works too*/
overflow: hidden;
border: 1px solid red;
text-align: center;
}
ul {
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
zoom: 1;
width: 90%;
}
.cHolder {
display: none;
}
/*hides related content*/
.reveal {
width: 100%;
background-color: pink;
display: inline-block;
zoom: 1;
border-bottom: 2px solid #aaa;
}
.reveal span {
float: left;
width: 40%;
margin: 10px;
}
.reveal img {
float: right;
width: 40%;
height: 40%;
margin: 10px;
background-color: #fff;
}
a {
width: 100%;
text-align: left;
border-style: none;
border-bottom: 2px solid #aaa;
background-color: white;
font-size: 2em;
color: #aaa;
display: block;
text-decoration: none;
}
a:hover {
color: orange;
border-bottom: 2px solid orange;
}
a:active {
color: #7FFFD4;
border-bottom: 2px solid #7FFFD4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div class="tbCont">
<h1>Title</h1>
<ul class="tab">
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here.</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
</ul>
</div>
<!-- End your code here -->
</body>
</html>
I tried to correct in this fiddle, look if this helps :
http://jsfiddle.net/h9u2g6bu/
Notice display:none should be applied to what you want to toggle, i.e. .cHolder .reveal instead of .cHolder :
.cHolder .reveal {
display: none;
}
Related
I am trying to move #nav-bar elements to the right but it's not working. I want to put .logo to the left using flex-start but I don't think that's working. I think it's on the left by default.
I am new to css and html.
I tried making it into a flex box and using flex-end. I dont want to use inline or blocking. From what I understand, making display to flex and using flex-end will put the item to the right in a set row flex-direction .
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background-color:#b6eaf1;
font-family:Cambria, sans-serif;
}
header{
display:flex;
top:0;
width:100%;
border:5px solid blue;
}
.logo img{
width:17vw;
display:flex;
justify-content:flex-start;
align-items:center;
}
img{
height:100%;
width:100%;
}
#nav-bar{
display:flex;
}
#nav-bar ul{
list-style:none;
display:flex;
flex-direction:row;
justify-content:flex-end;
height:100%;
gap:4vw;
letter-spacing:2.5px;
}
#nav-bar li{
list-style:none;
}
#nav-bar a{
text-decoration:none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a></li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
So what's happening is that the navbar is not getting the complete width to align the nav-bar elements to the right. Well if you give the width:100% and add the justify-content: right to your #nav-bar it should fix the alignment. Please refer the complete code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #b6eaf1;
font-family: Cambria, sans-serif;
}
header {
display: flex;
top: 0;
width: 100%;
border: 5px solid blue;
}
.logo img {
width: 17vw;
display: flex;
justify-content: flex-start;
align-items: center;
}
img {
height: 100%;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: right;
width: 100%;
}
#nav-bar ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 100%;
gap: 4vw;
letter-spacing: 2.5px;
}
#nav-bar li {
list-style: none;
}
#nav-bar a {
text-decoration: none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a>
</li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
I posted a question few days ago about jquery code not working in a thymeleaf template as expected. I am able to do it without using jquery but it has generated another problem and I need help. I cant display index.html and below is code sample
stylecss file
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;;
}
.wrapper .header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #23242b;
color: #fff;
}
.wrapper .u-name{
font-size: 20px;
padding-left: 17px;
}
.wrapper .u-name span{
color: #127b8e;
font-weight:bold;
}
.wrapper .header i{
font-size: 30px;
cursor: pointer;
color: #fff;
}
.wrapper .header i:hover{
color: #127b83;
}
/* .wrapper .user-p{
text-align: center;
padding-left: 10px;
padding-top: 25px;
}
.wrapper .user-p img{
width: 100px;
border-radius: 50%;
} */
.wrapper .user-p h4{
color: #ccc;
padding: 5px 0;
}
.wrapper .side-bar{
width: 300px;
background: #262931;
min-height: 100vh;
transition: 500ms width;
}
.wrapper .sidebarmenu{
display: flex;
position:absolute;
}
.wrapper .section-1{
width: 100%;
background: url("./img/bg.jpg");
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper .side-bar ul{
margin-top: 20px;
list-style: none;
}
.wrapper .side-bar ul li{
font-size: 18px;
padding: 15px 0px;
padding-left: 20px;
transition: 500ms background;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wrapper .side-bar ul li:hover{
background: #127b8e;
}
.wrapper .side-bar ul li a{
text-decoration: none;
color: #eee;
cursor: pointer;
letter-spacing: 1px;
}
part of the css code
.wrapper .side-bar ul li a i{
display: inline-block;
padding-right: 10px;
font-size: 23px;
}
.wrapper #navbtn{
display: inline-block;
margin-left: 70px;
font-size: 20px;
transition: 500ms color;
}
.wrapper #checkbox{
display: none;
}
/*hides and show the sidebar */
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar{
width: 60px;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar .user-p{
visibility: hidden;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar a span{
display: none;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar ul li label{
display: none;
}
.wrapper #A{
display: none;
}
.wrapper #A:checked ~ ul{
display: block;
}
.wrapper .side-bar ul li i{
padding-right: 10px;
font-size: 23px;
color: #eee;
}
.wrapper .side-bar ul li label{
color: #eee;
}
.wrapper .side-bar ul li label i{
float: right;
padding-top: 2px;
}
.wrapper .side-bar ul li ul li{
line-height: 5px;
font-size: 14px;
padding-left: 50px;
}
.wrapper .side-bar ul li ul li:hover{
padding-left: 52px;
}
.wrapper .side-bar ul li ul{
display: none;
}
header html file contains the whole menu navigation bar
<header>
<div class="wrapper">
<input type="checkbox" id="checkbox">
<header class="header">
<h2 class="u-name">ECC <span>Soft</span>
<label for="checkbox">
<i id="navbtn" class="fa fa-bars"></i>
</label>
</h2>
<i class="fas fa-user" aria-hidden="true" ></i>
</header>
<div class="sidebarmenu">
<nav class="side-bar">
<!-- <div class="user-p">
<img src="img/sprofile.jpg" alt="">
<h4>Peter</h4>
</div> -->
<ul>
<li>
<a href="#">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<input type="checkbox" id="A">
<i class="far fa-envelope" aria-hidden="true"></i>
<label for="A">
<span>Message</span>
<i class="fas fa-caret-down"></i>
</label>
<ul>
<li>UI/UX Designer </li>
<li>UI Designer </li>
<li>UX Designer </li>
</ul>
</li>
<li>
<a href="#">
<i class="far fa-comment" aria-hidden="true"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span>About</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog" aria-hidden="true"></i>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span>Logout</span>
</a>
</li>
</ul>
</nav>
</div>
main layout file
<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<!-- webjars and static resources referencing -->
<link rel="stylesheet" href="../../static/css/style.css"
th:href="#{css/style.css}" />
<link th:rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.2/css/all.css}">
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.5.0/css/bootstrap.min.css}">
<script type="text/javascript" th:src="#{/webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="#{/webjars/bootstrap/4.5.0/js/bootstrap.js}"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
body of main layout file
<body>
<div th:replace="fragments/header::header"></div>
<div layout:fragment="content">
</div>
<div th:replace="fragments/footer::footer"></div>
</body>
</html>
index html file. This is the file am battling with.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div layout:fragment="content" class="container">
<div class="card">
<p>Thank you for using ecc soft</p>
</div>
</div>
</body>
</html>
Below is a drop-down list nested in a drop-down list. the first code snippet works just fine; as I hover over the parent of the first drop-down list it's height transitions and it displays as I intended, as with the subsequent nested drop-down list.
The problem is with the second snippet...
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
/*
ul li li:hover {
transform: scale(1.1);
}
*/
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Here I make one change at the very bottom of the CSS as I wanted the hover effect to be just a bit more pronounced. I apply a transform scale effect to the dropdown list's li's.
The first drop-down list works just fine, but then the second drop-down list does not.
Can someone please explain what is happening?
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
ul li li:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Fixed.
I don't understand why the problem occurred in the first place, nor do i understand why the fix I found works but it does.
I simply made the overflow property 'visible' in the (ul li li:hover ) and it works.
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/