CSS-Place elements in the end of div

CSS-Place elements in the end of div - html

I'm trying to put elements in the end of header. I'm using a WYSIWYG designer. In designer, it is as I wanted, but on browser, elements are not at the position I wanted. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<style type="text/css">
#header
{
background-color:#FF6600;
height: 151px;
width:100%;
}
#title
{
z-index: 1;
left: 20px;
top: 32px;
position: absolute;
height: 47px;
width: 353px;
color:White;
font-size:48px;
font-family:Consolas;
}
#motto
{
z-index: 1;
left: 21px;
top: 103px;
position: absolute;
height: 42px;
width: 381px;
right: 951px;
font-size:20px;
color:White;
}
div
{
font-family:Consolas;
width: 121px;
}
#txtUserName
{
z-index: 1;
left: 1083px;
top: 23px;
position: absolute;
width: 250px;
height: 30px;
}
#txtPassword
{
z-index: 1;
left: 1082px;
top: 65px;
position: absolute;
width: 250px;
height: 30px;
}
#btnLogin
{
z-index: 1;
left: 1082px;
top: 107px;
position: absolute;
width: 250px;
height: 30px;
background-color:Black;
color:White;
font-family:Consolas;
font-size:20px;
}
</style>
</head>
<body style="background-color:#F5F5F5; height: 748px;">
<div id="header">
<div id="title">
My Webpage
</div>
<div id="motto">
Home
</div>
<input id="txtUserName" type="text" />
<input id="txtPassword" type="text" />
<input id="btnLogin" type="submit" value="Login" />
</div>
</body>
</html>
I want to put the elements in header to the end of it, but i can't. I know it happens because I use absolute positioning but I don't know how to solve it. Thanks for help.

I hope this helps:
html
<div id="header">
<div class="login-wrapper">
<input id="txtUserName" type="text" placeholder="username" />
<input id="txtPassword" type="text" placeholder="password" />
<input id="btnLogin" type="submit" value="Login" />
</div>
<h1>My Webpage</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Misc</li>
</ul>
</div>
css
* {
margin: 0;
padding: 0
}
#header {
background-color:#FF6600;
width: 100%;
padding: 15px;
clear: both;
}
#header input[type="text"],
#header input[type="password"] {
border: 1px solid black;
display: inline-block;
padding: 5px;
}
#header h1 {
color: white;
font-size: 30px;
margin-top: 0;
}
#header .motto {
font-size:20px;
color: white;
display: block;
}
#header .login-wrapper {
float: right;
margin: 10px;
}
#header ul li{
list-style: none;
display: inline-block;
}
#header ul li a{
text-decoration: none;
color: white;
display: block;
margin: 10px;
}
}
See a preview at http://jsfiddle.net/c5o3wywc/2/

Related

White area at the bottom of my webpage when i try to create a responsive design

I'm trying to make my webpage responsive to fit on an ipad and mobile, as i adjust my media query, i noticed this white area at the bottom, the body element when highlighted, it doesnt reach that area, so i dont know where it came from, anyhelp would be appreaciated. thanksenter image description here
enter image description here
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2{
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left:1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:300px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer{
background-color: rgb(126, 226, 230);
height: 200px;
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact{
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left:750px;
bottom:280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px ;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content{
width: 100%;
margin: 10px;
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header{
left:50px;
}
.para{
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding:30px;
top:20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks{
display: inline-block;
}
.connect{
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content{
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
<!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">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15" cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id = "footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<img class="fb" src="image/fb.png" alt = "Facebook" />
<img class="tw" src="image/tw.jpg" alt = "Twitter" />
<img class="yt" src="image/you.png" alt = "Youtube" />
<img class="ln" src="image/linkd.png" alt = "LinkedIn" />
</div>
</footer>
</div>
</div>
</body>
</html>

Because of the default browser stylesheet, the body has a margin set. You can remove it with the following CSS reset:
body {
margin: 0;
}
Also, your .content has a margin set to 10px, which adds space to the bottom, remove it when you don't want it or only apply it to the top, right and left using:
margin: 10px 10px 0 10px
<!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">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
margin: 0
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2 {
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left: 1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left: 345px;
top: 74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left: 350px;
top: 100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position: absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top: 300px;
}
.user-links {
position: relative;
left: 20px;
bottom: 30px;
}
.user-links:link {
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo,
.telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer {
background-color: rgb(126, 226, 230);
/* height: 200px; */
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact {
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left: 750px;
bottom: 280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb,
.tw,
.yt,
.ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content {
width: 100%;
/* margin: 10px; */
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header {
left: 50px;
}
.para {
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding: 30px;
top: 20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks {
display: inline-block;
}
.connect {
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo">
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class="header">
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters
minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id="errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title">
</div><br>
<div class="error" id="errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id="errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id="errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15"
cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id="footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com
</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<a href="https://www.facebook.com" title="facebook"><img class="fb" src="image/fb.png"
alt="Facebook" /></a>
<a href="https://www.twitter.com" title="twitter"><img class="tw" src="image/tw.jpg"
alt="Twitter" /></a>
<a href="https://www.youtube.com" title="youtube"><img class="yt" src="image/you.png"
alt="Youtube" /></a>
<a href="https://www.linkedin.com" title="linkedin"><img class="ln" src="image/linkd.png"
alt="LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>
Note that I also removed the height of the footer in the example above, since it causes some spacing as well.

Pure HTML and CSS hamburger menu does not work

I'm making a hamburger menu right now with html and css (no js), and the :checked + .something does not work. I'm searching for solutions for about 3 hours but i can't find any. If you would help me that would be nice.
Maybe I messed up somewhere because i watched it from a video, but i did the exact same thing like him but i doesn't work :(
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
#toggle:checked+.navigations {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="something.css">
</head>
<body>
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
</body>
</html>

It seems like you're actually missing the checkbox element. Since you're using the adjacent sibling selector, (+ in #toggle:checked + .navigations) you should put the checkbox with the .navigations div immediately before the #toggle input.
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
/*
Since the .navigations is the next sibling element after #toggle,
the + selector works here
*/
#toggle:checked+.navigations {
display: none;
}
<input type="checkbox" id="toggle" /> <!-- Add this! -->
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>

Image alignment changed in IE (edge) and google Chrome

I have been creating this website and it came along just fine. And then I tried to add a modal to it and everything kinda went downhill. The issue is that after adding the modal the image alignment changed in Chrome. It works fine in Edge. Now I am aware that this could be because whatever element I added might not be supported in IE thus making it look ok. The first image shown here is in IE and how I want it to look like
The second image is how it looks on Google Chrome
Here is the Html related to the images
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;">
<img src="https://imgur.com/GmqzA9C" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</h4>
<span id="subspan1"> IN THEATERS 10TH JULY</span></span>
<h4 id="upcoming2"><span> SKYSCRAPER</h4>
<span id="subspan2"> IN THEATERS 13TH JULY</span></span>
<h4 id="upcoming3"><span> The EQUALIZER 2</h4>
<span id="subspan3"> IN THEATERS 20TH JULY</span></span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</h4>
<span id="subspan4"> IN THEATERS 13TH JULY</span></span>
</div>
<img src="https://imgur.com/cHmH0K5" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
Here is the CSS related to these image alignment.
.coverimage {
position: relative;
padding-bottom: 10px;
background-color: #06c6da;
padding-top: 10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #000;
color: #FFF;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size: 40px;
color: #FFF;
}
h2 span {
color: #FFF;
display: inline-block;
background: rgba(0, 0, 0, 0.7);
padding: 48px 48px 48px 20px;
}
.submovies {
position: relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan1 {
position: absolute;
top: 340px;
left: 20px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming2 {
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan2 {
position: absolute;
top: 340px;
left: 620px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan3 {
position: absolute;
top: 150px;
left: 922px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan4 {
position: absolute;
top: 340px;
left: 920px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
Heres the Modal HTML i recently added
<div class="feedback">
<button type="button" id="feedbacksubmit"onclick="">Give us your FeedBack !</button>
</div>
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="https://imgur.com/vm4mf6W" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name">
E-Mail:
<input type="text" placeholder="E-mail">
What do you think about us?<br>
<textarea rows="6" cols="33" "name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
SUBMIT
</form>
</div>
</div>
And here is the CSS it's related with
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.feedback-content {
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position: relative;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"] {
width: auto;
display: inline;
}
.close {
position: absolute;
top: 0px;
right: 14px;
transform: rotate(45deg);
font-size: 42px;
}
#feedbacksubmit {
margin-left: 600px;
margin-bottom: 50px;
background-color: #484848;
border-radius: 14px;
padding: 10px;
cursor: pointer;
color: white;
outline: none;
}

your page is a little disaster... (^_^;) No responsive at all. You have to study hard to understand, for example, how flots works or how absolute position works with its relative block. Inline style are a Css old school and you have to evoid them, if it's possible (and here it is possible!).
However, I aligned every images you post, but please (please!!), redo the work. Consider to use flexbox or grid to transform your page in a 2018 web page.
Best reguards to you, your study and web designer career! ;)
.coverimage{
position:relative;
padding-bottom:10px;
background-color:#06c6da;
padding-top:10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color:black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size:40px;
color:white;
}
h2 span {
color: white;
display:inline-block;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding:48px;
padding-left:20px;
}
.submovies{
position:relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan1{
position: absolute;
top: 340px;
left:20px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming2
{
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan2{
position: absolute;
top: 340px;
left:620px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan3{
position: absolute;
top: 150px;
left:922px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan4{
position: absolute;
top: 340px;
left:920px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5.jpg" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;width:1449px">
<img src="https://imgur.com/GmqzA9C.jpg" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf.jpg" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;float:left;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</span></h4><span id="subspan1"> IN THEATERS 10TH JULY</span>
<h4 id="upcoming2"><span> SKYSCRAPER</span></h4><span id="subspan2"> IN THEATERS 13TH JULY</span>
<h4 id="upcoming3"><span> The EQUALIZER 2</span></h4><span id="subspan3"> IN THEATERS 20TH JULY</span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</span></h4><span id="subspan4"> IN THEATERS 13TH JULY</span>
<div style="float:left">
<img src="https://imgur.com/cHmH0K5.jpg" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ.jpg" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
</div>
</div>

Change cursor in file type input

I have an input element for file uploading (type='file'). I'm trying to put some style in it and it almost works. I just can't get to change the cursor to a pointer when hover over the image. It only appears when the cursor is over the bottom of the image.
div.wrapper{
position:relative;
height: 40px;
}
div.upload {position:absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}
#fileDesc{
top:10px;
position:relative;
margin-left:0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size:18px;
color:#3383bb;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />

Below code might help
<div class="wrapper">
<input type="file" name="photo" id="uploader-photo" />
<label for="uploader-photo"></label>
<label class="nostyle">No file selected...</label>
</div>
label {
cursor: pointer;
width: 50px;
height: 40px;
display: inline-block;
background: url(https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png) 0 0 no-repeat;
}
label.nostyle {
background: none;
height: auto;
padding: 0;
cursor: initial;
width: auto;
vertical-align: top;
}
#uploader-photo {
opacity: 0;
position: absolute;
z-index: -1;
}

div.wrapper{
position:relative;
height: 40px;
}
div.upload {position:absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
}
div.upload {
cursor: pointer;
}
#fileDesc{
top:10px;
position:relative;
margin-left:0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size:18px;
color:#3383bb;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />

These css changes above make the label also clickable.
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
padding-right: 200px;
}
#fileDesc {
top: 10px;
position: absolute;
margin-left: 0px;
font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
font-size: 18px;
color: #3383bb;
left: 50px;
z-index: -1;
}
div.wrapper {
position: relative;
height: 40px;
}
div.upload {
position: absolute;
background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
}
div.upload input {
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
padding-right: 200px;
}
#fileDesc {
top: 10px;
position: absolute;
margin-left: 0px;
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
font-size: 18px;
color: #3383bb;
left: 50px;
z-index: -1;
}
<div class="wrapper">
<div class="upload">
<input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
</div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />

You can add the following css to your existing code. This will get the job done.
div.upload input {
cursor: pointer;
margin-left: -100px;}

Bootstrap and CSS positioning of a toggle

I am a newbie in html programming and hope you will be able to help me without qualifying my question as a 'stupid' one :)
I am using the bootstrap toggle javascript and I am struggling to understand why my elements are overlapping eachother (as shown in the picture below).
I (naively) thought that having a container class 'lorem' would help. It looks like my 'top' property of the lorem class that I set to 50px is simply not considered. What did I make wrong?
I hope my question is legible and will be helpful to other readers.
Thanks for your help.
this is my css file :
#tag_domoos_title{
font-family:Arial;
font-size: 150%;
text-align: left;
position: absolute;
top: 5px;
left: 90px;
color:blue;
z-index:10;
font-weight: 900;
}
#tag_update{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 20px;
left: 90px;
color:blue;
}
#datetime{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 40px;
left: 90px;
color:blue;
}
#tag_sunrise_sunset{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 50px;
left: 10px;
color:black;
}
#tag_weather_temperature{
font-family:Arial;
font-size: 100%;
text-align: right;
position: absolute;
top: 145px;
right: 15px;
color:black;
font-weight: 900;
}
#current_weather_conditions_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 110px;
left: 10px;
color:blue;
font-weight: 900;
}
#current_weather_forecast_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 200px;
left: 10px;
color:blue;
font-weight: 900;
}
#tag_weather_condition{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 130px;
left: 10px;
color:black;
font-weight: 600;
}
#tag_additional_weather_information{
font-family:Arial;
font-size: 90%;
text-align: center;
position: absolute;
top: 150px;
left: 10px;
width: 250px;
color:black;
}
#meteo_icon {
position: absolute;
right: 10px;
top: 100px;
}
#meteo_forecast{
font-family:Arial;
font-size: 100%;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
top:200px;
position: relative;
}
#meteo_forecast_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 215px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 285px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 355px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_temperature_day1{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 215px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day2{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 285px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day3{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 355px;
right: 5px;
color:black;
}
#meteo_forecast_condition_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 235px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 305px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 375px;
left: 10px;
color:black;
}
#domoos_logo {
position: absolute;
left: 0;
top: 0px;
}
#lorem{
font-family:Arial;
font-size: 100%;
text-align: left;
position: absolute;
top: 50px;
left: 10px;
height: auto;
}
#footer
{
font-family:Arial;
font-size: 40%;
clear: both;
border: 1px groove #aaaaaa;
background: blue;
color: White;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
#hyperlinks_mobile
{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 500px;
left: 10px;
color:black;
}
ul {
background: #bbb;
}
li, [class*="grid"] > * {
background: #ccc;
}
header, footer {
background: #ddd;
}
body {
background-color:#ddd;
}
this is my html code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Domoos mobile</title>
<meta http-equiv="refresh" content="600">
<link rel="stylesheet" type="text/css" href="css/mystyle_mobile.css"/>
<meta http-equiv="pragma" content="no-cache">
<script type="text/javascript" src="scripts/date_time.js"></script>
<script>
// Global variables
var AutoScript = false;
var ValueCheck = -1;
</script>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/style_thermostat.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-toggle.js"></script>
</head>
<body>
<header class="banner" id="header" role="banner">
<div id="domoos_logo"><img src="assets/icons/logo_Domoos_lab.png" alt="" style="width:75px;height:54px;"></div>
<div id="tag_domoos_title">Domoos mobile</div>
<div id="datetime">
<script type="text/javascript">window.onload = getTimeDate('datetime');</script>
</div>
<div id="tag_sunrise_sunset"><p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p></div>
</header>
<div class="lorem">
<div id="home" class="tab-pane fade in active">
<button class="btn btn-success" onclick="SwitchOnOffAll('on')">Tout allumer</button>
<button class="btn btn-danger" onclick="SwitchOnOffAll('off')">Tout éteindre</button>
</div>
<label>
<span class="label label-primary">chk01 - Chambre 1 [A]</span>
<input id="chk01" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk02 - Chambre 2 [B]</span>
<input id="chk02" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk03 - Chambre 3 [N]</span>
<input id="chk03" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk04 - Salle de bains (Lavabo) [C]</span>
<input id="chk04" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk05 - Salle de bains (Baignoire) [D]</span>
<input id="chk05" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk06 - Lumière WC [Z]</span>
<input id="chk06" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
</div>
<input id="lab01" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</p>
<p>
<input id="lab02" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</p>
<p>
<input id="lab03" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
<progress id="prg01" value="10" max="100"></progress>
</p>
<div class="footer" id="footer">Domoos web mobile version 0.0</div>
</body>
</html>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS-Place elements in the end of div - html

Related

White area at the bottom of my webpage when i try to create a responsive design

Pure HTML and CSS hamburger menu does not work

Image alignment changed in IE (edge) and google Chrome

Change cursor in file type input

Bootstrap and CSS positioning of a toggle

Categories

Resources