22 replies [Last post]
Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

Hello,
I have been working on a new website for weeks now using CSS, and have not been able to get it to display right. I would like to make an image fit the screen when the page loads up and not having to use the scroll bar to see everything. What I mean is I want it to fit any screen so that you don't have to use the scroll bar to see the whole image. Also I don't want any gap like you would have if your image is smaller than the screen. I've tried making the image my background with no repeat, but that didn't help, I still had to scroll to the left and scroll down to see the entire image. I have search the forum archive but did not find anything that would help. I may have missed it, but if a similar question had been asked before, please direct me to it. Thank you in advance for your help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make IMAGE FIT SCREEN

You can't scale background images. To accomplish what you want, you'd have to put your image in the HTML and then use CSS to provide its dimensions, e.g. width: 100%; height: 100% (although it's probably going to be a bit less than that to avoid scrollbars).
For this to look good you'd have to create an image large enough to not have to be scaled upwards on most resolutions (as images that are stretched generally don't look that good), which means your image file is probably going to be unfeasibly large.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

Make IMAGE FIT SCREEN

Could you elaborate on that a little? I don't follow the part where you said I would have to put the image in an HTML and then use CSS to dimension its size. I tried that and I have a small image on top of a larger image.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make IMAGE FIT SCREEN

Why don't you show us what you've got and remove the possibility of people suggesting things that don't fit your situation?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

HTML page Included

I have include an image file that's 800px by 600px and an HTML page to display it in. The image is a template for an art gallery where you have 6 gray boxes for thumbnail pics . A large white box on the right hand side will display them when they are clicked. At the moment, I have yet to include the necessay code to make it work. You will notice that if the dimension of the image file is set to something different than what I have in the HTML page, you will not be able to see the white display box in its entirety. So I made it fit the screen when the page loads up. But because of that I have a huge gap on the right hand side and at the bottom when you scroll to the right or scroll down. I hope this helps to clear things up a little.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make IMAGE FIT SCREEN

You're using the image as the background to your layout?
I'm sorry, but that's a very bad way to do things. What happens when you have more content than will fit into one area? What happens when the user resizes their text? What happens if a user views your site with images turned off?
There are numerous ways of making your layout as depicted in the JPEG that don't require the use of a static background image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Make IMAGE FIT SCREEN

Tyssen wrote:
What happens when the user resizes their text?

See attachment. Smile

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

Make IMAGE FIT SCREEN

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Make IMAGE FIT SCREEN

thepineapplehead wrote:
Laughing out loud Laughing out loud Laughing out loud

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

Make IMAGE FIT SCREEN

There's a reason there's a big sticky at the top of the forum, by Tyssen, called:

Absolute positioning pitfalls

http://www.csscreator.com/css-forum/ftopic13756.html

You obviously neglected to read it Laughing out loud It is common courtesy in Internet Forums to read stickies, they stop us grouchy old people getting angry.

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Make IMAGE FIT SCREEN

thepineapplehead wrote:
they stop us grouchy old people getting angry.
I thought you were 21. Smile

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

Make IMAGE FIT SCREEN

19, actually Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Make IMAGE FIT SCREEN

thepineapplehead wrote:
19, actually Laughing out loud
Wow, that is old. :roll: Laughing out loud Wink

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

Point Taken

Hi,
I've been thinking about what you've said about using absolute positioning for my page layout. I am very new to CSS so please bear with me. I tried to use relative positioning on my website but I ran into many problems and I don't know where to look for solutions. For example if I relatively position say imageA somewhere on the page, how do I position imageB 5px to its right or position imageC 15px directly below it? Also I've noticed that you can not precisely position images or text for that matter, on the page. How do I get around this problem. I tried id selectors but it seems you could only float objects left, right, and center in id selectors. I've search many tutorials but all I saw was absolute positioning, and positioning using key words such as left, right, and center . If absolute positioning is not good for layout, then when is it OK to use absolute position? If you know of a tutorials that would help me out, or if this question has been asked before, please direct me to them. Thank you for taking the time to answer my questions.

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

Make IMAGE FIT SCREEN

Well, could you show us a quick image of what you want to achieve?

Is that art.jpg picture up there what you want?

If it is, I see

<h1> title </h1>

<ul>
<li> links </li>
</ul>

<div id="content">
<img src="blah" />
</div>

<div id="rightthing">
stuff
</div>

and you don't need ANY absolute positioning.

Verschwindende wrote:
  • CSS doesn't make pies

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

Make IMAGE FIT SCREEN

Hello,
I have included an image file to better explain my situation. Suppose I have 4 images with identical dimensions which I named A, B, C an D. Suppose I want to place A, B, and C 10 px apart and A is 2 px from the left edge of the box that contains it. All 3 images are 20 px from the top edge of the container box. Then I put D 10 px directly under B and
a big box with which to display all 4 images (one at a time) on the right hand side. How would I achieve what I have discribed above? According to what you have said, I would have to use use ID Selector, Unorder List, and List. But the question that I have is how does one place an element precisely where one wants? I noticed in your last response and from my own investigation that ID selector does not allow for precise placement of anything. You could only use key words such as Right, Left, and Center to position something. Thank you in advance for your help.

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

Positioning

Hello,
I have included an image file to better explain my situation. Suppose I have 4 images with identical dimensions which I named A, B, C an D. Suppose I want to place A, B, and C 10 px apart and A is 2 px from the left edge of the box that contains it. All 3 images are 20 px from the top edge of the container box. Then I put D 10 px directly under B and
a big box with which to display all 4 images (one at a time) on the right hand side. How would I achieve what I have discribed above? According to what you have said, I would have to use use ID Selector, Unorder List, and List. But the question that I have is how does one place an element precisely where one wants? I noticed in your last response and from my own investigation that ID selector does not allow for precise placement of anything. You could only use key words such as Right, Left, and Center to position something. Thank you in advance for your help.

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

This is what I have in mind

Hello again,
I have used relative positioning on the modified version of my page. I was able to position certain things but many others are giving me problems when I tried to position them relatively. One of my problems is not being able to put the links such as BACK and NEXT among others, on the background image which I am usingas a template. Also I am not able to break up the block of thumbnail pics in to individual images so that I can place them in the the gray boxes. I have tried to erase the key word "span" from the line that defines the gallery container thinking that it would break it up. Instead of breaking up the block of thumbnails, it caused them to disappear. Also I have tried changing the dimensions of the thumbnails to make them line up in two separate rows. I was successful with that but can not create spaces between the pics. I hope you can point out what the problems are. I have included a folder to show you what I'm talking about. I got to tell ya, you guys are really helpful to us newbies. Thank you so much for sharing your knowledge.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make IMAGE FIT SCREEN

The image gives us a target, but we need to see your actual code in order to make suggestions, or to understand your comments about the code.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

CODE AND PICS

I have tried to send over a zip file with some pics and an html page in it, but for some reason its not getting sent. I'm going to try to resend some of the pic files individually.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make IMAGE FIT SCREEN

Were you trying to attach a file? Instead, paste it between [code] and [/code] bbcode tags.

See http://www.csscreator.com/css-forum/ftopic6045.html and scroll down to an item #3 and read "best practise". It will explain better I could in this space.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Manytt666
Manytt666's picture
Offline
Regular
Last seen: 9 years 4 weeks ago
Timezone: GMT-6
Joined: 2006-02-22
Posts: 30
Points: 2

My site is down

Sorry about not having a site that you could go to as it is currently down. I was hoping that the few thumbnail pics and my HTML page would help in determining my problems. If I had included anything that
is irrelevent to the problems and went against the "BEST PRACTICE" guide line I apologize. I am just so new to CSS that I don't quite understand what tag does what all that well. This is my attempt to master CSS, thank you again for your effort to help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make IMAGE FIT SCREEN

Before you do anything else, you must mark up your content with semantic, well structured and, of course, valid html. For starters, xhtml1.1 is a no-go. Its proper MIME type is application/xhtml+xml, which you're not using. IE does not understand and cannot render that MIME type. If you must use xhtml, use xhtml1.0.

This is the how your page displays without styles.

KIBIBI'S ART GALLERY
African Art
African Art
African Art
African Art
Artist
Price
Material
Size
Price: $199.99
Price: $199.99
Price: $199.99
More Info...
More Info...
More Info...
Policy
African Art
African Art
Shipping
Guarantee
Price: $199.99
Price: $199.99
Price: $199.99
More Info...
More Info...
More Info...
Back

* AI1
Something
African Art
* AI2
Something
African Art
* AI3
Something
African Art
* AI4
Something
African Art
* AI5
Something
African Art
* AI6
Something
African Art

It doesn't make much sense. Good and proper markup will show your content in a well structured manner all on its own. Until you have that right, all the tail twisting with css may force it into some kind of apparent structure, but it will be brittle and nearly un-maintainable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.