boostrap carousel different sizes - javascript

I have the site working how i'd like it on my local machine, but when I view it on other computers the images in the slideshow are rending at all different sizes. It works great on my computer, but I'm having problems troubleshooting the code since I can't see the issues in my local environment. Does anyone have advice on how to troubleshoot front end issues that you can't see on your local machine? I ran the code through the W3C validator, but I feel overwhelmed but it's output. Any guidance would be greatly appreciated! (sorry about all the inline stuff, I am helping a friend who's working in Dreamweaver and was asked to leave it this way.)
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full Slider - Start Bootstrap Template</title>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Modernizer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- Focuspoint -->
<script type="text/javascript" src="js/jquery.focuspoint.js"></script>
<link rel="stylesheet" href="css/focuspoint.css">
<!-- bx slider -->
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
//<![CDATA[
(function($) {
$(document).ready(function() {
//Fire plugin
$('.focuspoint').focusPoint();
$('.bxslider').bxSlider({
video: true,
useCSS: false,
controls: true
});
});
}(jQuery));
//]]>
</script>
<style type="text/css">
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
font-color: #000;
}
.navbar-nav > li{
margin-left:-10px;
margin-right:-10px;
}
.icon-bar {
background-color:#FFF !important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: underline;
color: #FFC;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: transparent;
}
body
{
background-image: url(Images/Dust_Background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
background-attachment: fixed;
}
.bg
{
width: 100%;
z-index: 0;
}
a {
color: #FFC;
text-decoration: none;
}
a.pull-left {
width: 25%;
margin-top: 10px;
}
.navbar-collapse{
border-top:0px !important;
box-shadow:none;
}
body,td,th {
font-family: "Tw Cen MT", Helvetica, "MS Reference Sans Serif";
font-size: 16px;
color: #FFF;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFC;
}
a:active {
text-decoration: none;
}
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
#style_text {
text-align: justify;
letter-spacing: .8px;
font-weight: 100;
}
#style_text p {
padding: 10px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.bx-wrapper .bx-viewport {
border: none;
-webkit-box-shadow: none;
background: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: rgba(255, 255, 255, 0.25)
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: rgba(255, 255, 255, 0.65);
}
.bx-wrapper .bx-loading {
background: black;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-transparent navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="test">
<a href="index_vs3.html" class="pull-left"><img src="Images/kairos_logo.png" style="
width: 250%;"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">THE FILM</li>
<li>SCREENINGS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<ul class="bxslider">
<li>
<iframe src="http://player.vimeo.com/video/131032179" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="Images/EbelKitchen.jpg" /></li>
<li><img src="Images/LightningHole.jpg" /></li>
<li><img src="Images/CharlesAlex.jpg" /></li>
<li><img src="Images/Edna_JoeysRoom.jpg" /></li>
<li><img src="Images/neoncross.jpg"/></li>
<li><img src="Images/overpass.jpg"/></li>
<li><img src="Images/TJRosieTrainWalk.jpg" /></li>
</ul>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-l">
<div id="style_text">
<p>
Through a series of collective dreams an other worldly being invades the characters' dream spaces, revealing their carnivorous desires and subconscious underbellies. Relationships intertwine in unusual and fantastical landscapes as television monitors, radio frequencies, orifices and dreams all become portals to access this alternate dimension of carnality and desire.</p>
<p>
The characters are forced to ask what is self? What is other? What must we give up to become something else?</p>
</div>
</div>
</div>
</div>
</body>
</html>


Looks like you need to add height/width to the images, otherwise they'll display at their respective sizes.

Related

HTML Text NOT Wrapping properly, horizontal scrollbar issue

Building a simple text-based HTML document with limited CSS, and a single Jquery fueled button. I have 1 major issue: My text doesn't want to wrap, it just goes off the screen. It seems like something is wrong with any right-padding I try to apply. Help.
Codepen: https://codepen.io/nightcorey/pen/xxwyNgR
body {
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: absolute;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

Correct your wrapper
.wrap {
padding: 0 5% 0 5%;
box-sizing: border-box;
}
UPDATE 2
Removed some excess code, rewrited it a bit
body {
width: 100%;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder > div {
width: 100%;
/* height: 100%;*/
position: absolute;
z-index: 0;
/*init z-index*/
display: none;
}
.holder > div.current {
z-index: 1;
display: block;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
padding:0 5% 0 5%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>

You need to get rid of overflow: hidden; in the body. Also I noticed you're button for "yay" is probably not doing what you'd like it to do. You need to change the position from absolute to fixed.
body {
width: 100vw;
margin: 0;
padding: 0;
}
.daytext {
color: black;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.nighttext {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.button {
position: fixed;
z-index: 100;
bottom: 10px;
}
.holder {
width: 100%;
height: 100%;
}
.holder div {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
/*init z-index*/
}
.holder div.current {
z-index: 1;
}
/*only this DIV will be visible*/
.one {
color: black;
background: white;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.two {
color: white;
background: black;
font-size: 3em;
line-height: 1.5em;
font-family: monospace;
}
.wrap{
margin:0 5% 0 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>corey</title>
</head>
<body>
<button class="button">yay</button>
<div class="holder">
<div class="one current">
<div class="wrap">
<p>Hi, I'm <a class="daytext" href="https://www.linkedin.com/in/coreyhclay">Corey Clay</a>, a designer
currently
residing in Charlotte, North Carolina.
<p>During the day, I attend <a class="daytext" href="https://www.uncc.edu">college</a>, work an
<a class="daytext"
href="https://www.tripadvisor.com/Attraction_Review-g49232-d10404800-Reviews-Out_of_Time_Escape-Huntersville_North_Carolina.html?m=19905">
escape room</a>, and design <a class="daytext" href="https://webflow.com/coreyhclay">mockup
websites</a>.
My goal is to create a unique portfolio of development projects, and find work at a company that can
help me grow.</p>
<p>I'm acquainted with tools such as Figma, Adobe Creative Suite, Visual Studio Code, Github, HTML5,
CSS, and
Javascript; I'm also learning SASS, React, and Jquery.</p>
<p>Peek my <a class="daytext" href="url">resume</a>, check my <a class="daytext"
href="url">portfolio</a>,
and say <a class="daytext" href="url">hello</a>.
</p>
</div>
</div>
<div class="two">
<div class="wrap">
<p>Hi, I'm <a class="nighttext" href="https://twitter.com/nightcorey">Corey Clay</a>, a musician currently residing in Charlotte, North Carolina.</p>
<p>During the night, I produce <a class="nighttext" href="https://www.youtube.com/watch?v=jVBCnAqJrUg">
pop music</a>, DJ <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop">live mixes</a>,
and host a <a class="nighttext" href="https://soundcloud.com/nightcorey/nightcoreys-set-for-deskpop"> podcast
about k-pop</a>. My goal is to collaborate with vocalists and performers to make sincere pop songs that damage speakers.</p>
<p>I compose with tools like Ableton, Spire, Ozone, and a midi keyboard; I'm also learning chord theory, Serum, and general mixing techniques.</p>
<p>Experience my <a class="nighttext" href="NONSTOPPOP.jpg">website</a>, check my <a class="nighttext"
href="NONSTOPPOP.jpg">soundcloud</a>, and say <a class="nighttext" href="NONSTOPPOP.jpg">hello</a>.</p>
</div>
</div>
</div>
<script>
$("button").click(function () {
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
} else {
$(".current").removeClass("current").next().addClass("current");
}
});
</script>
</body>
</html>
Here's the jsfiddle also. https://jsfiddle.net/5h2aqr6t/

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>

try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..

With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

Collapsible Box Script Interfering with CSS

This is the script needed for the collapsible box to work
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
But the 4th line of code is interfering with my CSS, in terms of backgrounds and font. This community told how to fix the background color with:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
text-shadow: none;
}
Where text-shadow: none; being the line of code to remove the blue-ish outlines in my navigation bar (code below), but doesn't remove it anywhere else. I applied this to the p and h4 tags in my CSS but it doesn't apply.
Through trial and error I have found out that line 4 was the reason why it was interfering. Line 4 code (as mentioned above):
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
If I remove this, my collapsible box disappears. But if I leave it, I lose my background color and font. Help please and thanks in advance.
Navigation bar, collapsible box code will be provided below. For more reference I have uploaded my file into a free web hoster here.
As you can see, the part where it says "Restaurante etc", it has this really weird shadow to it, the font of the navigation bar is not "Roboto", as mentioned in the CSS code, and when I hover over the "About Us" page it does not use Roboto nor Lato, which were the only two fonts mentioned in my file.
Navigation Bar Content:
<div class="nav">
<ul>
<li> Contacts </li>
<li> Map </li>
<li> Reservations </li>
<li> Online Order </li>
<li> Menu </li>
<li> About </li>
<li> Home </li>
</ul>
</div>
Navigation Bar CSS:
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif !important;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
outline: none;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
text-shadow: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
text-shadow: none;
}
Collapsible Box Script:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Collapsible Box Content:
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h2> MENU // SOUPS </h2>
<p> Blank </p>
</div>
<div data-role="collapsible">
<h2> MENU // BEEF </h2>
<p> Blank </p>
</div>
</div>

Why is the CSS Javascript dropdown menu not showing in any browser?

This is the code snippet of the navigational bar I have been trying to make using HTML5, CSS and JavaScript. The Dropdown menu I am attempting to make using CSS and Javascript is similar to the one given as an example in the W3Schools website. This is the code snippet I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
This is the result I am getting out of this code:
Navigational Bar
But the Dropdown menu does not seem to work whatever I try to do. I am using Materialize CSS here along with Google Icons.
Can anyone tell me where I am going wrong or is there something wrong with my approach?

Your code should work - as evidence in this fiddle - https://jsfiddle.net/67j1sLkt/
Looks like you need to do some more debugging on your end, because this can be a number of issues. The first 2 that would come to mind are:
Absolute positioning off of the screen. You have your .dropdown-content set to position: absolute, but you have to ask yourself relative to what? I would suggest adding position: relative; to your .dropdown class
z-index. This determines the layers of elements. So it could be that the element is being shown below the background or something.
Some debugging help - if you are in Chrome, I would suggest right clicking on the Dropdown button and select Inspect. Now use your developer tools to highlight your #myDropdown and it should tell you where that element is positioned on the page (if it is shown at that point). You should also check your console for errors to see if that is what the issue is.

works for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="http://materializecss.com/dist/css/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" data-activates='myDropdown'>Dropdown</a>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
/* function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
$('.dropbtn').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
</script>
</body>
</html>

$(document).ready(function() {
function myFunction(){
$(".dropbtn").click(function() {
$("#myDropdown").toggle();
});
}
this much is fulfill your requirement

With My Navigation Bar Is Messed Up [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Need help with the text on my navigation bar. The items in it are all messed up, and jumbled I know my code is really sloppy I am new to coding. This is the link with JS bin here http://jsbin.com/cibuvozido/edit?html,output

Here you can see the new code with the navbar corrected already, but I recommend that you use a framework starting can be bootstrap or foundation 6 which is also very good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title> Contact Us Legacy's Web-Design</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.home, .security, .contact, .about, .portfolio {
display: inline-block;
text-align: center;
padding: 10px;
}
a {
text-decoration: none !important;
}
.all {
margin-top:0px;
position:absolute;
margin:none;
border-style:solid;
border-color:#008000;
border-width:4px;
}
#aside {
color:#0ddde7;
text-align:center;
padding-top:20px;
margin:none;
}
nav {
border-bottom:solid;
border-right:solid;
border-left:solid;
border-radius:10px;
border-color:#0ddde7;
border-width:4px;
/* padding-top:20px; */
font-size:1.5em;
background-color:#0f171b;
z-index:0;
}
h2 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 50px;
}
h3 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 330px;
}
.imgg {
margin-top:24px;
margin-left:40px;
border-style:solid;
border-color:#0ddde7;
border-width:2px;
border-radius:18px 18px 18px 18px;
}
.img {
padding: 14px 0 0 1220px;
pointer-events: none;
position:absolute;
}
#search {
padding: 0 0 0 1105px;
height:0;
}
.jwery {
margin-left: auto;
margin-right: auto;
display: table;
}
.jwery a {
-webkit-transition:width 2s;
transition: 2s;
}
.jwery a:hover {
font-size: 1.1em;
}
body {
margin:0;
padding:0;
background-color:#a4a4a4;
}
a:link {color:#0ddde7; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
</head>
<div id="Header">
<div id="search">
<form>
<form id="img" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="18" maxlength="120">
<input type="submit" value="" style="border-style:
none; background: url('searchbutton3.gif') no-repeat; width: 13px; height: 15px;">
</form>
</div>
<img class="img" src="images/search.png" height="19.4">
<nav>
<div class="jwery">
<a class="home" href="Home.html">Home</a>
<a class="security" href="Security.html">Security</a>
<a class="FAQ" href="Portfolio.html">Portfolio</a>
<a class="about" href="About.html">About Us</a>
<a class="contact" href="Contact Us.html">Contact Us</a>
</div>
</nav>
<body>
<img class="imgg" src="images/legacy.png" align=left width=300>
<div id="aside">
<p>You Can Also Email Me At LegacyWebCreations#gmail.com Or Call/Text 252-207-
6688</p>
<p>Feel Free To Leave Me A Message, Question, Comment, Or Recommendation.</p>
<h2>Follow Me! Please Share My Site! </h2>
<h3>Instagram Account: LegacyWebDesign</h3>
<h3>Personl Account: Surfskateskim57</h3>
<h3>Facebook Account: Ryan Miller</h3>
<h3>Group Name: LegacyWebDesign</h3>
<h3>Twitter Account:LegacyWebDesign</h3>
<h3>LinkedIn Account: LegacyWebCreations</h3>
</div>
<div class="all">
<a id="foxyform_embed_link_747752" href="http://www.foxyform.com/">Questions?
Comments?</a>
</div>
<script>
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=747752&sec_hash=fd11cc5da35&width=380px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
</body>
</html>
tell me if this good and only touch the css that I recommend that you
place it in the tab that says css which is best practice that placed
it directly in the html See Ya!! and keep on hacking

Categories