Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Aug 2012
    Posts
    1
    Member #
    32426
    Hello! I have had this problem with a while, i didn't know what to do, it was why i stopped learning coding because i was tired with it already... But when i put DOCTYPE in my php document it toally destorys my layout! I have been reading the best DOCTYPE is the Strict one, but it's more for XML? Well anyway even if i use the Traditional one nothing makes anything better... Which one should i use though?

    I'm a beginning webdesigner and i have so many questions and troubles to get through it haha... I hope you guys will help me... I also wanted to ask about the tables, is there any other better way for cutting your layout? I use Photoshop for this but it always leaves some 1pixels gifs, you know what i mean? i have also tried the CSS way from Photoshop but it's a mess!

    NO DOCTYPE:


    with DOCTYPE:


    CSS:
    Code:
    body{
    margin: auto;
    padding:auto;
    background-color: #e2ebec;
    background-image: url(images/bg.png);
    background-repeat: repeat-x;
    font:12px Trebuchet MS,"Lucida Sans", Verdana, Arial, sans-serif;
    color:#e27bbb;
    text-align : center;}
    
    div.head {
        width: 1000px;
        margin: 0px auto 0px auto;
        padding: 0px;
    }
    
    .welcome {
    background-color: transparent;
    padding: 8px;
    text-align: justify;
    font-family: trebuchet ms;
    font-size: 8pt;
    color: #3e3366;
    line-height: 9pt;}
    PHP:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes('xhtml'); ?>>
        <head profile="http://gmpg.org/xfn/11">

        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php

    bloginfo
    ('charset'); ?>" />
        <meta name="distribution" content="global" />
        <meta name="language" content="en" />
        <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
        <script src="http://fansites.hollywood.com/toolbar.js"></script>
        <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"

    media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php

    bloginfo
    ('rss2_url'); ?>" />
        <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url');

    ?>" />
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

    bloginfo
    ('atom_url'); ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

        <?php wp_get_archives('type=monthly&format=link'); ?>
        <?php //comments_popup_script(); // off by default ?>

        <?php wp_head(); ?>
    </head>

    <body>
    <div class="header">
    <table id="Tabela_01" width="1001" height="688" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">
                <img src="wp-content/themes/charlixcx/images/1_01.jpg" width="135"

    height="87" a href="" /></td>
            <td>
                <a href="index.html"><img

    src="wp-content/themes/charlixcx/images/2_02.jpg" width="115" height="87"  /></td>
            <td colspan="2">
                <img src="wp-content/themes/charlixcx/images/3_03.jpg" width="126"

    height="87" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/4_04.jpg" width="153"

    height="87" /></td>
            <td colspan="2">
                <img src="wp-content/themes/charlixcx/images/5_05.jpg" width="114"

    height="87" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/6_06.jpg" width="126"

    height="87" /></td>
            <td colspan="2">
                <img src="wp-content/themes/charlixcx/images/7_07.jpg" width="101"

    height="87" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/8_08.jpg" width="130"

    height="87" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="87" /></td>
        </tr>
        <tr>
            <td colspan="12">
                <img src="wp-content/themes/charlixcx/images/9_09.jpg" width="1000"

    height="208" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="208" /></td>
        </tr>
        <tr>
            <td colspan="7">
                <img src="wp-content/themes/charlixcx/images/10_10.jpg" width="581"

    height="44" /></td>
            <td colspan="3" rowspan="2">
                <img src="wp-content/themes/charlixcx/images/11_11.jpg" width="219"

    height="111" /></td>
            <td colspan="2" rowspan="4">
                <img src="wp-content/themes/charlixcx/images/12_12.jpg" width="200"

    height="392" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="44" /></td>
        </tr>
        <tr>
            <td rowspan="3">
                <img src="wp-content/themes/charlixcx/images/13_13.jpg" width="82"

    height="348" /></td>
            <td colspan="3" rowspan="2"

    style="background-image:url(wp-content/themes/charlixcx/images/14_14.jpg);" width="230"

    height="147">
    <div class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas

    sodales lacus eget condimentum. Praesent porta nisl quis tortor tincidunt moler. Lorem ipsum

    dolor sit amet, consectetur adipiscing elit. Praesent porta nisl quis tortor quis tortor. Lorem

    ipsum dolor sit amet, consectetur adipiscing elit egestas.</div>
    </td>
            <td colspan="3" rowspan="3">
                <img src="wp-content/themes/charlixcx/images/15_15.jpg" width="269"

    height="348" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="67" /></td>
        </tr>
        <tr>
            <td colspan="3" rowspan="2">
                <img src="wp-content/themes/charlixcx/images/16_16.jpg" width="219"

    height="281" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="80" /></td>
        </tr>
        <tr>
            <td colspan="3">
                <img src="wp-content/themes/charlixcx/images/17_17.jpg" width="230"

    height="201" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="1"

    height="201" /></td>
        </tr>
        <tr>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="82"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="53"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="115"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="62"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="64"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="153"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="52"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="62"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="126"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="31"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="70"

    height="1" /></td>
            <td>
                <img src="wp-content/themes/charlixcx/images/odst?p.gif" width="130"

    height="1" /></td>
            <td></td>
        </tr>
    </table>
    </div>
    </body>
    </html>
    Thank you so much!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Yes, there's a much better way to slice your page in Photoshop. The key is to slice and extract the images only (do not use any of the Photoshop-generated HTML). Once you've done that, then you can use CSS and no tables (divs, unordered lists, etc. instead) to place your individual items, which will be much easier to isolate and debug things since divs require less coding and come with none of the colspan/rowspan/weird issues that tables do.

    That's why you noticed no difference with your doctype declaration. Keep the images you've sliced and code it from the ground up using CSS and the appropriate tags. As a starting reference point only, here are a couple of sites that will give you tutorials and the general idea. They're not the end point of your journey, but they'll get you started:

    www.alistapart.com
    www.cssplay.co.uk
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Aug 2012
    Posts
    4
    Member #
    32439
    Try this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

doctype and photoshop slices

,

doctype ruins height and width

,

doctype ruins layout

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com