When I tried to position the button to the bottom left, it worked but when I go to one of the buttons and go back it has all of the buttons there but one? the other one I need to scroll down to see please help
HTML
<!Doctype html>
<html>
<head>
<title>Forsaken </title>
<link href="main.css" rel="stlesheet" type="text/css">
</head>
<body>
<button><img class="#topleft" src="icon1.jpg " width="100%" alt="Teams" ></button>
<button><img class="#topright" src="icon2.jpg " width="100%" alt="store" ></button>
<button><img class="#bottomleft" src="icon4.jpg " width="100%" alt="sponsors" ></button>
<button><img class="#bottomright" src="icon3.jpg " width="100%" alt="aboutus" ></button>
</body>
</html>
CSS
#topleft {
position: fixed;
top: 0px;
left: 0px;
}
#topright {
position: fixed;
top: 0px;
right: 0px;
}
#left {
position: fixed;
left: 0px;
}
#right {
position: fixed;
right: 0px;
}
div {
border-style:solid;
border-width:0px;
border-color:#000000;
}
#yes {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
#no {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
p.s All the other buttons are working but the About Us one.
Try this:
.topLeft{
position: absolute;
top:0;
left:0;
}
.topRight{
position: absolute;
top:0;
right: 0;
}
.bottomLeft{
position: absolute;
bottom: 0;
left: 0;
}
.bottomRight{
position: absolute;
bottom: 0;
right:0;
}
<button class="topLeft">Click Me</button>
<button class="topRight">Click Me</button>
<button class="bottomLeft">Click Me</button>
<button class="bottomRight">Click Me</button>
Working Codepen
Note
Do not use hashtags inside a class declaretion, it's bad practice (hashtags used to catch id's).
That's why your code did not worked.
Reply if there are any issues..
Related
I'm making a home automation website, I have an image that looks like a garage door; I'm using the images as buttons and I'm placing them in a table to help sort them. Now When I resize the .garage_door and make it width: 20%; there's still whitespace to it's right as if it was full size. I've tried everything including adjusting the padding and the margins.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
.controls {
padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
position: relative;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: center;
right: 35px;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
.table_controls {
border: 2px solid black;
position: relative;
right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Use the following CSS and there are some repeated css for table_controls in your code. Remove the unwanted css.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
padding-top: 5px;
position: relative;
height: 90px;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: right;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header>
<a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
I want make the popup windows like youtube share because its stick next to button. I tried bootstrap modal but it's popup in the middle of screen. When click youtube share button,pop up shows around button.
Does anyone know how to fix it?
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div class="social-fuctions">
Share to facebook
</div>
</div>
</div>
</div>
css code
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
/*
.button {
font-size: 1em;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
*/HTMLHTML
.social-fuctions{
display: flex;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
/* transition: opacity 100ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
position: absolute;
bottom: -550px;
right: 5%;
left: 15%;
padding: 15px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Any suggestion? Thanks a lot
Set your box to position: relative and make the modal box / pop up a child of the box div. This way, the overlay will be positioned absolutely within the parameters of it's parent div.
.box {
position: relative;
}
.modal {
position: absolute;
}
Something like this:
https://jsfiddle.net/bommy8zu/5/
Moosetuin's approach is simple and effective.
But there is no need for a relative parent. And a absolute Modal.
I made two examples one is just like Youtube's ShareBox and the other will allways be centered.
How To Center:
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Check it out here: https://codepen.io/Tibixx/pen/zWEpqq
I am trying to have multiple divs stack on top of each other. Based on the responses of previously asked similar questions, I used a main container with relative positioning and absolute positioning of divs within. I Even tried giving them z-indexes but the Divs are still overlapping.
Please find the html below; Response 2 fully overlaps Response 1 Div.
body {
background-color: #dbdbdb;
}
h1 {
font-size: 20px;
font-style: normal;
color: #000000;
margin-top: 0px;
}
h2 {
font-size: 22px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
h3 {
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
p {
font-size: 20px;
font-style: normal;
color: #000000;
}
p.dataTitle {
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000000;
}
.responsePanel {
border-style: solid;
border-width: 1px;
border-color: black;
}
.titleBar {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
}
.titleText {
position: relative;
left: 35px;
top: 0px;
}
.titleValue {
position: absolute;
left: 35px;
top: 24px;
}
.titleDataSource {
position: absolute;
right: 128px;
top: 34px;
}
.mugshotContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 52px;
width: 33%;
height: 420px;
}
.locationData {
position: relative;
left: 5px;
top: 0px;
}
.personNameContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0%;
top: 52px;
width: 100%;
}
.personName {
position: relative;
left: 5px;
top: 0px;
}
.personDescriptionContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.activityContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.personDescriptionData {
position: relative;
left: 5px;
top: 0px;
}
.personLocations {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 474px;
width: 100%;
height: 150px;
}
.personLocationsData {
position: relative;
left: 5px;
top: 0px;
}
table#locationsTable {
width: 99%;
}
table#locationsTable tr:nth-child(even) {
background-color: #eee;
}
table#locationsTable tr:nth-child(odd) {
background-color: #fff;
}
table#locationsTable th {
color: white;
background-color: black;
}
table#locationsTable td {
text-align: center;
}
#response1 {
position: relative;
width: 95%;
}
#response2 {
position: relative;
width: 95%;
}
.outer {
position: relative;
}
<div class="outer">
<div class="responsePanel" id="response1">
<div class="titleBar">
<div class="titleText">
<h1>Game 1</h1>
</div>
<div class="titleValue">
<h2>sas</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">xyz/p>
</div>
</div>
<div class="responsePanel" id="response2">
<div class="titleBar">
<div class="titleText">
<h1>what</h1>
</div>
<div class="titleValue">
<h2>xyz</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">blah blah</p>
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/qe36n9hm/1/
I am building bootstrap based web and I am trying to make title inside of a frame with text attached in the middle of bottom border and still be responsive. Small text on small devices can go in multiple rows, or even go inside the box.
All I could do is. And I want to do it like .
I hope someone already done this and/or could help me doing it.
Thanks in advance.
One big detail is it should be completely transparent so it can go over a backround picture.
And it is much differend than fieldset because the "legend" is on bottom.
Update:
See fiddle
CSS:
.navbar-brand {
margin: 0;
color: #ffffff;
text-align: center;
position: relative;
display: inline-block;
border-top: 8px solid #ffffff;
padding: 5px 32px 0px 32px;
line-height: 1.08333333;
height: auto;
}
.navbar-brand:before {
position: absolute;
content: '';
left: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand:after {
position: absolute;
content: '';
right: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #ffffff;
text-decoration: none;
}
.navbar-header + h3 {
margin-top: 61px;
}
.navbar-header {
text-align: center;
}
.small-lines:before {
position: absolute;
content: '';
left: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines:after {
position: absolute;
content: '';
right: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines1:before {
width: 38%;
background: #009fb6;
}
.small-lines1:after {
width: 38%;
background: #009fb6;
}
.navbar-brand a{
font-size: 48px;
}
.container{
margin-top: 150px;
}
small {
line-height: 1.2;
font-size: 24px;
letter-spacing: 4.8px;
display: block;
position: relative;
}
HTML:
<body style="background: black">
<header class="">
<div class="container text-center">
<div class="navbar-header">
<h1 class="navbar-brand ">
<a href="./">BIG TITLE ONE<br>
<small class="small-lines">Here comes small text</small>
</a>
</h1>
</div>
</div>
</header>
</body>
I have a hidden header which is shown when printing a page, but when i try to print it with chrome 40 it's not taking the full width page. why?
HTML
<div id="header">
<img id="logo" src="assets/img/brand.png">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<div id="footer">
<p class="page"></p>
</div>
CSS
#header{
top:0px;
right:0px;
width: 100%;
height: 45px;
position:fixed;
border:1px solid #ccc;
}
#logo{
position: absolute;
top: 0;
left: 0;
height: 46px;
}
#title{
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
#footer {
position: fixed;
left: 50%;
bottom: 0;
/*right: 0;*/
height: 40px;
text-align: center;
}
#footer .page:after {
content: counter(page, upper-roman);
font-size: 18px;
}
UPDATE
I changed to position absolute, and it works, it's taking the full width
but now I realized that it's not repeating in every page, even with position fixed
Also notice the footer with number page, it's wrong centered because of fixed position, but when i change it to absolute it's correct but it goes to the bottom of the content, not of the page, and in the two cases neither repeat in every page
Remove the fixed position, add absolute instead, and I've also changed the height of #logo to 100% instead of 46px
SNIPPET
body {
font-family: Arial, sans-serif;
}
#header {
top: 0px;
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
}
#logo {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
h3 {
margin-top: 100px;
}
#header-table {
top: 150px;
/*Change to 0px when supposed to use*/
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
display: table;
}
#logo-cell {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title-cell {
display: table-cell;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
text-align: right;
}
<div id="header">
<img id="logo" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<h3>Display: Table, if your title should be vertically centered</h3>
<div id="header-table">
<img id="logo-cell" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title-cell">Departamento de diagnostico por imagenes</div>
</div>