CODEWITHSUNDEEP
csshtml
Snedden27
Snedden27

Reputation: 1930

Can't understand css positioning

I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do

Complete

Here what I have don't so far SO far

,as you see there is space between my two divs ,and I don't seem to undestand why ,

Here is my HTML 

<!DOCTYPE html>

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>

<body>
<header>
    <div class=Container>

        <p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br> 
            <span style="font-size:52px "><span style="color:#990202">TEST</span>
            <span style="color:#f1a2a2">PROJECT</span></span>
        </p>

        <img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >

  <div id="headerDIV"  >

       <ul>
        <li>
            HOME
        </li>
        <li>
            ABOUT
        </li>
        <li>
            SERVICES
        </li>
        <li>
            GALLERY
        </li>
        <li>
            CONTACT US
        </li>

       </ul> 
  </div><!--headerDIV-->
  </div><!--headerDivContainer-->
     <div id="topRedStrip"></div> 

</header>
<section id="main">
    <div class=mainContainer>
        <div class="slider"> <!---THIS is the DIV that doesn't listen-->
            <img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">

        </div>
    </div><!--Container-->
</section>
<footer>

</footer>
</body>
</html>

and here is my css

#headerDIV
{

}

header p
{
    font-family: "myriad Pro";
    margin-bottom:0;
    margin-top:0;
    width:500px;;

}
#chatDiv
{
    position:relative;
    float:right;
}

 #topRedStrip
 {
 position:relative;
  top:12px;
  background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
  width: 100%;
  z-index: -2;
  height: 8px;
 }

 .slider
 {
    position:relative;
    float:left;
 }


 #headerDIV
 {
    position:relative;
    top:0;
    right:-90px;
     z-index:-1;
    background-image:url('../images/headerBLACk_03.png');
     background-repeat:no-repeat;
     width:470px;
     height: 200px;
     float: right;


 }
 .Container
 {
    margin: 0 auto;
    width:936px;
 }

 .mainContainer
 {
    margin: 0 auto;
    width:936px;
    height:auto;
 }

 header ul
 {
    padding: 0;
    margin:0;

     z-index: -1;

 }

 header li
 {
    list-style-type: none;
    float:left;
    padding-left: 30px;
    font-family: "myriad Pro";
    font-size:12px;
    color: #504848;
    padding-top:9px;
 }

Can anyone tell me why I get empty space between the div,

Thanks

Upvotes: 1

Views: 288

Answers (2)

peter_the_oak
peter_the_oak

Reputation: 3710

Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.

Here's Chrome as example:

enter image description here

Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.

Upvotes: 3

Jose Magana
Jose Magana

Reputation: 941

It seems to be because the height of your header div is 200px:

 #headerDIV
 {
    position:relative;
    top:0;
    right:-90px;
     z-index:-1;
    background-image:url('../images/headerBLACk_03.png');
     background-repeat:no-repeat;
     width:470px;
     **height: 200px;**
     float: right;
 }

It doesn't need to be 200px when the only thing in it is the black navigation bar.

Upvotes: 2

Related Questions