Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Kapil Gupta
Kapil Gupta
2,436 Points
Posted by Kapil Gupta
Kapil Gupta
2,436 Points

Help: HTML Header Position

I am converting a PSD in html5. I have put the full width image slider as a background. Then created a container and a header with position relative and adjust it on top of the banner with property top:-200px (random figure.) but as soon I minimize the browser, the header disappears, off course the height of the browser is decreasing and we have giving Top:-200px. I tried with media query too but it seems not working.. can someone help, I can send the files via email if that helps

Kapil

Anthony D
Anthony D
1,845 Points

Can you post the code here?

2 Answers

Kapil Gupta
Kapil Gupta
2,436 Points
Kapil Gupta
Kapil Gupta
2,436 Points

Thanks Anthony!!!

I am beginner so code can be overwhelming --:)

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tap | Take Photo</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="meanmenu.css">



  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->


</head>

<body>

<div class="top_box"></div>
<!--end of top_box-->

<!--Full Width Responsive Image Slider-->

<!--cycle-slideshow-->
<div class="cycle-slideshow" data-cycle-slides=".slide" data-cycle-pause-on-hover="true" data-cycle-fx="scrollHorz" data-cycle-timeout="30000">

    <span class="cycle-next"></span>
    <span class="cycle-prev"></span>
    <span class="cycle-pager"></span>
        <!--class slide-->
    <div class="slide">

        <img src="images/S1.jpg" alt="digital-next">
                <!--class caption--><div class="caption">
                <h1>SQA Photographer <span class="psd_col">PSD</span></h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
                    <p><a href="#">contact us</a></p>
                </div><!--end caption-->
        </div><!--end slide-->

        <div class="slide">

        <img src="images/S2.jpg" alt="digital-next">
                <!--class caption--><div class="caption">
                <h1>SQA Photographer <span class="psd_col">PSD</span></h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
                    <p><a href="#">contact us</a></p>
                </div><!--end caption-->
        </div><!--end slide-->

        <div class="slide">

        <img src="images/S3.jpg" alt="digital-next">
                <!--class caption--><div class="caption">
                <h1>SQA Photographer <span class="psd_col">PSD</span></h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
                    <p><a href="#">contact us</a></p>
                </div><!--end caption-->
        </div><!--end slide-->
</div><!--end cycle-slideshow-->
<!--end Full Width Responsive Image Slider-->       


<div class="container">

            <header>
                <a href="#"><img src="images/logo.png" id="logo" alt="Take a Photo"></a>

<nav>
                <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">BOOTHS</a></li>
                        <li><a href="#">WEDDINGS</a></li>
                        <li><a href="#">CORPORATE</a></li>
                        <li><a href="#">PARTIES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">PURCHASE</a></li>       
                </ul>
    </nav>

<section class="logo_hover" id="hover_logo"><h6>Take a Photo</h6></section>
<div class="clear"></div>
                </header> 

<!--end of header-->
<!--section class="add_box">
<h1>SQA Photographer <span class="psd_col">PSD </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> 

 <input type="submit" id="sqa_psd" value="CONTACT US" class="psd_sbmit">

</section-->



<div class="content">








<!--end of add_box-->

<section class="pic_booth">
<article>
<h1><span>Recent</span>  <br />Photobooths</h1>

</article>


<figure>
<img src="images/pic_1.png" alt="image 1">
<img src="images/pic_2.png" alt="image 2">
<img src="images/pic_1.png" alt="image 3">

</figure>
<figure class="img_gallery">
<img src="images/pic_1.png" alt="image 1">
<img src="images/pic_2.png" alt="image 1">
<img src="images/pic_1.png" alt="image 1">
</figure>
<h1 class="clear"><a href="#">View More Snaps</a></h1>

</section><!--end of pic_booth-->

</div><!--end of content-->
</div>

<!--end of container-->


        <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> 
        <script src="jquery.meanmenu.js"></script>
        <script src="js/jquery.cycle2.min.js" type="text/javascript"></script>  
        <script src="js/my_Script.js"> </script>

</body>
</html>

StyleSheet

**** STYLESHEET RESET*****
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
 acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, 
 strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
 legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 
 embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
 time, mark, audio, video {    
                            margin: 0;     
                            padding: 0;    
                            border: 0;
                            font-size: 100%;
                            vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
                            display: block;
}
*{
  -moz-box-sizing:border-box;
  box-sizing:border-box; 
}
img{
    max-width:100%;    /* RESPONSIVE IMAGES */
    width:auto;
    height:auto;
}

body{
    margin:0;
    padding:0;

}
.clear{
    clear:both;
}
.float{
    float:left;
}
.top_box{
    background:#00adef;
    padding-bottom:8px;
}
.container{
    width:100%;
    margin:0 auto;
}
header {
    width: 100%;
    max-width:1235px;
    display: block;
    z-index: 999999;
    background: #FFF;
    position:relative;
    margin:0 auto;
    top: -773px;
}
header a img{
    float:left;
    padding:1.5em;

}

/*  ______ NAVIGATION STYLE______*/
header nav {
    text-align: center;
    padding:2em;
}
header nav ul {
    margin: 0;
    padding: 1em;
    list-style-type: none;
}
header nav ul li {
    display: inline;
    margin-left: 1.5em;

}
header nav ul li:first-child {
    margin-left: 0;
}
header nav ul li ul {
    display: none;
}
nav a {
    color: #4c4c4c;
    text-decoration:none;
    border-right:1px dotted;
    text-align:center;
}
a:hover {
    color: #333;
}
a, a:hover {
    -o-transition: color 0.25s ease-in;
    -webkit-transition: color 0.25s ease-in;
    -moz-transition: color 0.25s ease-in;
    transition: color 0.25s ease-in;
}

/*  ______ end NAVIGATION STYLE______*/

.content{
    width:100%;
    float:left;

}
.add_box{
    width:50%;
    padding-top:100px;
    margin:0 auto;
    text-align:center;
    color:#FFF;
}
.add_box {
    line-height:2em;
    font-family:arial;
    padding-bottom:100px;
}

.psd_col{
    color:#F5EC2F;
}
.psd_sbmit{
    padding:10px;
    background:#00adef;
    border:none;
    color:#FFF;
    font-size:1em;
    margin-top:20px;
}
.pic_booth{
    width:100%;
    margin:0 auto;
    position:relative;
    z-index: 9999;
    top: -200px;

}
.pic_booth article{
    width:67.611336%;
    background:#232321; 
    float:left;
    height:445px;
}
.pic_booth article h1{
    color:#FFF;
    font-size:2em;
    padding-left:1.1em;
    width:30%;
    float:left;

}
.pic_booth article h1 span{
    padding-left:1.2em;
    color:#5d5d5d;
}
.pic_booth figure {
    float: left;
    position: relative;
    top: -439px;
    left: 291px;
}
.pic_booth figure  img{
    margin-left:-4px;
    max-width:100%;
}
.img_gallery{
    position: relative;
    left: 6px !important;
    top: -476px !important;
}




/*======================================================================
            BACKGROUND SLIDER STYLE
========================================================================*/
.cycle-slideshow{
    width:100%;
    /*max-width:1235px; */
    display:block;
    position:relative;
    margin:0 auto;
    overflow:hidden;
}
.slide{
    display:block;
    position:relative;
    width:100%;
}
.caption{
    width:75%;
    display:block;
    position:absolute;
    top:180px;
    left:165px;
    padding:25px;
    z-index:9999;
    text-align:center;
}
.caption h1{
    text-transform:uppercase;
    color:#FFF;
    font-size:1.5em;
    letter-spacing:.1em;
}
.caption p{
    color:#FFF;
    font-size:1em;
    letter-spacing:.1em;
    padding-bottom:25px;

}
.caption  p  a{
    text-decoration:none;
    color:#FFF;
    font-size:1.2em;
    padding:7px 15px;
    border:1px solid #FFF;
    background:skyblue;
}
.caption  p  a:hover{
    background:#FFF;
    color:#000;
}
Anthony D
Anthony D
1,845 Points

For the header are you trying to get rid of that tiny gap at the top?

Kapil Gupta
Kapil Gupta
2,436 Points
Kapil Gupta
Kapil Gupta
2,436 Points

umm no, so on a full width, the header stays where I placed it. So after minimizing the browsers the header disappears upwards..I can explain step by step...

  1. first I created a top_bar - just 8px height/padding <br >
  2. then i created a full width background image slider. - its working<br >
  3. after that, i created a div class="container'- main container..<br >
  4. in that container goes the header- logo, nav etc. <br >
  5. because the header was created below the background image slider, so I had the bring up the header to the top by using Position:relative; top:--700px etc. <br > so it looks in the full screen, but disappears upward due to the top:-700px in the small browser..

hope I am making a bit sense, please advice.. I can send yo the files via email [I promise I won't bug you directly via emails after that]

Thanks