This is a very strange problem I've encountered. Everytime I add more content to the main content the sidenav links aren't able to be clicked on. Here is an example of the sidenav without main content:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
</div>
</body>
Here is an example with main text:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
</body>
Maybe I messed something up with the <style> section? I mostly don't really know what is happening around there, especially with margins and padding and maybe I've overridden the margins with the main body. I have also seen examples of sidebars made as an entirely different html page within another, and maybe that could help. If you could also help me figure out how to fix the sidebar as well as make it scrollable instead of it filling the whole page, that would be appreciated, thanks.
The z-index property specifies the stack order of an element:
div.sidenav {
width: 240px;
position: absolute;
z-index: 10;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
also it is better to use flex or grid
Related
My html code works fine in chrome but not in firefox. Issue happens when you click "see more" [modal] to see the description. I narrowed down to modal css property being the issue. When i change the position from fixed to relative, firefox it works but it messes with other style components. Can you please help here.
https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.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">
<title>Popoup in javascript</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
background-size: cover;
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
overflow: hidden;
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .contentBx {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
</style>
<style>
[modal] {
opacity: 0;
position: fixed;
top: 120%;
bottom: 0;
left: 0;
right: 0;
color: white;
background: #ffffff38;
backdrop-filter: blur(10px);
overflow: hidden;
transition: 1s linear 0s all;
}
[modal="active"] {
opacity: 1;
top: 0%;
}
[modal]>.modal {
display: contents;
}
[modal]>.flexbox_column {
margin: 0;
}
[modal]>.modal>.modal_header {
display: grid;
grid-template-columns: auto 24px;
padding: 10px;
}
[modal]>.modal>.modal_header>h4 {
font-weight: 500;
}
[modal]>.modal>.modal_header>._close {
cursor: pointer;
}
[modal]>.modal>.modal_content {
height: 100%;
padding: 10px;
border-radius: 16px;
overflow: scroll;
}
[modal]>.modal>.modal_content::-webkit-scrollbar {
width: 5px;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-track {
background: #e2e2e2;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
[modal]>.modal>.modal_content>img {
max-width: 100%;
object-fit: cover;
filter: opacity(0.8);
}
[data-modal] {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header">
<h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header">
<h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
I have a problem with my footer. My footer is under the right section but I want that it will be under the main section on the full-width container.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #1F0057;
}
.container {
width: 1400px;
margin-left: 15%;
float: left;
}
nav ul li img {
width: 25px;
padding-left: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
vertical-align: middle;
padding-left: 5px;
color: #DAA520;
text-decoration: none;
text-transform: uppercase;
font-size: 1.2rem;
/* border: 1px solid yellow; */
}
nav {
background-color: #1F0057;
width: 100%;
height: 1em;
/* border: 1px solid yellow; */
}
.header {
font-size: 4rem;
color: white;
background-color: rgb(220, 189, 222);
width: 100%;
}
.title {
text-align: center;
color: #696969;
}
main article section {
float: left;
height: 60vh;
}
#first {
/* background-image: url(); */
background-image: url("gimp/cpu1.png");
/* usun "color" */
color: white;
width: 20%;
/* width: 300px; */
}
#second {
padding: 2%;
width: 60%;
height: auto;
background-color: #fff;
background-color: #4800CF;
/* width: 900px; */
}
#third {
width: 16%;
background-color: #5600F5;
height: auto;
/* width: 188px; */
}
main article section header {
font-size: 1.8em;
font-weight: bold;
padding: 2%;
}
main article section figure {
font-size: 1.2rem;
font-weight: bold;
margin-top: 3%;
box-shadow: 2px 2px 5px black;
}
main article section figcaption {
font-size: 1.1rem;
text-indent: 1.5em;
padding-top: 2.5%;
text-align: justify;
}
.secondmainmargin {
/* margin: 2%; */
}
.footer {
background-color: white;
font-family: 'Robocot';
font-size: 1.4rem;
text-align: center;
color: #fff;
float: right;
}
.link {
padding: 2%;
}
<div class="container">
<header class="header">
<div class="title">
Podstawowe podzespoły i parametry sprzętu komputerowego
</div>
<nav class="navbar">
<ul>
<li><img src="img/house.png" alt="domek"></li>
<li>Obudowa</li>
<!-- !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
<li>Płyta główna</li>
<li>Procesor</li>
<li>Karty rozszerzeń</li>
<li>Pamięć Operacyjna</li>
<li>Pamięci masowe</li>
<li>Zasilacz</li>
<li>Inne</li>
</nav>
</header>
<main class="main">
<article>
<section id="first">
<img src="gimp/cpu1.png" alt="procesor" width="100%;">
</section>
<section id="second">
<header>
Nagłówek sekcji
</header>
<div class="secondmainmargin">
<figure>Podtytuł pierwszy</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore laborum explicabo beatae dignissimos consectetur, asperiores quod, culpa velit expedita vitae, id hic voluptatem soluta eius alias. Animi sequi deserunt dolorem incidunt iure laudantium
laborum nemo quia ullam blanditiis, voluptatem ea a odit quae, repellendus dicta consequuntur provident ab exercitationem itaque molestias, dolor. Et, ipsa, iusto. Deserunt labore provident ad adipisci sed aliquid natus nihil.
</figcaption>
<figure>Podtytuł drugi</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi laborum repudiandae error temporibus ullam consectetur in molestiae exercitationem quos, expedita cum, odit voluptatum quod illo vitae. Dolorum aperiam unde ducimus maxime aut
iusto distinctio ipsum nisi eveniet illo atque tempore, eius error ex, cupiditate! Provident doloribus voluptatibus dignissimos, sed!
</figcaption>
<figure>Podtytuł trzeci</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis ducimus beatae doloribus possimus fugiat iste aliquid, laudantium ab omnis veniam porro nemo explicabo. Inventore totam consequuntur expedita, distinctio exercitationem, eaque sint accusantium
libero voluptas sunt eligendi. Dolorum enim, consectetur perferendis veritatis impedit adipisci quo optio maiores odit accusantium tempora eaque blanditiis explicabo eligendi nam dolore placeat natus pariatur?dawdawdadawd Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Amet, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ipsa pariatur a, sequi provident id dolor cupiditate dolorum consectetur, ea aliquid sint nesciunt nobis perspiciatis vitae
deserunt, molestiae odit fugit. Tempore quae natus enim reprehenderit aspernatur ratione illo neque assumenda, beatae nihil, ipsa incidunt minima, qui? Delectus animi velit quam distinctio est rem, itaque tempore placeat odio tenetur ipsam
iure consequuntur ex dolorum nulla sunt provident quibusdam harum fugiat et. Ex praesentium sunt, est qui distinctio. Laboriosam quo molestias neque numquam autem suscipit impedit, quaerat optio dolores veritatis sint sequi dolorem necessitatibus
molestiae, ex, incidunt modi porro eius natus perspiciatis!
</figcaption>
</div>
</section>
<section id="third">
<div class="link">
<header>Linki</div>
</header>
</section>
</article>
</main>
<footer class="footer">
Made by: Filip
</footer>
</div>
code with css: https://codepen.io/FilipoV/pen/jOyyNxR
add this to your .footer-class:
.footer{
display:block;
clear:both;
}
and remove
float:right;
I'm trying to put an image on the left side, and text on the right side. I've managed to do this, however, the text goes all the way till the end of the page until it breaks off onto a new line, which is not what I want it to do. I'd like it to stop around the same Y position as my navigation bar stops, but I'm not sure how to do it. I've looked around and tried a few different methods, but none of them seemed to work.
MY HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoL</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#Best champions for each role"><img src="assets/lol.png" alt="Logo"
id="image1"></a>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>Farming</li>
<li>Best champions for each role
</li>
</ul>
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<p1>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p1>
<banner></banner>
</body>
</html>
MY CSS
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
width: 30%;
right: 200px;
margin-left: 285px;
float: left;
border: 5px;
border-style: groove;
border-color: black;
}
ul {
top: 150px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 5px;
}
As you designed all different tags in your CSS you should also design the p1text properly.
A dirty and quick fix would be something like:
p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 50px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
}
Change your current p1 css to this one. This is NOT clean code, but as you noted it's a school project which need to be done within 6 hours, just do it dirty as above.
Good luck at your school's project.
I need help aligning my button to the middle (horizontally and vertically) of my screen. The button is over an image. I know there are similar questions like this on here, but I tried every advice and nothing seemed to work. I think it might be because my button is on top of an image that is at 100% in width and height, in other words, the image is a fullscreen image that takes up the whole page.
My button is at the top left corner of the screen.
body {
width:100%;
height:100%;
background-image: url("space.jpg");
}
.button {
margin:auto;
display:block;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
<img src="space.jpg">
Update:
Create a <div> with fixed dimensions and add your background to it.
Adjust the size of the <div> according to your needs.
Put your button inside that <div>
Position the button inside the <div> and give it position:absolute - in relation to its parent
Use the transformproperty as well as top / left / right / bottom
/* relevant starts here CSS */
.mycontent {
width: 100vw;
max-width: 100%
}
.button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background: #fff;
font-size: 1.2em;
border: 1px solid #777;
padding: 0 .6em;
color: #000;
opacity: .6;
}
.button:hover {
opacity: 1;
cursor: pointer;
}
.topcontent {
height: 100vh;
width: 2560px;
max-width: 100%;
background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
background-size: cover;
}
.othercontent {
background: #010101;
padding: 20px 40px 20px 40px;
}
/* irrelevant starts here CSS */
body {
max-width: 100%;
padding: 0;
margin: 0 auto;
color: #999;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
margin: 0 auto;
padding: 20px;
text-align: justify;
text-justify: inter-word;
}
<body>
<div class="mycontent">
<div class="topcontent">
<button class="button">Menu</button>
</div>
<div class="othercontent">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
</div>
</div>
</body>
You can do that using CSS3 flex-box concept.
absolute center property
set parent (here it's wrapper): display:flex;
then set child (here it's button): margin:auto;
It will be positioned on absolute center. I've added the snippet below.
html,body {
height:100%;
width:100%;
}
.wrapper {
display:flex;
align-items:center;
width:100%;
height:100%;
background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.button {
width:100px;
margin:auto;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
please add this code into your css :
button {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
}
img {
width: 100%;
}
Hope it will work for you
Thanks
Try this one:
body {
width: 100%;
height: 100%;
position: relative;
}
img {
width: 100%;
}
button{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: #000;
padding: 6px 12px;
border: solid 1px #000;
border-radius: 5px;
color: #fff;
min-width: 150px;
}
Try this:
.wrapper {
width:100%;
height:100vh;
background-image: url("https://unsplash.it/800/400/");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
display:block;
}
.button {
width:100px;
position: absolute;
bottom:50%;
left:50%;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
Can anyone help me with why the left side of this article is sitting down from the top of the section? I have shown this in the below image.
I have used Chrome developer tools to try and find the problem but I can't see anything in the gap or margins that would indicate such behaviour?
main {
border: 1px solid white;
}
main>section {
border: 1px solid black;
}
main>section>h3 {
border: 1px solid black;
width: 98%;
text-align: center;
padding: 2px;
margin: 2px 2px;
height: 10%;
}
main>section>article {
display: inline-flex;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 300px;
max-height: 400px;
}
main>section>article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px;
height: 90%;
margin: 1px 1px;
}
main>section>article.aright {
border: 1px solid black;
width: 68%;
padding: 1%;
height: 90%;
margin: auto;
}
<main id="content">
<section class="part">
<h3>Latest News</h3>
<article class="aleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.
</article>
<article class="aright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione
in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere
harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.
</article>
</section>
</main>
It's being caused by uneven padding on your article elements.
main > section > article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px; /* pixel unit */
height: 90%;
margin: 1px 1px;
}
main > section > article.aright{
border: 1px solid white;
width: 68%;
padding: 1%; /* percentage unit */
height: 90%;
margin:auto;
}
Matching the units for both – percentages or pixels – solves the problem.
you may use this code
main>section {
border: 1px solid white;
display: flex;
flex-wrap: wrap;
}
and replace the CSS you have for main>section
Hope this helps
Take care and happy coding