Move png's with CSS - html

How can I put the arrow in the button box? Any suggestions about the code would be appreciated.
HTML:
<!--Header-->
<div class="mainHeader header">
<h1>
LET US MAKE YOUR AWESOME IDEA HAPPENN
</h1>
<div class="button">
<p class="">
WATCH VIDEO
</p><img src="playbutton.png">
</div>
</div>
CSS:
.button {
width: 250px;
height: 46px;
border: solid white 2px;
margin: 0 auto;
z-index: 2;
position: relative;
top: 70%;
}
.button p {
text-align: center;
font-size: 20px;
font-family: 'Teko', sans-serif;
color: white;
position: relative;
bottom: 20%;
}
http://codepen.io/anon/pen/RPpQPV


body{
background: #000;
}
button {
width: 250px;
height: 46px;
margin: 0 auto;
background: none;
border: solid white 2px;
z-index: 2;
position: relative;
text-align: center;
font-size: 20px;
font-family: 'Teko', sans-serif;
color: white;
}
<button>
WATCH SHOWREEL
<img src="http://iconizer.net/files/Splashyfish/orig/arrow_medium_down.png">
</button>

Related

Z-Index, Create a text box and bringing it to the front

I have a simple page, background image and a text box.
I need the text box to be at the front but as I'm quite new to html/css I just got lost a bit :)
I tried to solve it with z-index but also didn't find the right way to do it.
This is the html:
<div><img src="back.jpeg" id="background-img"></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center;">
<button type="button" class="btn1 btnh" onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');">I'm over 18</button>
<button type="button" class="btn2 btnh" onclick="document.location='../underage'">I'm under 18</button>
</div>
</div>
</div>
This is the css:
<style>
.frame {
Top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
opacity: 0.2;
}

Z-index should be the correct way, just add it to #background-img. Because you use opacity: 0.2; the background image is transparent and the other object are visible. When you remove it, the image will cover the other elements.
#background-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
/* opacity: 0.2; */
z-index:1;
}

You can use position:absolute; for the div that you need under and position:relative that you need above.
.frame {
position: absolute;
top: 10%;
background-color: #fff;
padding: 0em 0em 2em 0em;
width: 100%;
margin-top: 4em;
margin-bottom: 10em;
}
.ha {
text-align: center;
padding: 1em 0em;
font-size: 40px;
}
.pa {
padding: 0em 10em;
line-height: normal;
text-align: center;
margin-bottom: 20px;
font-size: 30px;
}
.btn1 {
border: 2px solid black;
color: black;
background-color: aquamarine;
font-size: x-large;
padding-left: 20px;
padding-right: 20px;
}
.btn2 {
background-color: white;
border: 2px solid black;
color: black;
font-size: x-large;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btnh:hover {
background-color: gainsboro;
color: white;
}
#background-img {
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
}
.img-div {
position: relative;
}
<div class="img-div"><img src="back.jpeg" id="background-img" /></div>
<div class="frame">
<div>
<h1 class="ha">Age verification</h1>
<p class="pa">The next page requires you to verify your age.</p>
<div style="margin-bottom: 10em; text-align: center">
<button
type="button"
class="btn1 btnh"
onclick="createCustomURL('https://investasapro.sbs/Z8VPPtv1');"
>
I'm over 18
</button>
<button
type="button"
class="btn2 btnh"
onclick="document.location='../underage'"
>
I'm under 18
</button>
</div>
</div>
</div>

how to center both image and button? and how do i make a similar div right below it?

i am doing a school project and i'm stuck here. how do i center the image and the button on the page? i need to make 3/4 of these directly underneath each other. how do i do that? I have tried text-align and to position it but it seems to be stuck. also, do you know why my image disappears when the window is resized? thank you!
html:
<div class="container">
<img src="images/parken.jpg" alt="park" width="500px">
<button class="btn">lokationer</button>
</div>
</main><!-- .content -->
.container {
position: relative;
width: 100%;
max-width: 400px;
position: inherit;
}
.container img {
width: 100%;
height: auto;
position: inherit
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}

Use margin: 0 auto to center display: block elements
<div class="container">
<img src="images/me.jpg" align="center" alt="park" width="500px">
<button class="btn">lokationer</button>
</div>`
and for CSS, use this:
.container {
border: 1pt solid red;
max-width: 400px;
margin: 0 auto;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.container .btn:hover {
background-color: black;
}

html
<div class="container">
<img src="https://picsum.photos/100" alt="park" width="100px">
<button class="btn">lokationer</button>
</div>
<div class="container">
<img src="https://picsum.photos/100" alt="park" width="100px">
<button class="btn">lokationer</button>
</div>
css
.container {
text-align: center;
padding-bottom: 40px;
}
img{
width: 100%;
height: auto;
}
.btn {
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.btn:hover {
background-color: black;
}
https://jsfiddle.net/hrfadvyn/2/

Z-index positioning not working properly

I have a container I want to make a h2 appear aligned to the center with a slight line behind it. What I can't do is to make the line go behind the h2 box. No matter what I try, it keeps crossing over the h2 box.
Here goes a sample of what I need to accomplish:
Any help appreciated.
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
The css I'm using is:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 15px;
position: absolute;
}

I made a sample. check my jsfiddle http://jsfiddle.net/amitv1093/r3arp2m8/
html
<div class="container">
<h2> h2 </h2>
<div class="line"> </div>
</div>
css
.container
{
position:relative;
text-align:center;
background:#d9d9d9;
z-index:-99;
padding:12px 0px;
}
h2
{
width:100px;
background:grey;
height:50px;
text-align:center;
margin:0px auto;
line-height:50px;
}
.line
{
position:absolute;
width:100%;
height: 1px;
background: red;
top:50%;
margin:1px 0px;
z-index:-9;
}

h2 { //other props position: relative; }

alignment will be dynamic as container height
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
top: 50%;
position: absolute;
z-index: 1;
}
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>

Try adding this:
h2 {
position: absolute;
left:0;
right:0;
margin:auto;
}
.line-section-header {
margin-top: 50px;
position: absolute;
}

Try changing this in css:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
margin-left: 420px;
z-index: 2;
position: absolute;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
position: relative;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 70px;
position: absolute;
z-index: 1;
}

Page Scrolls down when I click on Link

I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it

x
using #close in a link like this makes your browser jump to that ID

Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.

How to design page header style show logout when user mouseover on username

i am working in MVC4. i am not so much familiar with design end. In my application i am having header like :
But on mouse over on user name i want this :
how i can implement this style.
HTML :
<div class="header">
<div class="title">
<span style="font-size: 24pt; font-weight: bold; color: White">Company name</span>
<div id="login" class="loginDisplay">
Username
</div>
</div>
</div>
CSS :
.header {
background: url("images/header-bg.jpg") repeat scroll 0 0 #3B5998;
height: 100px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.title {
height: 45%;
padding: 8px;
position: relative;
width: 98%;
}
.loginDisplay {
color: #FFFFFF;
font-size: 1.1em;
position: absolute;
right: 15px;
text-align: right;
top: 15px;
}

Edited: http://jsfiddle.net/mmdYY/
.loginDisplay {
color: #FFFFFF;
font-size: 1.1em;
position: absolute;
right: 0;
text-align: center;
top: 0;
width:200px;
padding-right:15px;
padding-top:15px;
}
.loginDisplay:hover {
display:block;
background:#192776;
width:200px;
height:200px;
cursor: pointer;
}

DEMO: http://jsfiddle.net/Rvvaa/
Added CSS
#login:hover {
background-color: yellow; /* illustrative colour */
height: 300px;
}