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;
}
Related
I have a container that holds images of work. How do I use JS to bring up a button and some extra info on the image when I hover over it.
I tried using CSS and the hover tag but it would apply the effect I needed below the image, Not on top of it. The page is HTML, with CSS and the only JS code will be for this effect. The site is for my portfolio so each image is different but the class is all the same. The code below is what the original code is without the effect. If you could show me how to correctly do this I would really appreciate it, thanks.
I don't have the code I tried using before as I tried that many it felt pointless. I'll edit the question when I attempt another solution and post either the failed attempt or the successful attempt.
Here is a JSFiddle link
Welcome to StackOverflow!
So it seems like you only wanted to use the JavaScript as a fallback since you couldn't get the CSS to work. I would recommend against this as you may run into various compatibility issues between browsers and browser versions if you're not using a Polyfill.
To do this in CSS, I would recommend creating a container for each work item. In my example, I created a .item class and used that to contain the image and text. Once that was created, we can now look for a :hover on each .item and use that to modify the elements inside of our .item.
Let me know if you need me to clarify any part of my explanation or if I misunderstood any parts of your question.
.item {
width: 50%;
margin: 0 auto;
}
.wrapper {
text-align: center;
}
.work_container {
display: inline-block;
position: relative;
/* width: 1200px; Removed for testing */
height: 100%;
text-align: center;
}
.work_title {
display: inline-block;
width: 100%; /* Changed for testing */
height: 30px;
position: relative;
top: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 500;
color: black; /* Changed for testing */
/* Used for the animation */
opacity: 0;
transition: 0.3s;
}
.work-hub {
width: 100%; /* Added for testing */
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
-webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}
/* Run the hover on the container */
.item:hover .work_title {
opacity: 1;
}
<main>
<div class="wrapper">
<div class="work_container">
<div class="item">
<h1 class="work_title">Logo Visualisation</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Rock Banner</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Forest Fire</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Beach Body</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
</div>
</div>
</main>
I want to make a website that has a space at the top for a searchbar and then 4 divs in a layout like in
this image
I'm using d3 so the idea would be to represent the data in different ways, but I want the divs to adjust to the window, so something like this:
<div id ="main-bar">
</div>
<div id="view">
<div id="topLeft" class="linked-container" >
</div>
<div id="topRight" class="linked-container">
</div>
<div id="botLeft" class="linked-container">
</div>
<div id="botRight" class="linked-container">
</div>
</div>
But I don't know how to make them adjust to the window size.
I'm not pretty good at web developing so I wanted to know how could I do this in a simple way. Any suggestions?
Thanks in advance.
Edit: People are telling me I should not ask for tutorials, which is true. Anyway thanks for your answers, this is what I ended up doing:
#main-bar{top: 0; left:0; width:100%; min-height: 40px; height:10%; position: fixed; background-color: pink; }
#topLeft{top:10%; left:0; background-color: blue;}
#topRight{top:10%; left: 50%; background-color: red;}
#botLeft{top:55%; left:0; background-color: green ;}
#botRight{top:55%; left:50%; background-color: orange;}
I will look into media queries so I can better adjust the searchbar cause the min-height property is not doing what I want.
the best way to align the divs in css is with flexbox.
Check the flexbox guide here.
This should solve your problem: Working JSfiddle
<div class="wrapper">
<div class="search">Searchbar</div>
<div class="row1">
<div class="aside-1">Data #1</div>
<div class="aside-2">Data #2</div>
</div>
<div class="row2">
<div class="aside-3">Data #3</div>
<div class="aside-4">Data #4</div>
</div>
</div>
.wrapper, .row1, .row2 {
display: flex;
flex-flow: row wrap;
}
.search, .row1, .row2, .aside-1, .aside-2, .aside-3, .aside-4 {
flex: 1 100%;
}
.search {
background: tomato;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.aside-3 {
background: deepskyblue;
}
.aside-4 {
background: green;
}
#media all and (min-width: 600px) {
.aside-1, .aside-2 { flex: 1 auto; }
.aside-3, .aside-4 { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.aside-1 { order: 1; }
.aside-2 { order: 2; }
.aside-3 { order: 3; }
.aside-4 { order: 4; }
}
body {
padding: 2em;
}
You can use the flex property if you want to adjust the size of your divs. Include the below given css in your stylesheet and you are good to go .
#view{
display:flex;
flex-wrap:wrap;
}
.linked-container{
width:50%;
height:200px;
}
You can check the working example in this jsfiddle link .
Also , for more info on flex css property try out this css-tricks link
You should learn Media queries, it will be helpful. Resize window to see.
EX: What media queries do.
Desktop
Mobile
Based on question,
body {
font-family: sans-serif;
font-size: .9rem;
}
h1 {
text-align: center;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus {
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 95%;
padding: 5px;
padding-bottom: 2cm;
}
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 98%;
}
.autowide img {
float: left;
margin: 0 .75rem 0 0;
}
.autowide .module {
background-color: #00B4CC;
border-radius: .25rem;
margin-bottom: 1rem;
}
.autowide .module p {
padding: .25rem .75rem;
}
/* 2 columns: 600px */
#media only screen and (min-width: 600px) {
.autowide .module {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .module {
width: 31.623931623931625%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .module {
width: 23.076923076923077%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(4n+0) {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="autowide">
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=1" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=2" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=3" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=4" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
</div>
See here: https://jsfiddle.net/
#main-bar {
height: 50px;
width: 100%;
background: green;
}
#view {
display: flex;
width: 100%;
flex-wrap: wrap;
> * {
flex: 1 0 50%;
height: 200px;
display: block;
&:first-child {
background: red;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3) {
background: purple;
}
&:last-child {
background: orange;
}
}
}
Note that this uses flex so you'll need to make some fallbacks/tweaks for specific browsers. I'd usually do this with some PostCSS Autoprofixers to help with browser support.
All the best!
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.
I have hover effects I am using that work great for desktop but need them to work on mobile devices as well. I tried to follow a Youtube video on adding iosTouch with mootools to allow a hover like effect for ios devices. I am doing something wrong in my code and can't get it to work. I added the mootools to my head. Here is the rest of my code.
<div class="page" id="resume">
<div class="container-fluid">
<h2>Resume</h2>
<div class="row">
<blockquote class="col-sm-6" id="qualifications">
<div class="quote">
<span class="intro" id="iosTouch">Qualifications</span>
<span class="more">
<ul>
<li>Excellent communication skills, both oral and written</li>
<li>Ability to quickly learn and apply new technologies</li>
<li>8 years of experience developing curriculum for instructor-led, web-based and blended modalities</li>
<li>2 years of experience creating HTML web pages including the testing and debugging of code</li>
</ul>
</span>
</div>
</blockquote>
</div><!--row-->
</div><!--content container-->
</div><!-- resume page -->
The JS I added is:
//fix hover events for ios
$("iosTouch").addEvents({
touchstart: function() {
$("iosTouch").addClass('more');
},
touchend: function() {
$("iosTouch").removeClass('more');
}
});
My CSS is:
#resume {
padding: 0;
border-top: 40px solid transparent;
}
#resume blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}
#resume blockquote .quote {
background-color: rgba(255,255,255,.8);
padding: 20px 5%;
position: absolute;
bottom: 0;
width: 75%;
font-weight: 400;
border-radius: 0 50px 0 0;
}
#resume blockquote .quote:hover {
background-color: rgba(255,199,96,.9);
}
#resume #qualifications {
background:url(../images/resume_qualifications.jpg) no-repeat center center;
background-size: cover;
}
#resume .quote .more {
opacity: 0;
font-size: 0;
line-height: 0;
padding-top: 10px;
}
#resume .quote:hover .more {
font-family: "Open Sans", sans-serif;
font-weight: 100;
display: block;
opacity: 1;
font-size: .8em;
line-height: 120%;
}
#resume .quote .intro::after {
content: '...';
}
#resume .quote:hover .intro::after {
content: '';
}
Any help you can provide is greatly appreciated
You're simply using the jQuery ($) function wrong. Replace $("iosTouch") with $("#iosTouch").
This is because jQuery attempts to emulate css selectors for getting DOM objects, and in CSS, # targets divs.
Without the # it implies that you want to perform the function on a tag called iosTouch.
I have a question in regards HTML I want my text to be in the middle of the image not outside of the image. It has to be inside the image in a specific X and Y position.
My code so far:
<center>
<div style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; overflow: show;'>
<div id='loadingtext' style='margin-top: 10px; color: #666; font-family: Arial; font-size: 12px; font-weight: bold;'>Loading Text..</div>
<img src='http://oi58.tinypic.com/2wmou89.jpg'>
</div>
</center>
<div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
</div>
</div>
I would like the text to be in the middle of the image so that people can see the loading text in the middle of the image.
1st: Please remove the keyword "javascript" and replace it by "css" ;)
2nd: The following is a most easy CSS solution. You would need another solution or javascript if the text cannot have a fixed width. But I would suggest to use a fixed width anyway because long lines are ugly.
Forget about the terrible z-index solutions. We do not need z-index. The order of the elements has the same purpose.
3rd: solution
<div style="position: absolute;">
<img src="http://oi58.tinypic.com/2wmou89.jpg">
<div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>
margin-top is 0-(font-size/2) and margin-left is 0-(width/2) ...
You just have to change the containing div's position from absolute to relative and set the div with the id=loadingtext to absolute , z-index and position it according to your needs (eg: left:50%; top:50%;) and the text will be on top of the image.