Results 1 to 8 of 8

Thread: Alignment needs checking.

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default Alignment needs checking.

    Please could you check my code and advise.

    The alignment issue is regarding the headings.
    Looking on the iphone i see these are all in vertical alignment Contact Me to Keys & Remotes
    The problem is Programming & Others.
    These are to the left and not in alignment with the above.
    Cant see where the faults is.

    http://www.theremotedoctor.co.uk/1.html

    Thanks
    Last edited by theremotedr; 05-14-2015 at 10:13 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Using the developer toolbar will help you tremendously when troubleshooting layout issues like these. That's F12 for most browsers. Through the toolbar you will see that the pertinent styles applied to .new and .side, but not .right, are;
    Code:
    max-width: 50%;
    padding: 2em;
    So you should apply this CSS to .right also (inside the same media query breakpoint as the others). However, in case this .right class is used elsewhere on your site, you would be better off putting a new class in the markup and applying the CSS to the new class only.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    theremotedr (05-17-2015)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Hi
    Thanks for the advice.
    I have now done it.
    This code was copied from the internet and edits made to suit.
    Looking at the source code i pretty much see nothing out of place.

    When i make edits in dreamweaver a large section of the code line 7 starts <style>@font-face followed by millions of letters.

    Is this normal or can it be removed somehow ?

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    That's a hardcoded Data URI for a custom font (see font-family:'rs' in the source code). We can inline data coded fonts (and images/icons) to cut down HTTP requests and roundtrips to the server, which in turn helps with load speed and traffic bottlenecks (since browsers can only download so many resources in parallel). The downside is all that code. Another downside - especially with fonts - is that there can be a lot of superfluous data if not all the characters are used.

    If you don't want to use the font, you can remove it, and then change the font-stack referenced elsewhere in the CSS from 'rs',sans-serif;, to one of these: http://www.cssfontstack.com/
    A font-stack is a string of similar looking fonts that may or may not be installed on a viewing device. The chain of potentially available fonts offers a fallback for when preceding fonts are unavailable. When they are, the user sees the prettiest typeface, and when they aren't, the next available font comes in to play.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    I think that i have deleted that code that was not required.
    I have used the Arial, Helvetica Neue, Helvetica, sans-serif stack font.

    Added css file called sitemap.css

    Dont see any change on the page in question.
    Newbie trying to learn by his mistakes.....

  7. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    the sitemap extension ending is .xml not .css

    unless you are using sitemap.css for something other than a real sitemap

    The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently. Sitemaps are a URL inclusion protocol and complement robots.txt, a URL exclusion protocol.

  8. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    The css file is sitemap.css

    This is a sitemap for customers to browse my site NOT for crawlers.
    I also have the xml file for google/bing crawlers etc but this is a different file.

  9. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Do i understand this incorrectly ?
    Editing the css makes no difference when i refresh the page.

    Cant see the error which is causing the no effect on the page.

Similar Threads

  1. Checking where a cookie came from
    By bmresearch in forum Other
    Replies: 1
    Last Post: 08-10-2010, 04:54 AM
  2. Table alignment versus Text alignment...
    By TheJoshMan in forum HTML
    Replies: 3
    Last Post: 02-23-2006, 05:43 AM
  3. Checking images
    By Wizard13335 in forum PHP
    Replies: 6
    Last Post: 11-08-2005, 02:17 PM
  4. Error Checking
    By nathaliaMota in forum JavaScript
    Replies: 1
    Last Post: 06-09-2005, 03:33 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •