Welcome to WebmasterWorld Guest from 54.196.175.173

Forum Moderators: incrediBILL

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)



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 Administrator incredibill is a WebmasterWorld Top Contributor of All Time 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)



#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 lucy24 is a WebmasterWorld Top Contributor of All Time 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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month