Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
#media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li>Home</li>
<li>Information</li>
<li>Partner</li>
<li>Freelencer</li>
<li>Comunity</li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
Im learning html/css/js from a Youtube video tutorial. Im learning how to write js code but i can't help to solve a problem. I hope you give me the solution guys.
The problem is about add.EventListener. i saw the code in chrome, in console it shows:
"bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null"
I would like to use toggle hide and show with JS.
You are getting this error ( "bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null" ) because you are specifying invalid element classes in js.
Use this:
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
Since your elements in html are:
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">
Without seeing your code, it's hard to be specific as to what your issue is. Null is the absence of a value or object. When we call on a selector that does not exist, we can trigger the same error of null. Check if you are targeting an id that exists or that you are targeting the correct element using it's class.
Cross-reference your code to the following example to see if you may have missed something. This is the most basic of examples.
var box = document.getElementById('box');
document.getElementById('button').addEventListener('click', function(){
if( box.classList.contains('active') ){
box.classList.remove('active');
} else {
box.classList.add('active') ;
}
});
#button {
background-color: orange;
border: 1px solid #000;
color: #000;
padding: 0.5rem 1rem;
cursor: pointer;
}
#box {
margin-top: 2rem;
display: none;
padding: 1rem;
border: 1px solid #000;
}
#box.active {
display: block;
}
<button id="button">CLICK ME</button>
<div id="box">I am a box. Watch me.</div>
Related
I'm trying to create a collapsible sidebar on the left.
I want to set it up real simple: 2 columns which contains of 2 flex boxes, and when a button is pushed: the left flex box increases in width and the tight flexbox just moves with. When the button is clicked again, the flexbox on the left decreases again in side, back to the first state where the menu cannot be seen.
My problem is that I don't know how a click event of a button can control the width size of the flexbox.
What I have now is this:
html
<div>
<button
onClick={handleViewMenu}??
style={{ height: "30px", width: "30px" }}>
</button>
</div>
<div className='container'>
<div className='container-left'>
Left
</div>
<div className='container-right'>
right
</div>
</div>
scss
.container { width: 100vw;
height: 100vh;
display: flex;
&-left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
// flex: 0.3 0 auto;
// background-color: aqua;
} &-right {
flex: 1 0 auto;
}
}
I just don't know how to deal with the onClick event (where I put the ??. I work in React so I found different things like:
const [sideMenuOpen, setMenuOpen] = useState(false);
const handleViewMenu = () => {
setMenuOpen(!sideMenuOpen);
};
But it should be pretty easy to handle this I think, but I can't find a solution..
Here's a solution that doesn't need javascript by using the :has() pseudo class. Just set the width of the side bar when the checkbox is clicked and if you're using normal flexbox the right hand one will automatically shift to suit. See below. Any questions drop me a comment.
/* essential to add this as there's a default 8px margin */
body {
margin: 0;
}
/* this is also essential to avoid a world of width-based pain */
* {
box-sizing: border-box;
}
/* Just making things pretty here */
nav {
display: flex;
width: 100%;
gap: 1rem;
padding: 0.5rem 1rem;
background-color: purple;
color: white;
}
/*the menu button is basically a hidden check box, we use label to style it as a button */
.menubutton>input {
display: none;
}
/*these toggles the display of the menu button, it works because the label after the input element */
.menubutton>input:checked+label .not-active {
display: none;
}
.menubutton>input:not(:checked)+label .active {
display: none;
}
.container {
display: flex;
width: 100%;
}
.container-left {
background-color: plum;
height: 50vh;
padding: 0.5rem 0.5rem;
border: 1px solid transparent;
width: 3rem;
transition: width 300ms;
}
/* this is the bit that styles the width of the sidebar when the checkbox is checked. */
body:has(.menubutton > input:checked) .container-left {
width: 10rem;
}
/* just style the right box for visibility */
.container-right {
border: 1px solid lightgray;
height: 50vh;
flex-grow: 1;
padding: 0.5rem 0.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class='menubutton'><input type='checkbox' id='menubuttoninput'><label for='menubuttoninput'><i class="fa-solid fa-bars not-active"></i><i class="fa-solid fa-xmark active"></i></label></div>
This is a navbar!
</nav>
</div>
<div class='container'>
<div class='container-left'>
Left
</div>
<div class='container-right'>
right
</div>
</div>
If you do need a javascript solution then attach a listener to the checkbox input element and toggle the sidebar class to change the width as below:
window.onload = () => {
document.querySelector('.menubutton input').addEventListener('change', (e) => {
const sidebar = document.querySelector('.container-left');
if (e.target.checked) {
sidebar.classList.add('sidebar-active');
} else {
sidebar.classList.remove('sidebar-active');
}
});
}
/* essential to add this as there's a default 8px margin */
body {
margin: 0;
}
/* this is also essential to avoid a world of width-based pain */
* {
box-sizing: border-box;
}
/* Just making things pretty here */
nav {
display: flex;
width: 100%;
gap: 1rem;
padding: 0.5rem 1rem;
background-color: cornflowerblue;
color: white;
}
/*the menu button is basically a hidden check box, we use label to style it as a button */
.menubutton>input {
display: none;
}
/*these toggles the display of the menu button, it works because the label after the input element */
.menubutton>input:checked+label .not-active {
display: none;
}
.menubutton>input:not(:checked)+label .active {
display: none;
}
.container {
display: flex;
width: 100%;
}
.container-left {
background-color: lightblue;
height: 50vh;
padding: 0.5rem 0.5rem;
border: 1px solid transparent;
width: 3rem;
transition: width 300ms;
}
/* this is the bit that styles the width of the sidebar when the checkbox is checked. We just add this using javascript*/
.sidebar-active {
width: 10rem;
}
/* just style the right box for visibility */
.container-right {
border: 1px solid lightgray;
height: 50vh;
flex-grow: 1;
padding: 0.5rem 0.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class='menubutton'><input type='checkbox' id='menubuttoninput'><label for='menubuttoninput'><i class="fa-solid fa-bars not-active"></i><i class="fa-solid fa-xmark active"></i></label></div>
This is a navbar!
</nav>
</div>
<div class='container'>
<div class='container-left'>
Left
</div>
<div class='container-right'>
right
</div>
</div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 months ago.
I am trying to make this work (JavaScript file linked with my HTML and CSS) but for some reason it does not work. Any suggestions?
I do not understand whether the error is in my JavaScript or if it is due to how I typed in my HTML.
Just to be sure, I have enclosed my CSS code as well; It might be possible that there is some mistake as well.
script.js:
//targets
let snake = document.getElementById("snake");
let space = document.getElementById("space");
let fortune = document.getElementById("fortune");
//elements to be changed
let figure1 = document.getElementById("figure1");
let figure2 = document.getElementById("figure3");
let figure3 = document.getElementById("figure3");
//functions
snake.addEventListener("click",function(){
figure1.style.display = "";
});
space.addEventListener("click",function(){
figure2.style.display = "";
});
fortune.addEventListener("click",function(){
figure3.style.display = "";
});
HTML:
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght#0,500;0,700;1,300&display=swap" rel="stylesheet">
<title>My portfolio</title>
</head>
<body>
<header>
<h1>Simone</h1>
<nav>
<ul>
<li>About me</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>About me</h2>
<img id="face" src="./face.jpg" alt="Simone's face">
<p class="about">Ciao! my name is Simone, a self-taught front-end web developer based in England.
I am 26 years old and currently looking for my first job in the tech industry.</p>
<p class="about">I have got one year of experience in executing front-end mobile and web developement using Python,
HTML5, JavaScript and CSS3.</p>
<p class="about">I am committed to creating high presentation UI with exceptional handling to enhance user experience.</p>
<p class="about">In my spare time I enjoy travelling and going to the gym.</p>
</article>
<section class="projects">
<h2>Projects</h2>
<ul>
<li id="snake" class="project">Snake Game with Python</li>
<figure id="figure1"><img src="./snake.png" alt="Snake Game"><figcaption>Snake game developed using pygame.</figcaption></figure>
<li id="space" class="project">Space battleship</li>
<figure id="figure2"><img id="ship" src="./spaceship.png" alt="Spaceship"><figcaption id="figship">Spaceship game developed using pygame.</figcaption></figure>
<li id="fortune" class="project">JavaScript Fortune teller</li>
<figure id="figure3"><img src="./fortune.png" alt="JavaScript"><figcaption>Fortune teller generator using JavaScript</figcaption></figure>
</ul>
.....
CSS:
html {
font-size: 16px;
font-family: 'Museo Moderno',cursive;
background-color: hsla(0,70%,95%);
}
a{
text-decoration: none;
color: black;
font-weight: bold;
}
a:hover{
color: brown;
}
h1{
margin-top: 5rem;
margin-left: 2rem;
}
header nav{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
header nav ul{
text-align: center;
display: flex;
margin-top: -3.8rem;
}
header nav ul li{
margin: 0.5rem 3rem 0.5rem 3rem;
list-style: none;
}
h2{
margin-left: 2rem;
margin-top:1rem;
}
main article{
display: block;
}
main article .about{
margin-left: 4rem;
margin-top: 1.5rem;
}
#face{
float: inline-end;
border-radius: 1rem;
margin-right: 2rem;
margin-right: 2.7rem;
}
main .projects{
margin-bottom: 2rem;
margin-top: 2rem;
}
main .projects ul {
margin-top: 2rem;
margin-left: 2rem;
}
#figure1{
display: none;
}
#figure2{
display: none;
}
#figure3{
display: none;
}
#ship{
width: 10rem;
margin-left: -4rem;
}
#figship{
margin-left: -4rem;
}
main .projects .project {
margin-top: 1rem;
}
#skills{
display: block;
margin-bottom: 2rem;
}
main .skills{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items:center;
justify-content:space-between;
margin-left: 3rem;
margin-right: 3rem;
}
main .skills img{
width: 10rem;
}
hr{
margin-top: 2rem;
margin-bottom: 2rem;
}
main footer .bottom{
text-align: center;
margin: 2rem;
}
You are addding your js before the element is created, as #ericmp said, one option is to add the defer attribute to your script element, another option is to add you script element somewhere after the element, like at the end of your body tag.
I am trying to make a dropdown. So when i hover over the button, the list should pop up, and when i leave the button as well as the list (i.e listcontainer), the list should disappear. Everything works except the latter part. The list disappears as soon as i leave the button (even though i am over the list container). Issue I don't understand why. You may ignore the CSS code and html code. Semantics: Please note button is a div with class button
If you've read the code: The hideul function runs multiple times when it enters the listcontainer from the button (please check console). I don't get this part as well.
Please also let me know if there is a better way to do this logic.
Please visit to see the error
var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")
var mouseleftlistcontainer = true
var mouseleftbutton = true
function hideul(e, text) {
console.log(text)
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
}
button.addEventListener("mouseover", e => {
list.classList.add("effectt")
mouseleftbutton = false
hideul(e, "mouse entered button")
})
button.addEventListener("mouseleave", e => {
mouseleftbutton = true
hideul(e, " mouse left button")
})
listcontainer.addEventListener("mouseover", e => {
mouseleftlistcontainer = false
hideul(e, "mouse entered listcontainer")
})
listcontainer.addEventListener("mouseleave", e => {
mouseleftlistcontainer = true
hideul(e, "mouse left listcontainer")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
You should put all the objects, affected by the hover effect inside a container and trigger the effect on that one, like so:
var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")
var mouseincontainer = true
function hideul(show, text) {
console.log(text);
if (mouseincontainer) {
list.classList.add("effectt")
}
else {
list.classList.remove("effectt")
}
}
container.addEventListener("mouseover", e => {
hideul(true, "mouse entered button")
})
container.addEventListener("mouseleave", e => {
hideul(false, " mouse left button")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="btn-container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is the problem in your code
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
When you leave the button, this condition is met and your class is removed, but once you enter the list container, you need to add back the 'effectt' class.
I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle
You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle
Edit: This question is about aligning to a baseline. Meaning the base of the characters (the bottom of character 'h'). When including 2 different font sizes of the text 'jh', being able to align them at baseline with div. I could not find any solution for aligning to a baseline grid on the internet. They all stink. Without a Javascript framework or css preprocessor. This makes no sense if the proportion of the font below the baseline is known.
For the code linked below: Change .text2 font-size to 22px, and observe the two text groups are no longer aligned at the baseline (the bottom of the 'h'). Change it back to 32 px and they are aligned. Given the .bottomalign class has em units, both fonts are in arial, and em refers to font size, the descenders of the 'j' would be an equal proportion in both text groups, so any ideas why it dosnt align big genius if you no the answer. will be giving bounty if no one knows this.
http://jsfiddle.net/FX5zq/
css:
.bottomalign
{
position: absolute;
float: left;
bottom: -.24em;
}
.container
{
position: relative;
height: 50px;
overflow: visible;
}
div
{
font-family: arial;
}
.text1
{
font-size: 16px;
}
.text2
{
font-size: 32px;
margin-left: 2px;
color: green;
}
html:
<div class="container">
<div class="bottomalign text1">jh</div>
<div class="bottomalign text2">jh</div>
</div>
My suggestion would be to set the divs to display: inline-block; vertical-align: baseline;. That way, they'll align as you need no matter what size. http://codepen.io/pageaffairs/pen/ucyIt
Edit: second option, mentioned in the note:
http://codepen.io/pageaffairs/pen/jBcxk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: arial;
}
.container div {
display: inline-block;
vertical-align: baseline;
}
.text1 {
font-size: 16px;
}
.text2 {
font-size: 32px;
color: green;
margin-left: 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="text1">jh</div>
<div class="text2">jh</div>
</div>
</body>
</html>
the reason is default line-height varies among different browsers: mozilla is about 1.2, so for the code above to work, it needed a line height reset:
.bottomalign
{
position: absolute;
bottom: -.17em; //arial descends 17% below baseline
line-height: 1;
}
read http://meyerweb.com/eric/css/inline-format.html
Here is a javascript code which will adjust the two divs dynamically. Ignore if you are looking for an answer based on css only:
you will have to remove "bottom: -.24em;" from bottomalign class and use the following script tag
document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px';
Code below:
<html>
<head>
<style>
.bottomalign
{
position: absolute;
float: left;
}
.container
{
position: relative;
height: 50px;
overflow: visible;
}
div
{
font-family: arial;
}
.text1
{
font-size: 16px;
}
.text2
{
font-size: 32px;
margin-left: 2px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="bottomalign text1">jh</div>
<div class="bottomalign text2">jh</div>
<script language="javascript"> document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")
[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px'; </script>
</div>
</body>
</html>
I've worked out a little something and am very interested to know if this is what you are looking for.
TL:DR;
Here is the fiddle
What I did was make use of display: table-cell;. Using your HTML, I used the following CSS:
.bottomalign {
display: table-cell;
}
.container {
position: relative;
height: 50px;
overflow: visible;
display: table;
}
div {
font-family: arial;
}
.text1 {
font-size: 16px;
}
.text2 {
font-size: 32px;
color: green;
}
I gave the container a display: table; and the bottomalign display: table-cell;
Let me know if this is what you are looking for.
You can do this now, with display: flex and align-self: flex-end:
.container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
height: 24em;
}
.bottom-align {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
-webkit-align-self: flex-end;
-ms-align-self: flex-end;
-o-align-self: flex-end;
align-self: flex-end;
}
.text-1 {
font-size: 1em;
}
.text-2 {
font-size: 2em;
}
I have updated your solution.
Please note that the flexbox specification is still changing, and you will have to use prefixes for now, unless you use a tool like autoprefixer.