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 4 years ago.
Improve this question
This will probably be a dumb question to ask you guys but I'm fairly new so please bear with me as I am willing to learn.
My problem goes like this, https://alphavirginis.github.io the navigation bar seems to be fine at the landing page, but when you go to the about it seems to have shifted left or if I tried to fix it it'll go to right. I'm quite new to web dev so I'm asking for your help. Thanks!
Here's the github repo https://github.com/AlphaVirginis/AlphaVirginis.github.io
You need to separate .navigation and .box, .right than your markup will be like this.
<div class="navigation">
Home
About
Works
Contact
</div>
<!-- Navigation Ends Here -->
than change some css
.navigation {
text-align: center; // Added
}
than wrap two boxes .box and .right in one wrapper say .box-wrapper
<div class="box-wrapper">
<div class="box">
<img src="img/Lelouch.jpg" alt="" class="box-img">
<h1> Lelouch Lamperouge </h1>
<h5> Web Developer - Software Developer </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
</div>
<div style="padding-top: 10px"></div> <!-- Prevenets Margin collapse -->
<div class="right">
<img src="img/Lelouch.jpg" alt="" class="box-img">
<h1> Lelouch Lamperouge </h1>
<h5>Web Developer - Software Developer<!--5--></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
</div>
</div> <!-- box-wrapper Ends Here -->
set the width of .box-wrapper as per your requirement
.box-wrapper::before, .box-wrapper::after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
.box-wrapper {
width: 100%;
max-width: 1170px; // change as per your requirement
margin: 0 auto;
}
.navigation in the about page you have to give text-align:center css.
It Would solve the problem.
Related
This question already has answers here:
How to have to background images side by side in CSS
(3 answers)
Closed 2 years ago.
I'm trying to place 2 images side to side and have some text in the center of both images, but after adding the first image in CSS with background :(url) , I cannot add a second image because it just overrides the first one and I put images directly in a div , I cannot place text inside them.
As you can see in the below HTML that if I put one image in HTML and I through CSS, I cannot place text over it and if I place it in the CSS ,they just override each other.
HTML and CSS
#image{
height: 400px;
background-color: black;
background: url("https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg");
}
<section id="images">
<h1>affortable shit</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>
Screenshot Just replace your code with this.
Use a section tag selector in css
section{
height: 400px;
background-color: black;
background-image: url(https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg);
}
<section id="images">
<h1>affortable shit</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>
Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.
I need this behavior, but with a sticky element.
I hope the code explains it all:
(also have it on JSFiddle)
const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
showTooltip = !showTooltip;
if (showTooltip) {
tooltip.classList.add('shown');
} else {
tooltip.classList.remove('shown');
}
})
#container {
height: 19rem;
overflow-y: scroll;
}
.info {
background: lightblue;
padding: .5rem;
}
#tooltip {
background: gray;
position: sticky;
bottom: 0;
margin: 0 2rem;
opacity: 0;
padding: 1rem;
}
#tooltip.shown {
opacity: 1;
}
<div id="container">
<div class="content info">
Click in this div to hide/show the tooltip.
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div id="tooltip">
This tooltip should not occupy its initial space at the bottom of its parent div...
<br><br><br>
But yet its space is taken into consideration. Scroll down to see...
</div>
</div>
Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...
I'm afraid I don't have a sample but I was able to achieve this with something like:
.sticky-element
{
position: sticky;
height: 0px;
overflow: visible; // not strictly needed
}
.content
{
position: relative;
top: -100%; // or calc(-20px - 100%) to add margin
}
Then:
<div class="sticky-element">
<div class="content">
....
</div>
</div>
In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.
The best thing about this is it doesn't require you to know the height of the sticky element.
There may be some side effects but it's working OK for my needs.
I think if you switch between
display:none;
and
display: block;
rather than opacity. Then the initial white space that is being occupied at the end will not appear.
You are using opacity: 0;
to hide your element.
Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.
The better idea would be to just get rid of it for the time being:
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
Here is working JSFiddle:
https://jsfiddle.net/dyabgve5/26/
EDIT:
I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.
Or.. you can try moving that sticky class behind container like this (it works):
</div> - end of div container
<div id="tooltip">
This tooltip should not occupy it's initial space at the bottom of it's parent div...
<br><br><br>
But yet it's space is taken in consideration. Scroll down to see...
</div>
Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.
You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>
So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!
For some reason centering items in this Bootstrap example doesn't seem to be working the way that it normally would with CSS using the table/table-cell method of:
<div class="parent" style="display:table">
<div class="child" style="display:table-cell; vertical-align:middle>
<h1>This is the lockup to be centered</h1>
</div>
</div>
The Bootstrap version of something I'm working on is as follows:
<div class="container">
<section class="hero--section col-lg-12">
<div class="col-lg-6 col-lg-offset-3 text-center hero--content">
<h1>Bore'em Ipsum</h1>
<p class="lead">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis totam numquam id quidem eligendi temporibus ullam cupiditate, assumenda, qui eaque deserunt libero, vitae sed expedita dolores laborum iusto accusamus facere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quam eveniet dolorem sapiente reiciendis dolorum sit nam debitis odio optio, dignissimos, dolor nulla rerum earum aliquid molestias! Culpa, odit, quo!</p>
<p><a class="" href="#"><img src="//placehold.it/20x20" alt=""></a></p>
</div>
</section>
</div>
With the following CSS:
.container {
background:lavender;
display:block;
}
.hero--section {
display:table;
height:535px;
}
.hero--content {
display:table-cell;
vertical-align: middle;
}
Example of issue here:
http://codepen.io/pdnellius/pen/bEPXyG.
Anyone have an idea what I'm missing here? This is my goto method for vertical centering. I know I could probably use transform to solve this. But I'd like to know the 'why' behind why this isn't working. Is something being overridden?
Bootstrap is floating your table and table cell elements with float: left on both.
Add this to your CSS:
.hero--content {
display: table-cell;
vertical-align: middle;
text-align: justify;
float: none; /* NEW */
}
If the floats are essential to your layout, then try another centering solution. Here's a flex alternative:
.hero--section {
display: flex;
height: 535px;
}
.hero--content {
margin: auto;
}
Revised Codepen
In a flex formatting context, floats are ignored.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
I'm trying to make it so inside of this row there are two equal columns; text on the left side with an image on the right. The problem is when I set my first col as text and my second column with the image, I get what I want except once everything collapses my image is stacked below my text. I want my image to be above my text once stacked. I've tried using pull right but then my image is no longer centered once everything is stacked. How can I get my image on the right and my text on the left and have my image centered and above my text once stacked?
<div class="row">
<div class="col-lg-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-lg-6">
<div class="center-col">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div>
</div> <!-- end row -->
Looks like you have to offset the columns:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div> <!-- end row -->
And here is a jsbin for you. And a link where you can read more.
Btw. I had to use the "sm" grid because my screen is small, but I think you get the idea :) -- Good luck!
You want to use Gorm Casper good answer and use it at md size or even look at using #media to show not show different containers with a reverse set up have a look at this Fiddle.
Resize the window to see how it flows.
#media (min-width: 1200px) {
.desktop{display: block; }
.tablet{display: none; }
}
#media (max-width: 1200px) {
.desktop{display: none; }
.tablet{display: block; }
}