SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginning portfolio site has issues

    Hi everyone. OK, building my first web project: my portfolio site. Not using Dreamweaver, but am coding on Komodo Edit. I'll admit, it's slow going, as each and every glitch takes a bit of time to work out. I'm an experienced designer, but have no experience in coding of any kind.

    http://www.franzdesignandmedia.com/

    Here's what I'm thinking is a common issue. Troubleshooting. I feel like I've got a lot of the basics down, but something is causing my central content (text) to not appear on anything but my home page. It works "locally" but the hosted files don't. That makes sense if you get a link wrong, or forget to upload something, but why would code work locally but not on a web server?

    Besides the missing text I wished my whole site would appear centered in the browser window, instead of sitting aligned left.

    Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Your pages are actually appearing OK in firefox, but that aside, your layout techniques are all wrong. To start with, the best approch would be to remove the background images for now and start with the content. Change the #main styles from this

    Code:
    #main {
      border: 0 solid #F0F0F0;
      margin: 0 auto;
      position: absolute;
      width: 1400px;
      z-index: 1;
    }
    to something like

    Code:
    #main {
      margin: 0 auto;
      width: 880px;
      overflow: hidden;
      padding-top: 190px;
    }
    Now move all of the content into the #main div (well, the UL followed by the #content div), and remove the huge margins from the #content div:

    Code:
    div#content {
      background: url(images/fdm_web_master_2_r2_c2.jpg);
      border-right: 1px solid #fff;
      color: white;
      font-family: arial,helvetica,verdana,sans-serif;
      font-size: 11pt;
      line-height: 2em;
      padding: 0 20px 0 0;
    }
    Change the menu styles to

    Code:
    ul.menu {
      background: url("../menu/images/bg.png") repeat-x scroll left top transparent;
      border: 1px solid #000000;
      font-size: 0.8em;
      height: 33px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      float: right;
    }
    Make the background image of the site one image and place it on the body element, like so:

    Code:
    body {
      background: url(/images/bg-image.jpg) no-repeat 50% 0;
    }
    That's sort of a basic start, though there's a lot more to do. Do this in a test page rather than mess with the live site. It's good to have a before and after.

    Come back with questions!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m, thanks very much for this response.

    First, I'll definitely take your advice and begin to rebuild based on your provided code. At the risk of sounding like a stubborn git, and possibly for the benefit of other newbies, I'll mention how I got to this layout, followed with a question.

    The idea is to have the "work" page show design samples, like so many portfolio sites. I assumed I needed to slice my background to have a changable central div to insert a gallery (sexy slider). So, I basically built around this idea.

    I used Fireworks' slice/CSS function to build the sliced page and generate the code, then built the rest of the site around that.

    With your single image background, it's simple enough to have a different background for when I don't want the logos to appear but what about the gallery? Do I place this on the "work" page by using a z index (which turned out to be the problem of my original issue) so it appears on "TOP" of the background?

    I hope by asking this it makes it clearer of when to slice or not.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sofaman View Post
    I assumed I needed to slice my background to have a changable central div to insert a gallery (sexy slider). So, I basically built around this idea.
    No, slicing is dead. It's from the days when people laid out pages with tables. I've never done an image slice, and never will.

    Elements inside the <body> (or all elements within elements) sit on top of their parent by nature, so you don't need any z-indexes. The inner elements will naturally site over the top of the parent's background image, so no need to worry about anything there.[/quote]

    With your single image background, it's simple enough to have a different background for when I don't want the logos to appear but what about the gallery? Do I place this on the "work" page by using a z index (which turned out to be the problem of my original issue) so it appears on "TOP" of the background?.
    Answered above, no. But had I been more detailed, I'd have said remove the logo from the background image anyway. It's better to include that as a separate element.

    Also, no need to buy a slider. Similar ones exist for free:

    http://nivo.dev7studios.com/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Understood. Thanks for the clear and concise points.

    I'll move forward with this info.

    MUCH appreciated.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great. I'm a bit worried that a lot of what I said further above may be vague and misleading, but I didn't have time to go into finer detail, and it's a bit hard to describe everything at once. So I'd recommend building the page in steps, starting with the background image on the body, then the main wrapper, and checking in here after each step. We're happy to guide you along if needed.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, back with updates.

    www.franzdesignandmedia.com


    Your suggestions make for a vastly simpler code.

    One image background. Separate div for logos.

    I'm sure there are still errors, as I haven't totally grasped the "float" concept.

    Also, in Google Chrome there's a 1 px white border around the logo div. Not sure why.

    I put this live as I'm not really driving traffic and just want to move forward.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The white border is the missing image placeholder in the html. You have an invalid image element with a comma in the middle and the wrong src address. You also seem to have the same image in the background so make your mind up

    As a rule of thumb if the image is "content" and not "decoration" then it should be in the html. If the image is purely decoration then it should be in the background.

    You can also remove the deprecated align=right from the image also.

    Your comments are invalid. They should be like this:
    Code:
    <!-- only two dashes at each end allowed -->
    I would also float the left column and avoid the ie6 3px jog bugs. It also means that you won't inadvertently clear the side column if you add clear both to an inner element.

    Put a min-width on html and body the same size as your largest container to stop the background sliding off into the sunset when the screen gets smaller.

    Something like this:

    Code:
    <!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>Welcome to Franz Design &amp; Media</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./main.css" media="all" />
    <style type="text/css">
    h1 {
        font-size: 24px;
        font-weight: bold;
        color: yellow;
    }
    p {
        padding:0 20px 0 0;
        margin:0 0 1em;
    }
    img {
        border:0 none;
    }
    a:link, a:visited {
        color:#fff;
    }
    html, body {
        min-width:873px;
        margin:0;
        padding:0;
    }
    body {
        background:#000 url(http://www.franzdesignandmedia.com/images/FDM.jpg) no-repeat 50% 0;
        font-family: arial, helvetica, verdana, sans-serif;
        color:#fff;
    }
    #main {
        margin: 0 auto;
        width: 873px;
        overflow: hidden;
        padding-top: 150px;
    }
    #content {
        border-right: 1px solid #fff;
        margin: 70px 0 0 55px;
        display:inline;
        float:left;
        color: white;
        font-size: 12pt;
        line-height: 2em;
        width:626px;
    }
    #logos {
        /*background: url(http://www.franzdesignandmedia.com/images/logos.jpg) no-repeat 0 0;*/
        position: relative;
        float: right;
        width:172px;
        padding-left:18px;
        /*border-left:1px solid #fff; full border if needed*/
        position:relative;
        left:-1px;
    }
    #maincontent {
        clear:both;
        width:100%;
        overflow:hidden
    }
    </style>
    <style type="text/css">
    ul.menu {
      background: url("http://www.franzdesignandmedia.com/images/bg.png") repeat-x left top;
        border: 1px solid #000000;
        font-size: 0.8em;
        height: 33px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        float: right;
    }
    ul.menu li {
        display:block;
        float:left;
        margin:0;
        padding:0;
    }
    ul.menu li a {
        float:left;
        color:#A79787;
        text-decoration:none;
        height:24px;
        padding:9px 15px 0;
        font-weight:normal;
    }
    ul.menu li a:hover, ul.menu li.current {
        color:#fff;
        background:url("http://www.franzdesignandmedia.com/images/bg.png") repeat-x top left;
        text-decoration:none;
    }
    ul.menu li.current a {
        color:#fff;
        font-weight:700;
    }
    /*GREEN*/
    ul.green {
        background-color:#629600;
    }
    ul.green li a:hover, ul.green li.current {
        background-color:#7AB900;
    }
    </style>
    <!--[if IE]>
    <style type="text/css" media="all"></style>
    <![endif]-->
    <link href="menu_style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="main">
        <ul class="menu green">
            <li class="current"><a href="index.htm" target="_self">home</a></li>
            <li><a href="about.htm" target="_self">about</a></li>
            <li><a href="work.htm" target="_self">work</a></li>
            <li><a href="services.htm" target="_self">services</a></li>
            <li><a href="blog.htm" target="_self">blog</a></li>
            <li><a href="contact.htm" target="_self">contact</a></li>
        </ul>
        <div id="maincontent">
            <div id="content">
                <h1> promotion. branding. design. media. </h1>
                <p> Welcome to Franz Design &amp; Media. We create web and print based promotions, advertisements, branding programs and corporate communications that are both award winning and effective. If it needs to communicate, FD&amp;M has done it. </p>
                <p> In the rapidly changing world of media, there are many opportunities to connect directly with your customer. FD&amp;M provides business with an arsenal of tools to reach audiences effectively, quickly and inexpensively - all with the proven communication skills that deliver results. </p>
            </div>
            <div id="logos"><img src="http://www.franzdesignandmedia.com/images/logos.jpg" width= "171" height= "625" alt="" /></div>
        </div>
    </div>
    </body>
    </html>
    Don't add inherit to everything. To be honest I've coded about 100 sites in a year and not used inherit once. Things that usually need to be inherited are inherited by default. It's only when you need to force the issue that you would need it and those cases are few and far between.

  9. #9
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Yeah, I debated on changing out the whole background, but decided to place an image of logos on top of the background. (they will not appear on other pages.) Thanks for the tips on inherited attributes and comments. That's how new I am at this. . . had no idea there was a compliance issue with comments.

    OK, used the float technique. All looked well in my text editor's preview, local FF, but when I went live the logos are stretching horizontally in FF, but appear fine in Chrome and Safari. I'm doing something wrong still. . .

    www.franzdesignandmedia.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure what youu mean by stretching horizontally as the logs have a set width of 171px set n the image tag.

    It looks the same in Firefox and Chrome to me unless I'm looking at the wrong thing

  11. #11
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I'm not quite sure what youu mean by stretching horizontally as the logs have a set width of 171px set n the image tag.

    It looks the same in Firefox and Chrome to me unless I'm looking at the wrong thing
    Right, I would think assigning a fixed width to an element would prevent any resizing but something is off. Below are two screen grabs of what I'm seeing. I suspected that a vertical shrink might be the culprit but adding a fixed min-height didn't solve the problem. I just need to go through my numbers and see where I went wrong.

    listed first: "stretched"




    listed second: proper proportions
    Attached Images Attached Images

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The intrisic size of the image is 171px 625px but in the html you are squashing its height to 512px.

    Code:
    <img src="images/logos.jpg" width= "171" height= "512" alt=""/>
    If you want the height to be 512px and for the image to maintain the correct ratio aspect then omit the width (or vice versa).

    Is that what you meant.

  13. #13
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The intrisic size of the image is 171px 625px but in the html you are squashing its height to 512px.

    Code:
    <img src="images/logos.jpg" width= "171" height= "512" alt=""/>
    If you want the height to be 512px and for the image to maintain the correct ratio aspect then omit the width (or vice versa).

    Is that what you meant.

    Uhgg. Sorry, I simply outsmarted myself. I had created a 512px high logo file because I wanted to shorten the green rule (border). However I hadn't properly uploaded the new file, so I WAS distorting the (625px) image through code.

    (BTW, is there a way to shorten the border length in CSS? i.e. from full height of the div to partial.)

    In any case with your and Ralph's help, I feel I'm on my way to build out the rest of the site, I'll put it up soon in the design review thread.

    This site has proven to be very helpful. Obviously I'm a beginner, but I look forward to learning more.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    There's a saying I use -- CSS is only as good as the markup it's applied to.. and you've got some issues in the markup I'd HIGHLY suggest cleaning up before even THINKING about the CSS.

    First off, you aren't doing a single thing that should need ANY of that IE conditional nonsense. From the appearance the page isn't even complex enough to need hacks in the first place, much less that stuff (which I never use on any sites).

    From there you have the problem of your use of ID's. Elements can only have one ID and you can only use an ID once on the page, so:

    <div id="main content">
    <div id="content">

    Is just asking for the page to break. If you want to use it twice, use a CLASS... Though I'm not even sure what the double wrapper is for.

    Finally, <!== is not the normal syntax for comments, and placing the comments after the elements can often trip rendering bugs in both IE and FF... simply changing this:

    </div> <!== logos ==>

    To this:
    <!-- #logos --></div>

    can prevent all sorts of headaches down the road.

    Finally, this is a new page, right? If it's new, what the blue blazes is with the tranny doctype? Likewise you shouldn't be using TARGET on a modern page that doesn't have framesets -- and of course from an accessibility standpoint one shouldn't be using framesets so there's NO legitimate reason to use TARGET... ESPECIALLY target="_self" which is nothing more than a waste of bandwidth.

    Design wise, you're not too bad, though the green text on the dark transparent background is below accessibility minimums for contrast, as is the absurdly undersized font in the menu.

    Also I don't know if you're planning on adding more content or sections, but if you do the use of H1 for "promotion. branding. design. media." could be problematic since that basically makes everything on the page a subsection of that. The image up top where you have "franz design & media" is what should PROBABLY be the h1, if for no other reason than to have something meaningful on the page for formatting for CSS off or images off users -- which is something else you are lacking.

    The page is also not viable to be anything but bounce central due to the ridiculous filesizes. There's a reason you don't see major successful websites with images like this one:
    http://www.franzdesignandmedia.com/images/FDM.jpg

    ... as at 382k that image by itself is three times the upper limit I would allow for an entire page on a site (that's HTML+CSS+IMAGES+SCRIPTING) -- AND you basically are shoe-horning yourself into a fixed height layout making you have to constantly micro-manage your content -- which means it's going to age like milk. Fixed height image backgrounds are garbage -- don't even go down that road.

    Which is just part of why drawing a pretty picture in photoshop and calling it a website is usually the road to failure -- even if most of the PSD jockeys out there claim it's how it's supposed to be done.

    THOUGH -- for all that if this is your first one, you're doing better than most of the so called "professionals" out there vomiting up code any old way! Keep with it, you show a lot of promise. Few tweaks here and there and you'll be golden.

  15. #15
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow60, thanks much for taking time to give that feedback.


Bookmarks

Posting Permissions

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