CODEWITHSUNDEEP
htmlcss
DarkBlueMullet
DarkBlueMullet

Reputation: 93

Big White space on right of website

I am building my first website. It's going fairly well, considering it is my attempt but I have a huge amount of white space to the right of the page and I have no idea how to rectify.

Here is some of the HTML:

<head>

<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>:Music Hound Dundee:</title>
<meta name="description" content="This is the Music Hound Dundee website by Group 24.">
<meta name="keywords" content="music, gigs, dundee">

<meta http-equiv="cleartype" content="on">

<!-- Responsive and mobile friendly stuff -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/6cols.css" media="all">


<style type="text/css">


}

</style>
<style>
     /* Begin Navigation Bar Styling */
 #nav {
  width: 100%;
  height: 100%;
  display:inline-block;
   text-align: center;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 0px solid #ccc; 
  border-top: 0px solid #ccc; }
#nav li {
  display:inline-block; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
   font-family: sans-serif;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: FFFFFF;
  background-color: #FC359A; }

  #section1 {
width:500px;
display:inline-block;
padding:10px;        
}

  #section2 {
width:500px;
display:inline-block;
padding:0px;         
}
/* End navigation bar styling. */
</style>
<style>
p {
color: white;
font-size: 20px;
font-family; sans-serif;
background-color: rgba(0, 0, 0, 0.7);
}

hr {
margin-top: 4px;
margin-bottom: 1px;
}
</style>
</head>

<body padding:0; margin:0; bgcolor = "#051525", border = "0">

<div id="wrapper">
<div id="headcontainer">
    <header>
    <img src="BlueBanner.PNG" width="100%" height="100%" >
    </header>
</div>
<div id="maincontentcontainer">

    <div class="standardcontainer" id="example">
        </div>
<ul id="nav">
  <li><a href="file:///F:/University/www_Authoring/Group24_website/index.html">Home</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">Gig News</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Venues.html">Venues</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/FAQ.html">FAQ's</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Promotions.html">Band Promotion</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/About.html">About</a></li>
</ul>
    <br></br>
        <div class="image">
            <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html"><img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View"></a>

All of the CSS:

/*  GRID OF SIX   ============================================================================= 

*/

.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image2 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 690px; 
   width: 100%;
}

.image3 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 100px; 
   width: 100%;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

h3 { 
   position: absolute;
   top: 174px; 
   left: 746px; 
   width: 100%; 
}

h3 span { 
   color: white; 
   font: bold 15px/35px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h3 span.spacer {
   padding:0 5px;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_6_of_6 {
        width: 100%; 
    }
    .span_5_of_6 {
        width: 100%; 
    }
    .span_4_of_6 {
        width: 100%; 
    }
    .span_3_of_6 {
        width: 100%; 
    }
    .span_2_of_6 {
        width: 100%; 
    }
    .span_1_of_6 {
        width: 100%; 
    }

   p {
       border-style: outset;
       border-width: thick;
       border-color: white;
       padding: 4px;
       text-align: left;
   }
    }

Upvotes: 0

Views: 329

Answers (2)

JRulle
JRulle

Reputation: 7568

it's hard to tell with the truncated HTML, but it looks like the styles you put on the <img> tag should be on the .image class (<div class="image">). Updated Demo

Original:

    <div class="image">
        <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">
             <img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View">
        </a>
    </div>

Changed:

   <div class="image" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;">
        <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">
             <img src="the-view.jpg" alt="The View">
        </a>
    </div>

Upvotes: 1

anexo
anexo

Reputation: 505

First of all, I see what it seems to be a lot of copy-paste pieces of code, try to get all the:

<style> ... </style>

together to have a much cleaner code.

Second I've done a fiddle: http://jsfiddle.net/6b3mpx53/ to try to replicate your error but I don't see the white space you tell us.

Could you please give us some more info.

Another thing: try to close your tags like:

<img ... />

Regards

Upvotes: 1

Related Questions