The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem with table width, Screen resolution
ricardoneves
post Mar 19 2012, 06:29 PM
Post #1





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



I have been creating a website for two months and now i'm focused on the website design and all problems that it could have around design.
I have been testing my website in a high resolution(1366x768) and everything looks fine.
Here's a picture:
IPB Image

The problem is when I change my resolution to 800x600.

Here's a picture of the problem:
IPB Image

At the top I used a table with the logo on the left and the login form on the right. Above it I created a div with blue background.
I set both structure to width:100% , but (I think its because the bottom text stretch) they don't fill the screen like they should.

At the bottom of the picture(the white background) is a table with 1 row and 3 columns.

If anybody had a problem similar, or can give me a hand, I would really apreciate.

PS:Sorry for bad english.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 19 2012, 07:18 PM
Post #2


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



First off, I would need to see some of the header code with CSS to be able to fully help you.

Is the header widths all set in %?

A tip: it is best to avoid tables for website structure. Instead use divs with "float" and "position" CSS properties.

http://www.w3schools.com/cssref/pr_class_float.asp
http://www.w3schools.com/cssref/pr_class_position.asp
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ricardoneves
post Mar 19 2012, 07:39 PM
Post #3





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



Yes, I used % in all width.

I just used something like this:

<table style="width:100%;">
<tr style="width:100%">
<th>
(...)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 19 2012, 07:47 PM
Post #4


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



Okay.

I would need to see the HTML and CSS code to be able to help you. Otherwise I'm just as stuck as you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ricardoneves
post Mar 19 2012, 07:52 PM
Post #5





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



I sent you the page code by pm.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 19 2012, 08:13 PM
Post #6


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I was unable to reproduce the problem on my end. Maybe you could give me a link if the site's live?

The only thing that I can think of is to put the table and navigation bar in a div, maybe name the div header, and set the width to 100% as well.

This post has been edited by Dante Monaldo: Mar 19 2012, 08:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ricardoneves
post Mar 19 2012, 08:45 PM
Post #7





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



It isn't hosted, but I'll probably do that.

I tried to do with the float right and left with two divs and the problem persists.

(I didn't tried to replace the table on the bottom, just replaced the top table with logo and login form)

Is there anyway that the window remain with the same size but because its a lower resolution it has a scroll bar or something. Can it be done?

This post has been edited by ricardoneves: Mar 19 2012, 08:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 19 2012, 10:35 PM
Post #8


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



That is one of the downfalls of using percentages for widths; when you resize the browser, it can sometimes distort the structure of the page. It is just another thing you have to cross-browser check and test.

But like I said, I'm more than willing to help if you could send me the style.css code as well.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ricardoneves
post Mar 20 2012, 05:47 AM
Post #9





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



Here's the website url:
http://www.p-hunter.herobo.com/index.php

Try to change your resolution to 800x600 and you should see the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 20 2012, 09:30 AM
Post #10


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



Okay, I see what you mean. Try using the min-width property. Make the min-width the same size as the body of the page.

http://www.w3schools.com/cssref/pr_dim_min-width.asp
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ricardoneves
post Mar 20 2012, 02:15 PM
Post #11





Group: Members
Posts: 6
Joined: 19-March 12
Member No.: 16,749



It worked !

Thank you for the attention.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 08:46 PM