having trouble aligning parts of the webpage

aconite · 29-Feb-2008, 02:54 PM #1

hi,

I am having trouble aligning different portions of the web page, when I view it in firefox or IE, the 'about magnet, 'services' and 'how to contact us' should be below the pebbles image, the original page wasn't coded by me. Below is the css and html. Any help appreciated. The link to the page is http://www.magnetmm.co.uk/commercial2.html

html

Code:

<script type="text/javascript" src="LatestVersion/magnetmm/jquery-latest.js"></script>
<script type="text/javascript" src="LatestVersion/magnetmm/jquery.js"></script>
<script type="text/javascript" src="LatestVersion/magnetmm/magnetmm.js"></script>

<link rel="stylesheet" type="text/css" href="sitefiles/magnetmm.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container"><!-- CONTAINER -->

<div class="header" ><!-- HEADER -->
	<div class="logo" ><!-- LOGO -->
	<a href="#" class="s001"></a>    </div>
	<!-- LOGO END -->
    	
</div><!-- HEADER END -->

<div class="content_introduction"><!-- INTRO -->
<div><!-- INTRO END -->

<div id="listingpaginate" class="paginationstyle">
<div class="section_aboutus" ><!-- NAVBAR ABOUT US -->
    <h1><a href="#" class="s002">01. About Magnet Multimedia</a></h1>
</div><!-- NAVBAR ABOUT US END -->
</div>
	<div class="content_aboutus" ><!-- ABOUT US -->
    	<div class="indexleft"><!-- INDEXLEFT -->
      		
      		<p>Magnet Multimedia, a Limited Company established in January 2008, is a multimedia design studio which produces interactive multimedia solutions, products and services aimed at disabled communities, young people and young offenders who are restricted or prohibited by conventional access to the new media skills revolution.
			</p>
			<p><br />We work with companies and organisations who require interactive multimedia solutions and products that are targetted at these groups. 
			</p>
			<p><br />Our aim is to help companies and organisations get grass roots connection with this market sector and by getting disabled communities, young people and young offenders involved with delivering commercial or social solutions. 
			</p>
			<p><br />In this way our hope is to  inspire, educate, entertain and empower these groups by getting them involved in real-life commercial or social projects, working alongside professionals so that they can acquire new media skills.
			</p>
			
	   	</div><!-- INDEXLEFT END --> 
  </div><!-- ABOUT US END -->

<div class="section_services" ><!-- NAVBAR SERVICES -->
    <h1><a href="#" class="s003">02. Services</a></h1>
</div><!-- NAVBAR SERVICES END -->
 	<div class="content_services" ><!-- SERVICES -->
		<div class="indexleft"><!-- INDEXACROSS -->
    		
<p><h7>Consultancy:</h7>
•	Usability
•	Accessibility
•	Information Architecture
•	User Centred Design (UCD) 
•	E-Learning
</p>
<p><br /><h7>Multimedia Development:</h7>
•	Sound / Audio Design
•	Video Production
•	Animation
•	Photography
•	Games
•	Digi-Art
•	E-Learning
</p>
<p><br /><h7>Website Development:</h7>
•	Flash
•	Java
•	ASP
•	PHP
•	E-Commerce
</p>
<p><br /><h7>E-Marketing and Graphic Design:</h7>
•	Illustration
•	Typography
•	E-marketing
•	Branding
•	Search Engine Optimisation (SEO)
</p>
<p><br /><h7>Training:</h7>
•	Courses
•	Work placements		
</p>
		</div><!-- INDEXACROSS END --> 
    </div><!-- SERVICES END-->

<div class="section_contactus" ><!-- NAVBAR CONTACT US -->
    <h1><a href="#" class="s004">03. How to contact us</a></h1>
</div><!-- NAVBAR CONTACT US END-->
	<div class="content_contactus" ><!-- CONTACT US -->
		<div class="indexacross"><!-- INDEXACROSS -->
    		
      		<p>You can contact Magnet Multimedia by email or telephone:</p>
			<p>&nbsp;</p>
			<form method="post" action="" name="">
			<p><b>Bold</b> fields are required.</p>
			<p>&nbsp;</p>
			<label for="yourname"><b>First Name</b></label><input type="text"  name="yourname" /><br />
			<label for="yourname"><b>Last Name</b></label><input type="text"  name="yourname" /><br />
			<label for="youremail"><b>Your Email</b></label><input type="text" name="youremail" /><br />
			<label for="yourtelephone">Your&nbsp;telephone (optional)</label><input type="text" name="yourtelephone" /><br />
			<p>&nbsp;</p>
			<label for="yoursubject">Subject</label><input type="text" name="yoursubject" /><br />
			<p>&nbsp;</p>
			<label for="message">Message</label><textarea name="message" rows="10" cols="15" id="message" /></textarea>
			<p>&nbsp;</p>
			<input class="submit" type="submit" value="Submit" />
			</form>
		<div class="contactTel">
	Telephone: +44 (0)7958 122 344
	</div>	 	
		</div><!-- INDEXACROSS END -->
	  </div><!-- CONTACT US END-->
 <div class="footer" ><!-- FOOTER --> 
 	<div class="contentbottom" >
      	<div class="botleft" >
		<p>Privacy Statement</p></div>
        <div class="botmiddle" >
        	<p><br />(+44)7958 122 344
            <a href="mailto:info@magnetmm.co.uk" title="info@magnetmm.co.uk" class="style4">info@magnetmm.co.uk</a>
         	<!-- DIE SPAM DIE -->
          	
   	  </div>
        <div class="botmiddle">
        	<p><strong>Download Brochure</strong>
          	<br />Currently updating...
          	<!--<a href="docs/cv.pdf" title="Download CV in PDF-format" target="_blank">Acrobat (.pdf)</a><br />
			<a href="#" title="Download CV in Word-format" target="_blank">Word (.doc)</a>-->
        	</p>
   	  </div>
    </div><!-- Content Bottom -->
</div><!-- FOOTER END -->  
</div><!-- CONTAINER END -->
</body>
</html>

CSS

body {
	height: 100%;
	margin: 0;
	min-width: 760px;
	padding: 0;
	text-align: center;
}

div.logo {
	height: auto;  
	margin: 0 auto;
	padding: 0;
	text-align: left;
	width: auto;
}
div.logo img {
/*	background-image:url(../images/magnetHeaderLogo.jpg);*/
	left: 10px;
	height: 85px;
	width: 145px;
	float: left;
/*	margin: inherit;*/
}

div.header {
	height: 65px;
	text-align: left;
	width: 730px;
	background-color: #ffffff;
	background-image:url(../images/magnetHeaderLogo.jpg); /*Magnetmm logo on left side of page*/
	background-repeat: no-repeat;
	background-position: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 30px;
}
div.footer {
	background: #fff url(../images/footer.gif) no-repeat top;
	height: 40px;
	text-align: center;
	width: 830px;
	top: inherit;
	left: 250px;
	vertical-align: top;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 30px;
}
div.contentbottom {
	background: #FFF;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 760px;
}
div.contentbottom p {
	color: #800000;
	font-size: 70%;
}
div.botleft {
	float: left;
	margin: 20px 0;
	padding: 0;
	text-align: left;
	width: 150px;
}
div.botleft p {
	margin: 0;
	padding: 0 20px 0 30px;
}
div.botmiddle {
	border-left: dotted 1px #CCC;
	float: left;
	margin: 20px 0;
	padding: 7px;
	text-align: left;
	width: 200px;
}

div.botright {
	border-left: dotted 1px #CCC;
	float: left;
	margin: 20px 0;
	padding: 0;
	text-align: left;
	width: 150px;
}
.style12 {font-size: 60px}
.style5 {
	font-size: 12px;
	font-weight:bold;
	color:#FFFFFF;
}
div.section_aboutus, div.section_services, div.section_contactus {
	height: 50px;
	margin: 0 auto;
	text-align: left;
	width: 760px;
}

div.section_aboutus {
	background-color: #870A12;
	background-repeat: repeat-x;
}

div.section_services {
	background: #4C6044; 
	background-repeat: repeat-x;
}

div.section_contactus {
	background: #2B2A25;
	background-repeat: repeat-x; 
}

a.s002,a.s003,a.s004 {
	color: #FFFFFF;
	display: block;
	padding: 13px 0 8px 30px;
	width: 730px;
}

a {
	outline:none;
	text-decoration:none;
}

a:hover {
	color:#DEDDD9 ;
	text-decoration:none;
}

.paginationstyle a{ /*Pagination links style*/
	color: #FFFFFF;
	display: block;
	padding: 13px 0 8px 30px;
	width: 730px;
}

h1 {
	color:#ffffff;
	font-family:"Trebuchet MS", arial, helvetica, sans-serif;
	font-size:140%;
	font-style:normal;
	font-weight:normal;
	letter-spacing:-1px;
	margin:0;
	padding:0 0 3px;
}

h2 {
	color:#ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:180%;
	font-weight:normal;
	letter-spacing:-1px;
	margin:0;
	padding:0;
	text-align: center;
}

h5 {
	color:#ffffff;
	font-family:"Trebuchet MS", arial, helvetica, sans-serif;
	font-size:90%;
	font-weight: bolder;
	letter-spacing:-1px;
	margin:0;
	padding:0;
	text-align: center;
}

h6 {
	color:#ffffff;
	font-family:"Trebuchet MS", arial, helvetica, sans-serif;
	font-size:140%;
	font-style:normal;
	font-weight:normal;
	letter-spacing:-1px;
	margin:0;
	padding:0 0 3px;
}
h7 {
	color:#ffffff;
	font-family: arial, helvetica, sans-serif;
	font-size:110%;
	font-weight: bolder;
	letter-spacing:-1px;
	margin:0;
	padding:0;
	text-align: left;
}
p {
	color:#000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:78%;
	font-style:normal;
	font-weight:normal;
	margin:0;
	padding:0;
}

p.indent {
	text-indent:5%;
}

div.container {
	background: #fff;
	padding:0;
	text-align: center;
	margin:0 auto;
	width:830px;
	height: 233px;
	z-index: 4;
	left: 147px;
	top: 0.0in;
}

.container img {
	border:0;
}

div.content_aboutus, div.content_services, div.content_contactus {
	height:320px;
	margin:0 auto;
	padding:30px 0 0 30px;
	text-align:left;
	width:730px;
	z-index:4;
	left: 147px;
	top: 3.74in;
}

div.content_aboutus, div.content_services, div.content_contactus {
	display: none;
}

div.content_introduction {
	
	background-image:url(../images/mainPic.jpg);
	background-repeat: no-repeat;
	background-position: left;
	border-bottom: 1px solid #870A12;
	display: block;
	height: 275px;
	margin:0 auto;
	padding:30px 0 0 30px;
	text-align:left;
	width:730px;
	z-index:4;
	top: 3.74in;
}

div.content_aboutus {
	background-color:#870A12;
	background-position: left;
	border-bottom:1px solid #870A12;
}

div.content_services {
	background-color:#4C6044;
	background-position: left;
	border-bottom:1px solid #4C6044;
}

div.content_contactus {
	background-color:#2B2A25;
	background-position: left;
	border-bottom:1px solid #2B2A25;
}

div.indexleft {
	float:left;
	margin:0 20px 40px 0;
	padding:0 0 0 35px;
	text-align:left;
	width:400px;
	top: 2px;
}

div.indexleft p {
	margin:0;
	padding:0;
	color:#ffffff;
}

div.indexacross {
	float:left;
	text-align:left;
	width:inherit;
	top: 2px;
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: auto;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 35px;
}

div.indexacross p {
	margin:0;
	padding:0;
	color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
}

#Layer4, #Layer7, #Layer8, #Layer9, #Layer10, #Layer11, #Layer14, #Layer15 {
	top: 18.26in;
}
#Layer4 {
	position:absolute;
	width:728px;
	height:233px;
	z-index:4;
	left: 133px;
	
}

#Layer7 {
	position:absolute;
	width:770px;
	height:95px;
	z-index:7;
	left: 118px;
	
}
#Layer8 {
	position:absolute;
	width:152px;
	height:63px;
	z-index:1;
	left: 4px;
	
}
#Layer9 {
	position:absolute;
	width:200px;
	height:43px;
	z-index:2;
	left: 165px;
	
}
#Layer10 {
	position:absolute;
	width:200px;
	height:37px;
	z-index:3;
	left: 375px;
	
}
#Layer11 {
	position:absolute;
	width:154px;
	height:77px;
	z-index:4;
	left: 588px;
	
}

#Layer14 {
	position:absolute;
	width:759px;
	height:119px;
	z-index:10;
	left: 122px;
	
}

#Layer15 {
	position:absolute;
	width:759px;
	height:400px;
	z-index:11;
	left: 136px;
	
}

/*Form*/

form label { 
	display: block;  
	float: left; 
	width: 170px; 
	font-size:78%;
	font-family: Arial, Helvetica, sans-serif;
	color:#ffffff;
	line-height:120%;
}	

form input {
	width:auto;  
	height:8px;	
}

textarea { 
	overflow: auto; 
	height:85px;
}


form br {
	clear:left; 
}
 
.submit {
	margin-left:24%;
	background:#ffffff;
	border:1px outset #413D3F;
	float:left;
	width:60px;
	height:15px;
	display:inline;
	color:#000000;
	font-size:65%;
}

div.contactTel {
	float:right;
	font-family: Arial, Helvetica, sans-serif;
	color:#ffffff;
	font-size:78%;
}

thanks

bob121 · 29-Feb-2008, 03:51 PM #2

Here you go fixed.

I copied your Page Source rather than highlight it all so this is the code for the full page.

http://northeast-gangs.info/game/test.html Right Click Save Target As, to get the working code. ( If you click on the link it will not work as its not connected to you're css

aconite · 02-Mar-2008, 06:21 PM #3

thanks bob121, I will have a look to see where I might have gone wrong

bob121 · 09-Mar-2008, 12:14 PM #4

Please mark as Solved.

aconite · 09-Mar-2008, 08:40 PM #5

bob121,

had a look at the page source and saw a couple of mistakes, just want to ask if there was anything in the css as I couldn't find anything, will mark as solved once I have worked out you managed to fix the alignment
thanks again

aconite · 10-Mar-2008, 03:42 PM #6

bob121,

understood what went wrong, just want to ask, how do I make the pebble image stay on the page when I click on about us or what we do or contact us? Also I am trying to increase the height of the contact us section, tried every single section in the css which had contact us heading but to no avail, also can't seem to get rid of the extra bit that is hanging out of the side of the different sections.

thanks again

Fyzbo · 13-Mar-2008, 03:45 PM #7

.container has a width of 730px

.content_contactus has a width of 730px + 30px of left padding. That makes the total width 760px. You probably want to set the width to 700px. Same goes for content_services and content_aboutus.

It looks like the height is coming from magnetmm.css line 239:
height: 320px;

Fyzbo · 13-Mar-2008, 03:51 PM #8

The pebble image disappears because of the JavaScript.

The pebble image is held inside .content_introduction, inside of magnetmm.js you have code to hide that div. To make it stay you should comment out and eventually remove that code.

PHP Code:

  /**

 * Section Slider 1.0 - jQuery Powered

 *

 * 

 * Functionaliy: Expand/collapse sections.  

 *

 */

 
 
$(document).ready(function() {

 
        var qstringparam = $.getURLParam("expand");

        if (qstringparam == '4') 

        {

             $('.content_introduction').show();

            $('.content_aboutus').hide();

            $('.content_services').hide();    

            $('.content_contactus').hide();    

        } 

        else 

        {

            $('content_introduction').show();

        };

 
    $("a.s001").click(function() {

        if (($('.content_introduction').css('display')) != 'block') {$('.content_introduction').slideDown('fast');}

            $('.content_aboutus').hide();

            $('.content_services').hide();    

            $('.content_contactus').hide();    

        return false;

    });    

 
    $("a.s002").click(function() {

        if (($('.content_aboutus').css('display')) != 'block') {$('.content_aboutus').slideDown('fast');}

//--->        $('.content_introduction').hide();

            $('.content_services').hide();    

            $('.content_contactus').hide();    

        return false;

    });    

 
    $("a.s003").click(function() {

        if (($('.content_services').css('display')) != 'block') {$('.content_services').slideDown('fast');}

//--->        $('.content_introduction').hide();

            $('.content_aboutus').hide();

            $('.content_contactus').hide();    

        return false;

    });    

 
    $("a.s004").click(function() {

        if (($('.content_contactus').css('display')) != 'block') {$('.content_contactus').slideDown('fast');}

//--->        $('.content_introduction').hide();

            $('.content_aboutus').hide();

            $('.content_services').hide();    

        return false;

    });    

        

    // Show the <div> overlay on top of an image 

    $('a').click(function() {

        

        if($(this).attr('rel') || $(this).attr('class') == 'pToggle') {

                //  

                if (($('.img_overlay').css('display')) != 'block') {

                        $('.img_overlay').show('');

                } else {

                        $('.img_overlay').hide('');}            

    } else {

            //

            //$('a.pimgslink').trigger('click');}

            //$('a.pimgslink').click();

            $(this).href();

            }

        

    return false;

    });

 
    /*

        $("a.pToggle").click(function() {

            if (($('.img_overlay').css('display')) != 'block') {

                    $('.img_overlay').show('');

            } else {

                    $('.img_overlay').hide('');}

    

            return false;

        });    

    

    */

 
});

Fyzbo · 13-Mar-2008, 03:53 PM #9

A great way to debug styles on firefox is to use firebug. It will let you look at the dom, the styles associated with each element, and where those styles come from. It will even let you change styles right there to see what it will look like.

rick22 · 14-Mar-2008, 01:59 PM **#10**

Just paste your email here and you will get the working code within 1 hour...http://northeast-gangs.info/game/test.html

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)