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. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I will take a look at see if there is any other suggestions. As far as templates go, I think the pre-built stuff is tougher to deal with if your coding knowledge is not strong, plus you can end up changing them so much that it would have been better to just build from scratch in the first place.

    In regards, to clients being able to edit them, you are talking about a CMS (Content Management System). That is more complicated. You would need to work your design in the cms structure. In your case, its a personal site so I dont think this applies.

    When creating other pages you will have common elements: the header, left nav, content area, and footer. The only item that will change for each page will be the actual text content.

    You have a few options:
    Basic Longhand method
    manually create page with the same header, nav, content area, footer. Meaning you will copy past the structure into each html file. Not a bad method just more time consuming.

    Use server-side scripting
    You can create a master page, or master functions doc using languages like ASP and PHP that output the code for the header, footer, etc. In turn, you would just have to add the unique content for each page. This way your pages are smaller and easier to read.
     
  2. Marcus Cyganiak

    Marcus Cyganiak New Member

    Messages:
    28
    Tables should only be used within div tags, but it should not be used to architect the entire structure of a website. That was the lazy way of development in the 90's.
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Tables should only be used for tabular data, div tag or not.
     
  4. Marcus Cyganiak

    Marcus Cyganiak New Member

    Messages:
    28
    That's right too.
     
  5. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel I am now trying to embed mp3 music file into the site. When I try to embed it the file messes up the layout of the page. I know it has to be a placement issue. I would like to have a small slide bar at the bottom of the last button on the left. Where in the code would I insert the code for the file to play when the page is loaded? Also when I use DW to insert the plugin I get a message " unable to find the plugin that handles this media type."
     
    Last edited: Nov 15, 2009
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    DJM, do you have that placement up live so i can see it? To add an item to the end of your left button list, simple add another list item before the closing of the list.

    HTML:
    <ul class="leftnav">
       <li><a href="">Existing Link</a</li>
       ....
       <li>Your new list item</li>
    </ul>
    
    Remember though the left menu width is set to ~160px or so. Meaning whatever you add in that list should be compatible with that width.

    To get the mp3 to play when the page is loaded you are going to need some sort of method to control it. Javascript can do this, in fact JQuery has a main function called "document.ready" where it executes the commmands after a page has loaded. In regards to the scrub bar (slider bar), how did you create it, link it to the mp3? Flash?

    In regards to the error, when are you getting that? while in DW? if so are you using the Design view?
     
  7. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel I got the embedded file to work on the home page. Thanks.

    I have another small issue. The links on the bottom of the page are white (visited and active) I want to add a rollover color to the hover state. I tried doing this on the style sheet so it would cover all pages. It works only on the home page.
    Here is the code in the css file. Everything looks fine to me but there is a problem somewhere. Thanks again for the help.

    a:link {
    color: #FFFFFF;
    text-decoration: none}
    a:visited {color: #FFFFFF;
    text-decoration: none}

    a:active {color: #FFFFFF ;
    text-decoration: none }

    a:hover {color: #999999;
    text-decoration: none }
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Well if the CSS code below is what is in your stylesheet, you have a few errors. You are missing a ";" after the "text-decoration:none" in all four states. I would try fixing that. Otherwise the code is correct. Also remember to clear browser cache, this assures you are using the most recently updated version of your stylesheet.
     
  9. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel I figured it out. I had conflicting "a" code already on each page and it was conflicting with the style sheet. Thanks again for your help.
     
  10. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Your welcome man
     
  11. kill3rz

    kill3rz New Member

    Messages:
    1
    this help me also thanks a lot man
    [​IMG]
    [​IMG]
     
  12. orangecopper

    orangecopper New Member

    Messages:
    327
    Slicing and Tables are outdated, Learn CSS that would put you on top of the league. Sorry i was not helpful to your question, but take my suggestion seriously

    regards
    Joshu
     
  13. gumspitter

    gumspitter New Member

    Messages:
    57
    How do I add Weather to site?

    Pixel, I am trying to add weather to my home page of this site. I want to add it underneath the navigation on the left just under the sound slide bar. When I insert the code more buttons show over the weather. I have since move the code now it is above the content. I will leave it there waiting on your advice.
     
  14. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ok the issue you will have is the weather element is wider that the navigation bar. This is going to either create a gap between the navigation bar and the body content section, meaning you will probably want to expand the images for the button (static and hover) to match the width of the weather element.

    The other option is you can have the weather element absolute positioned and it will overlap the body content slightly.

    Do you follow me? Let me know what you would like to do. Personally I would take the first option.
     
  15. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel, if I widen the buttons will the button become out of balance with the rest of the page? I do not want the buttons to be the focal point of the page.
    The weather element is not a vital part of the site it is just extra. In your opinion is the weather too much? I can always add a link to the weather on the page .
     
  16. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    DJM, the buttons do draw a lot of attention right now due to the red/black gradient, so making them wider would draw more attention. I have a few suggestions that I feel would make the site look sharper:

    • Remove the "padding:5pt" from the header. It is creating too much separation and ruining the flow of the page.
    • Regarding flow, I would remove the black background from the content div and add it to the mid div. This way the menu will have a black background and there will not be that awkward space where the menu stops.
    • I would change the image for the buttons to something more subtle. Consider using a grey gradient and not the red. The red might not be bad for a rollover state? maybe just red text on rollover?
    • Remove the rounded corners from the nav buttons, as your whole site has 90 degree corners. The rounded ones look out of place.

    I have a idea that I will try to put together later today that will help with load time of the buttons, and width adjustment. (not that they load slowly now)

    Have you thought about using the weather element in the content of the home page instead of on the left? Might be a good bit of home filler? Or did you intend on having the weather available on every page?
     
  17. gumspitter

    gumspitter New Member

    Messages:
    57
    Pixel, will using black in the mid allow the content area to be black as well? Should I just make the whole page black?

    The buttons do look a little big on larger monitors. They also load a little weird. Sometimes the rollover loads too slowly.

    I was just wanting to use the weather on the home page.
    Thanks for the suggestions and help.
    Thanks
    DJM
     
  18. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yeah if you set the bg color to black for the div "mid", it will affect the menu and content div backgrounds. I would refrain from making the whole page black.

    Still gonna get button suggestion to you.
     
  19. gumspitter

    gumspitter New Member

    Messages:
    57
    I have made the "mid" change. I see what you mean about the flow of the "content" and the "mid" divs. Now it seems to be a little more seamless than before. I have changed the button to a solid rectangle with a rollover color.
     
    Last edited: Dec 14, 2009

Share This Page