html / css

Posted on 2012-09-07
Last Modified: 2012-10-23
Here is an html file that was badly converted from Photoshop,

The blue lines are not lined up and the navigation at the bottom is not formatted correctly.  The "Home" looks correct, but the other links do not have the formatting.

Please provide the code to fix these two problems.

I have also provided the css file.
Question by:northernknight
    LVL 1

    Author Comment

    It looks like I fixed the navigation format problem.  Is there a way to change the blue line positioning?
    LVL 58

    Expert Comment

    But that is just one picture, you need to change it in Photoshop itself.
    But that is a terrible method for a background image.
    You should just set a background color, then use spans or divs (or images - but not necessary for single color blocks) for that blue color block.
    LVL 1

    Author Comment

    I see, so the conversion didn't separate the lines.  Can the text be adjusted to fit correctly in the lines?
    LVL 58

    Assisted Solution

    Like I said it's a terrible method you're using. Continuing down this path will only lead to trouble in the future if you ever need to change something on the page because as you have it now you are designing a background to line up with the text.
    Follow my suggestion, you're obviously proficient in Photoshop
    Redo the logo with a transparent background - the size should be only enough for the logo to fit in and save as PNG8 with transparency
    Use a color for the background.
    Then under the headings you can just add a div with styling for the width, height and color
    For the footer links you can just amend them manually with | (that is the text version and not an image)

    I'll see if I can put a mock up together quickly
    LVL 32

    Accepted Solution

    From what I can see, this is not a CSS issue as the blue lines are part of the background image:

    You need to fix this in Photoshop, although I think that having content and especially separating lines/boxes as part of a background image is very limiting and may cause problems if your content grows.

    You are better advised to create DIV classes for a blue bar, that you can then position with your headings.

    That way you can position your bar for every instance of <h2> for example.

    Overall you should think of having your global container to only have a background colour and do the same DIV concept for logos etc...

    This answers your question in respect to the blue bars, you may want to consider opening another question to more experts that asks how you can create a dynamic DIV based site from the background image.

    LVL 58

    Expert Comment

    Here's something to look at and give you an idea

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Suggested Solutions

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now