Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Layout breaks apart when content is added.


  • Please log in to reply

#1
Donarudo

Donarudo

    Member

  • Member
  • PipPip
  • 53 posts
I know this issue has showed up tons of times on these forums, but everyone has problems significant to their site. Here's a link to the page that it's happening to. I have a news management system in place but that's the least of my problems. Here's a link:

http://www.artofdona...is.com/home.php
  • 0

Advertisements


#2
thenotch

thenotch

    Member

  • Retired Staff
  • 668 posts
You have a ton of problems... table layout is the beginning... tables are NOT to be used for layout. You should invest in an understanding of CSS.

As for your problem, the first issue is that your background is set for a static height, so anything that is larger than that is going to scroll past it:
<img src="images/home_02.jpg" width="306" height="560" alt="">
Next up your width is apparently smaller than the width that your news management system is configured for, so it is pushing the boundaries of your layout (I have used cutenews at one of my sites and to integrate it you have to edit some of the templates to match your site...its a lot easier to do if you are using CSS...)

You also have no DOCTYPE set for this particular page (home.php) and 6 other validation errors. Your initial page also does not validate.
  • 0

#3
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I would suggest you use Firefox and install the Web Developer's Tool extension. The HTML Validator extension would help too as HTML Tidy will check your coding. If no serious coding errors, Tidy will even repair your file.

Use FF to view your web page as you make corrections. It is the only CSS2 compliant browser out there so far. If your pages look good in FF and not other browsers, then it's the other browsers at fault. IE has many parsing problems and is many years behind being compliant. That's why there are so many hacks to fix IE's version of what your page looks like when compared to what FF shows you. Doesn't hurt to check your pages in other browsers either. Takes time I know, but well worth the time.

Ron
  • 0

#4
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
Yeah I knew about the BG issue already. This home.php is just one of the many that I tested to see if everything would work properly... I just overlooked that this time. Hope you guys can bare with me because I never invested anytime into learning code just gfx design. Will post back with any results. Thanks.

Donald

EDIT:
Ok I have done most of those things and both pages are W3C XHTML 1.0 Transitional validated. Now, what is the actual procedure in making the content expandable?

Edited by Donarudo, 18 August 2007 - 10:03 PM.

  • 0

#5
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
Ok both pages are validated, but I still can't manage to save the home page without the bg being a bunch of images. Suggestions?
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts

Ok both pages are validated, but I still can't manage to save the home page without the bg being a bunch of images. Suggestions?

W3C validator is still reporting errors. 149 of them!

Ron

Edited by Major Payne, 19 August 2007 - 05:08 PM.

  • 0

#7
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
Both pages are css and xhtml validated, I just didn't upload the debugged validated page yet. I also figured out how to make the content expand. W3C validator REALLY helped me learn and truly understand so much more about css and much more. Right now my news management is being a b**** so I have to deal with that. Thanks a million for the help and suggestions!

Edited by Donarudo, 19 August 2007 - 05:15 PM.

  • 0

#8
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Knew it had to be something! LOL Post back if you need additional help and thanks for using GTG.

Ron
  • 0

#9
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts

Knew it had to be something! LOL Post back if you need additional help and thanks for using GTG.

Ron


Actually I do.. I wanted to know why the text in a table always starts in the middle of the table and not the top? (where I want it to be because that's the beginning of the content box). I have to press enter numerous times to get the cursor to the top, but now it brings the layout down and I have unnecessary space at the bottom of the layout below the actual content. Hope you got all of that. Thanks.
  • 0

#10
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Have you uploaded the corrected page yet? There are still code errors. Is there anyway to talk you out of using tables for your layout? Send you a box of your favorite cookies maybe? Please, you really need to get rid of the tables to have more control over your layout.

Ron
  • 0

Advertisements


#11
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
Yeah after I changed my news management from cutehack to the latest cutenews the errors came back.. so gotta run that through w3c again. But apparently that's the least of my problems right now according to you. What's my alternative for tables?
  • 0

#12
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Use CSS to control the layout and <div> tags where necessary. Some people over div their page to death when replacing table tags. You'll be happy to do this as it will save some headaches as you add more pages.

I would work on a template page to be used that contains items you will want on every page. Something like a header and footer with nav links. You can have more then one CSS stylesheet. You can make one separate for your nav links unless you are going to use simple text links then one CSS should suffice.

A banner or logo can be placed in a simple set of div tags like <div id="logo"></div>. Then all the styling for the div with your banner can be done on the CSS. If I remember your page, you already have some styling between your head tags. Anything that is not related to table styling can be moved to the CSS stylesheet. Also, noticed that your frame page and its style sheet is being pulled from another site. Is that site yours?

Ron
  • 0

#13
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
It's not pulling it from a site, it's pulling it from another dir from my site archive with cutenews news management installed. Why?

EDIT: btw, do I just replace the table elements with to accomplish this?

Edited by Donarudo, 21 August 2007 - 12:09 AM.

  • 0

#14
Donarudo

Donarudo

    Member

  • Topic Starter
  • Member
  • PipPip
  • 53 posts
Sorry for the double post.. but I didn't wanna do an EDIT.. EDIT. But I got the hang of the divs. Wish I woulda knew about them before I invested so much time into getting tables to do what I wanted to. I also would like to know how to make up the site out of div ids as oppose to images from photoshop slices.

Donald

Edited by Donarudo, 21 August 2007 - 12:41 AM.

  • 0

#15
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Was just wondering as your main page is http://www.artofdona...is.com/home.php while the frame page is http://www.shoutmix.com/main/, but I don't see this showing up on your main page as it appears if you put the actual frame URL into a browser. The CSS for the frame page is then pulled from http://www2.shoutmix...0/CCCCCC?jsview. This is just my unfamiliarity with CuteNews I guess and how it works.

As long as PS slices look good on first load in all browsers you expect to be used to view your site, I wouldn't worry about them. Some people have had problems with slices fitting together on first load properly. Annoying to refresh to get rid of any white lines that may have appeared. The complexity of a web page may be time consuming for PS slices. I would go with coding, but it comes down to what you feel comfortable with.

Ron
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP