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.
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
Hello to all and to all,
I'm a Junior developer and its going to be almost two weeks long as I struggle on a topic. My code works very well for the desktop version and on all browsers (Chrome, EI, Firefox, Edge).
On the other hand when I want to view my page on mobile everything works well on safari but for se that is Firefox and chrome is the disaster.
I have the impression that there are classes of my CSS that are not supported. On the other hand when I put the style in inline mode in my page html everything works well, weird all its !!!
Hoping that a savior can help me find a solution. I put you below my html code and css.
Good day everyone.
body{
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
height: 1500px;
margin: 0px;
}
.verso{
width: 370px;
height:950px ;
margin-bottom: 0px;
}
.carteModeRecto{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0 auto;
outline: none;
border: none;
border: 2px solid #cb353b;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0 auto;
margin-bottom: 30px;
width: 280px;
height: 52px
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;
}
.buttontext{
color: white;
}
.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 43px;
margin-top: 5px;
}
.info{
margin-left: 35px;
}
.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 5px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
-webkit-perspective: 740px;
perspective: 740px;
margin-top: 50px;
}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {
margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 29px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
}
.reseaux{
text-align: left;
margin:0 auto;
margin-left:35px;
margin-top: 60px;
padding-bottom: 70px;
}
.qrcode{
text-align: left;
margin:0 auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0 auto;
margin-left: 45px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="img/photo_roger.jpg">
<meta name="image" content="img/photo_roger.jpg">
<meta name="description" content="Location d'imprimantes et photocopieurs,
Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
<title>Roger Duarte : Directeur Commercial - Axium Solutions </title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" > <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div> <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >
Roger Duarte
</div>
<div class="statu" >
Directeur Commercial
</div>
<a href="download/vcard_roger.vcf" download>
<div class="buton2">
<img src="img/ico_download.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div>
</div></a>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
<div class="buttontext" >Partager</div>
</div>
<div class="info">
<div class="ligneinfo" >
<img src="img/ico_mobile.jpg" alt="" class="iconinfo">
<div class="texte">01 84 00 86 21</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_phone.jpg" alt="" class="iconinfo">
<div class="texte">06 62 68 25 03</div> <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="img/ico_sms.jpg" alt="" class="iconinfo">
<div class="texte">SMS</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_mail.jpg" alt="" class="iconinfo">
<div class="texte" >Roger.duarte#axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_web.jpg" alt="" class="iconinfo">
<div class="texte">www.axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
31 Avenue Pierre Brossolette <br>
91380 CHILLY MAZARIN</a>
</div>
</div>
</div>
<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<div class="texte">Linkedin</div>
</div>
<div class="ligneinfo" > <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<div class="texte">Facebook</div>
</div>
</div> <!--FIN MODE RECTO-->
</div>
<div class="couche verso" > <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<a href="vcard_roger.vcf" download>
<div class="buton2" >
<img src="img/ico_download.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div>
</div></a>
<div class="buton2">
<img src="img/ico_mail2.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Partager Par Mail</div> <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Copier le lien</div>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div> <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
</html>
try to use max-width instead of width. Max-width help to change size based on device size.
Example:
.verso{
width:100%;
max-width: 370px;
margin-bottom: 0px;
}
thank you for your help, unfortunately its not changing anything. I can post an image of itself that its gives on my mobile with firefox and chrome.
Mobile version on firefox and chrome
Mobile version on safari
i spend sometimes for searching about this and i found something , i hope it helpful :
checkout the link : https://dev.to/neshaz/how-to-make-all-browsers-understand-your-css-2a4e
In navbar are 3 links which have wrapper div element, problem is cus that links inside of div are not stretched. Check the screenshot - I need to hit link to navigate between pages:
I want to that links in nav to stretch space like with and heigh 100%;
This is css of navbar
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
color: var(--color-white);
background-color: var(--color-black);
.user-nav {
display: flex;
align-items: center;
&-item {
width: 118px;
font-size: 20px;
font-weight: 500;
line-height: 30px;
text-align: center;
color: var(--color-grey);
}
&-item-active {
width: 118px;
font-size: 20px;
font-weight: 500;
line-height: 30px;
text-align: center;
color: var(--color-grey);
box-shadow: inset 0 -4px 0 var(--color-red); // made border bottom inside of element
}
&-item-link {
text-decoration: none;
color: inherit;
}
}
.logo {
width: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
img {
width: 100%;
}
}
}
Html of navbar:
<header className="header">
<nav className="user-nav">
<div className={this.handleActiveRoute('/', activeRoute)}>
<Link href="/">
<a className="user-nav-item-link">Dashboard</a>
</Link>
</div>
<div className={this.handleActiveRoute('/search', activeRoute)}>
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className={this.handleActiveRoute('/collections', activeRoute)}>
<Link href="/collections">
<a className="user-nav-item-link">Collections</a>
</Link>
</div>
</nav>
<div className="logo">
<img src={Logo} alt="logo" />
</div>
<div className="user-nav-icon">
<div className="user-nav-icon-notification">
<span className="icon-bell-o" />
</div>
<div className="user-nav-icon-settings">
<span className="icon-cog" />
</div>
</div>
</header>
How to make a links inside of divs to have 100% width and height?
'display: block' on links probably helps
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
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 :)