i am new to web development, I have a small problem with positioning i placed a element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
#import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
#import url('https://fonts.googleapis.com/css?family=Montserrat:400');
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
Related
I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>
I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the
My small library has a website that was created in HTML and CSS by a previous employee. I know the the display of the site is dynamic based on screen size-- the mobile site is slightly different from the desktop site. It appears he used some libraries from JQuery, too. I have a very limited background in coding, so I make only minor content changes and NO functional changes. At some point, while I was on vacation, the footer of our website stopped displaying in the desktop version of the site, but it still shows in the mobile site.
I have audited the HTML and CSS files against the archived files to be sure I didn't inadvertently make any changes before I left. I have checked the versions of files that are rarely used and noticed they haven't been changed since 2017. I commented out the CSS and ran just the HTML locally to see if there was a stylesheet difference I was missing (though I haven't edited them), but I couldn't get anything to display in the footer. The footer has a widget that displays one iframe with a link to another website, a second iframe with a link to a calendar, and a group of icons with links to our partners. Again, everything worked fine until a month ago on the mobile and desktop sites, and I can view the footer if I resize my desktop browser to something very narrow.
Here's the relevant HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109165971-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109165971-1');
</script>
<meta charset="UTF-8">
<meta name="msvalidate.01" content="63DD6F645CCF71531665417F6978B20A" />
<title>Welcome to the Toccoa-Stephens County Public Library</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome the Toccoa Stephens County Library! Celebrating 80 years of operation and still going strong!" />
<meta name="keywords" content="Toccoa-Stephens County Public Library, Northeast Georgia Public Libraries, search catalog, account, events, hours, new books, Toccoa, library, Friends of the Library, Stephens County, opac, steam, 3d printing, makerspace, state park pass" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Literati Ltd" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
</head>
<body>
<!--header-->
<header>
<!--insert a lot of contents organized into tabs-->
<!--End Navigation tabs,begin accordion. tabs.css media queries will cause tabs to display:none at 500px and accordion to display.
Any information added to tabs must be duplicated in the accordion-->
<div class="container">
<!--Home-->
<!--insert a lot of contents organized into accordion tabs-->
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="https://gapines.org/opac/extras/browse/html-full/item-age/NEG-TOCCOA/1/5"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="https://teamup.com/ksx6i3x71k3mbbkzbk?view=a&disableSidepanel=1&showLogo=0&showHeader=0&showTitle=0&showViewSelector=0"></iframe>
<div id="bottom-right"><strong>SEE ALL EVENTS</strong> </div>
</div>
</div>
</div>
<div id="social">
<h3>More to See!</h3>
<img class="socialpics" src="images/facebook.png" title="LIKE US ON FACEBOOK!" alt="LIKE US ON FACEBOOK!" />
<img class="socialpics" src="images/niche.png" title="TUTORIALS FOR OUR DIGITAL SERVICES" alt="TUTORIALS FOR OUR DIGITAL SERVICES" />
<img class="socialpics" src="images/tumblebook.png" title="MORE EBOOKS FOR KIDS!" alt="MORE EBOOKS FOR KIDS!" />
<img class="socialpics" src="images/novelist.png" title="FIND A GOOD RECOMMENDATION WITH NOVELIST" alt="FIND A GOOD RECOMMENDATION WITH NOVELIST" />
</div>
</footer>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<p align="right">E-Verify ID#792629</p>
<!--Javascript used-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/tabs.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/agenda.js"></script>
<script src="https://my.nicheacademy.com/api/widget/toccoa-stephenslibrary"></script>
</body>
</html>
Here's the primary CSS code that relates to that section:
#social {
width: 375px;
height: 250px;
float: right;
text-align: center;
margin-top: 1%;
margin-right: 1%;
background: rgba(255,255,255,0.5);
overflow: hidden;
}
.socialpics {
display: inline-flex;
margin: 15px 30px 0px 30px;
width: 95px;
height: 95px;
}
#newbooks {
float:left;
background-color: rgba(255,255,255,0.5);
margin: 1%;
height: 250px;
width: 400px;
overflow: auto;
}
#tscpl-calendar {
margin-top: 1%;
margin-left: .5%;
display: inline-flex;
float: left;
width: 415px;
height: 250px;
position: relative;
}
#calendar {
width: 415px;
height: 225px;
float: left;
margin: 1%;
background: rgba(255,255,255,0.5);
overflow: auto;
}
#bottom-right {
right: 0;
bottom: 0;
position: absolute;
}
#tscpl-calendar a:link {
background-color: #379676;
color: white;
}
#tscpl-calendar a:visited {
background-color: #379676;
color: white;
}
#media only screen and (max-width : 800px) {
.gapines {
float: left;
text-align: left;
margin-left: 10px;
}
}
#media only screen and (max-width : 500px) {
.gapines {
width: 100%;
text-align: center;
margin-left: 0;
}
.new-books {
margin-top: 10px;
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
padding-bottom: 125%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#tscpl-calendar {
width: 100%;
margin: 0;
}
#calendar {
width: 100% !important;
margin: 0 !important;
}
#social {
width: 100%;
margin: 0;
}
}
.after-box {
clear: both;
}
#media only screen and (min-width: 800px) and (max-width : 1279px) {
#tscpl-calendar{
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 35%;
min-width: 25%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 99%;
min-width: 40%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 32%;
display: block;
max-width: 50%;
min-width: 35%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 45%;
max-width: 25%;
margin-top: 5px;
display: block;
float: left;
}
.socialpics {
display: inline-block;
margin: 0;
margin-top: 2%;
max-width: 100%;
}
}
#media only screen and (min-width: 501px) and (max-width : 799px) {
#tscpl-calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 30.50%;
display: block;
max-width: 100%;
min-width: 90%;
max-height:100%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 100%;
min-width: 90%;
display: block;
float: left;
}
.socialpics {
display: inline-block;
max-width: 100%;
}
}
There is another CSS file, but I don't think it's quite relevant. However, I'm definitely a newbie, so if something's missing, please let me know. Also, there may be something related to JavaScript that I need to include. Let me know if I'm missing that.
I expect my page to display the footer, regardless of the device accessing it. I also need specific instructions for fixing any coding errors, even if you have to point me to a "for Dummies" resource. We have no real programmers here, but we have plenty of books.
On review by a commenter, the other CSS file is important, so here is a scaled down version:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.tabs {
margin-top: .5%;
margin-left: 1%;
margin-right: 10%;
position: relative;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 98%;
opacity: 1;
height: 485px;
margin-bottom: .5%;
}
.tabs nav {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #379676;
color: #ffffff;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
height: inherit;
}
.tabs nav a {
padding: 15px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.tabs .content {
padding: 15px 0px;
position: absolute;
top: 2px;
left: 150px;
color: #2b2626;
background: rgba(255,255,255,0.5);
width: 0px;
height: 100%;
overflow: scroll;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.tabs .content.visible {
padding: 20px;
background-color: #ffffff;
width: calc(100% - 150px);
opacity: .87;
}
.tabs .content p { padding-bottom: 1px; }
.tabs .content p:last-of-type { padding-bottom: 0px; }
/* Beginning of Accordion nav */
.container {
width: 100%;
max-width: 500px;
}
.accordion {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.accordion input {
position: absolute;
left: 0;
top: 0;
z-index: -999;
}
.accordion label {
display:block;
padding: 15px 20px;
background: #379676;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 22px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
margin-bottom: 3px;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: all .40s;
}
.accordion-content {
text-align: center;
background-color: #ffffff;
opacity: .87;;
margin: 1em 0;
text-decoration: none;
}
.accordion input:checked ~ .accordion-content {
max-height: 600px;
overflow: scroll;
}
#media only screen and (max-width: 500px) {
.tabs {display: none;
height: 0px;}
}
#media only screen and (min-width: 501px) {
.container {display: inline-flex;
height: 0px;}
}
Basically, if you're on a mobile site, the tabs on the side are all collapsed until you touch one of them, but the footer displays at all times.
Update: After looking at the website, I have a solution:
As another user has also pointed out, your is within a , there is a media query which sets this to 'display: none;'. This means anything within this will be hidden on those media specific screen sizes.
A solution is to take the
<footer> ... </footer>.
and place this just before the closing body tag like this...
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/5.html"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/ksx6i3x71k3mbbkzbk.html" class="fc fc-unthemed fc-ltr">
<div class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<h2> </h2>
</div>
<div class="fc-right">
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">today</button>
<div class="fc-button-group">
<button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left">
<span class="fc-icon fc-icon-left-single-arrow"></span>
</button>
<button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-right-single-arrow"></span>
</button>
</div>
</div>
<div class="fc-center">
</div>
<div class="fc-clear">
</div>
</div>
<div class="fc-view-container">
<div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
<div class="fc-scroller" style="overflow: hidden auto;">
</div>
</div>
</div>
</iframe>
<div id="bottom-right">
<strong>SEE ALL EVENTS</strong>
</div>
</div>
</div>
</footer>
</body>
</html>
This will take the footer out of the container which is being hidden on desktop.
I'm starting with JS and I have a small problem (I think) with my code.
I'm trying to create an overlay consent page, but it seems my YES (button) is not working properly. When press YES, it should close the overlay and show website content. Can someone help me to fix it?
This is probably a small detail, as always.
function openDialog(id) {
document.getElementById(id).className += "show";
document.documentElement.style.overflow = "hidden";
}
function closeDialog(id) {
document.getElementById(id).className = "warning";
document.documentElement.style.overflow = "visible";
}
openDialog("warning");
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog("warning")">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think this is what you were looking for. I added the jQuery and boostrap <script>s to the <head> of the document. I also stripped out all the white spaces in the bootstrap <script> tag.
You don't need to add the class show as it adds itself automatically. You do however need to remove the show class and add a hide class.
Here's the code:
function openDialog()
{
document.documentElement.style.overflow = "hidden";
}
function closeDialog()
{
document.getElementById("warning").classList.remove( "show" )
document.getElementById("warning").classList.add("hide");
}
openDialog();
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog()">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Example content -->
<div>
<div>This is some content here 1.</div>
<div>This is some content here 2.</div>
</div>
</body>
</html>
I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});