...

View Full Version : CSS Alignment Problem



JamieR
01-29-2005, 09:47 PM
Hi
I have a problem with a design I am designing to replace www.jamierees.co.uk. I've uploaded the new layout to www.jamierees.co.uk/newsite.

Right - my problems:

1) The borders look weird in Safari
2) The navigation links should sit inside the #nav element but it sits outside of it :(
3) The banner doesn't sretch the whole #banner class, bt I'm going to sort that..

any ideas?

Jamie.

dmc
01-29-2005, 11:02 PM
First of all i dont know safari but i have a few points.

The first thing i notice is that you probably used an editor for the stylesheet because some things are duplicated in a class.

1:

#banner
Border top set
Border bottom set
Border left set
All borders set
Border left set

In other words the border left is set twice and you have a border: that sets all borders.

#nav
Background-color set twice
margin: 0 ?
padding: same i dont know how other browser are reading this.
nothing set px,mm etc If something is zero just leave them away in my opion.

#nav --> left: top: (i dont know how browser read a css and evaluate it but maybe left and top are better on the top of your class just a guess)

.navSpec --> border-width: 0 1px (doesn't look good to me)

a.navSpec:hover --> set twice

I hope i'm somehow been useful :)

JamieR
01-29-2005, 11:07 PM
Hi DMC, and welcome to Coding Forums.

Thanks for the help. Most of this site I did really late in the evening using the code view of Dreameaver MX 2004. I notice now that I duplicated some items as you mentioned, which I will fix and upload again. When you scan through code fast, it's easy to miss things..well it is when your short sighted and don't bother wearing glasses.

EDIT - I've uploaded the fixed version of my css file, with the corrections that you suggested but I still have the problems:confused:

Anyhow, cheers.

Jamie.

dmc
01-29-2005, 11:58 PM
LoL this was a hard one i almost give it up. I hope i found it cause i don't have the safari browser but firefox showed the same problem.

So i downloaded the site and i did what i always do when i have a css html problem. I delete all the stuff i dont need. So i did. When i removed everything except the #nav and the <div> nav. And what the *****. Still the same problem.

BUT when i removed the <ul></ul> the menu showed right.
The il element is within the ul element and you gave the il element the inline property but its inline within the ul element.

so just add this to you style and it looks ok in firefox.

ul { display: inline;}

I hope this will help :)

JamieR
01-30-2005, 12:20 AM
ul { display: inline;}

I hope this will help :)

I have used li { display: inline;} for the <li> tags. However I will try <ul> as that is something that I have overlooked.

Cheers.

Jamie.

Graft-Creative
01-30-2005, 01:01 AM
Quick tip:

DWMX2004 - Edit > Preferences > Css styles > then check/tick everything where it says 'Use shorthand for' - then check 'According to the settings above'.

It's not perfect, and usually involves a wee bit of tidying up, but it helps :)

Gary

JamieR
01-30-2005, 01:06 AM
Quick tip:

DWMX2004 - Edit > Preferences > Css styles > then check/tick everything where it says 'Use shorthand for' - then check 'According to the settings above'.

It's not perfect, and usually involves a wee bit of tidying up, but it helps :)

Gary

ah right Gary - cheers. I'm going to use Homesite and Golive more from now on, DWMX04 has been annoying me big time.

Anyhow, ul {display: inline} worked -so thanks to dmc...was something I had overlooked as I had already inserted li {display: inline}

Jamie.

Graft-Creative
01-30-2005, 01:26 AM
Only 45 posts off joining you in addiction, so I may as well chip in again :D

I know it's not a site review, but anyway - it looks good so far, I would lose the borders around the list items in the nav though, or do something more interesting with them, at the moment they sort of give the impression that there's a missing image or something.......?

DW: been using it so long, it seems like a well worn pair of slippers to me now (bang goes any credibility I had :p ) Not sure GoLive is a better option really - but as far as nice hand coding environments look, well - homesite looks pretty keen.

Looking good though J - keep us updated :)

Gary

Graft-Creative
01-30-2005, 01:28 AM
44 :p

JamieR
01-30-2005, 01:42 AM
Only 45 posts off joining you in addiction, so I may as well chip in again :D

hehe...at one time you were way ahead of me:D:D



I know it's not a site review, but anyway - it looks good so far, I would lose the borders around the list items in the nav though, or do something more interesting with them, at the moment they sort of give the impression that there's a missing image or something.......?

DW: been using it so long, it seems like a well worn pair of slippers to me now (bang goes any credibility I had :p ) Not sure GoLive is a better option really - but as far as nice hand coding environments look, well - homesite looks pretty keen.

Looking good though J - keep us updated :)

Gary

Thanks for the pointers Gary - I've been wondering whether to get rid of those borders. As for the banner, that is still gotta be finished as I originally designed the site to fit the width of that banner, then increased the width of the banner and havent got round to changing the width of the banner yet.

As for DW - I used to really love it after I moved up from Frontpage> DW 4.0 > DW 6.0 > DWMX04 but it's got boring after over 2 years of using it. I want to broaden my horizon so to speak so Homesite is a good choice for me. However DW is still as trustworthy and loyal - just I find some things like the differences in viewing between design view and firefox a bit annoying.
Golive is a good WYSIWYG editor, and does it's job well. However I'm still learning it - that is why I want to use it more. :)

My current site is totally awful. The design and colour scheme is horrid, the content is OK I suppose but there it a load of embarrasing stuff on there, unsemantic code and about 100,000 broken links:o

Regards,
Jamie.:D

JamieR
01-30-2005, 01:12 PM
Hi
www.jamierees.co.uk/newsite/
heh.... I gotta new problem :(

In CSS I've applied text-align: center; for .DocumentSideFooterfont but the text is still being applied as text-align: left; as it is still positioning left.

Another problem: I've applied text-align: left for .navSpec but it is still centering.

any ideas?

Jamie.

dmc
01-30-2005, 01:52 PM
About the DocumentSideFooterfont it is centered and it works. But the span where the class is on isn't centered.
You need to give the class DocumentBottomFooter text-align as well.

But for align problem with class navSpec i don't know really. I only know when i remove the ul elemenent it aligns left.

Tip: with alignment problems give the elements that won't align a style="border:1px solid #FFFFFF" so you can see how the element looks like.

In your case the ul element looks weird with a border cause it isn't 100% width.

Hope it helps :)

JamieR
01-30-2005, 04:08 PM
o right cheers
I'll try that..
Cheers.
Jamie. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum