Forum Moderators: open

Message Too Old, No Replies

How to make the page fit to any screen size

         

Slik

4:34 am on Apr 9, 2012 (gmt 0)

10+ Year Member



well i work in my comp at 1920 x 1080... but when i open the page in other place thats 1024 x 768 or 1280 x 1024 it looks ugly and so big can i fix that?
im just started making that page, this part is just the "language select" i would like to fit to any screen, thanks

<html>
<head>
<title>Welcome !</title>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >
</head>
<body style="background-image:url(mcc.png);background-size:100%;background-repeat:no-repeat;">
</body
<h1><p align="left"size="20%"><a href="http://"><img src="Brazil.gif" border="0" ><img src="langbr.gif" border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="China.gif"border="0"><img src="langch.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="France.gif"border="0"><img src="langfrance.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="Germany.gif"border="0"><img src="langgermany.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="italy.gif"border="0"><img src="langitaly.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="Spain.gif"border="0"><img src="langspain.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="usa.html"><img src="USA.gif"border="0"><img src="langusa.gif"border="0"> <a href="http://"><img src="trees.png" align="right"width="20%"border="0"> </a></h1>
</html>

incrediBILL

7:02 am on Apr 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



One way to handle restricting page size is in your CSS for a div that wraps the content areas of the page to include the following: "width:95%;max-width:1000px;" obviously replacing "1000px" with whatever size you want your page to stop expanding.

dougwilson

10:35 am on Apr 9, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



#1 "div that wraps the content"

also research "viewport"

"<meta name="viewport" content="device-width, initial-scale=1, user-scalable=1" />"

w3c has a mobile validation checker that will give feedback.

font-size (px, em, pt, %) will effect different resolutions. browsers etc.

lucy24

10:40 am on Apr 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



... and while you're at it, throw out that HTML editor and invest in a better one. Or do it by hand.

<h1><p align="left"size="20%"><a href="usa.html"><img src="USA.gif"border="0"><img src="langusa.gif"border="0"> <a href="http://"><img src="trees.png" align="right"width="20%"border="0"> </a></h1>


Rumor has it that google throws fits if it finds even two <h1>s on a page, let alone seven in immediate succesion. The validator will also have something to say about ... oh, lots of stuff.

This isn't as off-topic as you might think. If you want your pages to display as intended on a wide range of browsers, it's important to have HTML and CSS that follows current standards. You don't want other people's browsers to start making things up because they're unable or unwilling to do what the page is asking them to do.