I am a newbie to html and css. I am trying to move the button "dropbtn" to the right side of my webpage, but it remains on the left side. I have tried using float, align, right, text-align but they all don't seem to work. I have also tried using the tag !important but that does not help either.
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container,
.front
.back{
height: 200px;
width: 260px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
footer{
background: #aaa;
color: white;
}
.edit{
float: right;
padding-right: 10px;
}
nav{
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br>
If you are seeing this message for a long time, it is likely
that you have a JavaScript error. Troubleshoot your script by
using the browser console panel now. Please use either Firefox
or Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>
Cannot move html button to the right
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container,
.front
.back{
height: 200px;
width: 260px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
footer{
background: #aaa;
color: white;
}
.edit{
float: right;
padding-right: 10px;
}
nav{
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
right:0px;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu.show {
display: block;
right: 0px !important;
left: initial !important;
transform: translate3d(0px, 56px, 0px) !important;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="clearfix">
<div class="dropdown float-right">
<button class="dropbtn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br>
If you are seeing this message for a long time, it is likely
that you have a JavaScript error. Troubleshoot your script by
using the browser console panel now. Please use either Firefox
or Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</html>
Just simply changes in your HTML and CSS
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container,
.front
.back{
height: 200px;
width: 260px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
footer{
background: #aaa;
color: white;
}
.edit{
float: right;
padding-right: 10px;
}
nav{
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
right:0px;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="clearfix">
<div class="dropdown float-right">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br>
If you are seeing this message for a long time, it is likely
that you have a JavaScript error. Troubleshoot your script by
using the browser console panel now. Please use either Firefox
or Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>
The issue with the code you posted is that you've added display: inline-block; to the dropdown class. This means that the div marked with dropdown class will by default only take up the space required to render its children. Unlike display: inline;, however, inline-block elements will respond to setting width and height properties on the element or its class. So, if you just want to set the width: 100%; property on the class, as shown in this fiddle, you'll then be able to use text-align: right;.
Like others have suggested, you could use set the display property to flex, which gives a little more control to you when trying to position children within the containing element. There are also some compatibility issues with older browsers (mostly IE < 11). Probably not that big of a deal at this point.
But the root cause is the display: inline-block; property. If that weren't set I suspect most of your other attempts may have worked, as there are many other ways to properly position the button the way you want.
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.dropdown{
float: right !important;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container,
.front
.back{
height: 200px;
width: 260px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
footer{
background: #aaa;
color: white;
}
.edit{
float: right;
padding-right: 10px;
}
nav{
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br>
If you are seeing this message for a long time, it is likely
that you have a JavaScript error. Troubleshoot your script by
using the browser console panel now. Please use either Firefox
or Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>
.dropdown {
float: right;
}
Add this to you style.
Give float:right to the div that has class dropdown.
You can fix this easily while using CSS Flexbox. Avoid using things like float, this is considered a bad practice in current days of web development, because it can be solved in a better way.
Add display: flex to the parent of .dropbtn (in this case .dropdown) and add margin-left: auto to .dropbtn to move it completely to the right side of the page.
Updated styling for these two classes:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
margin-left: auto;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: flex;
}
Read more about using CSS Flexbox at MDN.
.mystyle {
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front .back {
height: 200px;
width: 260px;
}
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
footer {
background: #aaa;
color: white;
}
.edit {
float: right;
padding-right: 10px;
}
nav {
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
margin-left: auto;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: flex;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br> If you are seeing this message for a long time, it is likely that you have a JavaScript error. Troubleshoot your script by using the browser console panel now. Please use either Firefox or
Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>
Related
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
I have placed some media queries into my code to state if the screen resolution is less than 768px; the .sideBar disappears like so, leaving the .main section.
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
What I would like to achieve is when the screen resolution is like this, I would like a hamburger icon to appear that allows me to toggle open/close the .sideBar.
How would I go about this in code-wise?
If there are any previous tutorials like this, please attach.
Original Code attached:
/* Copyright (c) myEd (made by students, for students.) 2018. */
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100000;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog { /* Modal Properties for all modals in myEd */
position: fixed;
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target { /* Modal Properties for all modals in myEd */
opacity:1;
pointer-events: auto;
}
.modalDialog > div { /* Modal Properties for all modals in myEd */
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #d7d7d7;
background: -moz-linear-gradient(#ddd, #666);
background: -webkit-linear-gradient(#ddd, #666);
background: -o-linear-gradient(#ddd, #666);
}
.close { /* Modal Properties for all modals in myEd */
background: #606061;
color: #FFFFFF;
line-height: 10px;
position: absolute;
right: -5px;
text-align: center;
top: -10px;
width: -5px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */
.textModalh2 { /* Text preferences of the modal box directed from the navBar */
margin-top: 18px;
margin-bottom: -15px;
}
.textModalh5 { /* Text preferences of the modal box directed from the navBar */
margin-bottom: -15px;
}
.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
border-radius: 50%;
height: 130px;
width: 120px;
float: left;
margin-right: 40px;
margin-top: 15px
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
position: relative;
}
#newsmyEd {
position: absolute;
width: 100%;
height: calc(100vh - 120px);
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
height: calc(100vh - 120px);
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
#media (max-width: 768px) {
.sideBar {
display: none !important;
}
}
<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>
<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<i class="fa fa-home"></i> <!-- Home -->
<i class="fa fa-book"></i> <!-- Learning -->
<i class="fa fa-user"></i> <!-- Student Management -->
<i class="fa fa-globe"></i> <!-- Portals -->
<i class="fas fa-sign-out-alt"></i> <!-- Log-out (right to left) -->
<i class="fa fa-question-circle"></i> <!-- Help (right to left) -->
<i class="fa fa-bookmark"></i> <!-- Quick Links (right to left) -->
<div id="modalQL" class="modalDialog">
<div>
X
<h3>Quick Links</h3>
<h6>SEQTA Learn</h6>
<h6>SEQTA Engage</h6>
<h6>Adventist Schools Australia</h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>
<i class="fas fa-caret-down"></i> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
X
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter#kas.nsw.edu.au">tom.carpenter#kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<i class="far fa-newspaper"></i> <!-- myEd News -->
<i class="fa fa-location-arrow"></i> <!-- Site Navigation -->
</div>
</div>
</body>
</html>
Thanks, Tom
I guess this is what you are looking for, to make a clear view I took the google map iframe and wrapper it with a div. Then I am toggling the wrapper for icon clicks.
Here is the codepen
$(document).ready(function() {
$('.mobile-menu-icon i.open').click(function() {
$('.sidebar-wrapper').fadeIn();
$(this).hide();
$('.mobile-menu-icon i.close').fadeIn();
});
$('.mobile-menu-icon i.close').click(function() {
$('.sidebar-wrapper').fadeOut();
$(this).hide();
$('.mobile-menu-icon i.open').fadeIn();
});
});
.mobile-menu-icon i.close {
display: none;
}
#media (min-width:768px) {
.mobile-menu-icon {
display: none;
}
}
#media (max-width:767px) {
.mobile-menu-icon {
display: block;
}
.sidebar-wrapper {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<div class="mobile-menu-icon">
<i class="fa fa-bars open" aria-hidden="true"></i>
<i class="fa fa-times close" aria-hidden="true"></i>
</div>
<div class="sidebar-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- myEd News -->
</div>
</div>
I have followed a detailed instruction from https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ on creating a modal.
I have done everything to plan but when I go to click the modal in the navBar arrow link, it opens stating that #openModal cannot be found.
Attached is my HTML and CSS code:
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
#wrapper {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Default/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows myEd news to scroll */
overflow: hidden;
}
#newsmyEd {
width: 100%;
height: 11.4%;
min-height: 11.4%;
top: 0;
right: 0;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
overflow-y: scroll; /* Allows embedded iFrame to scroll */
position: relative;
overflow: hidden;
}
.frameMain { /* Frame Properties */
position: absolute;
top: 0;
left: 0;
border: 0;
min-height: 11.4%;
}
.footer { /* Footer properties */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
}
.footer a { /* Footer navBar properties */
float: right;
display: block;
color: #fff;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.footer a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.footer a.active { /* Active Link */
background-color: #666;
color: #fff;
}
#media screen and (max-width: 700px) { /* Responsive Layout - If screen px is less than 700px, make sideBar and main stack on top of each other */
.row {
flex-direction: column;
}
}
#media screen and (max-width: 400px) { /* Responsive Layout - If screen px is less than 400px, make navBar links stack vertically on top of each other */
.navBar a {
float: none;
width: 100%;
}
}
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
<script>
// Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper">
<!-- Wrapper fitting website to all screen resolutions -->
<div class="header">
<!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar">
<!-- Main sticky navBar with categories listed -->
<i class="fa fa-home"></i> <!-- Home -->
<i class="fa fa-book"></i> <!-- Learning -->
<i class="fa fa-user"></i> <!-- Student Management -->
<i class="fa fa-globe"></i> <!-- Portals -->
<i class="fas fa-sign-out-alt"></i> <!-- Log-out (right to left) -->
<i class="fa fa-question-circle"></i> <!-- Help (right to left) -->
<i class="fa fa-bookmark"></i> <!-- Quick Links (right to left) -->
<i class="fas fa-caret-down"></i> <!-- Profile dropDown (right to left) -->
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</div>
<div class="row">
<!-- Format for alignment of the sideBar and main panels -->
<div class="main">
<!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" height="11.4%" scrolling="yes" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar">
<!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer">
<!-- Featuring Site Navigation and myEd News navBar links -->
<i class="far fa-newspaper"></i> <!-- myEd News -->
<i class="fa fa-location-arrow"></i> <!-- Site Navigation -->
</div>
</div>
<i class="fas fa-caret-down"></i>
should be
<i class="fas fa-caret-down"></i>`
<a href="#openModal" class="right" title="Profile Overview">
<i class="fas fa-caret-down"></i>
</a>
You forgot to put '#'
I have a code for two modals that will eventually be for three buttons. Please note, I am a novice. I can get the code to work for the first button but after the second button is added, neither modals work. I need three different modals with different content. See code below. Please help.
Thank you in advance for your assistance.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.STRATEGY-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close-STRATEGY {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-STRATEGY:hover,
.close-STRATEGY:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Modal Content */
.ANALYZE-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close-ANALYZE {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-ANALYZE:hover,
.close-ANALYZE:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="STRATEGYBtn">STRATEGIC PLANNING</button>
<!-- The Modal -->
<div id="STRATEGYModal" class="modal">
<!-- Modal content -->
<div class="STRATEGY-content">
<span class="close-STRATEGY">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- Trigger/Open The Modal -->
<button id="ANALYZEBtn">ANALYZE</button>
<!-- The Modal -->
<div id="ANAYLZEModal" class="modal">
<!-- Modal content -->
<div class="ANAYLZE-content">
<span class="close-ANALYZE">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('STRATEGYModal');
var modal = document.getElementById('ANALYZEModal');
// Get the button that opens the modal
var btn = document.getElementById("STRATEGYBtn");
var btn = document.getElementById("ANALYZEBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-STRATEGY")[0];
var span = document.getElementsByClassName("close-ANALYZE")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Please follow as I am explaining
CSS code for MODAL
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.background_image{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Codes For different Buttons
<span>Make Home Page</span>
<span>Setting</span>
<span id="share">Share</span>
Content for Different Modal you can creat as many you want just change the id
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div> your display</div>
</div>
</div>
</div>
<!--=============================END=POPUP=ONE==============================================-->
<div id="popup2" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
your display
</div>
</div>
</div><!--==================================================END=POPUP=TWO===========================================================-->
<div id="setting" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div>
your Display
</div>
</div>
</div>
</div>
This is the HTML code for my BootStrap website:
<html lang="en">
<head>
<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="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>Contact Me</li>
<li>test2</li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills">Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>test1</li>
<li>test2</li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
Here is my CSS:
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
This is how it appears:
Website
How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!
You forgot close the div - second row (with sports and hobbies).
The second row div is not closed before starting the next row which causes them to be nested.
...
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
</div> <!-- This row closing tag is missing -->
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
...
Then you also have a stray closing div tag at the bottom before the closing body tag. You probably threw it down there by accident to fix a tag warning.