[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

Help with a CSS mystery- Text Alignment

I can't link to my site or even come close to linking, so please forgive me-- but the site is at: www.
s
d
s
l
a
w
a
z
dot
com


Can anyone tell me why (in the footer) section of the page, the title of the column "Our Sites" is not lined up with the other column titles? The code looks consistent to me for every column.

THIS HAS ME GOING CRAZY!

Thank you in advance!
0
mellijae
Asked:
mellijae
  • 4
  • 3
1 Solution
 
pritamduttCommented:
Change the CSS to following in custom.css

div#footer ul {
    display: block;
    float: left;
    height: 100%;
    list-style-type: none;
    width: 24%; ' Reduces by 1%
}

Open in new window


Regards,
0
 
Dave BaldwinFixer of ProblemsCommented:
On lines 405 and 418, you have some unwanted whitespace after the "ul>".  Sometimes that will throw a layout off.
0
 
mellijaeAuthor Commented:
Thank you both...

@pritamdutt -- that fixed the column headings linking up horizontally-- THANK YOU!

However, when I implemented your change, it looks like all of the columns, now shifted 22 pixels to the left.

I am sorry that I am unfamiliar with CSS design, but if you can tell me how to get the columns to line up, I would be very, very grateful!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
mellijaeAuthor Commented:
I am attaching a file attachment... This is how I want it to look-- IDEALLY...

I have to be at work in 7 hours; I really need to figure this out. Anybody?

 screen shot
0
 
pritamduttCommented:
Hi,

Make the following changes and that should address the problem.


div#footer ul      {  
 display: block;
    float: left;
    height: 100%;
    list-style-type: none;
    width: 239.5px;
}


Btw I was the first one to tell you the problem and the solution for you image issues as well.. I deserved some appreciation for that too...

I wish i knew you had no knowledge of CSS

btw hope this helps!!!
0
 
mellijaeAuthor Commented:
@pritamdutt--

You do deserve appreciation! Thank you!

I should have posted both of my problems in the same question though, because I am still lost.

If I leave the padding that you suggested for the images, the images shift 22px to the right and they still don't match up.

I just removed the 22px padding, that you suggested for the vcard class and now the addresses are back to where they (almost) should be.

If you look at the page, you can see the Phoenix address lines up just fine... but as we get further and further, the addresses keep moving away from lining up with the column above.

And you're right--- I don't know CSS.

Any way I could get you to look at this one last time?

Could we make 4 different vcard classes? (vcard1, vcard2, etc)

And then position each one exactly where we want it?

Thank you!
0
 
pritamduttCommented:
Also, please note that to align images in visual alignment with the text you would have to modify these as well:

1. Remove width and height tags of <img tags

<img width="242" height="99" alt="" src="http://www.sdslawaz.com/_wp/wp-content/uploads/chandler-address.gif" title="chandler-address" class="alignnone size-full aligncenter wp-image-4238">

2. Make following changes in your custom.css file

.vcard {
width:239.5px;
display:block;
}
.vcard img {
padding-left:22px;
left:-5px;
position:relative;
display:block;
}

Open in new window




I have attached modified custom.css file for your reference.

custom.css
0
 
mellijaeAuthor Commented:
Thank you SO MUCH. You are very kind.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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