Hi all,
I hope I can find a charitable knowledgeable person to help me!
Im an amatuer webdesigner, I am learning webdesign so I can create a dynamic website for my business.
My first ever website was designed using Xara...but I very quickly became aware of its limitations, and so went about studying CSS and HTML so I could try and design a site from scratch.
Several months later!! Im 80% towards getting my own design live, but my problem is having only ever worked in one screen resolution, to my dissapointment I put the site live and emialed a few friends and they mostly said the site was broken the link to my site is here. (Are we allowed?)
http://www.siamfishingtours.com/Mynewwebsite2/Index.htm
Can anyone give me some lines of CSS that might make the site work properly in other screen resolutions please.
The biggest issues seem to be with overlaping columns of text, and pictures that are a fixed size, getting lost behind columns etc.
Thanks
Ruf
10  4071 
I've noticed problems with the 800x600 and 1280x1024. The first problem you are having is that your background image is 1024px wide so when the resolution is greater than 1024 your image will repeat. You may want to consider a background image that repeats.
Let's get your page started out right. First, your doctype is incomplete and puts IE into quirks mode. Use this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Second, you have some closing tags like this, />, which are Xhtml only. Remove the slash.
Then, use the W3C html validator and the CSS Validator to find and fix your errors. Don't use them until you fix the first two items. Don't forget the size issue mentioned by AricC.
I've noticed problems with the 800x600 and 1280x1024. The first problem you are having is that your background image is 1024px wide so when the resolution is greater than 1024 your image will repeat. You may want to consider a background image that repeats.
Hi Aric C,
Thanks for your input. The problem I have is that the single (non repeating in the horizontal plane) background Im using is an integral part of the design. It is suppose to resemble the sky fading from day time (behind the palm trees) to nighttime (behind the night scene). Its a part of the design I would liek to keep if at all possible. Obviously if I use some sml repeaing imagery for the background (in order to overcome screen resolution fitment) I will lose this gradient effect....any suggestions? I noticed a lot of designer have their whole site just design to 800 wide, and then have a command (which I dont know) that centres the whole thing...then as screen resolution increase they simply have a wider and wider pale bule band (the default colour in HTML) either side of the site content.....how is this achieved? What CSS command centres a site in the viewport?
Thanks
Ruf
Let's get your page started out right. First, your doctype is incomplete and puts IE into quirks mode. Use this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Second, you have some closing tags like this, />, which are Xhtml only. Remove the slash.
Then, use the W3C html validator and the CSS Validator to find and fix your errors. Don't use them until you fix the first two items. Don't forget the size issue mentioned by AricC.
Thanks Dr Howard,
I was aware I was running in quirks mode it was the only way I could seem to get the site to function at all! Im taking your advice and trying to amend this now, also taken out the XHTML slash mark after the stylesheet command (thats the only one I could see?)
But what Im really interested to understand is how others make their sites appear presentable in all 3 resolutions, without losing their design integrity. Or is this simply not possibly when working with background images that do not scroll left to right???
Thanks
Ruf
The reason they are overlapping is because the divs inside content, and content itself, are all positioned absolutely. This will remove them from the normal flow which is why they will overlap each other.
What you can do is float the divs and set a width. (I'm leaving the house right now so I must be brief). Take the divs inside content and add float:left; width: 30%; and that should line them up in a row. You may have to set the right one as float: right; Remove the position: absolute; though.
Experiment with that and google for help if you need it but see if that gets you started.
I found this tutorial which I believe will help you. CSS Tutorial
I found this tutorial which I believe will help you.
CSS Tutorial
also, ref your gradient issue, have a look on Techrepublic.com - if my memory serves me correctly there's a couple of articles on there about making colour-gradient backgrounds with CSS.
To make it 800px use width: 800px in your CSS then add margin-right: auto; margin-left: auto to center it.
Thanks for your comments here gentlemen...
Ive now put my site live...dysfucntional as it is, in the hpe some people may help me correct the CSS
Thanks
PS:
The CSS is here:-
http://www.siamfishingtours.com/no1stylesheet.css
I think a big part of my frustration revloves around wanting the image in .bg to stretch and fit into the viewport, to creat the desired effect regardless of the users screen resolution.
To date I cannot make this stretch command work in anything other than quirks mode, which means I cant validate the site as well (another drawback)
So any CSS genuises out there can help me make this site render in all (most) browsers, without losing its design integrity
....a few days free holiday up for grabs!!!
Cheers
Sign in to post your reply or Sign up for a free account.
Similar topics
by: MSE |
last post by:
How can I make a website that adapts to the screen resolution? I would
also like to include a picture that stretches when the screen res.
increases, if you know what I mean.
|
by: Dave |
last post by:
About a week ago, I upped my screen resolution from 800x600 to 1024x768. From
that point on, I started making gradual adjustments to my web site, in which the
margins are tailored to 800 pixels...
|
by: Les Juby |
last post by:
I understand that there are several ways to effectively control the
browser delivery of HTML to make the most effective use of the
different screen resolutions today. (And in the foreseeable...
|
by: jlombardo |
last post by:
I've read previous posts and know it is "bad form" to change a user's
screen resolution to fit your program's needs. My situation is very
different.
I have a user with a laptop resolution of...
|
by: Robert Bull |
last post by:
I have created an asp.net app on my machine where the resolution is
set to 1280 x 1024. When my users view the form on their screen, some
of the controls display differently than on my screen. One...
|
by: Maxi |
last post by:
I have a 30X16 cells table in my html page. Table height and width are
set to 100%. I have set size of every cell inside the table to 24
pixel.
When I open the html page in maximize state in...
|
by: Steve Wright |
last post by:
Hi
I'm developing a webpage that needs to include a different stylesheet
depending on the screen resolution.
I know that I could read the resolution in javascript and then do some
sort of...
|
by: Tea Maker |
last post by:
Hi, I have an application that is best viewed at 1024x768.
I know that changing the screen resolution might cause some problems, but it's very important that I go on with this.
So my plan is,...
|
by: nasima khan |
last post by:
Hi,
i am nasima. I have got a code for setting the screen resolution of my page, but i am unable to understand. Can any one give a complete data explanation of the below code.
Sub ChangeRes(X...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
