Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I have been trying to make text show on my contact form, but without success. Where am I going wrong?
I tried changing the fonts but that didn't work.
https://jsfiddle.net/1ryby94m/
<!DOCTYPE html>
<html>
<head>
<title> Kontakt </title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<h1 align="center">
<img src="logo.png" alt="A.Willi A.G" />
</h1>
<div class="menu_div">
<ul>
<li>Home</li>
<li class="dropdown">
Bewerber
<div class="dropdown-content">
Info
Jobs
</div>
</li>
<li class="dropdown">Kunde
<div class="dropdown-content">
Personalverleih
Werkzeuge Mieten
Referenzen
Qulität, Sicherheit und Weiterbildung
</div>
</li>
<li>Kontakt</li>
</ul>
</div>
<div class="fadein">
<img src="welder1.png">
<img src="welder2.png">
<img src="welder3.png">
</div>
<div class="fadein img">
</div>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</body>
</html>
body { font-family: verdana; background:white ; color: white; }
.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
#keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:absolute; height:102px; width:50px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
.menu_div {
position: relative;
z-index: 0;
border: dashed;
height: 2.9em;
margin-bottom: 0em;
margin-top: 0em;
z-index:1000;
}
.fadein {
position: relative;
z-index: 3;
background: ;
width: 100%;
left: 1px;
top: 0em;
}
.fadein img{
margin:0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 500%;
}
.tech-slideshow {
height: 200px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
opacity: 1;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the limits of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
div + div {
margin-top: 1em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text field have the same font settings
By default, textarea are set with a monospace font */
font: 1em verdana;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text field with their label */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It works only on Chrome, Firefox and Safari */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra magin represent the same space as the space between
the labels and their text fields */
margin-left: .5em;
}
You are setting the font color to white in your body CSS.
Either change that, or add:
label {color: black;}
Fiddle: https://jsfiddle.net/t39ey3u3/
This is because the color of your body is white, remove it or add,
body {
color: black;
}
Related
I'm trying to make an animated border for a div. I unhid the overflow of its formatting element so that I could see what the issue was. I'd like to make the center of rotation the center of the larger div.
I know I can make the center of rotation higher by setting the width and height of the before psuedoelement to that of its container, but I want to make it taller because if I set the width and height to its formatting element, it's too small and doesn't cover the edges.
I've tried using CSS positioning, but it isn't working and I have no idea why.
<div class="center">
<div class="wrapper">
<div class="directory module">
<div id="header" class="small_wrapper center">
<div class="module">
<p style="font-size: 22px">Placeholder</p>
</div>
</div>
<div class="directory_bar small_wrapper center"><div class="module">About Me</div></div>
<div class="directory_bar small_wrapper center"><div class="module">PC Builds</div></div>
<div class="directory_bar small_wrapper center"><div class="module">Original Characters</div></div>
<div class="directory_bar small_wrapper center"><div class="module">Games & Loadouts</div></div>
<div class="directory_bar small_wrapper center"><div class="module">Socials</div></div>
</div>
</div>
</div>
#charset "utf-8";
#keyframes rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
html {
font-size: 3.0vh;
}
body {
background-color: #2C2C2C;
font-family: Urbanist, sans serif;
color: white;
}
p {
margin: 0;
}
.left, .right, .center {
position: relative;
}
.center {
margin-left: auto;
margin-right: auto;
}
.module {
background-color:#2C2C2C;
text-align: center;
padding: 10px;
border-radius: 18px;
z-index: 1000;
position: relative;
}
.wrapper, .small_wrapper {
position: relative;
width: fit-content;
height: fit-content;
background: blue;
z-index: 1000;
}
.wrapper {
border-radius: 20px;
padding: 4px;
}
.wrapper::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to right, rgb(255, 0, 0), rgb(145,
255, 0), rgb(189, 1, 180));
animation: rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
content: '';
border-radius: 20px;
height: 1000px;
}
.small_wrapper {
padding: 3px;
}
.directory_bar {
margin-top: 5vh;
}
.directory {
padding: 5vh;
}
.center > .wrapper {
margin-left: 100px;
}
.directory_bar, #header {
border-radius: 8px;
}
.directory_bar > .module, #header > .module {
border-radius: 7px;
}
The problem I am having is that I have a margin or a container somewhere that is creating an unwanted scroll bar horizontally on the bottom of my webpages. I am using my contact page since it is my page with the least amount of content, even though I am having the issue across all of my other 5 pages linked on this website. I know it will be something simple and would love an extra pair of eyes who could maybe shed some light onto where the issue is. Thanks in advance. Please let me know if there is anything else I can provide for further details. Thanks in advance.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<link href="css/style.css" rel="stylesheet" type="text/css"><link rel="preconnect"
href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght#500&display=swap" rel="stylesheet">
</head>
<div class="IMGLogo">
<img src="images/RJL photography_Logo.svg" alt="LOGO" width="370.026" height="65.492" ></div>
<div id="wrapper">
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
-->
<ul id="menu">
<li>Home</li>
<li>Projects</li>
<li>Lofts</li>
<li>Balcony/Rooftop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div>
<main>
<br>
<br><h1>Contact</h1>
<p class="pbox"> The folks at RJL Photography are eager to make your moments last a lifetime. Inquire
below.</p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<div class="card">
<img src="images/New/Contact/RyanBio.JPG" alt="Ryan Bio" style="width:100%">
<h1>Ryan Luber</h1>
<p class="title">CEO & Founder, RJL Photography</p>
<p>Frederick, MD</p>
<p>443-222-3333</p>
<p>RJLPhoto#RJLP.COM</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
<br>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="pnumber">Phone Number</label>
<input type="text"
id="pnumber"
name="phonenumber"
placeholder="Your phone number..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Description of your desired Photoshoot."
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</main>
<!--wrapper--></div>
<footer>© RJLPhotography 2020 </footer>
</html>
wrapper {
margin: auto;
width: 100%;
}
body {
align-content: center;
margin-top: 0;
margin-left: 30;
margin-bottom: 0;
}
article {
background-image: url("../images/BAR.svg");
width: 82%;
padding: 20px;
position: relative;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-family: 'Lora', serif;
}
h2 {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
margin-left: -200px;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
body {
margin: 20px;
position: relative;
/* make it look decent enough */
background: white;
color: gray;
}
.IMGLogo {
margin: 0 0 0 0;
width: 370.026px;
height: 65.492px;
position: absolute;
left: 40px;
top: -40px;
}
p.pbox {
margin-left: 400px;
margin-right: 400px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
img {
/*display: block;
object-fit:cover;
*/
width: 80%;
height: 90%;
margin-top: 80px;
margin-right: 80px;
margin-left: 0;
margin-bottom: 80px;
max-width: 1000px;
border-radius: 8px;
}
.center {
/*display: block;*/
margin-left: auto;
margin-right: auto;
width: 76%;
}
main {
padding-left: 65px;
position: static;
margin-top: 40px;
width: 100%;
}
#BARcenter {
width: 60%;
height: 100%;
position: relative;
top: -100px;
left: 60px;
z-index: 50;
}
#BARcenter img {
width: 40%;
height: 40%;
}
#menuToggle {
display: block;
position: relative;
top: 130px;
left: 30px;
z-index: 100;
-webkit-user-select: none;
user-select: none;
right: auto;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5)!important;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: black;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.4;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: gray;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
footer {
text-align: center;
}
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 0px;
/* Place the button at the bottom of the page */
left: 30px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: black;
/* Set a background color */
color: white;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 25px;
/* Some padding */
border-radius: 10px;
/* Rounded corners */
font-size: 18px;
/* Increase font size */
}
#myBtn:hover {
background-color: #555;
/* Add a dark-grey background on hover */
}
On your main tag remove
padding-left: 65px;
and on your MenuToggle remove
left: 30px;
That fixes your issue of having an horizontal scroll bar.
You will then have to have a play about with your hamburger menu and contact text.
Try using position absolute rather than relative on your menuToggle.
I want to make borders to be consistent throughout the pages. What do you think is the best method to do this? I have added an image below, I had in mind to have the red areas blank, cutting the menu borders and all the rest on the sides so it all looks aligned and centered. thanks a mil
https://jsfiddle.net/q97kob5b/
HTML
body {
font-family: verdana;
background: white;
color: black;
}
.menu_div {
background-color: #333;
width: 100%;
}
ul {
list-style-type: none;
margin: 0 auto;
display: table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
#keyframes fade {
0% {
opacity: 0;
}
11.11% {
opacity: 1;
}
33.33% {
opacity: 1;
}
44.44% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.fadein {
position: absolute;
height: 102px;
width: 50px;
outline: 1px solid blue;
}
.fadein img {
position: absolute;
left: 0;
right: 0;
opacity: 0;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
}
.fadein img:nth-child(1) {
animation-delay: 0s;
}
.fadein img:nth-child(2) {
animation-delay: 3s;
}
.fadein img:nth-child(3) {
animation-delay: 6s;
}
.menu_div {
position: relative;
z-index: 0;
border: dashed;
height: 2.9em;
margin-bottom: 0em;
margin-top: 0em;
z-index: 1000;
}
.fadein {
position: relative;
z-index: 3;
background:;
width: 100%;
left: 1px;
top: 0em;
}
.fadein img {
margin: 0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 500%;
}
.tech-slideshow {
height: 200px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
opacity: 1;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
form {
background-color: #f7f7f7;
border: 2px solid black;
/* Just to center the form on the page */
margin: auto;
width: 1000px;
height: 500px;
/* To see the limits of the form */
padding: 7em;
border: 400px solid white;
border-radius: 10em;
}
div + div {
margin-top: 0.5em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 130px;
text-align: left;
}
input, textarea {
/* To make sure that all text field have the same font settings
By default, textarea are set with a monospace font */
font: 0.9em verdana;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid;
}
input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text field with their label */
vertical-align: top
/* To give enough room to type some text */
height: 20em;
/* To allow users to resize any textarea vertically
It works only on Chrome, Firefox and Safari */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 400px; /* same size as the label elements */
}
button {
/* This extra magin represent the same space as the space between
the labels and their text fields */
margin-left: .4em;
}
<!DOCTYPE html>
<html>
<head>
<title>Bewerbungsformular</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<h1 align="center"> <img src="logo.png" alt="A.Willi A.G" /> </h1>
<div class="menu_div">
<ul>
<li>Home</li>
<li class="dropdown"> Bewerber
<div class="dropdown-content"> Info Jobs </div>
</li>
<li class="dropdown">Kunde
<div class="dropdown-content"> Personalverleih Werkzeuge Mieten Referenzen Qulität, Sicherheit und Weiterbildung </div>
</li>
<li>Kontakt</li>
</ul>
</div>
<div class="fadein"> <img src="welder1.png"> <img src="welder2.png"> <img src="welder3.png"> </div>
<div class="fadein img"> </div>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
<div>
<h2>Bewerbungsformular</h2>
<label for="name">Vorname*</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">Nachname*</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">E-Mail*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Telefon*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Nationalität*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Alter*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Beruf*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<form action="upload.php" method="post" enctype="multipart/form-data">
Lebenslauf oder Bewerbung und Beilagen*
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</body>
</html>
The best way to do this would be to wrap your content within a container, and set the max-width for this (70%) or so, then if you want to add borders to this container you can do so.
Add <div class="container"> before any content you want to be centered/contained, then close the div at the end, and add the following to your css:
.container {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
Wrap your page inside a
<div id="wrapper">
your content here
</div>
/* add this to css */
#wrapper {
width:960px; /*put here the width you want*/
margin: 0 auto;
}
/*-----*/
I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<meta name = "keywords" content = "InGadget | Dé site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is dé site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">
<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>
<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
</script>
</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="section1">
Placeholder
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}
.scroll #logo {
background-image: url(images/logo2.png);
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.nav a:hover {
text-decoration: underline;
}
/* STICKY NAVBAR */
.navbar.scroll {
background-color: #ffffff;
height: 75px;
}
.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}
.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }
/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}
.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}
/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}
.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
#keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:
.header-content-container {
position: absolute;
bottom: 0;
width: 100%;
}
.header-content h1{
position: absolute;
right: 20px;
bottom: 20px;
}
.mouse-icon {
position: absolute;
left: 20px;
bottom; 20px;
}
You need to position the h1 and mouseicon absolute to the bottom
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
position: absolute;
left: 10px;
bottom; 10px;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
position: absolute;
right: 10px;
bottom; 10px;
}
.header {
position:relative;
}
.header-content {
position: absolute;
bottom: 0;
right: 45px;
}
Use these styles along with your other css styles. Please Let me know if you have any other requirement.
Something like that: https://jsfiddle.net/qs1qyL9c/
.header-content {
width: 80%;
margin: auto;
position:absolute;
bottom:0;
}
I am having a bit of problem with my website:
body {
margin: 0;
font-family: Tahoma;
background-color: #000000;
background-size: cover;
background-attachment: fixed;
color: #ffffff;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#content {
margin-top: 50px;
animation: fadein 5s;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.00);
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a {
transition: all 0.5s;
}
/* Menu Bars */
.section-1 {
position: fixed;
text-align: center;
width: 25%;
top: 20%;
height: 60%;
float: left;
display: block;
z-index: 1;
background-color: #000000;
}
.section-1:hover + .menu-1 {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.menu-1 {
position: fixed;
text-align: center;
width: 25%;
top: 20%;
height: 60%;
float: left;
z-index: 2;
background-color: rgba(255, 0, 0, 0.50);
display: block;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
<body>
<div id="navigation-menu">
<ul>
<li>Title</li>
</ul>
</div>
<div id="content">
<div class="section-1">
<p>Menu 1</p>
</div>
<div class="menu-1">
<br />
<br />
<br />
<br />
<br />
<br />
Link 1
</div>
</div>
</body>
As you can see, the expected behavior is that when I hover the div with the "Menu 1" text, the div with the "Link 1" link appears and that the "Link 1" link is clickable which will direct the user to another page. However, the "Link 1" hyperlink is unclickable and instead, highlights the "Menu 1" text.
How do I make it so that the "Like 1" hyperlink can be clicked?
You have pointer-events:none on .menu-1. If you absolutely need to keep this property, add pointer-events:auto to the a tag. However, I would suggest restructuring your code so that the menu can transition without the overlay.