I'm trying to set up a menu but the div that toggles the menu isn't showing up
I'm trying to follow a tutorial where a guy sets up a menu, and he has a div in the top left with a menu icon. I've followed the code perfectly word for word in the html and css, and yet nothing appears on my screen. I do have the exact same image in the exact same folder that he does.
Link to YT HTML
& the
Link to YT CSS
.btn-toggle-nav {
width: 60px;
height: 100%;
background-color: #F98F39;
background-image: url("img/menu.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
The expected result should be like he has in the video.
Link to that
Try this. Add height in pixels.
.btn-toggle-nav {
width: 60px;
height: 46px;
background-color: #F98F39;
background-image: url(img/menu.png);
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
cursor: pointer;
display: inline-block;
}
ul {
display: inline-block;
}
.btn-toggle-nav:hover {
opacity: 0.5;
}
<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li>Home</li>
<li>Project</li>
<li>Biography</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
Related
I have inserted an image into a website and now want to write a paragraph in a new div below it. I noticed that there was extra white space and colored each background of the elements pink & red to understand which was causing a problem. The pink is attributed to div of id="parent", and the red is only attributed to the id="hero_image" contained in the parent div. If it's in the parent, why is the red extending beyond the pink? I'm still trying to grasp position in CSS and what the computer "sees".
Here is an image of what I am seeing.
Here is my html & CSS (the nav styling is missing from CSS bc I checked and removed it to make sure it wasn't the issue)
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 70vw;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
#logo_png {
max-width: 25vw;
position: absolute;
z-index: 100;
}
#hero_img {
max-width: 85vw;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
<div id="parent">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li>Mission</li>
<li>About</li>
<li>Events</li>
<li>Donate</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
Your style properties have wrong values !
vh is for height and vw is for width !
anyways , your #hero_img has height : 85vw which is greater than #parent 's height of 70vw.
this should fix the overflow !
#hero_img {
max-width: 25vh;
float: right;
top: 0;
z-index: 100;
background-color: tomato;
}
#parent {
position: relative;
width: 100%;
background-color: violet;
height: 35vh;
}
vh and vw are relative units used to style the element according to the size of the view port !
this article covers more about them and other units too !
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
I am learning HTML and CSS and I am trying to replicate Apple website as my first real project. I am having trouble with the images, the first image is overblown out of proportion, it is way too big than it actually is. The other two images proportions are fine, however, they are pushed to the right of the screen even though I have the parents div width set to 100%, and these child elements set accordingly to the page. Please have a look and tell me what I am doing wrong. Thank you.
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>Apple</title>
<link rel="stylesheet" href="./apple2.css" type="text/css">
</head>
<div id="wrapper">
<body>
<nav> <!--Main navigation of the site-->
<ul>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
</ul>
</nav>
<div id="content">
<div class="airpodspro"> <!--div class 1 of main content-->
<h1>Airpods Pro</h1>
<h4>Magic like you've never heard</h4>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11pro"> <!--div class 2 of main content-->
<h1>iPhone 11 Pro</h1>
<h4>Pro cameras. Pro display. Pro performance</h4>
<h6>From $24.95/mo. or $599 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11"> <!--div class 3 of main content-->
<h1>iPhone 11</h1>
<h4>Just the right amount of everything</h4>
<h6>From $16.62/mo. or $399 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
</div>
</body>
</div>
.html {
font-size: 22px;
}
body {
font-family: Helvetica;
}
html body{
margin:0;
padding:0;
}
img {
max-width: 100%;
}
#wrapper {
margin: auto;
position: relative;
}
nav {
position: relative;
background-color: #3d3d3d;
font-size: 0.9em;
word-spacing: 4em;
padding: 0.04%;
width: 100%;
}
ul{
list-style-type: none;
}
li{
display: inline;
color: white;
}
nav ul {
text-align: center;
}
nav a {
color: white;
}
#content {
width: 100%;
position: relative;
}
.airpodspro {
background-color: #5aa8cc;
height: 800px;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/airpods-pro-
takeover/airpods_pro__fok8ao5xkga6_large.jpg");
}
.iphone11pro {
background-color: #6fffd4;
margin-top: 53%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-11-
pro/hero__dvsxv8smkkgi_large.jpg");
}
.iphone11 {
background-color: #dc84ff;
margin-top: 89%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-
11/hero__dvsxv8smkkgi_large.jpg");
}
.airpodspro, .iphone11pro {
color: #ececec;
}
.iphone11pro, .iphone11 {
height: 500px;
}
.airpodspro, .iphone11pro, .iphone11 {
font-size: 1.5em;
line-height: 1em;
position: absolute;
padding: 5% 40%;
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
You are using image in CSS As background image properties.
Its better download the respective image from apple website and then use them
in img tag in your HTML. This way you will have better control over image.
Also when you are using the image the way you are already using because of the apple link, its also downloading js codes and controlling the behavior of website. So check out for it.
Thanks, me later.
I'm using Slide of bootstrap jquery and css, It runs normal and no problem happens.
this is my source:
<div id="photos" class="tabcontent">
<div id="ninja-slider">
<div>
<div class="slider-inner">
<ul>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
this is my css:
#ninja-slider .ns-img {
background-color: rgba(0,0,0,0.3);
background-size: contain;
border-radius: 3px;
cursor: default;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
padding-top: 67%;
}
#ninja-slider .slider-inner {
width: 727px;
margin: -2px auto;
font-size: 0px;
position: relative;
box-sizing: border-box;
}
When I check and run on firebug on browsers, it seem auto generated some line at tag:
<ul style="overflow: hidden; padding-top: 50%; height: 0px;">
How Can I remove those lines auto generated or Can I change: padding-top:50% to padding-top:67%
Or any solution for me to fix the problem..
you can use !important for that.
<ul class="myul" style="overflow: hidden; padding-top: 50%; height: 0px;">
too override inline style you can do this
.myul {
padding-top: 67% !important;
}
or you can use javascript solution provide by #Renzo Calla
As #Terry said those inline styles might be added by the library, if you still want to overwrite them you can use the jquery css
$('#ninja-slider ul').removeAttr('style');
$('#ninja-slider ul').css("color","blue");
Based on this answer:
https://stackoverflow.com/a/38194916/2894798
In that case, I have to suggest you an easy and dirty way:
add in your css
#ninja-slider ul{
padding-top: 67%!important;
}
That will fix the problem.
If you will provide js in that page, i will provide an answer editing what is setting that css in ul element to padding-top:67% without overriding it.
I'm using a floating, fixed skip-link navigation that overlays on the right side of the page with no background. Basically just floating bubbles and text. As the user scrolls, I'd like to change the color of the navigation text depending on if the background is light or dark.
I've found a few things about setting the color based on background images, but the navigation won't always be floating over an image. Does anyone have any experience with this? I tried to find some examples, but haven't really come across anything, so maybe its just not possible right now.
Here's a fiddle with the basic idea of what I want.
https://jsfiddle.net/y867dL46/
HTML
<div class="navbar">
<ul>
<li class="bubble">
<div class="label">Link1</div>
</li>
<li class="bubble">
<div class="label">Link2</div>
</li>
<li class="bubble">
<div class="label">Link3</div>
</li>
</ul>
</div>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
CSS
.section1, .section3 {
height: 400px;
width: 100%;
background-color: white;
}
.section2 {
height: 400px;
width: 100%;
background-color: black;
}
.navbar {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.navbar ul {
list-style: none;
}
.bubble {
margin-bottom: 10px;
position: relative;
width: 20px;
height: 20px;
background: black;
border-radius: 1000px;
}
.label {
position: absolute;
right: 30px;
}
So I'd like the color of the navbar to change to white when it scrolls over the black section, and then back to black when it scrolls over the white sections.