Jump to content

How to program a webpage

Featured Replies

This is my tutorial on webpage design. When designing your webpages zoom is no longer the issue because zoom often means you view a page on a phone which is < 900px etc. This is viewable in ie if you view the page the text goes messy because I like to make an individual stylesheet for a phone.

<style>

<?php
$a=0;
$b=1;
while($a<11000){
echo "
@media all and (min-width:{$a}px)
{a{
font-size:{$b}px;
text-decoration:none;
word-spacing:0px;
outline:0px;
text-shadow:0px;
display:inline;
background:none;
position:absolute;
font-weight:bold;
top:1%;
left:1%;
}}";
$a=$a+200;
$b=$b+5;
}
?>
</style>
<a href="#">Company Name Here</a>

Now that code is php. It will generate the code you want by itself but it is slow to generate. So you locally host the page. Then when the page is loaded and looks okay you click save as on internet explorer and you get the complete css stylesheet with no php. Easy Right :)

 

Now the main thing is this is programmed by algorithm in stages so it can be fuzzy. If you want a better stylesheet half both values etc. 11000px is the maximum zoom out value on all browsers. Well some stop at 4000 but you know what I mean. It must be a really big flatscreen. To program for a phone make your stylesheet everything centered and relative width then add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> to the page header. This means the phone won't scale the page.

Edited by fiveworlds

Archived

This topic is now archived and is closed to further replies.

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.