Sliced site from PS 7 into DW has content placement issues

Discussion in 'Web Design' started by gumspitter, Oct 19, 2009.

to remove all ads.
  1. gumspitter

    gumspitter New Member

    Messages:
    57
    I have used PSv.7 and DW 8 to make my site. The site is automatically put into a table when sliced into DW. As you can see from my site layout, I have deleted the main area's slice and replaced it with a background of the same pattern. I did this to allow for text to be placed in this area. My problem is that when I try to put another table in this area and add content the navigation bar on the left loses its structure. I need my content area to be seperate from the other parts of my page with all other elements staying in place. How can I accomplish this?



    www.applingpiratesbaseball.com
     
    Last edited: Oct 23, 2009
  2. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Start by not using tables. Use divs for the header, footer and body content. Use an list (ul) for the menu on the left. That will stop the wrapping problem, and will be more up-to-date with today's standards.
     
  3. gumspitter

    gumspitter New Member

    Messages:
    57
    So you are telling me to scrap the current layout? If not, how will I use the divs to break up the current site. Please elaborate on this method. Using a list for navigation will loose my created buttons and will only be plain text correct? I do not want to start over from the beginning, I know I am asking a lot but I need help badly. Will I simply replace the main table with a div tag? Then use other divs to add other content. Please change code to show this.
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yes, scrap the current layout, the code is very messy. Idea is to keep it as simple as possible, in turn making it easy to edit/update in the future.

    Using a list for navigation does not necessarily mean just text. The list is a method of layout. Yes your traditional list is text with bullets, but it does not HAVE to be this way. They can be manipulated by css.

    Yes, the main table will be replaced by a div tag.

    Here is a basic breakdown of what I am referring to:

    HTML:
    <body>
       <div id="header">
          <img src="yourHeaderImage.png" alt="Pirates Baseball"/></div>
       <div id="mid">
          <ul class="links">
             <li><a href="">Link1</a></li>
             <li><a href="">Link2</a></li>
             ...and so on for all the links.
          </ul>
          <div class="content">
             Place all your content in here.  Style the P tags and any other content items with css.</div>
       <div id="footer"></div>
    </body>
    
    Here you have three divisions in your page: header, mid, and footer. Each one is styled (thru css below) to be centered in the page no matter the width of the browser window. The "mid" division contains two floated items: a list (your menu) and a div for all content (text).

    Now for the css:

    Code:
    body {
       font-family:Georgia, serif;
       font-weight:normal;
       font-size:9pt;
       color:#fff;
       background: url(yourBgImage.png) repeat;
    }
    div#header, div#mid, div#footer {
       position:relative;
       width:960px;
       left:50%;
       margin:0 0 0 -480px;
       padding:0;
    }
    div#mid {
       overflow:hidden;
    }
    div#footer {
       background-color:#960;
       height:40px;
    }
    ul.links {
       float:left;
       margin:0;
       padding:0;
       width:160px;
       height:auto;
    }
    ul.links li {
       list-style-type:none;
       margin:2px 0;
       padding:0;
    }
    ul.links a:link, ul.links a:visited {
       display:block;
       font-weight:bold;
       font-size:10pt;
       width:160px;
       height:37px;
       line-height:37px;
       text-align:center;
       text-decoration:none;
       background: url(yourStaticBtnImageWithNoText.png) no-repeat;
       outline:none;
       padding:0;
       margin:0;
    }
    ul.links a:hover, ul.links a:focus {
       background: url(yourHoverBtnImageWithNoText.png) no-repeat;
    }
    div.content {
       float:left;
       padding:20px;
    }
    
    The CSS sets the default font color, size, and family in the body tag. This way if you ever want to change it, you only have to edit one place :) The body also has the background tile.

    The list in the most complicated (if your are not familiar with css). It removes the bullet from every list item and removes the default indent from a list. Each list item contains a link (a tag). It is very important to have anchor text in your links, not just an image. I set them up to be a block type element meaning they will act like an large chunk and not just a text link. The background of each link is the same, because there is no text in the image, making your page load size smaller. You need a static and rollover image. Set the links states with the appropriate image (replace my long image name with image location).

    The content div is padded by 20 pixels but you will need to add styles for the header tags (h1, h2, etc) and any specialized text you want to use. You can insert plain text, paragraphs whatever you like. They should all remain within this div, nothing will overflow into other elements.

    The footer, well your footer is next to nothing, so I just set the background to brown and the height to 40 pixels. All you have in there is a copyright.

    If you have questions about changing items, or the entire layout, just ask.

    If your not familiar with css then W3 Schools is a great starting point. Remember, this replaces your entire layout. I would not recommend trying to insert this into what you have now.
     
  5. gumspitter

    gumspitter New Member

    Messages:
    57
    I thought you were going to say that. Man, I have worked on this site for a while now. Guess I should have gotten the bugs out a long time ago. In some of the tutorials that I have seen Photoshop seemed like a good idea. Just design the site, slice it and whallah. The part that they don't tell you is editing is very difficult. I really do not like the css styles but I guess that would be the way to go.



    This is my first true site outside of a basic site that I tinkered with earlier in the year(since taken down). I really want this site to work well. If I cannot make the site I mentioned earlier I would like to make something similar to this one. Minus the flash.

    http://uabsports.cstv.com/sports/m-basebl/albr-m-basebl-body.html

    I want to make a site that has a left navigation, header, and footer. Notice how the content is in the middle of the page. navigation on the left and ads are on the right. I will try to accomplish this without the ads on the top and sides. I can create the layout in photoshop but I will have the same problem. Can you give me some pointers on how to accomplish this? From the start PLEASE!!

    Thanks,have a great day!!
    DJMiller
     
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    DJ,
    If you want to be building websites in this day and age, you will need to learn css. It is a must. Truthfully it is not very difficult. Just take it in stages, look at W3 Schools. They provide a great entry level introduction.

    The UAB site has a similar layout, but again they use a table for the central content. Not good practice. You don't need a table for that style of layout.

    Whether you continue with the site you have now, or design a new one, the basic layout will be the same. When designing a site it is always best to have a constant thought in the back of your mind as to how this site will be broken down (constructed). What I am saying you want to design something that not only looks great, but translates into a markup (html) seamlessly. Know what I mean?

    "I want to make a site that has a left navigation, header, and footer. Notice how the content is in the middle of the page. navigation on the left and ads are on the right. I will try to accomplish this without the ads on the top and sides."

    The example I gave you, creates this exact type of layout. I guess I am not sure what part is confusing you?
     
  7. gumspitter

    gumspitter New Member

    Messages:
    57
    I am a little confused on why tables are such a bad thing. I know it doesn't have clean code but what else. In almost every site that I view on a regular basis has some sort of table set up with its code. I am in the beginning stages of trying to get the css thing down.
    It seems we are going backwards instead of forward in the process. However, once the code is set up correctly it is a mere editing of code to get all like elements to do the same things.
    I have played around with the css that you added and it works perfectly. I am doing the css through DW 8 and in seems to be working fine. I will keep trying through the weekend to make even more progress. Shouldn't the technology be way ahead of the hand coding we are speaking of (css)? Are newer versions of Dreamweaver a better choice to build and edit a site?

    I really appreciate the time you have taken to help me.

    In the css code that you provided will I just plug in my button image files to make the buttons?
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Tables may still be seen in websites, as some may not have updated or wanted to take the time to change their website. That being said, you dont want to start off on the wrong path.

    Tables are made for tabular data, like a product pricing chart. They are not meant for website design/structure layout. And yes, they do generate more code.

    I am not sure what you mean about going backwards? your website? eliminating tables in web design?

    DW8 is just fine, you can achieve all you need with that version. We are at CSS 2 and CSS 3 is right around the corner. There is a lot of potential with CSS, and it sure makes web development more efficient.

    DJ, you welcome. I like to help people out where I can.

    For you buttons: Yeah, insert the image location "url(...)" into the button style. It should just be the gradient without any text. If you change the size of that image just adjust the width height accordingly.
     
  9. gumspitter

    gumspitter New Member

    Messages:
    57
    Buttons are still not working and the footer interferes with the main part of the page. Here are my html and css files. Please help if you can.



    HTML File




    <!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>
    <title>Home Page</title>
    <link rel="stylesheet" href="main.css">

    </head>

    <body>
    <div id="header">
    <img src="images/header_logo.jpg" alt="Pirates

    Baseball" width="960" height="173"/></div>
    <div id="mid">
    <ul class="links">
    <li><a href="index.html">Home</a></li>
    <li><a href="schedule.html">Schedule</a></li>
    <li><a href="roster.html">Roster</a></li>
    <li><a href="players.html">Players at Next
    Level</a></li>
    <li><a href="coaches.html">Coaches </a></li>
    <li><a href="history.html">History</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="region.html">Region 2-AA</a></li>
    <li><a href="facilities.html">Facilities</a></li>
    <li><a href="dugoutclub.html">Dugout Club</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="concessions.html">Concessions</a></li>
    <li><a href="summer.html">Summer Ball</a></li>
    <li><a href="directions.html">Directions</a></li>
    </ul>
    <div class="content">
    <div align="center">Place text here. </div>
    </div>
    <div id="footer"></div>
    </body>
    </html>





    /* CSS Document */

    body {
    font-family:Georgia, serif;
    font-weight:normal;
    font-size:9pt;
    color:#C9AC7D;
    background: url(dirt.jpg) repeat;
    text-align: center;
    width: auto;
    }
    div#header, div#mid, div#footer {
    position:relative;
    width:960px;
    left:50%;
    margin:0 0 0 -480px;
    padding:0;
    }
    div#mid {
    overflow:hidden;

    position: absolute;
    text-align: center;
    }
    div#footer {
    background-color:#960;
    height:60px;
    bottom: inherit;
    margin-bottom: 5px;
    }
    ul.links {
    float:left;
    margin:0;
    padding:0;
    width:160px;
    height:auto;

    }
    ul.links li {
    list-style-type:none;
    margin:2px 0;
    padding:0;
    }
    ul.links a:link, ul.links a:visited {
    display:block;
    font-weight:bold;
    font-size:10pt;
    width:160px;
    height:37px;
    line-height:37px;
    text-align:center;
    text-decoration:none;
    background: url(images/link_button.png) no-repeat;
    outline:none;
    padding:0;
    margin:0;
    }

    }
    ul.links a:hover, ul.links a:focus {
    background: url(images/over_button.png);
    }
    div.content {
    float:left;
    padding:20px;
    ;
    background-color: #666666;
    width: 80%;
    }
     
  10. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    OK there are a few syntax issues with your code...you gotta look out for this stuff :)

    Your HTML:
    1. the div "mid" is missing its closing tag.
    2. dont use "align=center" in a div tag, bad method and outdated. just use css to style that, and if it is text only, I recommend a paragraph tag because that is there intended use. I added a style for all P tags inside the content div.

    Your CSS:
    • there was an extra curly bracket "}" right before "ul.links a:hover, ul.links a:focus". This will break the css code.
    • there was an extra semicolon after "padding:20px;" in the div.content style

    The css errors above were why your buttons were not working.

    The reason the div.content was not sitting parallel to the menu (ul) is because it was too wide, therefore, causing it to wrap underneath. You had the width of div.content set to 80%. A rule of thumb is if you use percentages use them on all items (in a relative area). The menu is set in pixels, so I set your div.content to pixels. That fixed the issue.

    Food for thought:
    The total area of the div "mid" is 960.
    The ul menu uses 160 of that 960, leaving 800.
    So the div.content can be no more than 800.
    However, if you add margins or padding to this div, you must subtract that from the width. (hence why i set it to 796, because I added a margin:2px )

    The footer fixes itself, once the absolute positioning was removed from the div "mid".

    HTML:
    <body>
        <div id="header">
            <img src="images/header_logo.jpg" alt="Pirates Baseball" width="960" height="173"/></div>
        <div id="mid">
            <ul class="links">
                <li><a href="index.html">Home</a></li>
                <li><a href="schedule.html">Schedule</a></li>
                <li><a href="roster.html">Roster</a></li>
                <li><a href="players.html">Players at Next Level</a></li>
                <li><a href="coaches.html">Coaches </a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="videos.html">Videos</a></li>
                <li><a href="region.html">Region 2-AA</a></li>
                <li><a href="facilities.html">Facilities</a></li>
                <li><a href="dugoutclub.html">Dugout Club</a></li>
                <li><a href="links.html">Links</a></li>
                <li><a href="concessions.html">Concessions</a></li>
                <li><a href="summer.html">Summer Ball</a></li>
                <li><a href="directions.html">Directions</a></li>
            </ul>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at turpis nisi. Etiam est ligula, ullamcorper in vehicula sed, commodo a mauris. Phasellus eu nibh dui. Aliquam sit amet arcu nisl, vitae tempus enim. Morbi venenatis augue a dolor porttitor quis luctus erat tristique. Pellentesque id turpis vestibulum nulla facilisis gravida a quis risus. Maecenas in tellus sapien, vel euismod leo. Quisque diam eros, varius vitae pulvinar a, feugiat vehicula leo. Sed at mauris sapien. Suspendisse blandit turpis sed mi adipiscing sed egestas est varius. </p>
            </div>
        </div>
        <div id="footer"></div>
    </body>
    
    Code:
    body {
       font-family:Georgia, serif;
       font-weight:normal;
       font-size:9pt;
       color:#C9AC7D;
       background: url(dirt.jpg) repeat;
       text-align: center;
       width: auto;
    }
    div#header, div#mid, div#footer {
       position:relative;
       width:960px;
       left:50%;
       margin:0 0 0 -480px;
       padding:0;
    }
    div#mid {
       overflow:hidden;
       text-align: center;
    }
    div#footer {
       background-color:#960;
       height:60px;
       bottom: inherit;
       margin-bottom: 5px;
    }
    ul.links {
       float:left;
       margin:0;
       padding:0;
       width:160px;
       height:auto;
    }
    ul.links li {
       list-style-type:none;
       margin:2px 0;
       padding:0;
    }
    ul.links a:link, ul.links a:visited {
       display:block;
       font-weight:bold;
       font-size:10pt;
       color:#fff;	
       width:160px;
       height:37px;
       line-height:37px;
       text-align:center;
       text-decoration:none;
       background: url(images/link_button.png) no-repeat;
       outline:none;
       padding:0;
       margin:0;
    }
    ul.links a:hover, ul.links a:focus {
       background: url(images/over_button.png);
    }
    div.content {
       float:left;
       background-color: #666;
       margin:2px;
       width: 796px;
       min-height:450px;
    }
    div.content p {
       text-align:center;
       padding:20px;
       margin:0;
    }
    
     
  11. gumspitter

    gumspitter New Member

    Messages:
    57
    Hey Pixel thanks again for your help. I have placed the images in the css file as instructed but nothing changes. I have even tried to save my images as jpegs and still nothing changes. No images will load whatsoever. Do you think there may be a problem with the "white space" of my images? They have a transparent background in PS but when I tried to insert images into another part of the page just to see if there may be a problem there was a white box surrounding the image. If this is the problem, how do I get rid of the space.

    I have tried to save images in photoshop (Save to Web) as PNG files, set "save as type" { Images only .png }, then use that file in my page. I get nothing!!!! This is very frustrating to say the least.

    Thanks, DJM
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Did you copy the css from my previous post? you had errors in your code that were breaking the css, in turn, stopping the buttons from working.

    If you did, and they are still not working, then double check the file path to the images. If still nothing, i will need you to post the new changes live so I can look at it.

    Regarding the white space...if you want to keep the images transparent then use the "png" file type, not "jpeg". Jpeg will not support transparency. When saving for web in Ps, make sure you check the transparency check box on the right. And I assume you don't have a white background layer in Ps doc right?

    You should have just one layer, the rounded rectangle button. I would then suggest using the "Trim" feature in Ps before saving for web.

    Using Trim
    • Go to the top menu and select "Image > Trim" or Ctrl + Shift + T.
    • Then select the checkbox that says "bottom right pixel color" (this should be transparent, if not choose the option that is).
    • hit OK
    • It will cut away all transparent pixels except for the few needed on the rounded corners.
     
  13. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel, I somehow saved the trimmed files as a png.tmp file. Can you explain what the tmp file is? The image now shows up in design view on DW but not on uploaded site. Also, the footer shows up fine in DW but when uploaded site is displayed you can see it is not aligned properly. It goes just under the header image.

    http://www.applingpiratesbaseball.com/directions.html


    Code is below...



    <!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>
    <title>Home Page</title>
    <link rel="stylesheet" href="main.css">

    <body>
    <div id="header">
    <img src="images/header_logo.jpg" alt="Pirates Baseball" width="960" height="173"/></div>
    <div id="mid">
    <ul class="links">
    <li><a href="index.html">Home</a></li>
    <li><a href="schedule.html">Schedule</a></li>
    <li><a href="roster.html">Roster</a></li>
    <li><a href="jrvarsity.html">Junior Varsity</a></li>
    <li><a href="middle.html">Middle School</a></li>
    <li><a href="players.html">Players at Next Level</a></li>
    <li><a href="coaches.html">Coaches </a></li>
    <li><a href="history.html">History</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="region.html">Region 2-AA</a></li>
    <li><a href="facilities.html">Facilities</a></li>
    <li><a href="dugoutclub.html">Dugout Club</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="concessions.html">Concessions</a></li>
    <li><a href="summer.html">Summer Ball</a></li>
    <li><a href="directions.html">Directions</a></li>
    </ul>
    <div class="content">
    <p> porttitor quis luctus erat tristique. </p>
    </div>
    </div>
    <div id="footer"></div>
    </body>


    CSS


    body {
    font-family:Georgia, serif;
    font-weight:normal;
    font-size:9pt;
    color:#C9AC7D;
    background: url( dirt.jpg) repeat;
    text-align: center;
    width: auto;
    }
    div#header, div#mid, div#footer {
    position:relative;
    width:960px;
    left:50%;
    margin:0 0 0 -480px;
    padding:0;
    }
    div#mid {
    text-align: center;
    }
    div#footer {
    background-color:#960;
    height:60px;
    bottom: inherit;
    margin-bottom: 5px;
    }
    ul.links {
    float:left;
    margin:0;
    padding:0;
    width:160px;
    height:auto;
    }
    ul.links li {
    list-style-type:none;
    margin:2px 0;
    padding:0;
    }
    ul.links a:link, ul.links a:visited {
    display:block;
    font-weight:bold;
    font-size:11pt;
    color:#fff;
    width:160px;
    height:37px;
    line-height:37px;
    text-align:center;
    text-decoration:none;
    background: url(images/button.png.tmp) no-repeat;
    outline:none;
    padding:0;
    margin:0;
    }
    ul.links a:hover, ul.links a:focus {
    background:url(images/over.png.tmp)
    )
    }
    div.content {
    float:left;
    background-color: #666;
    margin:2px;
    width: 796px;
    min-height:450px;
    }
    div.content p {
    text-align:center;
    padding:20px;
    margin:0;
    }
     
  14. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    DJM,

    Did Ps crash when your were saving the image? If not, I am not sure how you ended up with a temporary file (.tmp) extension to your png image. That sounds fishy, maybe your Ps is not working correctly?

    After trimming the image you are selecting "save for web" right (ctrl + shift + alt + S)? Then select the "png-8" option from the drop down menu on the upper right. Choose either "128" or "256" color. After clicking save, it will provide you with a dialog window where you name your file. Make sure it says "Potable Network Graphic (PNG) in the file type. The code looks good though, just need a correct file extension/type.

    The footer is underneath the header because the floated content in the "mid" div is not cleared. Add this to div "mid" :
    Code:
    overflow:hidden;
    FYI
    Whenever you float item(s) within a container, the container, by default, will not adjust in height because floated item(s) do not reside on the same inherited level as plain text. That is the nature of floating. To get a container TO recognize floated content, you need to clear the float.
     
  15. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel I am getting closer. On the home page, click on the "directions" link. As you can see the first image (fixed the temp file issue) is showing but not the rollover image. I will try again tomorrow to get the rollover effect to work. I also fixed the footer issue but when the overflow is set to hidden I cannot see all of the content area while editing the page.

    Thanks again for the help.
     
  16. jamesparker

    jamesparker Banned

    Messages:
    62
    Use div

    Hi

    You should be use div in your site and don't use table.
     
  17. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    The rollover is not working because the image either doesn't exist, or is in the wrong location. When I try to view the image "over.png" I get nothing. The code is correct though apart from one part. The hover and focus state should have the background image set to "no-repeat" not "repeat" just like the the static state.

    Code:
    background:url(images/over.png) no-repeat;
    
    I am not sure what you mean about the overflow and not seeing the content? Are you viewing the site in Design view in DW. I highly recommend not using that view. It is very unreliable. Stick with the Code view and previewing in browser(s).
     
  18. gumspitter

    gumspitter New Member

    Messages:
    57
    Finally the buttons work!!!! The problem was somehow the image file. I recreated the button from the static button and it works.

    Pixel, how can I get the header image to reach the top of the page, also some of the image is cut off on top?

    Thanks for all you have done.
     
  19. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Hey no problem DJM you welcome, glad to hear the buttons are working now. Its amazing how much cleaner your code is now huh?

    The reason your image (div#header) is not flush with the top of the browser window is because the <body> has inherit margins. You just need to declare them as zero. So your body style should look like this:

    Code:
    body {
      margin:0;
      color:#C9AC7D;
      font-family:Georgia,serif;
      font-size:9pt;
      font-weight:normal;
      text-align:center;
    }
    

    Now in regards to the image being cut off, the only thing I see that would be causing that is the width and height declared in the <img> tag is not consistent with the actual size of the image. The image size is 960x173 but the image tag lists it as 962x157. Change the <img> tag to read like this:

    HTML:
    <img width="960" height="173" alt="Pirates Baseball" src="http://www.webdesignforum.com/images/header_logo.jpg"/>
    
     
  20. gumspitter

    gumspitter New Member

    Messages:
    57
    I have added some content to the footer and corrected the margin issue. Please take a look at the page now and see if there are any other issues that you can suggest a fix. Pixel you have been a lifesaver!. The code is very clean.

    I have gotten some mixed reviews when it comes to templates. In my research some say that templates should only be used if you are designing for someone else (client) to edit. Is this true?
    In your opinion should I use a template to make the other pages of the site or should I just use "save as" to create and name each page?
     

Share This Page