[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

html / css

Here is an html file that was badly converted from Photoshop, http://www.lincolnae.com/Projects/index.html 

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.
style.css
0
northernknight
Asked:
northernknight
  • 3
  • 2
2 Solutions
 
northernknightAuthor Commented:
It looks like I fixed the navigation format problem.  Is there a way to change the blue line positioning?
0
 
GaryCommented:
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.
0
 
northernknightAuthor Commented:
I see, so the conversion didn't separate the lines.  Can the text be adjusted to fit correctly in the lines?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GaryCommented:
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
0
 
captainCommented:
From what I can see, this is not a CSS issue as the blue lines are part of the background image:
http://www.lincolnae.com/Projects/images/background.png

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.

best
capt.
0
 
GaryCommented:
Here's something to look at and give you an idea
lincolnae.zip
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now