I'm a senior programmer but novice to javascript and CSS posibilities. Next is the description of what I have and what I want:
Layout
My folders:
Test_portal : contains the iNat_main.html file and 2 subfolders:
• iNat_files: contains html files to be loaded into “submenu” div
or “obs” div according to selection.
• iNat_images: contains images to be loaded within the html file that is loaded into the “obs” div according the selected “submenu” item.
Issues:
When I select a “menu” item it is loaded into the “submenu” div, but it doesn’t use the full area as shown in the layout. The scrollbars are too short.
When I select a “submenu” item it is loaded into an “obs” div, but
it is displayed in submenu area of the layout (left side of the page) instead in the obs area of the layout (right side of the page).
iNat_main.html
function load_menu(htmname){
document.getElementById("submenu").setAttribute("style","height:600px");
document.getElementById("submenu").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: lightgreen;
padding: 2px;
text-align: center;
font-size: 8px;
color: black;
}
.inline-block-child {
float: left;
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color:yellow;
}
li {
float: right;
border-right: 2px solid #000;
}
li a {
display: block;
font-size: 20px;
padding: 20px;
}
.bggrey {
background-color: lightgrey;
overflow-x: scroll;
}
.bgdata {
background-color: cyan;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.float-child_l {
background-color: lightgrey;
width: 35%;
float: left;
padding: 5px;
border: 2px solid black;
}
.float-child_r {
width: 65%;
float: left;
padding: 5px;
border: 2px solid green;
}
</style>
<body>
<header role="banner">
<h1>My nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</header>
<br>
<div id="menu">
<p dir="rtl"> Select what to show </p>
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/R_menu.html")>Reptiles</a></li>
</ul>
</div>
<section class='container'>
<div class='float-container'>
<div id ="submenu" class='float-child_l bggrey' width=40% scrollHeight="400px";>
<p><dir="rtl" style="center"> ID=SubMenue </p>
</div>
<div id="obs" class='float-child_r bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</section>
</body>
</html>
B_menu.html
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<body>
<object>
<p align=center><b> List of Birds</p>
<br>
<div>
<div id ="submenu" width=40%>
<section>
<p align=center><b> Select item to display </p>
<ol>
<li> <a href="#obs" onclick=load_data("./BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li> <a href="#obs" onclick=load_data("./BID64.html")>אנפת לילה = Nycticorax nycticorax</a></li>
<li> <a href="#obs" onclick=load_data("./BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li> <a href="#obs" onclick=load_data("./BID72.html")>צוצלת = Streptopelia senegalensis</a></li>
<li> <a href="#obs" onclick=load_data("./BID126.html")>שלדג גמדי = Alcedo atthis</a></li>
</ol>
</section>
<br>
<div id="obs" class='child inline-block-child bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</object>
</body>
BID125.html
<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.col-1 {width: 60%; padding: }
.col-2 {width: 40%; padding: }
.col-3 {width: 20.0%; padding: 0.5%;}
.zoomA {
width: 20.0%; padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(5.0);
}
</style>
<body>
<p align=center><b> Selected item data</p>
<div id ="obs" width=65%>
<p align=center><b>Birds</p>
<br>
<colgroup><col width:"50.0%;"/><col width:"50.0%;"/></colgroup>
<table cellpadding="0" cellspacing="0" border="1px" style="width:100%;">
<tr>
<th align="left" class=col1>Bubulcus ibis</th>
<th align="right" class=col2>ציפורים - אנפית בקר</th>
</tr>
</table>
<p align="right" dir="rtl"> #125 אגמון החולה 08/11/2018 בדרגת-מחקר </p><br>
<table cellpadding="0" cellspacing="0" border="3px" style="width:70%;">
<colgroup><col width:"33.3%;"/><col width:"33.3%;"/><col width:"33.3%;"/></colgroup>
<tr>
<img src=../iNat_images/img125.jpg class="zoomA">
<img src=../iNat_images/img125_1.jpg class="zoomA">
</tr>
</table>
<br>
</div>
</body>
Two IBIS images
To load data like that you need to use Ajax. <object> is not intended for loading HTML like that (in an edge case <iframe> could be used, but I would not recommend that either).
Here is a basic example of how external HTML can be loaded into a <div>. I use the Fetch API for loading.
You can see that I'm using plain HTML in the HTML document and use JavaScript and eventlisteners to control what is going to happen.
The content of the document page1.html would just be the snippet of HTML need (so not body, head etc.).
var menu, content;
const loadhtml = href => {
fetch(href)
.then(response => response.text())
.then(html => {
content.innerHTML = html;
});
};
const onmenuclick = e => {
e.preventDefault();
if (e.target.nodeName == 'A') {
let href = e.target.attributes['href'].value;
loadhtml(href);
}
};
document.addEventListener('DOMContentLoaded', e => {
menu = document.getElementById('menu');
content = document.getElementById('content');
menu.addEventListener('click', onmenuclick);
});
<ul id="menu">
<li>Page 1</li>
<!--
here I'm replacing the reference to an external HTML document
with a data URL so that you can see how it works in this Stackoverflow snippet.
-->
<li>Page 2</li>
</ul>
<div id="content"></div>
Thanks to all contributors. With a local help, all issues were solved.
I had to install Microsoft Internet Information Services (IIS), edit the configuration file and launch it. Final working code is attached:
index.html -
function load_menu(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("submenu").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
function load_detailed_data(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("obs").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.top_banner {
background-color: lightgreen;
text-align: center;
}
.top_banner h1 {
font-size: xx-large;
}
.top_banner h4 {
font-size: smaller;
}
.inline-block-child {
float: left;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.zoomA {
width: 20.0%;
padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(3.0);
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
.main_menu li {
float: right;
border-right: 2px solid #000;
}
.main_menu li a {
display: block;
font-size: 20px;
padding: 20px;
}
.submenu {
height:100%;
width:100%;
direction:rtl;
}
.submenu p {
padding-right:20px;
}
.submenu li {
width:100%;
direction:rtl;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.main_pane {
width:70%;
height:100%;
float: left;
background-color: cyan;
}
.menu_pane {
width:30%;
height:100%;
float: right;
background-color: lightgrey;
}
.details {
width:100%;
direction:rtl;
}
.details h2 {
padding-right:20px;
}
.details img {
width:25%;
}
</style>
<html lang="he">
<head>
<meta charset="utf-8">
<title>iNat_main_v2.html</title>
<body>
<div class="top_banner">
<h1>Mine nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</div>
<div id="menu" class="main_menu">
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/P_menu.html")>Plants</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/M_menu.html")>Mammals</a></li>
</ul>
</div>
<div class='float-container'>
<div class='main_pane' id="obs">
<h2>ID=obs for Data Selected</h2>
</div>
<div class='menu_pane' id="submenu">
<p>ID=SubMenue </p>
</div>
</div>
</body>
</html>
B_menu.html - Birds menu
<div class="submenu">
<p> Birds to select </p>
<ol>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID64.html")>אנפת לילה = Nycticorax nycticorax</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID68.html")>דרור הבית = Passer domesticus</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID71.html")>דררה קרמר = Psittacula krameri</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID131.html")>חסידה לבנה = Ciconia ciconia</a>
</li>
</ol>
</div>
BID25.html - Ibis data to display:
<div class="details">
<h2> Birds </h2>
<h2> Bubulcus ibis - אנפית בקר </h2>
<img class="zoomA" src="./iNat_images/img125.jpg"/>
<img class="zoomA" src="./iNat_images/img125_1.jpg"/>
</div>
4)Images used to display the Ibis data:
img125.jpg
img125_1.jpg
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Trying to make a monthly calendar that displays scheduled events in gray and gives a popup with more information about the event on mousehover.
Additionally, I wanted to highlight the current day of the month in pink. My code was working a couple days ago but it doesn't seem to work anymore and I can't seem to figure out the problem.
HTML:
<!--ignore all this -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Kendall Lee Kasper | Events</title>
</head>
<nav>
<!--Logo Within Navigation Bar-->
<img src="http://i.imgur.com/HYzJLrm.png" class="logo">
<!--Mobile Navigation Setup -->
<button id="nav-open">☰</button>
<span class="deskNav">
HOME
ABOUT
EVENTS
GALLERY
BOOKING
</span>
<div id="menu">
<ul>
<button id="nav-close"> X </button>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Booking</li>
</ul>
</div>
</nav>
<body>
<div class="section group">
<div class="col span_2_of_2">
<span class="textstyling">
<center>
<img src="http://i.imgur.com/Y1uU2NM.png" class="border">
<hr>
<img src="http://i.imgur.com/w0tJXYE.png" class="mobileImg">
<p>
</center>
<!--CALENDAR CODE STARTS HERE-->
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
<center>November<br>
<span style="font-size:18px">2016</span>
</center>
</li>
</ul>
</div>
<!-- POPUP DIV TO DISPLAY EVENT INFO-->
<div id="pop-up">
Event info
</div>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="scheduled">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li class="scheduled">15</li>
<li>16</li>
<li>17</li>
<li class="scheduled">18</li>
<li class="scheduled">19</li>
<li>20</li>
<li>21</li>
<li class="scheduled">22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
</div>
<!--CALENDAR HTML ENDS HERE-->
<hr>
<center>
<img src="http://i.imgur.com/n9x7PV5.png" class="border">
</center>
</span>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: Verdana, sans-serif;
}
ul {
list-style-type: none;
}
/* Month header */
.month {
padding: 70px 12px;
width: 100%;
background: #FA89C4;
}
/* Month list */
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}
/* Next button */
.month .next {
float: right;
padding-top: 10px;
}
/* Weekdays (Mon-Sun) */
.weekdays {
padding: 5px 12px;
font-size: 12px;
width: 100%;
margin: 0;
background-color:#ddd;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
/* Days (1-31) */
.days {
padding: 5px 12px;
font-size: 12px;
line-height: 25px;
width: 100%;
background: #eee;
border-top: 5px solid #ddd;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 15%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color:#777;
}
/* Highlight the "current" day */
.days li .active {
padding: 5px;
background: #FF47A6;
color: white !important
}
.days li .scheduled {
padding: 5px;
background: #C2C2C2;
color: white !important
}
.days li .event {
cursor: default;
}
.scheduled {
background: #C2C2C2;
}
div#pop-up {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
Javascript:
var novEvents = {
5: "Pride Week Drag Show # UT Arlington | 7:00pm",
15: "Twisted Tuesday # Rainbow Lounge | 11:00pm",
18: "All Star Drag Show # Club 1851 | 10:30pm",
19: "All Star Drag Show # Club 1851 | 10:30pm",
22: "Twisted Tuesday # Rainbow Lounge | 11:00pm"
};
$(".scheduled").hover(function(){
$('div#pop-up').show();
$('div#pop-up').show();
}, function() {
$('div#pop-up').hide();
});
// wrap the Events scripts in its own scope
(function ($) {
$(function () {
setActiveDate();
setEventDates();
});
function setActiveDate() {
var currentMonthDate = new Date().getDate();
$('.days li').each(function (i, ele) {
if ($(ele).text() == currentMonthDate) {
$(ele).html($('<div>', { class: 'active event', html: $(ele).html(), title: ''}));
}
});
}
function setEventDates() {
$.get('getEvents.php', null, function (data) {
data = JSON.parse(data);
$('.days li').each(function (i, ele) {
var currentDate = "11/" + $(ele).text() + "/2016";
if (!$(ele).hasClass('scheduled') && $.inArray(currentDate, data) != -1) {
$(ele).html($('<div>', { class: 'scheduled event', html: $(ele).html(), title: 'Info' }));
}
});
setDateMouseEvents();
})
}
function setDateMouseEvents(){
$('.event').click(function(){
$('<div>', {title: 'Event'}).dialog();
}).tooltip();
}
})(jQuery)
I know the code is janky; it's my first try at making a calendar and I'm on a tight deadline.
Here's a pastebin with all the code that might be easier to read: http://pastebin.com/mPg1pEWn
And here's what the final result looks like right now:
http://omega.uta.edu/~slc1101/courses/ctec4350/semester-project/events.php
The scheduled events are highlighted, but the problem is I'm having trouble highlighting the current day and getting the div#pop-up to display event information.
If anyone has any solutions or suggestions on how to improve my code, please let me know!
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.