I am trying to use this code to make a scrollable website but my <p> text won't show. Does anyone have any idea why? I have tried adding both the class as the item reference, but this is not really helping. the link is http://remcovanessen.users41.interdns.co.uk/beerbulance/ if that helps
<body data-hijacking="off" data-animation="scaleDown">
<section class="cd-section visible">
<div>
<h2 class="homepageheader">Beerbulance</h2>
<p> text</p>
</div>
</section>
cd-section {
height: 100vh;
}
.cd-section h2 {
line-height: 100vh;
text-align: center;
font-size: 2.4rem;
}
.cd-section h2.homepageheader{
font-size: 800%;
}
.cd-section:first-of-type > div {
background-color: #09c003;
}
.cd-section:first-of-type > div::before {
/* alert -> all scrolling effects are not visible on small devices */
content: 'Effects not visible on mobile!';
position: absolute;
width: 100%;
text-align: center;
top: 20px;
z-index: 2;
font-weight: bold;
font-size: 1.3rem;
text-transform: uppercase;
color: #09c003;
Because you set line-height: 100vh on .cd-section h2 element. It is currently taking the space of your viewport and pushing the p element below it. If you can't remove/change the line-height set your p element margin to :
p {
margin-top: -16px
}
This will show you the text at the bottom left.
It gets pushed out of the way from your h2 headline <h2 class="homepageheader">Beerbulance</h2>.
You need to re-think your HTML structure.
Related
How would one vertically and horizontally center an anchor tag within a parent block or inline-block level element (div or button), while making the clickable area of the anchor 100% the width and height of the parent element?
I've achieved the desired goal using flexbox, however, I'd like to know how I can do so w/out using flexbox or grid.
Below is an example of the effect using flexbox.
.medium-button {
border: none;
border-radius: 4px;
color: #3a66db;
padding: 0;
}
.medium-button__link {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
height: 48px;
}
<button class="medium-button">
<a class="medium-button__link">
Clickable link
</a>
</button>
Solved it, thanks to #insertusernamehere, an <a/> inside a <button/> isn't valid HTML.
That helped simplify the markup to be an anchor tag that looks like and interacts as a button, instead of having nested elements.
--> simply set the anchor tag as a block-level element so you can specify width and height, then use line-height.
.medium-button__link {
display: block;
width: 200px;
height: 48px;
text-align: center;
line-height: 48px;
background: #3a66db;
color: #fff;
font-family: 'OpenSans-Regular';
font-size: 1em;
border-radius: 4px;
text-decoration: none;
}
<a class="medium-button__link" href="https://sirthisisawendys.com">
Clickable link
</a>
Without using flex property you can achieve the vertical and horizontal align anchor element. Actually whenever you gave the height of element you have to give same LINE-HEIGHT on that element. The line-height property specifies the height of a line. So You have to use same line height on medium-button__link div.
u can do this with display table on the <a> tag and width:100% and height:100%
then add for span children: display: table-cell and vertical-align: middle
.medium-button {
border: none;
border-radius: 4px;
color: #3a66db;
width: 160px;
height: 48px;
padding: 0;
}
.medium-button__link {
width:100%;
height:100%;
display:table;
text-align:bottom;
}
span{
display: table-cell;
vertical-align: middle;
}
<button class="medium-button">
<a class="medium-button__link">
<span>Clickable link</span>
</a>
</button>
I'm a beginner web developer creating my first personal portfolio page. I'm trying to use this particle container as a sort of background hero "video."
Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ
HTML:
<div id="fps"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#fps {
position: absolute;
bottom: 5px;
right: 5px;
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
I'll omit the JS for now since it's pretty long, but it's there in the Codepen if you want to take a look (and see what the particle container actually looks like).
I've been trying to overlay an image and text over the container (like my picture with my name under it), but they either just go above or under it, or disappear entirely (I assumed behind it).
My HTML:
<div class="container-fluid">
<div id="fps"></div>
<div class="row">
<div class="col-lg-3 col-lg-offset-4">
<img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
</div>
My CSS:
html {
font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
#profile-image {
border-radius: 100%;
height: 150px;
background-color: yellow;
}
I haven't modified any of the JS.
Would really appreciate if anyone could give some insight or point me in the right direction to figure out this problem!
You just have to absolutely position your <div>:
.container-fluid{
z-index:1;
position: absolute;
}
Here is the markup:
<div class="test">
// These links are added with JavaScript
Text 1
Text 2
</div>
<h1>
Here is my CSS:
a {
display: inline-block;
float: left;
// Other properties
}
.test {
display: block;
}
My problem is that the div and heading appear side by side. However, I want the heading to appear below the div.
I assumed that using display:block will solve the issue but it doesn't.
I tried adding a <br> tag after the div but that does not work either.
One thing that works is setting a height on .test. The problem with this is that some other users might set a higher font-size, hence,(rendering the height I set on container useless) for links somewhere else and this will mess up the layout.
EDIT:
I have just control over the div and the elements inside it. There can be anything above or below the div. The heading is just for reference.
JSFiddle
Basically, you have two options:
Make .test establish a new block formatting context, e.g. with overflow: hidden.
This will make it grow vertically to include the floats, and then the floats won't affect the header because it will be below them.
.test {
overflow: hidden;
}
.test {
overflow: hidden;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
Clear the header. This will force it to be placed below the floats.
h1 {
clear: left;
}
h1 {
clear: left;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
You can use float:left; clear:left
You need to clear your floats.
.test::after { content: ''; display: table; clear: both; }
https://jsfiddle.net/L5qz7y2p/3/
HTML
<div class="test">
Text 1
Text 2
</div>
<h1>
UI am header
</h1>
CSS
.test {
width:100%;
}
jsfiddle
Edited 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.
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.