Drop down Sub menu disappeared, was working and now is not - drop-down-menu
I have a horizontal navigation bar with the first link in the navigation bar "products" having a vertical drop down menu. This was working not long ago then when I added more content to this website today the sub menu for "products" disappeared, I do not know how to get it working again or why it stopped working in the first place.
Any ideas??
here is my code:
(the html part is in li class"products" in div id"navigation", and the css part for the sub menu is where I've commented "/products menu/". I've place all the code here as the error happened only after I added more code, it was working before. So maybe I have an error in other parts too which is preventing the sub menu from working, not sure though. )
html:
<body>
<div id="wrapperContainer">
<div id ="container">
<!-- header -->
<div id = "header">
<!-- logo -->
<div id = "logo">
<img src = "images/TelefunkenLogo.png" width="132" height="20"/>
</div>
<!-- close logo -->
<!-- contact/languages/flag -->
<div id = "rightHeader">
<ul>
<li>CONTACT</li>
<li onclick="location.href='#languageContainer';"><a href ="#" >SELECT COUNTRY</a></li>
<li class = "flag"><img src = "images/germany.png"/></li>
</ul>
</div>
<!-- close contact/languages/flag -->
</div>
<!-- close header -->
<!-- drop down language options -->
<div class="languageContainer">
<!-- left options-->
<div id="leftLanguageContainer">
<ul>
<li><img src = "images/england.png"/>INTERNATIONAL - English</li>
<li><a id="selectCountry" href="#"><img src = "images/germany.png"/>DEUTSCHLAND - Deutsch</a></li>
</ul>
</div>
<!-- close left options-->
<!-- cross -->
<a class="closeCross" title="Close" href="#">
<span></span>
</a>
<!-- close cross -->
</div>
<!-- close drop down language options -->
<!-- navigation -->
<div id="navigation">
<!-- menu items -->
<ul class="menu">
<li class="home"><img src="images/homeButton.png" alt="Telefunken"/></li>
<li class="products" >PRODUCTS
<ul class="subMenu">
<li><img src="images/product1.jpg" alt="Telefunken"/>some text</li>
<li><img src="images/product2.jpg" alt="Telefunken"/></li>
<li><img src="images/product3.jpg" alt="Telefunken"/></li>
<li><img src="images/product4.jpg" alt="Telefunken"/></li>
<li><img src="images/product5.jpg" alt="Telefunken"/></li>
<li><img src="images/product6.jpg" alt="Telefunken"/></li>
<li><img src="images/product7.jpg" alt="Telefunken"/></li>
<li><img src="images/product8.jpg" alt="Telefunken"/></li>
<li><img src="images/product9.jpg" alt="Telefunken"/></li>
</ul>
</li>
<li class="company">COMPANY</li>
<li class="service">SERVICE</li>
<li class="news">NEWS</li>
</ul>
<!-- close menu items -->
<!-- search function -->
<div id="searchWrapper">
<div id="search">
<form action="searchresult/" method="post" onsubmit="return searchAction(this)">
<input type="text" name="tx_indexedsearch[sword]" value>
<input type="hidden" id="searchProductUrl" name="searchProductURL" value="searchresultproducts/">
<select name="page"id="selectPage">
<option value="1">WEBSITE</option>
<option value="2">PRODUCTS</option>
</select>
<div id="submitButton">
<input type="submit" value class ="btnSubmit">
</div>
</form>
</div>
</div>
<!-- close search function -->
</div>
<!-- close navigation -->
</div>
<!-- close container -->
<div class="slider" >
<img src="images/sliderBkg.jpg" alt="alt text" width="100%" />
<div id="sliderImages">
<img class="img" style="width:983.5px; margin: 0 auto" src="images/sliderLEDTV.jpg">
<!--<img class="img" style="width:983.5px" src="images/sliderCamcorder.jpg">
<img class="img" style="width:983.5px" src="images/sliderSystemPa.jpg">-->
</div>
</div>
<!-- slider
<div class="slider" style="width:100%;">
<img class="img" style="width:983.5px" src="images/sliderLEDTV.jpg">
</div>-->
<!--<img class="img"src="images/sliderLEDTV.jpg">
<img class="img"src="images/sliderCamcorder.jpg">
<img class="img"src="images/sliderSystemPa.jpg">-->
<!-- close slider -->
<!-- lower content -->
<div id="lowerContent">
<div id="leftContent">
<h1>RECENT PRODUCTS</h1>
<div class="inline"><div id ="product1">
<img src="images/recentProducts1.jpg">
<h2>PORTABLE </br>STEREO RDS RADIO</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product2">
<img src="images/recentProducts2.jpg">
<h2>ICONCERTO </br>I-POD PLAYER</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product3">
<img src="images/recentProducts3.jpg">
<h2>T9HD </br>42" (106 CM) LOREM</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
</div>
<div id="rightContent">
</div>
</div>
<!-- close lower content -->
<!-- footer -->
<div id="footer">
</div>
<!-- footer -->
</div>
</body>
css:
#charset "utf-8";
/* CSS Document */
/*all content sits in here*/
#wrapperContainer {
width:100%;
}
#container {
width:983.5px;
margin:0px auto;
}
h1 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 1em;
color:#7f7f7f;
}
h2 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.8em;
color:#000000;
}
p {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.7em;
color:#666666;
}
a:link {
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
color:#d34242;
}
/*header*/
#header {
margin: 0 auto;
padding: 20px 0 0px 0;
height: 60px;
width: 983px;
}
/*logo in header*/
#logo {
float: left;
}
/*links to the right of the header*/
#rightHeader {
float: right;
}
/*styling the header links*/
#rightHeader li {
display: inline;
list-style-type: none;
padding: 5px;
border-right:1px solid #dbdbdb;
padding-right:10px;
}
#rightHeader li a:link {
text-decoration: none;
font-size: 12px;;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#rightHeader li a:visited {
text-decoration: none;
text-size: 0.01em;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
a.selectCountry:hover + .languageContainer {
visibility: visible;
}
#rightHeader li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*this is meant to display the language options when you click on 'select country'*/
.languageContainer {
cursor:pointer;
margin: 0 auto;
position:relative;
display:none;
padding: 20px 0 0px 0;
width: 983px;
height: 70px;
border:1px solid #b2b2b2;
}
/*language options*/
#leftLanguageContainer li {
display: inline;
float: left;
padding:30px;
margin-left:-40px;
padding-top:0px;
}
/*language options styling*/
#leftLanguageContainer li a:link {
text-decoration: none;
font-size: 9px;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:visited {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*cross in the language container*/
a.closeCross {
background-image:url('images/closeCross.png');
display:block;
width:30px;
height:30px;
margin-top:-36px;
float:right;
overflow: hidden;
text-decoration:none;
}
a.closeCross:hover {
background-image:url('images/closeCrossHover.png');
}
/*main navigation*/
#navigation {
background-image:url(images/menuBkg.png);
background-repeat: no-repeat;
height:40px;
width:103%;
z-index:999;
position:absolute;
overflow:hidden;
}
/*setting height of the menu*/
.menu {
height:40px;
}
/*styling the home button*/
.menu li.home {
display:inline;
position:relative;
left:-40px;
top:-25px;
height:43px;
width:40px;
padding:0px;
}
/*products menu*/
.menu li ul.subMenu {
margin:0px;
display:none;
padding:0px;
background:#FFFFFF;
width:985px;
top:40px;
height:250px;
}
.menu li:hover ul.subMenu {
display:block;
width:970px;
}
.menu li li {
list-style:none;
display:list-item;
width:100%;
top:0px;
left:10px;
line-height:2px;
background:#FFFFFF;
}
.menu ul.subMenu li {
display:inline;
list-style:none;
position:relative;
}
.menu li ul.subMenu {
margin:0px;
padding:0px;
display:none;
position:absolute;
}
/* trying to set a width to each 'li' in the subMenu to get the text to move below the image
.menu li ul.subMenu li {
width:10px;
}*/
.subMenu a:hover {
color:#603;
/*border properties*/
}
/*end products menu*/
/*styling individual menu links*/
.products {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
}
.products:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.company {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
width:120px;
}
.company:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.service {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.service:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.news {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.news:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
/*all menu links in navigation bar*/
.menu li {
display:inline;
position:relative;
bottom:45px;
right:50px;
width:130px;
height:43px;
padding:15px;
}
.menu li a:link {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:visited {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:hover {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
text-decoration:none;
color: #FFFFFF;
}
/*search bar in navigation*/
#searchWrapper {
height:100px;
left:212px;
/*float:right;*/
position:relative;
}
#search{
left:80px;
top:70px;
}
/*puts everything in the menu on the same line. */
.menu, #searchWrapper, #search, #submitButton {
display: inline-block;
vertical-align: top;
}
#submitButton {
z-index:1;
}
.btnSubmit {
border:0;
width:40px;
height: 40px;
top:10px;
background-image:url(images/rightArrow.jpg);
}
.btnSubmit:hover {
background-image:url(images/rightArrowPressed.jpg);
}
/*style slideshow*/
.slider {
height: 420px;
overflow:hidden;
}
#sliderImages {
}
/*#slideshow, #navigation {
display: inline-block;
vertical-align: top;
}
#slideshow {
margin-top:-40px;
margin-left: -30px;
}*/
#lowerContent{
margin: 0 auto;
padding: 0px 0 0px 0;
width: 983px;
}
#leftContent {
padding-left:10px;
width:750px;
display:inline;
}
.inline {
float: left;
}
#product1 {
width:240px;
border-right: 1px solid #dbdbdb;
}
#product2 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}
#product3 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}
Related
Why is my product image not switching to the small image when I hover over it?
I coded a product purchase page for a clothing line, and according to the teacher, my product page should switch to whichever small image I hover over. When I hover however the product image will not change as required. What am I doing wrong? I also have bootstrap cdn code in the heading area, but I don't think it has much effect on the code except for the fa fa icon.
HTML
<body>
<div class="small-container single-product">
<div class="row">
<div class="col-2">
<img src="images/thigh-ties-cross-set.png" width="100%" id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / T-Shirts</p>
<h1>Yoga Sets From Chaucey Moore</h1>
<h4>$90.00</h4>
<select>
<option>Select Size</option>
<option>XXL</option>
<option>XL</option>
<option>LARGE</option>
<option>MEDIUM</option>
<option>SMALL</option>
</select>
<input type="number" value="1">
Add to Cart
<h3>Product Details<i class="fa fa-indent"></i></h3>
<br>
<p>Give your summer wardrobe a style upgrade with the Men's Active T-Shirts. Team it with a pair of short for your morning workout or a denims for an evening out with the guys.
</p>
</div>
</div>
</div>
<script>
var ProductImg = document.getElementByID("ProductImg");
var SmallImg = Document.getElementsByClassName("small-img");
SmallImg[0].onclick = function()
{
ProductImg.src = SmallImg[0].src;
}
SmallImg[1].onclick = function()
{
ProductImg.src = SmallImg[1].src;
}
SmallImg[2].onclick = function()
{
ProductImg.src = SmallImg[2].src;
}
SmallImg[3].onclick = function()
{
ProductImg.src = SmallImg[3].src;
}
</script>
</body>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.small-container{
max-width: 1000px;
margin:auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20px;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
line-height: 60px;
font-size: 50px;
margin: 25px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
.single-product input{
width: 50px;
height: 40px;
padding-left: 10px;
font-size: 20px;
margin-right: 10px;
border: 1px solid #ff523b;
}
input:focus{
outline: none;
}
a{
text-decoration: none;
color: #555;
}
.single-product .fa{
color: #ff523b;
margin-left: 10px;
}
p{
color: #555;
}
.btn{
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #563434;
}
index page not displaying in springboot thymleaf layout dialect
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>
Site works fine on localhost but doesnot respond calculations on hosting server
I have created simple conversion form that takes input from user and calculate the result without pressing button. My problem is that it works fine on localhost but when I upload it on free hosting site it doesn't respond with calculations. JQuery also doesn't work when I press the div on the top left of my form it highlights on local but not when I upload Please help.
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<!-- <script type="text/javascript">
$("document").ready(function(e){
$("input").change(function(){
var total=0;
$("input[name=qww]").each (function(){
total=10*parseInt($(this).val());
})
$("input[name=long]").val(total);
});
});
</script> -->
<style type="text/css">
.main{
height:400px;
width: 300px;
background-color: white;
margin: 100px 100px 100px 100px;
border-radius: 10px;
}
#compare{
height: 50px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
float: left;
}
#compare2{
height: 50px;
width: 150px;
background-color: white ;
float: right;
}
#compare4{
height: 35px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
float: left;
}
#compare5{
height: 35px;
width: 150px;
background-color: white ;
float: right;
}
.form{
height: 150px;
width: 300px;
background-color: white;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.Myform{
padding: 5px 0;
}
input[type=text]{
width: 70px;
height: 30px;
font-style: oblique;
font-size: 18px;
outline: none;
border: none;
font-weight:bolder;
}
.qwerty{
height: 20px;
width: 300px;
background-color: rgb(122, 16, 122);
color: blue;
}
.button{
margin-top: 20px;
margin-left: 0px;
width: 300px;
height: 40px;
background-color: blue;
color: white;
font-size: 18px;
text-align: center;
border-radius: 10px;
-WEbkit-box-shadow: 3px 3px 3px #ccc;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.text{
margin-top: 5px;
background-color: rgb(255, 255, 255);
height: 60px;
border-radius: 5px;
-WEbkit-box-shadow: 3px 3px 3px #ccc;
}
.initial{
height: 15px;
margin-top: 50px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
}
.image{
width: 40px;
height: 15px;
margin-left: 10px;
}
img{
vertical-align: top;
}
.highLight{
background-color: #333333;
}
.panel{
-webkit-transition:0.3s;
transition:0.3s;
opacity:1;
}
.panel:not(.highLight){
opacity:0.5;
}
</style>
<body>
<div class="main">
<div class="initial" style="float: left; font-size: 10px; text-align: center; color: blue;" >
COMPARE</div>
<div class="initial" style="float: right;font-size: 10px; text-align: center; color: blue;">
VENTA</div>
<div class="panel" id="compare"style="font-size: 26px;font-weight: bolder; text-align: center;color: black;">3.4000
</div>
<div class="panel" id="compare2"style="font-size: 26px;font-weight: bolder; text-align: center;color: black;">3.4306
</div>
<div class="form">
<div class="text">
<div class="QWERTY" style="font-size: 10px; text-align: right;color: blue;">
VENTA</div>
<form id="bbb" action="index.html" class="Myform" style="font-size: 10px; font-weight: bold;">USD
<label for="" style="font-size: 30px;"> $</label>
<input type="text" class='qww' placeholder="1000" style="float: right;">
</form>
</div>
<div class="image">
<a href="www.google.com"><img src="images.jpg" alt="" style="margin-left: 50px; width: 40px;object-position:right; height: 45px;">
</a>
</div>
<div class="text" >
<div class="QWERTY" style="font-size: 10px; text-align: right; color: blue;">
VENTA</div>
<form action="index.html" class="Myform" style="font-size: 10px;">PEN
<label for="" style="font-size: 30px; font-weight: bold;"> S/</label>
<input type="text" id='long' placeholder="3400" style="float: right;" disabled>
</form>
<button class="button" value="compare"> </button>
</div>
</div>
<div class="initial" style="float: left; font-size: 10px; text-align: center;" >
</div>
<div class="initial" style="float: right;font-size: 10px; text-align: center;">
VENTA</div>
<div id="compare4"style="font-size: 30px;font-weight: bolder; text-align: right;color: blue;">
</div>
<div id="compare5"style="font-size:12px; text-align: center;color: black;">
<h4> S/ 54.70</h4>
</div>
</div>
<script>
// we used jQuery 'keyup' to trigger the computation as the user type
$('.qww').keyup(function () {
// initialize the sum (total price) to zero
var sum = 0;
// we use jQuery each() to loop through all the textbox with 'price' class
// and compute the sum for each loop
$('.qww').each(function() {
sum =10* Number($(this).val());
});
// set the computed value to 'totalPrice' textbox
$('#long').val(sum);
});
$('.panel').hover(function(){
$(this).toggleClass('highLight');
});
</script>
</body>
</html>
Firefox Div Alignment Not Working; Works in Chrome, IE, & Safari
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.
IE6 vs IE8 <ul> <li> out of order disply problem. please help
I have out of order display problem in IE6 and IE8.
Following is the output screenshot in IE6 and IE8 :
http://img707.imageshack.us/img707/1875/61807760.jpg
Following is my HTML code :
<div>
<div style="width: 280px; float: left; height: 220px; background:url(images/content_box.gif) no-repeat; text-align: left; padding-left: 20px; padding-top: 20px;">
<div class="cont_featr"><div class="cont_txt"><b>Features</b></div></div>
<hr class="container_hr" align="center">
<div style="text-align: left;margin-left: 15px;">
<ul class="as_ul">
<li class="as_li">Immediate/Cron based delivery.</li>
<li class="as_li">Multilanguage support.</li>
<li class="as_li">Auto integration to any Joomla, vBulletin style.</li>
</ul>
</div>
</div>
</div>
Following is the CSS code :
.as_ul {
list-style: none url(images/tick.gif);
list-style-position:outside;
border: 1px solid #f00;
}
.as_li {
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana, Sans-Serif;
background-image: url(images/tick.gif) no-repeat;
border: 1px solid #0f0;
}
.container_hr {
color: #888888;
background-color: #888888;
height: 0.8px;
border: 0;
width: 85%;
text-align: center;
}
.cont_featr {
background: url(images/featurs.png) no-repeat;
width: 40px; height: 40px;
}
.cont_txt {
FONT-SIZE: 11pt;
padding-left: 50px;
padding-top: 10px;
}
Please help.
Try giving .as_li or .as_ul the property/value zoom:1