Problem with table width, Screen resolution |
Problem with table width, Screen resolution |
ricardoneves |
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: The problem is when I change my resolution to 800x600. Here's a picture of the problem: 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. |
Dante Monaldo |
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 |
ricardoneves |
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> (...) |
Dante Monaldo |
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. |
ricardoneves |
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.
|
Dante Monaldo |
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 |
ricardoneves |
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 |
Dante Monaldo |
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. |
ricardoneves |
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. |
Dante Monaldo |
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 |
ricardoneves |
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. |
Lo-Fi Version | Time is now: 29th March 2024 - 08:46 PM |