31 replies [Last post]
Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Converted some html files to php now have layout issues.

Heres a link to what it looked like in html.
test
And here is what it looks like now.
index

If you click threw the links at the top you can get a feel for whats going on.

Css code

/* get other css */
@import url("reset.css");
@import url("typography.css");
@import url("uni-form.css");
/* COLORS */
/*
 
*/
 
/* SNIPPETS */
body {
	background-image:url(../images/bg_body.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
img {
	border:0;
}
input {
	vertical-align:middle;
}
.clear:after {
	content: ".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.float-left {
	float:left;
}
.float-right {
	float:left;
}
.text-left {
	text-align:left;
}
.text-right {
	text-align:right;
}
.text-center {
	text-align:center;
}
.text-justify {
	text-align:justify;
}
/* ************ Begin General Layout Styles ************ */
 
#container {
	margin:0px auto;
	width:950px;
}
/* HEADER */
#header {
	width:889px;
	height:231px;
	background-image:url(../images/header.jpg);
	background-repeat:no-repeat;
	background-position:top;
	margin:0px 32px 0px 28px;
}
#logo {
	padding:63px 0px 0px 53px;
}
/* MENU */
#nav {
	width:882px;
	margin:0px 0px 0px 36px;
}
#box_nav {
	text-align:center;
	height:44px;
}
.nav_bord {
	padding:0px 12px 0px 12px;
	border-left:1px solid #C16A00;
	float:left;
	margin:16px 0px 0px 0px;
}
.nav_lg {
	float:left;
	margin:7px 12px 0px 0px;
}
.nav_beg {
	padding:0px 12px 0px 0px;
	float:left;
	margin:16px 0px 0px 0px;
}
.nav_end {
	padding:0px 0px 0px 12px;
	border-left:1px solid #C16A00;
	float:left;
	margin:16px 0px 0px 0px;
}
/* BODY */
 
#content_main {
	width:885px;
	float:left;
	padding:0px 7px 0px 0px;
	margin:0px 28px 0px 28px;
}
 
#content_bg{
	background-image:url(../images/bg_content.png);
	background-repeat:repeat-y;
	width:949px;}
/* FOOTER */
 
#btm_shad_left {
	width:32px;
	float:left;
	height:28px;
}
.btm_main {
	width:855px;
	height:100px;
	text-align:center;
	float:left;
	padding:20px 15px 10px 15px;
	background-image:url(../images/bg_bottom.png);
	background-repeat:repeat-x;
}
.btm_main ul {
	list-style:none;
	display:inline;
}
.btm_main li.bord {
	display:inline;
	padding:0 15px 0 15px;
	border-left:1px solid #CB6A00;
	margin:0px;
	font-weight:normal;
}
.btm_main li.nobord {
	display:inline;
	padding:0 15px 0 15px;
	margin:0px;
	font-weight:normal;
}
#btm_shad_right {
	width:32px;
	float:right;
	height:28px;
}
/* ************ Begin Specific Layout Styles ************ */
 
/* PAGE SPECIFIC */
 
.content_left {
	width:270px;
	border-right:1px solid #CCCCCC;
	float:left;
}
.content_right {
	width:584px;
	float:left;
	padding:10px 15px 10px 15px;
}
.content_right2 {
	width:855px;
	float:right;
	padding:10px 15px 10px 15px;
}
#quote_box {
	background-color:#83A9BE;
	padding:18px 18px 18px 18px;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
}
#search_box {
	padding:20px 0px 0px 8px;
	width:262px;
	height:44px;
}
.search_text_box {
	height:20px;
	font-size:12px;
	float:left;
}
.boxed_header {
	background-image:url(../images/bg_header.jpg);
	background-repeat:no-repeat;
	width:262px;
	height:25px;
	padding:8px 0px 0px 8px;
}
.feature_area {
	padding:10px;
	width:250px;
}

Index code

<?php include('fns/global.php');?>
<?php include('includes/opendb.php');?>
<?php html_header('Content-type: text/css');?>
 
    <div id="btm_shad_left"><img src="<?php echo SITE_ROOT;?>images/bg_left.jpg" alt=" " /></div>
    	<div id="btm_shad_right"><img src="<?php echo SITE_ROOT;?>images/bg_right.jpg" alt=" " /></div>
        <div id="content_main">
      		<div class="content_left">
 
        <div id="search_box"><img src="<?php echo SITE_ROOT;?>images/img_mag_glass.jpg" alt="image of a magnifying glass" style="float:left" />
          <input name="search" type="text" size="20" maxlength="40" class="search_text_box"/>
          <a href="#"><img src="<?php echo SITE_ROOT;?>images/btn_go.jpg" alt="Go" style="float:left" /></a> </div>
        <div id="quote_box"><a href="#"><img src="<?php echo SITE_ROOT;?>images/txt_request_quote.jpg" alt="Request A Quote" /></a>
          <p class="quote_text">If you would like a quote, please click on the following:<br /><br />
 
Personal Automobile(fillable form)<br />
Homeowners(fillable form)<br />
Other Personal<br />
Business Insurence<br />
Life and/or Long Term Care
 
</p>
          <a href="#"><img src="<?php echo SITE_ROOT;?>images/btn_requestquote.jpg" alt="Click to Request a Quote Now" /></a></div>
        <div class="boxed_header">
          <h2>About us</h2>
        </div>
        <div class="feature_area">
          <div class="feature_text">
			<?php 
			$result = mysql_query("SELECT about FROM about ORDER BY about_id DESC LIMIT 1");
			while($row = mysql_fetch_array($result)) {
				if ($row['about'] !== '') {
					$about = strip_tags(substr($row['about'],0,140));
					} else {
					$about = '';
					}
			} 
			echo $about.'&hellip;';
			?>
		  </div>
          <a href="<?php echo SITE_ROOT;?>about.php"><img src="<?php echo SITE_ROOT;?>images/btn_readmore.jpg" alt="Read More" style="float:right" /></a>
          <div style="clear:both"></div>
        </div>
        <div style="clear:both"></div>
        <div class="boxed_header">
          <h2>Contact</h2>
        </div>
        <div class="feature_area">
          <p class="feature_text"> <h3>Our location:</h3><br />
 
3118 W. Ridge Pike<br />
 
Pottstown, PA 19464<br />
<br />
Our Hours are:<br />
 
Monday – Friday<br />
 
8:00am to 5:00pm<br />
<br />
 
 
Evenings, Saturday and Sunday<br />
 
By appointment<br /><br />
 
Contact information:<br />
 
Phone 610-970-2002<br />
 
Fax 610-970-2007<br />
 
General email:  </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%69%6e%66%6f%40%72%65%65%64%64%61%6c%6c%61%73%2e%63%6f%6d%22%3e%69%6e%66%6f%40%72%65%65%64%64%61%6c%6c%61%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p><br />
 
</p>
          <a href="#"><img src="<?php echo SITE_ROOT;?>images/btn_readmore.jpg" alt="Read More" style="float:right" /></a>
          <div style="clear:both"></div>
        </div>
        <div style="clear:both"></div>
      </div>
      <div class="content_right">
		<?php 
		$result = mysql_query("SELECT homepage FROM homepage ORDER BY homepage_id DESC LIMIT 1");
		while($row = mysql_fetch_array($result)) {
			if ($row['homepage'] !== '') {
				$homepage = $row['homepage'];
				} else {
				$homepage = '';
				}
		} 
 
		echo $homepage;
		?>
 
      </div>
 
 
    </div>
    <div style="clear:both"></div>
<?php html_footer();?>

Any thoughts? I have been messing with this for awhile now and it's becoming frustrating.

Thanks

Chris
Verbcomm.net

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You shouldn't build your

You shouldn't build your website in MS Word.
Try using a Notepad, or a application with syntax highlighting like Notepad++.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

I didn't build the site in MS

I didn't build the site in MS word. I didn't build the site. But I was handed the problem. I am using Dreamweaver CS3.

Chris
Verbcomm.net

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

your code has a lot of

your code has a lot of http://grab.by/3NZP in it.
You need to go through and clean it out.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

forgive me but are we looking

forgive me but are we looking at the same code? I don't see any of that in my code.

Chris
Verbcomm.net

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Chrisverb wrote: forgive me

Chrisverb wrote:

forgive me but are we looking at the same code? I don't see any of that in my code.

Well, it's certainly there on the site itself. I just looked at http://reeddallas.com/test/index.php and viewed the html and there it is. It's a heck of a mess.

Using PHP doesn't remove the need to send good valid html to browsers you know.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 48 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

that code looks like a huge

that code looks like a huge bowl of messy spaghetti

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Ouch poor move on my part for

Ouch poor move on my part for not looking at the page source code. I can't seem to find the file that contians the MS wordcrap in it. If I open all the html files(2) neither of them have the MS word code in them.

Chris
Verbcomm.net

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well there will likely be a

Well there will likely be a php section or sections in the php files that will point you to the files. We can't see them from outside but if you look at the files the information will be in there.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: If I open all the html

Quote:

If I open all the html files(2) neither of them have the MS word code in them.

Are you not querying content/copy from the DB, and how is that content getting squirted into the DB in the first place? and is there a nasty wysiwyg text editor in use?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Boxkites
Boxkites's picture
Offline
newbie
New Zealand
Last seen: 4 years 28 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2009-12-25
Posts: 9
Points: 12

To me it seems like the css

To me it seems like the css is not being read.
At the top of your code you have:

/* get other css */
@import url("reset.css");
@import url("typography.css");
@import url("uni-form.css");
/* COLORS */

Maybe the code needs to be linked to the css folder where the css files are?

/* get other css */
@import url("css/reset.css");
@import url("css/typography.css");
@import url("css/uni-form.css");
/* COLORS */

Just a thought
Robert

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

The layout file is in the

The layout file is in the same folder as all the other css files. But i threw that in anyway but didn't change anything. I'm still not entirly sure how that stuff is in the php file. It looks like it is being put in via an xml file. I can't find any of it on any of the files html or php. It's got me royaly confused at this point.

Chris
Verbcomm.net

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Chrisverb wrote: I didn't

Chrisverb wrote:

I didn't build the site in MS word. I didn't build the site. But I was handed the problem. I am using Dreamweaver CS3.

You should hand the files back to whoever gave them to you, and ask that you be given plain text files, and not converted(?) Word documents. All that funny stuff is mso (MSFT Office) rendering instructions.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Wish it was that easy gray

Wish it was that easy gary haha. I have to deal with it. Any idea why the MSFT stuff would be in xml format? And is that stuff really effecting the actual layout?

Chris
Verbcomm.net

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

April, 2008, a day that will live in open source infamy

As of April, 2008, I believe it was, MSFT Office's new "open standard"* is Office Open XML (OOXML). It is used for Word, Excel, Access, Powerpoint, et al.

Take a look at the files linked by include statements. That's likely where they are. See if you can view the files in Word or Open Office's Write. If you can, try re-saving as plain text, ASCII/ANSI, iso-8859-1, or utf-8. You will probably be warned that you're about to lose your formatting; don't sweat it. You need to extract the text, etc. without all that other crap.

Others on the board may be able to give you more specific help. I haven't had Word on my machines since ca 2003.

cheers,

gary

* I put that in (use your fingers) quotation marks because MSFT appears to have ramrodded that through the ISO standards committee without having a complete description of the language, and without releasing their own proprietary APIs. It's an attempt to maintain vendor lock-in.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

*OXYMORON ALERT* (with the

*OXYMORON ALERT* (with the stress being on 'Moron'))

'MS Office' 'Open Standard'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Thanks gary I'll see what I

Thanks gary I'll see what I can come up with today.

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

ok I saved everything as a

ok I saved everything as a .txt file and then viewd them all in notepad but i didn't see any of the MSFT code. Any thoughts?

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

I figured out what the issue

I figured out what the issue was. My cms was throwing that in there for some reason. So i am stripping that out and I'll edit my original post then and maybe you guys can help me out then. Smile

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

My code looks pretty idential

My code looks pretty idential to what i have posted in my first post now.

Chris
Verbcomm.net

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

OK, now you need to clean up

OK, now you need to clean up some errors. See W3 html validator. Some of the mismatched opening/closing tags could cause problems, as well could some illegal nesting.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Unfortunately most of those

Unfortunately most of those errors are caused by the cms but I'll see what I can do.

Chris
Verbcomm.net

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Chrisverb

Chrisverb wrote:

Unfortunately most of those errors are caused by the cms but I'll see what I can do.

This is one of the burdens of taking on a CMS. Really, the coders should be obligated to provide error free code, but alas they normally don't.

Often though, the real source of the problem is in the skinning process, with most CMS systems providing for "themes" that can determine how they look. And you can find out where the theme is and fix the problems there. Of course, that's a lot of work, which the CMS systems are supposed to help you avoid!

Still, if you want to put up a good site using a CMS, you really have to dig into it and learn how to fix html and css syntax errors or you will just keep running into the kind of problems you've been having.

There is just no cheap and easy solution to putting up a good website of any size, I'm afraid. If that's what the vendors of the CMS were telling you they were misleading you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

If the PHP link you posted at

If the PHP link you posted at the top is what you've currently got, then you could also work on cuttong out most of the DIVs and replace them with more semantic HTML elephants ... I mean elements Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

you think elements are going

you think elements are going to be better then div's? I dunno

Still weeding out all the syntax errors I fix a few then more pop up ugh.

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

all syntax errors are gone.

all syntax errors are gone.

Chris
Verbcomm.net

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Chrisverb wrote: you think

Chrisverb wrote:

you think elements are going to be better then div's? I dunno

Pineaplehead is perfectly right, and if you don't understand why you had best go right out and learn why before you do any more coding.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

I dunno what i was responding

I dunno what i was responding to pineaplehead's with must of had a brain fart. I know how to code and nesting tags and all that good stuff. Unfortanutly I didn't make this site so I'm not gonna go in each file and recode them just to look pretty. It's not gonna change anything as far as the site does. I just need to layout to look proper.

I found that the layout.css file had some syntax errors and fixed them so the site is starting to look how it should without any errors.
I can't figure out why my side shadow bars won't go the width of the page. I need them to expand acordingly with the text but if I take out the width and make them 100% they just look funky.

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

I'm trying to get the shadow

I'm trying to get the shadow bars on left and right of the page to expand the length of the page. If I alter them at all it just puts white space between the text and the bottom of the banner and the bars do not change. Any thoughts?

Chris
Verbcomm.net

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Those shadow bars have been

Those shadow bars have been approached in entirely the wrong way unfortunately.

Graphics such as this have to be and should be placed as background elements not foreground inline ones and especially not in their own elements which all adds up to pointless markup not geared to content delivery.

As you have a fixed width container the general accepted approach would be to create a graphic as wide as required with the shadow running down the side you then take a slice horizontally full width but only ~10px or less (but not something silly like 1px) high this you place as a background to container and repeat it on the y-axis, this way the container can expand to any height and still have the shadow running it's full height.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

Thanks Hugo that makes sense.

Thanks Hugo that makes sense.

Chris
Verbcomm.net

Chrisverb
Chrisverb's picture
Offline
Regular
Jonestown, Pa
Last seen: 10 years 14 weeks ago
Jonestown, Pa
Timezone: GMT-4
Joined: 2010-04-16
Posts: 17
Points: 18

I figured out what was wrong

I figured out what was wrong with the bars. a content_bg was left out from the css. Now it is starting to look better.

Chris
Verbcomm.net