Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Website coding error need help

Vulcan
in Frontend

Featured Replies

Hello,

 

I cant work our why there is a gap in the menu. When i preview it in my developing software its fine but the content overlaps the menu.

Click here for a link to see the page

 

Here is the codeing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>The Hive Project</title>
	<meta name="author" content="Adrian Pelletier" />
	<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
       <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
	<script type="text/javascript" src="js/execute.js"></script>

</head>

<body>

<div id="wrapper">
<div id="header"><div class="title"></div></div>

<div id="container">
<div id="menu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Projects </h1>

<p>Vintage at Goodwood festival 2010</p>
<p>Collaboration with 'The Den Project' - Leeds Light Night 2010</p>
<p>Marlbourough college - Creative writing course 2011</p>
<p>Chandler School - Woodland design and build alongside workshops 2011 </p>
<p>'Bournstream' charity playsite - design and build 2011</p>

</div>




<div id="footer">
<div class="footer_left">© Copyright 2011 The Hive Project</div>
<div class="fooler_right"><a href="mailto:pigramj@gmail.com">Web Designer Contact </a></div>



</div>
</div>
</div>
</body>
</html>



body {
margin: 0px;
padding: 0px;
background:url(images/bg.png) repeat;
text-align: justify;
font: 14px Arial, Helvetica, sans-serif;
font-size:14px;
color: #00000;


}

h1{
font-size: 50px;
}




#wrapper {
margin: auto;
width:1020px; 
height:0 auto;
border:#000;

}

#header {
width: 1010px;
height: 140px;
background:url(images/header.png);


}

.title {
height: 80px;
width: 440px;
margin-top: 50px;
margin-left: 40px;	
background:url(images/title.png) no-repeat;
position:absolute;
}


#menu {
margin-left: 50px;
width:700px;
position: absolute;


}

#menu ul {
margin: 10px;
list-style: none;
line-height: normal;
position: absolute;
}

#menu li {
float: left;
width:100px;
font-size: 16px;
font-weight: bold;

}

#menu a {
display: block;
width: auto;

}

#menu a:hover {
text-decoration: underline;
font-size: 18px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;

}





#container {
width: 1020px;
height: 0 auto;
background:url(images/main.png) repeat-y;


}




#content{
padding-right: 80px;
padding-left: 80px;
padding-bottom: 30px;




}


a {
 color:#000;	
}

#slide {
margin-top: 50px;
width:600px;
height: 450px;
margin-left: 220px;


}

#placeholder {
width:600px;
height: 450px;

}




#footer  {
width:1020px;
height:54px;
background:url(images/footer.png);
clear:both;
font-weight: bold;
}


.footer_left {
font-weight: bold;
padding-left: 60px;
float :left;
width: 700px;
clear:left;

}



.footer_right{
font-weight: bold;
float: right;
width: 200px;
text-align:right;

}

Edited by Vulcan

you mean the grey background? if so, then that is what you have given it whilst the other divs have an image background.

 

how does it look in your developing software/meant to look?

  • Author

The grey is the background it should be behind of the white.

I have attached showing what it is in my developer.

post-24649-0-60021000-1315396572_thumb.png

and this is what IE8 shows

if the menu had a background and, therefore, height it will probably solve both?

post-19862-0-79496600-1315396876_thumb.jpg

  • Author

The background for the menu should be white and goes. Them menu is in the container. But i does know why its over laping. Im useing fire fox. I can see it happen with my IE8 aswell they are both the same

Edited by Vulcan

try sticking a css reset in there for good measure

"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on"

  • Author

Ok thanks i think i have found the problem. It's always somthing small

Edited by Vulcan

as the actress said to the bishop?

 

The reset will help though :)

ok i dont under stand what it does

 

Hi Vulcan

 

By default each browser comes with its own set of very basic default styles, what the Meyer snippet does is effectively remove / reset these default styles allowing a consistant feel cross browser.

 

I have ammended your HTML / CSS and included the meyer reset to hopefully give you a head start.

Hope this helps

 

Stuart

 

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Hive Project</title>
<meta name="author" content="Adrian Pelletier" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
   <div id="header">
       <div class="title"></div>
   </div><!--// End of #header -->
   <div id="container">
       <div id="menu">
           <ul>
               <li class="active"><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="projects.html">Projects</a></li>
               <li><a href="contact.php">Contact</a></li>
           </ul>
       </div><!--// End of #menu -->
       <div id="content">
           <h1>Projects </h1>
           <p>Vintage at Goodwood festival 2010</p>
           <p>Collaboration with 'The Den Project' - Leeds Light Night 2010</p>
           <p>Marlbourough college - Creative writing course 2011</p>
           <p>Chandler School - Woodland design and build alongside workshops 2011 </p>
           <p>'Bournstream' charity playsite - design and build 2011</p>
       </div><!--// End of #content -->
   </div><!--// End of #container -->
   <div id="footer">
   	<div class="footer_left">© Copyright 2011 The Hive Project</div>
       <div class="fooler_right"><a href="mailto:pigramj@gmail.com">Web Designer Contact </a></div>
   </div><!--// End of #footer -->
</div><!--// End of #wrapper -->

<!--// Non page rendering Javascript performs better within the page footer -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/execute.js"></script>
</body>
</html>

 

CSS Code (Styles.css)

/* -- Start of Meyer Reset DO NOT EDIT -- */
html, body, div, span, applet, 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%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* -- End of Meyer Reset DO NOT EDIT -- */


/* -- Start of style.css edit from here onwards -- */
body {
   background: url("images/bg.png") repeat scroll 0 0 transparent;
   font: 14px Arial,Helvetica,sans-serif;
   margin: 0;
   padding: 0;
   text-align: justify;
}
h1 {
   font-size: 50px;
margin:10px;
}
p {
margin:5px;
}
a {
   color: #000000;
}
#wrapper {
   margin: 0 auto;
   width: 1020px;
}
#header {
   background: url("images/header.png") no-repeat scroll left top transparent;
   height: 140px;
}
.title {
   background: url("images/title.png") no-repeat scroll 0 0 transparent;
   float: left;
   height: 80px;
   margin-left: 50px;
   margin-top: 50px;
   width: 440px;
}
#menu {
   height: 40px;
   padding-left: 50px;
}
#menu ul {
   line-height: normal;
   list-style: none outside none;
}
#menu li {
   float: left;
   font-size: 16px;
   font-weight: bold;
   width: 100px;
}
#menu a {
   display: block;
   width: auto;
}
#menu a:hover {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 18px;
   font-weight: bold;
   text-decoration: underline;
}
#container {
   background: url("images/main.png") repeat-y scroll 0 0 transparent;
}
#content {
padding:0 50px 30px 50px;
}
#slide {
   height: 450px;
   margin-left: 220px;
   margin-top: 50px;
   width: 600px;
}
#placeholder {
   height: 450px;
   width: 600px;
}
#footer {
   background: url("images/footer.png") repeat scroll 0 0 transparent;
   clear: both;
   font-weight: bold;
   height: 54px;
}
.footer_left {
   clear: left;
   float: left;
   font-weight: bold;
   padding-left: 50px;
   width: 700px;
}
.footer_right {
   float: right;
   font-weight: bold;
   text-align: right;
   width: 200px;
}

post-31795-0-54362200-1315403011_thumb.jpg

    •
    • Author

    Thanks Stuart,

     

    Didint know about this i know that all browsers have creates websites differnetly eg IE.

     

    I'm also still learning about how to code a website there are lots of ways.

    Edited by Vulcan

    Create an account or sign in to comment
    Go to topic listing

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.