?
Solved

HTML / CSS layout

Posted on 2012-09-07
6
Medium Priority
?
415 Views
Last Modified: 2012-09-07
I am working on a website that was converted from Photoshop to HTML.  I am having some issues with spacing on the navigation links at the bottom of some of the pages.  Here is one of them, http://www.lincolnae.com/Contact/index.html .  As you can see, there is too much space and the words do not line up with the line breaks.  I have attached the style sheet.

Here is another page that just has too much space at the bottom of the page before the navigation, http://www.lincolnae.com/About/index.html
0
Comment
Question by:northernknight
6 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1600 total points
ID: 38377387
contact
style.css line 197:
adjust the margin:

#group_3 {
clear: both;
float: left;
margin: 82px 0 0;
width: 658px;
}

Open in new window


about:
style.css line 139, adjust the margin:
#rowHolder_2 {
background: url(images/separating_lines.png) no-repeat 54px 0;
clear: both;
float: left;
margin: 91px 0 0 149px;
min-height: 12px;
width: 658px;
}

Open in new window


This is a very poorly put together page - was is generated by photoshop?
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38377438
The first thing is to get rid of <?xml version="1.0" encoding="UTF-8"?> at the top of the page.  It is Not being delivered as XML but as 'text/html'.  Leaving that at the top will confuse IE because it wants to see a usable DOCTYPE at the top of the file.
0
 
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 400 total points
ID: 38377450
Do you happen to have firefox and firebug?  I would highly recommend getting it if you don't.  (FREE)

Firebug will allow you to troubleshoot your own css files and problems and allow you to make changes directly in the browser so you can see the changes on the fly...

Please see the attached video file for what I mean.
Untitled.flv
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.

 
LVL 1

Author Comment

by:northernknight
ID: 38377492
That worked great.  How do you know how many pixels to change without trial and error?
I attached the home page psd file.  It was converted using an online conversion tool.  Does Photoshop have it's own conversion to html?  I am using CS4.

Here is another missaligned page, http://www.lincolnae.com/Design_Permits/index.html
0
 
LVL 1

Author Closing Comment

by:northernknight
ID: 38377591
Thanks for the help.  I also just used Firebug to fix the design_permits page.
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38377760
You don't really know unless you do some trial and error.  Firebug will allow that trial and error in-line...very helpful feature :)
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

850 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