16 replies [Last post]
j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

Hi,

Im sure this is a typical problem, but i have searched extensively and found nothing that solves it easily.

Basically, the whole site is divs and css, i have set the holder tag to have a width of 100% so the site works in all browsers. I have divs top, middle and bottom, on the right (which hold blocks of colour) i want these to expand to the end of the screen depending on the resolution.

I have done it in IE by simple setting these divs to width:auto then setting the images within the divs to 100% in width.

However, nothing happens in Firefox - i take it there are issues with Firefox and the 'auto' property.

Can anyone help?

Example code:

#AIH-08 {
left:922px;
top:86px;
width:auto;
height:66px;
position: absolute;
}

THANKS!

Jonny

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

Ive recently found that the

Ive recently found that the issue is more to do with the 100% setting on the images within the divs - firefox cant handle the 100% can anyone tell me why or offer a solution?

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

I'm sorry, Without your

I'm sorry,

Without your actual code I'm not following what it is you're trying to describe. I'd imagine that others have looked and thought the same thing.

LokiLoks

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

Here is the website ive had

Here is the website

ive had to remove most imagery but the css is held within the page so you should be able to get everything here.

thanks

http://www.eclectic8.co.uk/Testing/jonnytester.html

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 24 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, with your description, i

Hi,
with your description, i feel you are trying to achieve what is called as a fluid layout. For that only width is not enough. You need to use the min-width and the max-width attributes.
Search on Fluid Layouts on google. Start working, as for any help you might need.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Your whole approach is

Your whole approach is backwards and mistaken. HTML is meant for marking up content, but you have no content!

Write your content first. Mark it up with valid and semantic html, not with DIVS. Then and only then should you start styling with CSS. THE WEB IS NOT PAPER!!!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

I had to remove all content

I had to remove all content for a reason. This website only shows the specific part i am talking about.

The real and full site works fine. apart from this issue im having problems with

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

j0nnyd wrote:I had to remove

j0nnyd wrote:
I had to remove all content for a reason

Well then, I can't help you for the same reason.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

I dont understand? All the

I dont understand?

All the elements needed to see the problem are there. The site is designed for 1024 so you will only be able to see what im talking about if you look at the site in a larger resolution than that.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

j0nnyd wrote:I dont

j0nnyd wrote:
I dont understand?

What's to understand? I don't bother with contentless sites. There are plenty of others around here who may decide to help. Me, I don't deal with contentless sites. My reasons are my own, just as your reasons for not posting any content are your own.

Quote:
All the elements needed to see the problem are there.

So why haven't you solved the problem then? Everything you need is there after all.

Quote:
The site is designed for 1024

Rather an unfortunate decision. What if I am reading at 600x600 or less? Or what if I can't see and am not looking at your site at all?

Quote:
so you will only be able to see what im talking about if you look at the site in a larger resolution than that.

I actually look at a larger screen resolution that that, but as there is no content I choose to look no further. Shall I return your money?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

First of all it isn't a

First of all it isn't a "contentless" site. There's a lot of images as content.
I will agree, however, that the images don't actually contain content.

jOnnyd:

Let me try to clarify one of the reasons why seedhouse and others like him won't jump in to help here.

It's summed up by the phrase, "form follows function" or "content creates shape"

Your content, whether it be pictures or text will have a certain flow or logic behind how it fits together. This flow can be isolated into areas of content (divs). Your content is rife with, as far as I can tell, worthless divs creating far more complexity than your data is likely to need. Do a search on the term divitis and you'll find that many people fall into the same trap.

My original bout of divitis was a result of looking into CSSZenGarden. The standard template they offer has a bizzilion divs that aren't needed for many designs, and truly they're there to accomodate extravagant designers. The whole purpose of CZG is art, not creating a functional site that is efficient.

If you have concerns over possible plagiarism or trade secrets being stolen, simply use fake text that approximates the content you expect. If you need help making it up do a search for lorem ipsum or jabberwocky.

Without your content giving us an idea of what your site's flow will be we can't visualize what the best solution for your issue is.

Even without the content, I can tell you these two things:
1. You probably have 8 to 14 too many divs. I'd be hard pressed to have more than 5 divs for the header, 7 for the body and 5 for the footer. That's 17 and you're at 22.
2. Your images aren't content, and that being the case they should probably be background images for some element.

I don't know what ImageReady is, but you should probably learn how to slice your own images, I typically have 1 out of 3 images that are 1px tall or wide and the rest are like 10px square or so.

Also, off the top of my head, things that have no px or em or % next to the value can get you into trouble.

Hope that helps,

LokiLoks

P.S. If your content is adult or illegal, don't post it, use lorem ipsum or jabberwocky.

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

Does this help? I have

Does this help?

I have cleaned up the div tags and instead of using images inserted into the divs, i have assigned background images to the divs through css.

I have also written in the blocks i want to extend to help show you what i mean?

Can anyone help now?

http://www.eclectic8.co.uk/Testing/jonnytester.html

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

I could only spend a few

I could only spend a few minutes on it, but this is more like what you're going to want to do.

Absolute positions don't work too well with 100% width.

Hope that helps,

LokiLoks

AttachmentSize
remake.html 2.25 KB
j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

Hi, I have remade some of

Hi,

I have remade some of the site. I think its designed better.

Please have a look.

The top bar which goes all the way across the page has a right: 0; and a margin-left:5%; and the width is set to auto meaning it stretches to fit on all screens.

This works in both firefox and IE.

The thing i want is where the big square image is. I want grey to stretch out from the right all the way to the right hand side (right:0;) At the moment i have out an image there so you can see the type of thing i want. In IE it kind of works, but in Firefox, the image doesnt strecth at all.

If you have a solution, ideally i just want to make that section a bg color.

Any ideas?

http://www.eclectic8.co.uk/Testing/index.html
http://www.eclectic8.co.uk/Testing/global.css

Thanks

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 32 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

j0nnyd wrote:Hi, Im sure

j0nnyd wrote:
Hi,

Im sure this is a typical problem, but i have searched extensively and found nothing that solves it easily.

Basically, the whole site is divs and css, i have set the holder tag to have a width of 100% so the site works in all browsers. I have divs top, middle and bottom, on the right (which hold blocks of colour) i want these to expand to the end of the screen depending on the resolution.

I have done it in IE by simple setting these divs to width:auto then setting the images within the divs to 100% in width.

However, nothing happens in Firefox - i take it there are issues with Firefox and the 'auto' property.

Can anyone help?

Example code:

#AIH-08 {
left:922px;
top:86px;
width:auto;
height:66px;
position: absolute;
}

THANKS!

Jonny
See my question at http://csscreator.com/node/24191, I have managed to make a div strech to full resolution no matter what the resolution with a single problem, to put it short style both the body and html to have width 100%, for more details view my post.

To explain this internet explorer only streches something to the whole viewport if the element it's in is also streched the base element for is is body (think of it like another div, a box), firefox goes a bit further by considering the html tag to be the base box of the page so to make it work in ff too you must style html too.

j0nnyd
Offline
Regular
Last seen: 13 years 36 weeks ago
Joined: 2007-08-06
Posts: 16
Points: 0

yeah, both html and body are

yeah, both html and body are set to width 100%

As it shows, the top strip works fine. Its just where i mutliple divs on the second line it seems to have problems when i try and get the div furthest to right to expand.

still baffling me, no one seems to know!?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Have a read of

Have a read of this:

http://csscreator.com/divitis

should get you going in the right direction Wink

Verschwindende wrote:
  • CSS doesn't make pies