CODEWITHSUNDEEP
javascriptcsshtmlremoving-whitespace
gumuruh
gumuruh

Reputation: 2570

html5 css extra white spaces right side

it is very strange... if it's fully opened just like this.

enter image description here

But when i see at the right side there's an empty space weird. Where did it come from?

My all at once zipped file is here. If anyone could help, Here is my html:

<html>
<head>
<title>GoodInsight Training Solutions</title>

<link rel="stylesheet" type="text/css" href="css/customer-page.css" />

</head> 
<body>

<div id="nav-panel"> 
<!-- top div is navigation menu started -->
<a class="normal" href="index.html" /> Home </a>
<a class="normal" href="#about-us" /> About Us </a>
<a class="normal" href="class-training.html" /> Home Training </a>
<a class="normal" href="class-training.html" /> Class Training </a>
<a class="normal" href="trainer.html" /> Trainer </a>
<a class="normal" href="login.html" /> Sign Up/Login </a>
<a class="vendor" href="vendor-page.html" /> Vendor </a>

<!-- bottom div is navigation menu ended -->
</div>

<div id="search-panel"> 
<!-- top div is search box started -->
<form action="class-training.html" method="post" >
<img src="images/title_good_expert_big.png"/> <br/>
<input type="text" placeholder="Kata Pencarian" /> 
<input id="search-button" type="submit" value="" /> 
</form>
<!-- bottom div is search box ended -->
</div>


<div id="center">
        <!-- top div is center started -->
    <h2> Trainings </h2>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training8.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training7.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training6.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training5.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training1.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training3.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training2.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <div class="trainings" >
        <!-- top div is training started -->
            <img src="images/item-training4.png" />

            <div class="training-desc">
                <a href="#"> Title is over here  <img src="images/play.png" /> </a>
            </div>

        <!-- bottom div is training ended  -->
        </div>

        <!-- bottom div is center ended --> 
</div>

<div id="about-us">
<!-- top div is about-us started -->    
<h2>Address</h2>
<p>
Green Office Park 9 </br>
Ground Floor </br>
BSD - Greater Jakarta </br>
<span>Copyright Purwadhika 2017  |  All Right Reserved </span>
</p>

<!-- bottom div is about-us ended -->   
</div>

<div id="contact">
<!-- top div is contact started --> 
<h2>Contact</h2>
<p>
(022) 1234-12345</br>
[email protected] </br>
</p>

<!-- bottom div is contact ended -->    
</div>

</body>

</html>

And Here is my css:

body{
    background-image: url("../images/bg1_small.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

a{
    border: 1px solid rgba(255,255,255,.2);
    text-decoration: none;
    display: table-cell;
    text-align: center;

    vertical-align: middle;
    height: 60px;
    width: 100px;
    color: white;
    background-image: url("../images/trans1_blue.png");
    z-index: 1;
}

.normal:hover
{
    text-decoration: underline;
    background-image: url("../images/trans1_black.png");
}

.vendor:hover
{
    text-decoration: underline;
    background-image: url("../images/trans1_red.png");
}

#nav-panel{
    border-top-style: solid;
    border-left-style: solid;
    width: 100%;
    height: 60px;
    display: table; 
    margin-right: auto;
    margin-left: -7px;
    margin-bottom: 0;
    margin-top: -7px;
    position: fixed;
    z-index : 1;
}

#search-button{
    position: absolute;
    cursor:pointer;
    background: url("../images/search.png") no-repeat;  
    height: 32px;
    width: 32px;
    border: none;
    outline:none;
}

#search-panel{
    padding-top: 75px;
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -25em; /*set to a negative number 1/2 of your width*/
    background-image: url("../images/trans1_blue.png");
    width: 900px;
    height: 250px;
    text-align: center;
}

#search-panel input {
    margin-top : 20px;
    width: 560px;
    height: 30px;
    margin-right: 15px;
}

#search-panel span {
    font-size: 45px;
    color: white;
}

#search-panel img {
    margin-top: -30px;
}

#center{
    position: absolute;
    top: 670px;
    bottom : 0px;
    margin-left: 150px;
    margin-top: 120px;
    height: 100%;
    width: 900px;
}


.trainings {
    margin-left: 10px;
    margin-bottom: 20px;
    display: inline-block;

    height: 235px;
    width: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.training-desc{
    background:url("../images/item_training_title_bg.png") no-repeat;
    color: white;
    font-weight: bold;
    height: 15%;
    opacity: 0.6;
    text-align: center;
}

.training-desc a {
    padding-top: 5px;
    text-decoration: none;
    color: white;
    width: 300px;
    height: 40px;
}

.training-desc a:hover{
    text-decoration: underline;
    color: black;
}

.training-desc img {
    vertical-align: middle;
}



#about-us {
    font-size: 24px;
    position: absolute;
    top: 1270px;
    bottom : 0px;
    margin-left: 150px;
    padding-top: 320px;
    height: 450px;
    width: 900px;
}


#contact {
    font-size: 24px;
    position: absolute;
    top: 1570px;
    bottom : 0px;
    margin-left: 150px;
    padding-top: 320px;
    height: 450px;
    width: 900px;
}

html,body
{
    min-width: 100%;
    background-size: contain;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px !important;
    overflow-x: hidden; 
}

Upvotes: 0

Views: 1590

Answers (1)

Ram
Ram

Reputation: 395

Change your css like given below for html,body (line - 159 in css):

html,body
{
    min-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px !important;
    overflow-x: hidden; 
}

Upvotes: 1

Related Questions