How to make the green images occupy the whole territory of each rectangle?
i use this code but there is a mistake somewhere:
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
.grid h2 {
color: #fefbfd !important;
background-color: transparent;
text-transform: none;
font-weight: normal;
text-align: left;
font-size: 26pt;
}
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 500px;
height: 330px;
width: 48%;
background: #575656; /*REMOVES GREY SQUARES*/
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 2em;
color: #575656;
text-transform: none;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: -30px;
left: -20px;
width: 100%;
height: 100%;
}
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure figcaption h2 {
color: #a32914;
word-spacing: 0em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 0px;
margin: 0;
font-size: 12pt;
}
ul li .MathJax_Display {
text-align: center;
margin: 1em 0em;
position: relative;
/*display: block !important;*/
display: inline !important;
text-indent: 0;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
width: 100%;
}
[![SCREENSHOT BELOW][1]][1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta name="generator" content="olat-tinymce-4" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></head><body><div class="container">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<div class="grid">
<figure class="effect1"><img src="pic1.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Participants<br /></strong></h2>
View more</figcaption>
<figcaption></figcaption>
<figcaption></figcaption>
</figure>
<figure class="effect1"><img src="pic2.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Organisation</strong></h2>
View more</figcaption>
</figure>
<figure class="effect-artem"><img src="pic3.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Library</strong></h2>
View more</figcaption>
</figure>
<figure class="effect-artem"><img src="pic4.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Working Groups</strong></h2>
View more</figcaption>
</figure>
</div>
</div></body></html>
those were HTML code and CSS code
screenshot of what comes out of there below:
screenshot of what comes out of there:
[1]: https://i.stack.imgur.com/VjQCa.jpg
Check this, It may solve your problem. Try to run this below script
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 500px;
height: 330px;
width: 48%;
background: #575656; /*REMOVES GREY SQUARES*/
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 2em;
color: #575656;
text-transform: none;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<div class="grid">
<figure class="effect1">
<a href="javascript:parent.gotonode(102071756014162)">
<img src="https://wallpaperaccess.com/full/1288076.jpg" caption="false"/></a>
<figcaption>
<h2>
<strong>Participants<br/></strong>
</h2>
View more
</figcaption>
<figcaption></figcaption>
<figcaption></figcaption>
</figure>
<figure class="effect1"><img src="https://abduzeedo.com/sites/default/files/styles/square_1x1/public/originals/abdz_infrared_arashiyama_mockup_0.jpg?itok=D_-Tf7rE" caption="false"/>
<figcaption>
<h2>
<strong>Organisation</strong>
</h2>
View more
</figcaption>
</figure>
</div>
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="olat-tinymce-4" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 500px;
height: 330px;
width: 48%;
background: #575656; /*REMOVES GREY SQUARES*/
text-align: center;
cursor: pointer;
}
.grid figure img {
width: 100%;
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 2em;
color: #575656;
text-transform: none;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<link rel="stylesheet" type="text/css" href="css/style.css">
<div class="grid">
<figure class="effect1">
<a href="javascript:parent.gotonode(102071756014162)">
<img src="red.png" caption="false" width="500" height="333" />
</a>
<figcaption>
<h2><strong>Participants<br /></strong></h2>
View more
</figcaption>
<figcaption></figcaption>
<figcaption></figcaption>
</figure>
<figure class="effect1">
<img src="pic2.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Organisation</strong></h2>
View more
</figcaption>
</figure>
<figure class="effect-artem">
<img src="pic3.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Library</strong></h2>
View more
</figcaption>
</figure>
<figure class="effect-artem">
<img src="pic4.png" caption="false" width="500" height="333" />
<figcaption>
<h2><strong>Working Groups</strong></h2>
View more
</figcaption>
</figure>
</div>
</div>
</body>
</html>
I have added width property.
Here is the result:
the problem was in images themselves! they were almost 1 Mb size png with alpha channel. when i just cut them with paint and saved with lower resolution -it has worked out
Related
I'm recreating the incila instagram page, I need to overlay the images of the <figure class = "slide"> element, because afterwards I will put an animation, but I can't overlay the images, I've tried everything, as I'm a beginner I couldn't.
How can I do this?
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}
*{
padding:0;
margin:0;
box-sizing: border-box;
text-decoration: none;
font-family: sans-serif;
font-size: 14px;
}
body{
background-color: #fafafa;
}
.content{
display: flex;
justify-content: center;
align-items: center;
}
.container-login{
background-color: rgb(255, 255, 255);
border:1px solid;
border-color: rgb(221, 221, 221);
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-size: 20px;
}
.img-perfil{
border-radius: 50%;
width: 100px;
height: 92px;
margin: 20px;
}
.not{
background-color: #0095fe;
color: #ffffff;
width: 279.08px;
height: 30px;
text-align: center;
padding: 8px;
margin-bottom: 30px;;
border-radius: 4px;
}
.container-trocar-conta{
display: flex;
flex-direction: row;
}
.change{
margin-left: 2px;
color:#0095fe;
font-weight: bold;
}
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Instagram Inicial</title>
</head>
<body>
<div class="content">
<div class="container-img-cel">
<img class="cel"src="https://www.instagram.com/static/images/homepage/home-phones.png/43cc71bb1b43.png">
<figure class="slide">
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
</div>
<div class="container-login">
<img class="img-logo" src="https://logodownload.org/wp-content/uploads/2017/04/instagram-logo-17.png">
<div class="img">
<img class="img-perfil" src="https://cdn.cmjornal.pt/images/2019-06/img_432x244$2019_06_25_12_54_40_863705.jpg">
</div>
Continuar como dog ?
<div class="container-trocar-conta">
<p>Não é dog ?</p>
<a class="change" href="#"> Trocar de conta</a>
</div>
</div>
</div>
</body>
</html>
You are changing the css of the whole frame with the .slide class, not the individual pictures.
You could give each picture a (second) unique class and and set each picture's position indivually. The overlapping can then be achieved by setting position: absolute; on each of the images altough this can bring some positioning problems.
So instead of using .slide, change the images like this
<figure class="slide">
<img class="foto_1" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto_2" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto_3" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto_4" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto_5" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
And then create a seperate CSS entry for every image like this
.foto_1{
position: absolute;
left: 0px
}
.foto_2{
position: absolute;
left: -250px
}
Where the amount of left: -?px increases by the width of the image each foto.
I've made a sidebar in html but there is a problem when I've added some images and attempted to change the margins. This also applies the margin to the sidebar. I've tried changing the position from fixed to relative, absolute, etc. but this does not help. The sidebar should maintain its original 100% height, but the images' margin-top of 400px also applies to the sidebar, which is 400px down from where it should be. Thanks in advance
.sidebar{
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background-color: #313B4A;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.7s ease;
}
.sidebar header{
font-size: 22px;
color: #4F6D7A;
text-align: center;
font-weight: 800px;
line-height: 75px;
background: #DBE9EE;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
color: #dceedc;
font-size: 20px;
padding-left: 10px;
transition: 0.5s;
}
label #btn, label #close{
position: absolute;
}
#tickbox:checked ~ .sidebar{
left:0;
}
#tickbox:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#tickbox:checked ~ label #close{
left:195px;
}
html {
font-family: 'Karla', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.gallery {
margin-top: 200px;
padding: 20px;
display: flex;
flex-direction: row;
}
.gallery figure {
margin: auto;
width: 250px;
text-align: center;
}
.gallery img{
height: 200px;
width: 275px;
}
Oops, forgot to add the HTML!
<body>
<input type="checkbox" id="tickbox">
<label for="tickbox">
<i class="fas fa-bars"id ="btn"></i>
<i class="fas fa-times"id ="close"></i>
</label>
<div class="sidebar">
<header>KeyQuarters</header>
<ul>
<li>Home</li>
<li>Group Buys</li>
<li>Keycaps</li>
<li>Switches</li>
<li>Deskmats</li>
<li>Kits</li>
<li>Accessories</li>
</ul>
</div>
<div class="gallery">
<figure>
<img src="test1.png" alt="keeb1">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
</div>
</body>
I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide. I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.
/*********************
General
*********************/
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
h1, h3 {
margin: 0;
}
/*********************
Header
*********************/
.main-header {
background-color: #3cb371;
width: 100%;
float: left;
text-align: center;
position: fixed;
z-index: 1000;
}
.logo {
font-family: 'Indie Flower', cursive;
}
.name {
padding-top: 5px;
}
.occptn {
padding-bottom: 15px;
font-size: 15px;
}
.main-header a {
color: #fff;
margin: 0;
}
.main-nav {
background-color:#2e8b57;
font-weight: bold;
}
.main-nav a {
text-align: center;
}
.main-nav li {
display: inline-block;
padding: 15px;
}
.selected a:visited {
color: #000;
}
.main-nav a:hover {
color: #000;
}
/*********************
Images
*********************/
.container figure {
margin: 0;
float: left;
width: 45%;
padding: 0 20px ;
}
.container img {
max-width: 100%;
display: block;
}
.container figcaption {
clear: right;
background-color: #dcdcdc;
padding: 10px 0;
font-size: .8em;
}
.figureOne ,
.figureTwo {
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
/*********************
Footer
*********************/
.main-footer {
text-align: center;
width: 100%;
background-color: #7fffd4;
clear: left;
padding: 20px;
}
.main-footer a {
}
/*********************
Responsive Layout
*********************/
#media (min-width:660px) {
.main-header {
padding: 10px 0;
box-shadow: 0 5px #2e8b57;
}
.logo {
float: left;
width: 45%;
text-align: left;
padding-left: 20px;
}
.main-nav {
background-color: #3cb371;
float: right;
width: 45%;
}
.main-nav li {
padding-left: 10px ;
}
.occptn {
padding: 0;
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Irfan Hussain | Web Developer</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Start Header -->
<header class="main-header">
<a class="logo" href="index.html">
<h1 class="name"> Irfan Hussain </h1>
<h3 class="occptn"> Web Developer </h3>
</a>
<ul class="main-nav">
<li class="selected">Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- End Header -->
<div class="container clearfix">
<figure class="figureOne">
<figcaption> Experimentation with color and texture. </figcaption>
<img src="img/numbers-01.jpg" alt="Irfan Web Developer" />
</figure>
<figure class="figureTwo">
<figcaption> Playing with blending mode in photoshop. </figcaption>
<img src="img/numbers-02.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Trying to create 80's style glow. </figcaption>
<img src="img/numbers-06.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Drips created using Photoshop brushes </figcaption>
<img src="img/numbers-09.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Creating shapes using repetition. </figcaption>
<img src="img/numbers-12.jpg" alt="Irfan Web Developer" />
</figure>
</div>
<footer class="main-footer">
<p> ©2018 Copy right Irfan Hussain | Web Developer </p>
<img src="img/facebook-wrap.png" alt="Facebook" />
<img src="img/twitter-wrap.png" alt="Twitter" />
</footer>
</body>
</html>
I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.
Here's a screenshot of the issue I'm having:
I cannot for the life of me figure out how to remove the empty space on either side of the navbar. I've tried making the margin and padding 0 but it hasn't been working. Any help would be appreciated.
Here is the html:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
Add display: inline-block; to your nav ul selector and that will remove the whitespace from the sides.
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
display: inline-block;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
You're maxing out the width at 1000px:
#wrap{
width:1000px;
}
The nav is within that, so it can't stretch wider than that.
As is noted by others, you're setting the width to 1000px;
Change#wrap{width: 1000px} to #wrap{width: 100%}
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)