My web designe

dharmil · Jul 19, 2006

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:

<!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 · Jul 19, 2006

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 · Jul 19, 2006

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 · Jul 19, 2006

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 · Jul 19, 2006

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:

[FONT=Verdana][SIZE=2]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<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([URL="http://www.dharmil.info/images/bg_base.gif)repeat-y"]http://www.dharmil.info/images/bg_base.gif)repeat-y[/URL];
position:inherit;[/SIZE][/FONT]
[FONT=Verdana][SIZE=2]}
#wrapperB {
width:780px;
height:24px;
position: inherit;
}
#above-nav { 
 background : url([URL="http://www.dharmil.info/images/index_03.gif"]http://www.dharmil.info/images/index_03.gif[/URL]) no-repeat;
 width : 780px;
 height : 10px;
}
#bottom-nav { 
 background : url([URL="http://www.dharmil.info/images/index_07.gif"]http://www.dharmil.info/images/index_07.gif[/URL]) no-repeat;
 width : 780px;
 height : 18px;
}
#right-nav-side { 
 background : url([URL="http://www.dharmil.info/images/index_06.gif"]http://www.dharmil.info/images/index_06.gif[/URL]) no-repeat;
 width : 48px;
 height : 24px;
 float: right;
}
#left-nav-side { 
 background : url([URL="http://www.dharmil.info/images/index_04.gif)no-repeat"]http://www.dharmil.info/images/index_04.gif)no-repeat[/URL];
 width:39px;
 height:24px;
 float:left;
}
#center-nav-side { 
 background : url([URL="http://www.dharmil.info/images/index_05.gif)repeat-x"]http://www.dharmil.info/images/index_05.gif)repeat-x[/URL];
 width :693px;
 height :24px;
 float:left;
}
#top-above-start { 
 background : url([URL="http://www.dharmil.info/images/index_01.gif"]http://www.dharmil.info/images/index_01.gif[/URL]) no-repeat;
 width : 780px;
 height : 28px;
}
#top-above-content { 
 background : url([URL="http://www.dharmil.info/images/index_02.gif"]http://www.dharmil.info/images/index_02.gif[/URL]) no-repeat;
 width : 780px;
 height : 106px;
}
#Big-wrapper { 
 width : 780px;
 background:url([URL="http://www.dharmil.info/images/bg_base.gif"]http://www.dharmil.info/images/bg_base.gif[/URL]) 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([URL="http://www.dharmil.info/images/index_bt.gif"]http://www.dharmil.info/images/index_bt.gif[/URL]) no-repeat;
 width : 780px;
 height : 28px;
}[/SIZE][/FONT]
[FONT=Verdana][SIZE=2].bottom-below-end { 
 background : url([URL="http://www.dharmil.info/images/index_bt.gif"]http://www.dharmil.info/images/index_bt.gif[/URL]) no-repeat;
 width : 780px;
 height : 28px;
}
.right-box-side { 
 background : url([URL="http://www.dharmil.info/images/index_fix_09.gif)no-repeat"]http://www.dharmil.info/images/index_fix_09.gif)no-repeat[/URL];
 width:577px;
 height:24px;
 float:right;
}
.right-box-side-mid { 
 background : url([URL="http://www.dharmil.info/images/index_fix_12.gif)repeat-y"]http://www.dharmil.info/images/index_fix_12.gif)repeat-y[/URL];
 width:577px;
 float:right;
}
.right-box-side-un { 
 background : url([URL="http://www.dharmil.info/images/index_fix_17.gif)no-repeat"]http://www.dharmil.info/images/index_fix_17.gif)no-repeat[/URL];
 width:577px;
 height:32px;
 float:right;
}
.left-box-side { 
 background : url([URL="http://www.dharmil.info/images/index_fix_08.gif)no-repeat"]http://www.dharmil.info/images/index_fix_08.gif)no-repeat[/URL];
 width:203px;
 height:24px;
 float:left;
 vertical-align:top;
}
.left-box-side-mid { 
 background : url([URL="http://www.dharmil.info/images/index_fix_11.gif)repeat-y"]http://www.dharmil.info/images/index_fix_11.gif)repeat-y[/URL];
 width:203px;
 float:left;
 vertical-align:top;
}
.left-box-side-un { 
 background : url([URL="http://www.dharmil.info/images/index_fix_14.gif)no-repeat"]http://www.dharmil.info/images/index_fix_14.gif)no-repeat[/URL];
 width:203px;
 height:27px;
 float:left;
 vertical-align:top;
}
.contenta { 
 width:203px;
 float:left;
}
.contentb { 
 width:577px;
 float:right;
}
</style>
</head>[/SIZE][/FONT]
[FONT=Verdana][SIZE=2]<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 -->[/SIZE][/FONT]
[FONT=Verdana][SIZE=2]<!-- 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 -->[/SIZE][/FONT]
[FONT=Verdana][SIZE=2]<!-- Right Contentb End -->
 </div>[/SIZE][/FONT]
[FONT=Verdana][SIZE=2]<!-- All Content Wraper End -->
 <div id="bottom-below-end">
 </div>
</div>
</div>
<!-- Wrapper End -->
</div>
<!-- Center End -->
</body>
</html>
 
 
[/SIZE][/FONT]

dharmil · Jul 19, 2006

Thanks

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

randomize · Jul 20, 2006

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 · Jul 20, 2006

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; " >

My web designe

dharmil

New Member

dharmil

New Member

nightscream

New Member

dharmil

New Member

randomize

New Member

dharmil

New Member

randomize

New Member

dharmil

New Member

Free Web Hosting

Our Community

Legal