This might be a little bulky,
Basically, I like how I have laid out this page, but when I resize the window, since I used position: relative, a lot of the elements overlap once the window is small enough. Additionally, it's usually standard (based on websites I have visited) that when resizing, elements are fixed and that you'd just have to scroll to get to the elements that are off screen, but in this case I have everything scaling with the window size. I am not sure if elements scaling with the screen are a good or bad design, however I would like to fix the overlapping issue. And if it is poor design to scale the elements, I would appreciate any suggestions as to achieving the same result with no scaling.
I have replaced most of the background content with solid colors. Also, I understand that a lot of what I may have already and will do in the future may be shortened with JavaScript, however I still need to learn it :)
Any suggestions regarding structure of classes, headers, tags etc. would be very helpful, this is only my second day of html/css. I am currently looking for online resources regarding these topics!
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
font-family: Open Sans;
color: #FFFFFF;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.6;
}
a:hover {
opacity: 1;
}
h1 {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
opacity: 0.5;
font-size: 3vw;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
border: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
footer {
position: fixed;
bottom: 5vh;
right: 1.5vw;
}
#background-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: green;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#background2-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: red;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#intro .button {
position: fixed;
padding: 0;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 12px;
top: 50%;
transform: translate(0%, -50%);
width: 20vw;
height: 25vh;
transition: all 0.3s ease 0s;
opacity: 0.5;
border-color: black;
border-style: solid;
}
.button.english {
background-image: url('../images/uk_flag.png');
left: 15vw;
}
.button.portuguese {
background-image: url('../images/angola_flag.png');
right: 15vw;
}
.button.english div {
position: absolute;
top: 100%;
left: 48%;
transform: translate(-50%, 0);
color: white;
font-size: 4vw;
}
.button.portuguese div {
position: absolute;
top: 100%;
left: 49%;
transform: translate(-50%, 0);
color: white;
font-size: 3.5vw;
}
#welcome .button {
position: fixed;
padding: 0;
background-position: center center;
opacity: 0.7;
border-color: rgba(255, 255, 255, 0.5);
border-color: white;
border-style: solid;
border-radius: 12px;
width: 20vw;
height: 25vh;
top: 50%;
transform: translateY(-50%);
max-height: 80px;
max-width: 20vw;
}
.button.buy {
left: 15vw;
}
.button.sell {
right: 15vw;
}
.button.buy div,
.button.sell div {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
}
#intro .button:hover,
#welcome .button:hover {
opacity: 1;
border-color: white;
}
.button.buy:hover~#background-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
.button.sell:hover~#background2-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
#videoback {
position: fixed;
top: -64px;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
opacity: 0.2;
}
<!doctype html>
<html lang="en">
<head>
<title>AB</title>
<link href="styles/intro.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<link href="welcome.html" rel="alternate" hreflang="en" />
<link href="welcome_pt.html" rel="alternate" hreflang="pt" />
</head>
<body id="welcome">
<a href="home.html" class="button buy" hreflang="en">
<div>Buy</div>
</a>
<a href="apply.html" class="button sell" hreflang="en">
<div>Sell</div>
</a>
<div id="background-div"></div>
<div id="background2-div"></div>
<video autoplay muted loop id="videoback">
<source src="videos/blessings.mp4" type="video/mp4">
</video>
<footer>
<div>
<nav>
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
<!-- Scripts -->
</body>
</html>
If I understand it correctly, you can solve your problem using bootstrap:
Link it in your html as such:
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Use bootstrap to define rows and their column size:
<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->
<div class="container">
<!-- elements that will be displayed next to each other -->
<div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div class="row">
<!-- three elements that will always be shown next to each other-->
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
</div>
...
</div>
Learn more about bootstrap:
quick tutorial for your needs
Get started with bootstrap 3
Related
When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.
body,
html {
margin: 0;
padding: 0;
}
.gamepage {
position: relative;
height: 100vh;
width: 100vw;
background-size: 100%;
}
/* tabbar */
.header {
position: sticky;
top: 0px;
left: 0px;
height: 10vh;
width: 100%;
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
z-index: 2;
}
#home {
position: absolute;
top: 0px;
left: 0px;
border-style: groove;
}
#how2play {
position: absolute;
top: 0px;
left: 47px;
border-style: groove;
}
#character {
position: absolute;
top: 0px;
left: 137px;
border-style: groove;
}
/* link format */
a:link,
a:visited {
color: white;
text-decoration: none;
font-weight: bold;
}
/* background */
.background {
positon: absolute;
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
height: 100%;
width: 100%;
top: 72px;
left: 8px;
background-size: cover;
z-index: 1;
}
#title {
color: white;
position: absolute;
top: 90px;
left: 5px;
font-size: 35px;
font-family: Courier New;
}
#text {
color: white;
position: absolute;
top: 125px;
left: 25px;
}
#playbutton {
color: black;
position: absolute;
top: 360px;
left: 660px;
font-size: 55px;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<body>
<div class="gamepage">
<div class="header">
<div id="home">
Home
</div>
<div id="how2play">
How to Play
</div>
<div id="character">
Character List
</div>
</div>
<div class="background">
<div id="title">Murder Mystery</div>
<div id="text">Find the murderer, before it's too late...</div>
<a href="homepage/thegame1.html">
<div id="playbutton">Play Now</div>
</a>
</div>
</div>
</body>
I've Tried
Changing all values to %'s
Changing all the values using vh and vw.
This fixed some of the problem but not all
Played around with the absolute and relative positioning/adding div parent tags
All this is very new to me so there might be a simple solution I don't know of
Your HTML and CSS should look something like the example below.
Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid
Look into flexbox and grid for single axis and dual axis positioning
body {
display: grid;
grid-template-rows: 30% 1fr;
min-height: 100vh;
margin: 0;
color: white;
background-color: black;
}
header {
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
}
header ul {
display: flex;
gap: 1rem;
min-height: 10vh;
list-style: none;
}
a:link,
a:visited {
display: inline-block; /* Allows for padding and your rotation of [Play Now] */
color: inherit;
padding: .2em .5em;
background: #000b;
text-decoration: none;
font-weight: bold;
}
main {
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
padding: 2rem;
background-size: cover;
}
h1 {
font-size: 2.5rem;
font-family: Courier New;
}
.playbutton {
color: black;
font-size: 3.5rem;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
<nav>
<ul>
<li>
Home
</li>
<li>
How to Play
</li>
<li>
Character List
</li>
</ul>
</nav>
</header>
<main>
<h1>Murder Mystery</h1>
<p id="text">Find the murderer, before it's too late...</p>
Play Now
</main>
Currently only the banner is working the text inside doesn't move with it. (I have tried overflow: hidden; but isn't work.)
.banner {
background-color: #996633;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
box-shadow: 0px 8px 20px 5px black;
transition: height 0.5s;
overflow: hidden;
}
.banner:hover {
height: 120px;
}
.navbar {
position: absolute;
right: 13px;
top: 17px;
font-size: 15px;
}
#about-page {
position: relative;
right: 130px;
bottom: 43px; /* Example of one of the tabs, the rest same as this */
}
<section class="banner">
<div id="tab">
<nav class="navbar">
<h2 id="about-page">About Us</h2>
</nav>
</div>
</section>
.banner {
background-color: #996633;
width: 100%;
height: 100px;
padding: 40px;
text-align: center;
color: #fff;
}
.banner:hover h2 {
transform: scale(1.5);
transition: transform 0.2s;
}
<section class="banner">
<h2>Hello World</h2>
</section>
I added display: flex; Here is my code running on codepen and basic concepts of flexbox here
I am attempting to get a css box shadow from a circular to appear underneath a nav bar that appears under the image itself. At the moment I can get the image to create a shadow that appears on top of the nav bar but I want it to appear that it is all one object.
I've tried using :before on the class ".logo" and putting the shadow at a different z-index but it just makes the shadow disappear. I'm rather new to web stuff (as well as stack overflow) so any help will be appreciated.
This is the css I'm using and the issue is with the logo class
html{
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius:100%;
box-shadow: 0 2vh 5vh #000000;
}
.topnav {
box-shadow: 0px 2vh 5vh #000000;
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
And the rest of the HTML
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>WOW</title>
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="topnav">
<img class = "logo" src="icon.png"></nav>
</body>
You may use filter: filter:drop-shadow(0px 2vh 5vh #000000); on the nav itself instead a box-shadow.
drop-shadow() follows the shape of the container while box-shadow follows the original shape of the container (rectangle).
see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
example
html {
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius: 100%;
}
.topnav {
filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
<nav class="topnav">
<img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>
I've stuck with styling issues. What I'm trying to reach is make sure that every single h3 tag has same distance between bottom border of his container (pink border) and bottom border of his parent (picture bottom border). Now it looks like this:
Both of them has same css, difference is only with amount of text.
HTML:
<div class="col-6">
<a href='{{link}}' style='background-image: url("{{image}}")' class="histories__image">
<div class="histories__text">
<h3>{{title}}</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
CSS:
.histories {
margin-bottom: 100px;
&__image {
height: 41vh;
margin-top: 33px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: filter 1s;
&:hover{
filter: brightness(80%);
}
&:hover .histories__text{
bottom: 15px;
}
&:hover .histories__underline{
opacity: 1;
left: 0;
width: 70%;
}
}
&__text {
text-align: center;
display: block;
position: absolute;
width: 100%;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
transition: bottom .3s;
color: white;
border: 1px solid pink;
}
&__underline {
position: absolute;
display: block;
bottom: 10%;
width: 0%;
left: 50%;
margin-left: 15%;
background-color: white;
height: 1px;
opacity: 0;
transition: width .3s, left .3s;
}
}
You can try using translate like this to center your content with the same class.
.histories__text{
width: 100%;
}
.histories__text h3{
transform: translate(50%,50%);
}
<div class="col-6">
<a href='{{link}}' class="histories__image">
<div class="histories__text">
<h3>Your Text</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
I have a "lightbox" type og image viewer that I'm using to navigate through some images.
The images have different aspect ratio, and I need to put the arrows on the edge. When I resize the websize the images follows the size of the webpage, which is very good
However, the arrows are just floating away from the image :( Any ideas?
body {
background-image: url("../img/bg-masthead.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
.modal {
position: fixed;
width: 100%;
height: 1000%;
background-color: rgba(0, 0, 0, 0.4);
/* display: none; */
}
.modal-content {
display: inline-block;
width: 95%;
height: 95%;
position: fixed;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
}
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.prev {
top: 50%;
left: 8px;
}
.close {
top: 4px;
right: 8px;
}
.next {
top: 50%;
right: 8px;
}
.arrow {
position: absolute;
color: white;
font-weight: bold;
font-size: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<title>Bilde galleri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div id="lightBox" class="modal">
<div class="modal-content" id="img_container">
<img id="largeImg" src="images/2007/Malayisa/IMG_0243.jpg">
<div class="prev arrow" onclick="plusSlides(-1)">❮</div>
<div class="next arrow" onclick="plusSlides(1)">❯</div>
<div class="close arrow" onclick="document.getElementById('lightBox').style.display='none'">×</div>
</div>
</div>
</body>
</html>