My web designe

**dharmil** · 07-19-2006 10:31 AM

i Have a web site alreday up but i wanted to fix it and not use tables for i want to use div's
so did i got this

http://dharmil.info/new.html

but its a ll best up the fotter doent show
Can soem one help me...
here is the html code:

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width:780px;
background:url(http://www.dharmil.info/images/bg_base.gif)repeat-y;
}
#wrapperB {
width:780px;
height:24px;
}
#above-nav {	
	background : url(http://www.dharmil.info/images/index_03.gif) no-repeat;
	width : 780px;
	height : 10px;
}
#bottom-nav {	
	background : url(http://www.dharmil.info/images/index_07.gif) no-repeat;
	width : 780px;
	height : 18px;
}
#right-nav-side {	
	background : url(http://www.dharmil.info/images/index_06.gif) no-repeat;
	width : 48px;
	height : 24px;
	float: right;
}
#left-nav-side {	
	background : url(http://www.dharmil.info/images/index_04.gif)no-repeat;
	width:39px;
	height:24px;
	float:left;
}
#center-nav-side {	
	background : url(http://www.dharmil.info/images/index_05.gif)repeat-x;
	width :693px;
	height :24px;
	float:left;
}
#top-above-start {	
	background : url(http://www.dharmil.info/images/index_01.gif) no-repeat;
	width : 780px;
	height : 28px;
}
#top-above-content {	
	background : url(http://www.dharmil.info/images/index_02.gif) no-repeat;
	width : 780px;
	height : 106px;
}
#Big-wrapper {	
	width : 780px;
	background:url(http://www.dharmil.info/images/bg_base.gif) repeat-y;
	height:inherit;
}
body {
	background-color : #353535;
	margin-top:0px;
}
a:link {
	color : #5BDEFA;
	text-decoration : none;
}
a:visited {
	color : #5BDEFA;
	text-decoration : none;
}
a:hover {
	color : #F8F8F8;
	text-decoration : none;
}
a:active {
	color : #F7F7F7;
	text-decoration : none;
}
#bottom-below-end {	
	background : url(http://www.dharmil.info/images/index_bt.gif) no-repeat;
	width : 780px;
	height : 28px;
}
</style>
<style type="text/css">
.bottom-below-end {	
	background : url(http://www.dharmil.info/images/index_bt.gif) no-repeat;
	width : 780px;
	height : 28px;
}
.right-box-side {	
	background : url(http://www.dharmil.info/images/index_fix_09.gif)no-repeat;
	width:577px;
	height:24px;
	float:right;
}
.right-box-side-mid {	
	background : url(http://www.dharmil.info/images/index_fix_12.gif)repeat-y;
	width:577px;
	float:right;
}
.right-box-side-un {	
	background : url(http://www.dharmil.info/images/index_fix_17.gif)no-repeat;
	width:577px;
	height:32px;
	float:right;
}
.left-box-side {	
	background : url(http://www.dharmil.info/images/index_fix_08.gif)no-repeat;
	width:203px;
	height:24px;
	float:left;
	vertical-align:top;
}
.left-box-side-mid {	
	background : url(http://www.dharmil.info/images/index_fix_11.gif)repeat-y;
	width:203px;
	float:left;
	vertical-align:top;
}
.left-box-side-un {	
	background : url(http://www.dharmil.info/images/index_fix_14.gif)no-repeat;
	width:203px;
	height:27px;
	float:left;
	vertical-align:top;
}
.contenta {	
	width:203px;
	float:left;
}
.contentb {	
	width:577px;
	float:right;
}
</style>
</head>

<body>
<!-- Loader -->
<div id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; top:0px; height:1; width:1;">
<div align="center"><img src="images/circle_animation.gif" align="middle" alt="Loading.." /></div></div>
<!-- Loader End -->
<!-- Center Page -->
<div align="center">
<!-- Wrapper -->
	<div id="wrapper">
<!-- Header Block A -->
		<div id="top-above-start">
		</div>
<!-- Header Block A End -->
<!-- Header Block B -->
		<div id="top-above-content">
		</div>
<!-- Header Block B End -->
<!-- Nav A -->
		<div id="above-nav">
		</div>
<!-- Nav A End -->
<!-- Nav Wraper -->
		<div id="wrapperB">
<!-- Nav left -->
			<div id="left-nav-side">
			</div>
<!-- Nav left End -->
<!-- Nav Center -->
			<div id="center-nav-side">
			</div>
<!-- Nav Center End -->
<!-- Nav right -->
			<div id="right-nav-side">
			</div>
<!-- Nav right End -->
		</div>
<!-- Nav Wraper End -->
<!-- Below Nav -->
		<div id="bottom-nav" >
		</div>
<!-- Below Nav End -->
<!-- All Content Wraper -->
		<div id="Big-wrapper">
			<!-- Left Contenta -->
			<div class="contenta">
<!-- Left top Box -->
				<div class="left-box-side">s
				</div>
                <!-- Left top Box End -->
<!-- Left top Box a -->
				<div class="left-box-side-mid">
				  <p>d</p>
				  <p>d</p>
				  <p>d</p>
				  <p>d </p>
				</div>
                <!-- Left top Box a End -->
<!-- Left top Box b -->
				<div class="left-box-side-un">
				</div>
<!-- Left top Box b End -->
			
<!-- Left Contenta End -->
<!-- Left Contenta -->
			
<!-- Left top Box -->
				<div class="left-box-side">s
				</div>
                <!-- Left top Box End -->
<!-- Left top Box a -->
				<div class="left-box-side-mid">
				  <p>d</p>
				  <p>d</p>
				  <p>d</p>
				  <p>d</p>
			    </div>
                <!-- Left top Box a End -->
<!-- Left top Box b -->
				<div class="left-box-side-un">
				</div>
<!-- Left top Box b End -->
			</div>
<!-- Left Contenta End -->

<!-- Right Contentb -->
		<div class="contentb">
<!-- RIght top Box -->
			<div class="right-box-side">s
			</div>
            <!-- RIght top Box End -->
<!-- RIght top Box a -->
		<div class="right-box-side-mid">
		  <p>d</p>
		  <p>d</p>
		  <p>d</p>
		  <p>d</p>
		  <p>d </p>
		</div>
        <!-- RIght top Box a End -->
<!-- RIght top Box b -->
		<div class="right-box-side-un">
		</div>
<!-- RIght top Box b End -->

<!-- Right Contentb End -->
	</div>

<!-- All Content Wraper End -->
	<div id="bottom-below-end">
	</div>
</div>
</div>
<!-- Wrapper End -->
</div>
<!-- Center End -->
</body>
</html>

**dharmil** · 07-19-2006 11:43 AM

Sory for the double post but here
i put the cod ein dream weaver and it looks perfect but in fire fox or Ie its all bad
http://img159.imageshack.us/img159/4285/dreemxe1.jpg

**nightscream** · 07-19-2006 12:30 PM

in dreamweaver it will show it.
Dreamweaver doesn't show everything as it is
Maybe you have to use the divs with style="float:left"

**dharmil** · 07-19-2006 01:11 PM

thanks i will try that

k now i made all the content show but the hold web site stays to the left
and the footer wont show

**randomize** · 07-19-2006 04:32 PM

I got it centered...

http://sapiencreations.x10hosting.com/dharmil.php

I just added

position: inherit;

into the #wrapper & #wrapperB classes in your CSS!

Word of advice, place all CSS into external document!

Secondly, I have no idea whats mean to be in your footer, however, I hope what I have done helps...

Regards,
Randomize

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width:780px;
background:url(http://www.dharmil.info/images/bg_base.gif)repeat-y;
position:inherit;
}
#wrapperB {
width:780px;
height:24px;
position: inherit;
}
#above-nav { 
 background : url(http://www.dharmil.info/images/index_03.gif) no-repeat;
 width : 780px;
 height : 10px;
}
#bottom-nav { 
 background : url(http://www.dharmil.info/images/index_07.gif) no-repeat;
 width : 780px;
 height : 18px;
}
#right-nav-side { 
 background : url(http://www.dharmil.info/images/index_06.gif) no-repeat;
 width : 48px;
 height : 24px;
 float: right;
}
#left-nav-side { 
 background : url(http://www.dharmil.info/images/index_04.gif)no-repeat;
 width:39px;
 height:24px;
 float:left;
}
#center-nav-side { 
 background : url(http://www.dharmil.info/images/index_05.gif)repeat-x;
 width :693px;
 height :24px;
 float:left;
}
#top-above-start { 
 background : url(http://www.dharmil.info/images/index_01.gif) no-repeat;
 width : 780px;
 height : 28px;
}
#top-above-content { 
 background : url(http://www.dharmil.info/images/index_02.gif) no-repeat;
 width : 780px;
 height : 106px;
}
#Big-wrapper { 
 width : 780px;
 background:url(http://www.dharmil.info/images/bg_base.gif) repeat-y;
 height:inherit;
}
body {
 background-color : #353535;
 margin-top:0px;
}
a:link {
 color : #5BDEFA;
 text-decoration : none;
}
a:visited {
 color : #5BDEFA;
 text-decoration : none;
}
a:hover {
 color : #F8F8F8;
 text-decoration : none;
}
a:active {
 color : #F7F7F7;
 text-decoration : none;
}
#bottom-below-end { 
 background : url(http://www.dharmil.info/images/index_bt.gif) no-repeat;
 width : 780px;
 height : 28px;
}
.bottom-below-end { 
 background : url(http://www.dharmil.info/images/index_bt.gif) no-repeat;
 width : 780px;
 height : 28px;
}
.right-box-side { 
 background : url(http://www.dharmil.info/images/index....gif)no-repeat;
 width:577px;
 height:24px;
 float:right;
}
.right-box-side-mid { 
 background : url(http://www.dharmil.info/images/index...2.gif)repeat-y;
 width:577px;
 float:right;
}
.right-box-side-un { 
 background : url(http://www.dharmil.info/images/index....gif)no-repeat;
 width:577px;
 height:32px;
 float:right;
}
.left-box-side { 
 background : url(http://www.dharmil.info/images/index....gif)no-repeat;
 width:203px;
 height:24px;
 float:left;
 vertical-align:top;
}
.left-box-side-mid { 
 background : url(http://www.dharmil.info/images/index...1.gif)repeat-y;
 width:203px;
 float:left;
 vertical-align:top;
}
.left-box-side-un { 
 background : url(http://www.dharmil.info/images/index....gif)no-repeat;
 width:203px;
 height:27px;
 float:left;
 vertical-align:top;
}
.contenta { 
 width:203px;
 float:left;
}
.contentb { 
 width:577px;
 float:right;
}
</style>
</head>
<body>
<?php include("ads.php"); ?>
<!-- Loader -->
<div id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; top:0px; height:1; width:1;">
<div align="center"><img src="images/circle_animation.gif" align="middle" alt="Loading.." /></div></div>
<!-- Loader End -->
<!-- Center Page -->
<div align="center">
<!-- Wrapper -->
 <div id="wrapper">
<!-- Header Block A -->
  <div id="top-above-start">
  </div>
<!-- Header Block A End -->
<!-- Header Block B -->
  <div id="top-above-content">
  </div>
<!-- Header Block B End -->
<!-- Nav A -->
  <div id="above-nav">
  </div>
<!-- Nav A End -->
<!-- Nav Wraper -->
  <div id="wrapperB">
<!-- Nav left -->
   <div id="left-nav-side">
   </div>
<!-- Nav left End -->
<!-- Nav Center -->
   <div id="center-nav-side">
   </div>
<!-- Nav Center End -->
<!-- Nav right -->
   <div id="right-nav-side">
   </div>
<!-- Nav right End -->
  </div>
<!-- Nav Wraper End -->
<!-- Below Nav -->
  <div id="bottom-nav" >
  </div>
<!-- Below Nav End -->
<!-- All Content Wraper -->
  <div id="Big-wrapper">
   <!-- Left Contenta -->
   <div class="contenta">
<!-- Left top Box -->
    <div class="left-box-side">s
    </div>
                <!-- Left top Box End -->
<!-- Left top Box a -->
    <div class="left-box-side-mid">
      <p>d</p>
      <p>d</p>
      <p>d</p>
      <p>d </p>
    </div>
                <!-- Left top Box a End -->
<!-- Left top Box b -->
    <div class="left-box-side-un">
    </div>
<!-- Left top Box b End -->
   
<!-- Left Contenta End -->
<!-- Left Contenta -->
   
<!-- Left top Box -->
    <div class="left-box-side">s
    </div>
                <!-- Left top Box End -->
<!-- Left top Box a -->
    <div class="left-box-side-mid">
      <p>d</p>
      <p>d</p>
      <p>d</p>
      <p>d</p>
       </div>
                <!-- Left top Box a End -->
<!-- Left top Box b -->
    <div class="left-box-side-un">
    </div>
<!-- Left top Box b End -->
   </div>
<!-- Left Contenta End -->
<!-- Right Contentb -->
  <div class="contentb">
<!-- RIght top Box -->
   <div class="right-box-side">s
   </div>
            <!-- RIght top Box End -->
<!-- RIght top Box a -->
  <div class="right-box-side-mid">
    <p>d</p>
    <p>d</p>
    <p>d</p>
    <p>d</p>
    <p>d </p>
  </div>
        <!-- RIght top Box a End -->
<!-- RIght top Box b -->
  <div class="right-box-side-un">
  </div>
<!-- RIght top Box b End -->
<!-- Right Contentb End -->
 </div>
<!-- All Content Wraper End -->
 <div id="bottom-below-end">
 </div>
</div>
</div>
<!-- Wrapper End -->
</div>
<!-- Center End -->
</body>
</html>

**dharmil** · 07-19-2006 08:29 PM

Thanks

Nedren got the footer to work its just the mater of centering it now

**randomize** · 07-20-2006 05:30 AM

the code that I took and changed, now makes it centered in all browsers, including firefox!

I just tested the url:

http://sapiencreations.x10hosting.com/dharmil.php

Leave the <div align="center"> at the top and end it at the bottom then in CSS put in wrapper class position: inherit; that should technically align it center!

Then use the code NedreN gave you to make the footer work, and it should technically all work fine and dandy!

Regards,
Randomize

**dharmil** · 07-20-2006 09:23 AM

it worked thanks i didn tpuyt it in the class thought i did this

<div id="wrapper" style="margin: 0 auto 0 auto;position: inherit; " >

Thread: My web designe

LinkBack

Thread Tools

Display

My web designe

Re: My web designe

Re: My web designe

Re: My web designe

Re: My web designe

Re: My web designe

Re: My web designe

Re: My web designe

Posting Permissions