19 replies [Last post]
ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Hi...
I have a little problem with creating a space above the h1 title in the 'textleft' as I've floated a div 'textright'

I can add a break before the title (which is bad and I want the dashed vertical to start lower down) or I can build it to FF and add a margin of 20px for textleft and a -20px for textright (which is also bad!) and then how to I adjust the negative for IE?

The reason for all this messing is that half the orange ball image is in the float.
Am I over complicating this simple layout??

Cheers all...

http://sunley-northampton.co.uk/entclub/index.htm

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm not in favour of

I'm not in favour of chopping up images like that one, especially a foreground image. Put the image back together and use absolute positioning to place it over the banner. If you do that you can use the image to occlude the top of your dashed line, which is probably your best solution.

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Thanks... just needed some

Thanks... just needed some fresh eyes on it to give a different solution.

So I'll try what you said. But out of interest, why do a lot of css whizzes say absolute positioning is bad?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's in response to people

It's in response to people using it without understanding what it does and is somewhat the bane of existence Smile CSS does require that people try and understand how all the properties work and interact with each other , many seem to think the 'learning' part of working with a language incidental :shrug:

The use of absolute in this context would be entirely right and an example of how and when to use it, and it a very useful positional property.

In this instance I'm not sure why you think that a negative margin or top offset would be wrong? you could margin down the main textarea along with the dashed line and negative margin the image back up, although I agree with Chris that you shouldn't split this image especially as it a foreground one, always view pages with styling disabled. I'm not convinced that this image should be a foreground one though is it a logo? where does it position itself with styles disabled and does it make sense?

I would have a think about your present approach to layouts, you are very graphically orientated and a lot of what your placing by way of graphics are foreground, check out how that looks with styles disabled.

With this graphics route you do need to take care in structuring the layout so as not to pin yourself into a corner by the graphics where you can't apply or manipulate elements for fear of breaking the graphics layout.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Sound advice... thank you

Sound advice... thank you kindly.

I must admit, I so not techy at all and don't know how to programme anything (not even the video!) but I've latched onto CSS and love it. Got a lot to learn though. I'm into accessibilty and all that and take care with all those issues but I must admit that I've never checked my design without the stylesheet before and you're right, it doesn't make sense (i.e cut up images, etc.)

How do you think I should proceed? As this is the start of the project, do you advise I should start again and try to build this using more background elements so that when the stylesheet is off, it flows better. Bearing in mind its not good to split the img (its not a logo), I won't worry about a negative margin - I just didn't know the hack for IE6/7 which this would've affected.

Also, maybe I don't understand absolute positioning... I tried what was suggested (go to the link again) and if the browser is 600x800, it moves position?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

for the image try placing it

for the image try placing it inside #topimgright set to absolute top:0 right:0 but, and this is crucial, set the positional context of #topimgright to position:relative.

This ensures that the absolute image references it's position (top:0;right:Innocent from the dimensions of the #topimgright otherwise it will look to the next positioned parent for guidance on where left/top/right/bottom actually are ultimately if no positions are found it will default to body who's position is always known.

Checking the plain text or actual markup layout in the browser is crucial, as it's the true representation of what is being conveyed. Websites are about content, text and images, as well as user interaction; this is all delivered through the markup language and is all that actually is of importance. CSS is a presentational art it allows us to make the layout visually a little more appealing but it is not essential.

Accessibility firstly should be judged on that plain markup , then one should look to see what mess and hindrance CSS has bestowed on that markup Smile

As for starting again , if you have the time yes I would probably advice it as you'll end up with a better layout , make a copy and work on that , the one you have isn't bad it just could be a bit better.

As a rule of thumb treat graphics that are decorative as background ones and photos that carry necessary information as inline foreground ones i.e those that need to be displayed in the plain markup.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As a brief example of a

As a brief example of a possible approach to the sidebar/nav:

Place your top rounded corner graphic on the sidebar element no-repeat and default position take your newsletter image and place that in another .button a element that way you can place some text in the anchor and hide it off screen using left:-9999px or negative text-indent,or even hang the background on an em element inside the anchor and set it to position absolute so that it covers and masks the anchor text link but if images fail will reveal that text link. Then on the ul element you would place the bottom rounded graphic but set to no-repeat bottom:0.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Cheers, you're a star.

Cheers, you're a star.

I'll sort out this positioning marlarkey first (now I get it!) so that I have a correct copy, then start afresh. Nobody seems to mind if I try again so thats what I'll do and post back when I've got somewhere.

I need to learn more and this forum is fab! I get stuck in a rut just using the css I know and I now need to expand.

End of a working day... off home...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'll have to disagree with

I'll have to disagree with Hugo, I think that image does represent foreground content - not necessarily an image as it could be foreground text replaced with a background image.

For that page it looks like ...



Then use one of the image replacement techniques to remove the text and leave the background images. My preference is for large negative text-indent.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris..S wrote:I'll have to

Chris..S wrote:
I'll have to disagree with Hugo,
:mad: :curse: the dam cheek of it!

Chris..S wrote:

I think that image does represent foreground content - not necessarily an image as it could be foreground text replaced with a background image.

I think you're actually agreeing with me :? I didn't say it didn't represent foreground content just that it probably didn't warrant being a foreground image, like what you did say.

I would advocate it be a background image, but slightly take it as read that one would use that element to convey textual content, it's sort of given but I should have stated that. Don't create an element and then not use it where possible to convey some plain content, it's the same principle that I outlined later on re the newsletter image in the sidebar.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Oops, didn't mean to cause a

Oops, didn't mean to cause a fight!

You both make perfect sense and I will try and be a bit cleverer (is that a word?!?) with the way I present graphics and code.

http://www.sunley-northampton.co.uk/entclub/index.htm

I've made the suggested changes and its looking a lot better. For the life of me I can't figure out how to add the newsletter image into the list. I tried adding a new class with a height, background, etc but no luck, its still taking in the properties of the previous link.

Thanks guys for your help...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Show us the code tried for

Show us the code tried for the image. If it's not a rollover, I assume you tried putting it in the html like:

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

This was the original code

This was the original code from the first post but I've been trying to remove all the decorative images from the xhtml so when the stylesheet is off it flows better.

  • Home
  • Membership
  • Club Events
  • Information for members
  • Sponsors
  • Links
  • Contact us

Click here to open Newsletter number 1

If you look at the new cleaner code;



  • Home

  • Membership

  • Club Events

  • Information for members

  • Sponsors

  • Links

  • Contact us

  • Newsletter number 1



The top and bottom of the menu are now background images and I wanted to put the newsletter link (image rollover) in the css as a background image too and then hide the text off the page with a text-indent.

Hope that makes sense Smile

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

To clarify, Hugo said "take

To clarify, Hugo said
"take your newsletter image and place that in another .button a element that way you can place some text in the anchor and hide it off screen using left:-9999px or negative text-indent"
Thats what I'm trying to do.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You could do something along

You could do something along these lines which would give a image placed over the anchor text, if images failed, you would have text and in plain text rendering you would have a plain text anchor, of course if you want the image in text mode rendering the do as Treva suggests and set it as an inline image.

(code not tested, just drawn up freehand, will need tweaking)

#sidenav li.news {position:relative;height:50px;}
#sidenav li.news a {display:block;height:100%}
#sidenav li news a em {
  position:absolute;
  height:100%
  top:0;
  left:0;
  background: url(path/to/image) no-repeat;
  }

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

I've tweaked away and I'm

I've tweaked away and I'm there... I'm well chuffed with it so cheers for your help.

All is fine in ff and ie7. One last niggle though... if you go back to link and see it in ie6 the sidenav has about an extra 5px spacing it. How do I direct something to ie6 only - I tried * html or is that to ie5?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll be even more chuffed

You'll be even more chuffed hopefully, you have slightly missed the point with the IR absolute method, you don't outdent the text leave it as is but the ems are not wrapping the text they are empty, and just holding the background

<a href="#"><em>Newsletter number 1</em></a>

<a href="#">Newsletter number 1<em></em></a>

then you can turn off images and you'll have text to replace it

You may need to add a cursor property to the hover rules though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ChristinaG
Offline
Regular
Northampton
Last seen: 11 years 42 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

Tis done! Learn something

Tis done! Learn something new every day... didn't realise you could have tags that didn't hold anything in xhtml. Thats really useful to know.

Cheers all...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well it's not strictly

Well it's not strictly proper to have tags that contain no content and html-Tidy will report "trimming empty ...." but it's an established technique regardless

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I tend to put a comment in

I tend to put a comment in them!