the html object is floating above the redbox div. How can i keep it inside the redbox div. I tried several options like reverse the divs. Somehow object is acting diverend then for example img tags. I don't know why, Search on the internet and didn't found a solution. I hope someone can help me and explain me what i'm doing wrong.
.redbox{
background-color: red;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
padding: 4px;
transition: border 0.2s ease-in-out 0s;
width:25%;
height: 200px;
}
.redbox object {
position:absolute;
top:0;
left:0;
width:100%;
height:25%;
}
.redbox .caption {
color: #333;
padding: 9px;
}
<html>
<head>
</head>
<body>
<div class="redbox">
<object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
<div class ="caption">
here is some text
</div>
</div>
</body>
I think you can use Z-Index Property.
Here i am providing modified code please check it once.
.redbox{
background-color: red;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
padding: 4px;
transition: border 0.2s ease-in-out 0s;
width:25%;
height: 200px;
z-index : 1;
}
.redbox object {
position:absolute;
top:0;
left:0;
width:100%;
height:25%;
z-index:-1;
}
.redbox .caption {
color: #333;
padding: 9px;
}
<html>
<head>
</head>
<body>
<div class="redbox">
<object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
<div class ="caption">
here is some text
</div>
</div>
</body>
</html>
Related
EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>
There 2 types of a buttons
There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}
<button id="ID">I'm a Button</button>
Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}
<div class="button">I'm a Button</div>
Insert a <button> tag in the same parent div which has code for this particular section
Set the css property of the parent element to position: relative
Set the css property for the <button> to position: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
<button class="button button3">Button 3</button>
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
Disclaimer: I am decently new to HTML. I know this is (most likely) going to be marked as a repeat, however i am not able to word it out and search so i am unable to find the information i need, so i came to ask this very simple question on stack overflow.
I have a quick HTML login form, with a div:
In the image given above there is my login form aligned to the right, and there is a 2px black border surrounding it, is it possible to make the border only enclose the login form and not the extra whitespace in the left.
Result wanted:
Thanks!
Code:
<!DOCTYPE html>
<html>
<head>
<style>
html body {
margin:20px;
}
#login-form{
padding:30px;
border:2px solid black;
}
#title-login{
font-family:Arial,sans-serif,serif;
margin-right:235px;
}
.inpt{
border-radius:3px;
width:235px;
height:30px;
font-size:20px;
border: 1px solid black;
margin:2px;
}
.userinpt{
width:315px;
}
.passwdinpt{
margin-right:83px;
}
.login-button{
background-color: transparent;
color: black;
border: 1.5px solid #008CBA;
padding: 13px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius:5px;
margin-right:210px;
}
.login-button:hover {
background-color: #008CBA;
color: white;
}
#ask-reg{
font-family:sans-serif;
font-weight:lighter;
margin-right:10px;
}
#link-reg{
}
.link {
color: #0099ff;
text-decoration: none;
}
.link:hover {
color: #007acc;
transition-duration: 100ms;
transition-property: all;
border-bottom: 1.3px solid black;
padding: 0 0 0.8px;
opacity:100%;
}
.link:active {
color: #99d6ff;
}
</style>
</head>
<body>
<div align="right" id="login-form">
<h1 id="title-login" >Login</h1>
<form action="subindex.php" method="post" >
<input type="text" class="inpt userinpt" name="usrname" placeholder="Username or E-mail"><br>
<input type="password" class="inpt passwdinpt" name="passwd" placeholder="Password"><br><br>
<button type="sumbit" class="login-button" name="logn">Confirm</button><br>
</form>
<br>
<p id="ask-reg" >If you do not have an account, register <a id="link-reg" class="link" href="register.html">here</a>.</p>
</div>
<script>
</script>
</body>
</html>
the border will always be surrounding the element width and height including the padding. change the width of the form and if you want it to align to the right use:
form {
width: 30%;
margin-left: auto;
}
The easiest way to do this is to set the width and float:right property on your #login-form element. Here's an example on repl.it: https://repl.it/#TrishaAguinaldo/example-border
Also, try not to use the <br> to break html elements. You can just set the margin/padding on an element for that.
This question already has an answer here:
why float & inline-block cause different vertical type?
(1 answer)
Closed 1 year ago.
Q. How do I remove the extra space at the bottom of the div#inlineblock? Why is it there?
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
I appreciate good references. :P
Thanks.
So what's happening here is that your <hr /> has a margin (as is normal for <hr /> elements) and it's being treated differently.
In the case of #block, it's being subject to margin collapsing but in #inlineblock it isn't.
You can resolve this by specifying margin-bottom:0 on your hr elements.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
margin-bottom: 0; /* NEW */
}
div#inlineblock {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
You'll notice this now pushed the two elements together, so you may need to add a margin-bottom to your divs depending on the exact effect you want.
The space at the bottom of #inlineblock is actually the margin of the hr. If you reset that margin, you'll see the 'space' disappear.
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
#inlineblock hr {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
margin-bottom(and top) default for hr element is 8px, you must set it to 0px.
#inlineblock hr {
margin-bottom: 0;
}
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
#inlineblock hr {
margin-bottom: 0;
}
div#inlineblock {
display: inline-block;
}
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
You can also use the following:
div#inlineblock {
margin-top: 0px;
}
I want to center the submit button on the last div, but i can´t do it.
I try a lot of things, like margin:auto, align-left and right and others asks you make at this page, but it´s imposible for me.
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>Mi Revista</title>
<style>
body {
background: #7f7f7f;
}
#container {
width: 800px;
margin: auto;
position: relative;
}
#header {
background: #5783a0;
height: 75px;
}
#contenido {
padding: 1px;
background-color: white;
}
#left {
float:left;
width: 470px;
background-color: pink;
height: 300px;
}
#bordei {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 0px 2px 10px;
font-weight: bold;
}
#borded {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 10px 2px 0px;
font-weight: bold;
}
#derecha {
float:left;
width: 330px;
background-color: yellow;
height: 300px;
}
#footer {
height: 50px;
background-color: aquamarine;
clear:both;
}
div form {
display:block
}
#acept {
margin:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> Mi Revista</div>
<div id="contenido"> texto de arriba</div>
<div id="left">
<div id="bordei"> borde uno</div>
formulario izquierda
</div>
<div id="derecha">
<div id="borded">borde derecha </div>
Formulario derecha
</div>
<div id="footer">
<form id="acept">
<input type="submit" name="submit" value="Aceptar"/>
</form>
</div>
</div>
</body>
</html>
I wait for your awnswer, beacuse I can´t do it of any form.
Thaks
Just give alignment center to footer div
<div id="footer" align="center">
Change your CSS slightly as follows
#acept {
width:20px;
margin:0 auto;
}
The problem was that you wasnt specifying a width for the form and due to that it was taking 100% width.And thus the margin:0 auto doesnt work.
I've done a fiddle.Please check it..
Use the text-align:center in #acept is the simplest way.
You could as well use the <center> tag, but is is deprecated. So the best way would be to change
#acept{
margin:auto;
}
to
#acept{
margin:auto;
text-align:center;
}
you can use :
#acept {
margin-left:40%;
width:10%;
}
JSFIDDLE Link
I am trying to make a rectangular scalable div that has a transitional hover state. My code seems to work great in Chrome and Firefox, but IE10 simply refuses to entertain me. Below is my code and CSS example. Any help would be great.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="quote">
Interesting Quote
<p class="name">Quote Author</p>
</div>
</body>
CSS:
.quote {
font-size: 2em;
position: relative;
width: 20%;
padding: 5%;
float: left;
height: auto;
margin: .5%;
background-color: #99F;
color: #fff;
text-align: center;
}
.name {
font-size: .5em;
color: #000;
}
.quote:hover {
transition: background-color 0.5s ease-out;
background-color: #000;
}
.quote:hover .name {
transition: color 0.5s;
color: #FFF;
}