Web Analytics Made Easy -
StatCounter Brower homepage with icons/html links that adapt page size - CodingForum

Announcement

Collapse
No announcement yet.

Brower homepage with icons/html links that adapt page size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Brower homepage with icons/html links that adapt page size

    Hi guys

    First I have no clue what im talking about Id just like to have my own start page (stored locally) to have its images to auto resize according to browser window size etc
    I guess each size (either for images, spacing etc) should be expressed in % (i tried but it didnt work), not pixels, of course, but I havent been able to find a solution, browsing various posts and asking people...
    Im sure its a super easy thing, so pardon my ignorance, or inability to find it on the web as Im sure thats a recurrent question.

    Here is my "code" for anyone willing to help :

    Code:
    <p>Home<br /> <br /> </p>
    </style></head>
    <body style="color: rgb(0, 0, 0); background-color: rgb(000, 000, 000);" alink="#000099" link="#000099" vlink="#990099">
    <table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto; height: 50%;" border="0" cellspacing="10" cellpadding="10">
    <tbody>
    
    <tr>
    <td style="border: 0px solid; height: 100px;"</td>
    </tr>
    
    <tr>
    <td style="vertical-align: top;"><a href="https://gmail.com"><img style="border: 0px solid; width: 150px; height: 150px;" src="gmail.png"</td>
    <td style="vertical-align: top;"><a href="http://outlook.com"><img style="border: 0px solid; width: 150px; height: 150px;" src="outlook.png"</td>
    <td style="vertical-align: top;"><a href="http://www.quebecemail.com/email/scripts/loginuser.pl"><img style="border: 0px solid; width: 150px; height: 150px;" src="quebec.png"</td>
    <td style="vertical-align: top;"><a href="https://drive.google.com/drive/#my-drive"><img style="border: 0px solid; width: 150px; height: 150px;" src="drive.png"</td>
    <td style="width: 50px;"</td>
    <td style="vertical-align: top;"><a href="http://www.amazon.fr"><img style="border: 0px solid; width: 150px; height: 150px;" src="amazon.png"</td>
    <td style="vertical-align: top;"><a href="http://www.ebay.fr"><img style="border: 0px solid; width: 150px; height: 150px;" src="ebay.png"</td>
    <td style="vertical-align: top;"><a href="http://www.babelio.com/actualites.php"><img style="border: 0px solid; width: 150px; height: 150px;" src="babelio.png"</td>
    <td style="vertical-align: top;"><a href="https://play.google.com/music/listen#/now"><img style="border: 0px solid; width: 150px; height: 150px;" src="playmusic.png"</td>
    </tr>
    
    <tr>
    <td style="border: 0px solid; height: 150px;"</td>
    </tr>
    
    
    <tr>
    <td style="vertical-align: top;"><a href="https://www.youtube.com/feed/subscriptions"><img style="border: 0px solid; width: 150px; height: 150px;" src="youtube.png"</td>
    <td style="vertical-align: top;"><a href="http://www.facebook.com"><img style="border: 0px solid; width: 150px; height: 150px;" src="facebook.png"</td>
    <td style="vertical-align: top;"><a href="http://twitter.com"><img style="border: 0px solid; width: 150px; height: 150px;" src="twitter.png"</td>
    <td style="vertical-align: top;"><a href="https://www.g2reader.com/?list#unread/0/0"><img style="border: 0px solid; width: 150px; height: 150px;" src="rss.png"</td>
    <td style="width: 50px;"</td>
    <td style="vertical-align: top;"><a href="http://forum.cockos.com/forumdisplay.php?f=20"><img style="border: 0px solid; width: 150px; height: 150px;" src="reaper.png"</td>
    <td style="vertical-align: top;"><a href="http://www.kvraudio.com/"><img style="border: 0px solid; width: 150px; height: 150px;" src="kvr.png"</td>
    <td style="vertical-align: top;"><a href="https://www.discogs.com/my"><img style="border: 0px solid; width: 150px; height: 150px;" src="discogs.png"</td>
    <td style="vertical-align: top;"><a href="www.producerspot.com"><img style="border: 0px solid; width: 150px; height: 150px;" src="audio.png"</td>
    </tr>
    </tbody>
    </table>
    Last edited by VIPStephan; Sep 7, 2016, 05:33 AM. Reason: added code BB tags

  • #2
    Well, you did say you didn't know what you were doing... the code proves it. Tables for layout, static images in the markup, no graceful degradation, and a giant middle finger to accessibilty... gives me flashbacks to the Lewinsky scandal, the OJ trial, and some dip**** kid with a spraycan getting his backside caned in singapore because he was a dip****.

    Images are generally pixel based, IF you allow them to scale they're going to look like arse unless you up-resolution them greatly, and generally speaking that many images at 2x or more "normal" resolution would result in a total filesize too big to have any blasted business on a website in the first place.

    The tables need to go so you can have semantic markup since that's NOT tabular data, I'm really not sure what makes one word a grammatical paragraph so that needs to go, the BR doing padding's job need to go, static style also has no real business in the markup unless it's conveying data - yours is not, paragraphs and content cannot go inside the <head> tag so even if that <p> made sense it can't go before <body>, NONE of the attributes you have on BODY have any business in any HTML written after 1997...

    I'm not sure exactly what you are trying to do, but it looks like you need to throw that in the trash and learn HTML and CSS before proceeding any further.

    Of course, even if it was clear what you wanted to do, we'd probably have to see the images being used to tell you more -- of course having them in a fixed layout and order via tables means you are thinking fixed layout, a quadruple middle finger to usability and accessibility; which is why you do NOT see many real websites pulling those types of stunts!
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      First step would be to remove all the HTML and CSS from your page and then add the correct HTML.

      HTML defines what the content is - headings, paragraphs, lists etc and has nothing whatsoever to do with how the content is supposed to look (that's the job of your external CSS file).
      Stephen
      Learn Modern JavaScript - http://javascriptexample.net/
      Helping others to solve their computer problem at http://www.felgall.com/

      Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

      Comment

      Working...
      X