Results 1 to 7 of 7

Thread: Can you help pin point correct place to edit.

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

    Default Can you help pin point correct place to edit.

    On this page there is a white section that goes full width.
    I'm looking to make it the same width / position etc as the header.
    Once done the cloud background will be seen either side of it.
    Here is the page but I've made a few changes but this section made no difference.
    I've put the changes back as they were know.
    Can you advise the correct place to make the change please.
    http://www.theremotedoctor.co.uk/acc...llto=selection
    Last edited by theremotedr; 02-06-2016 at 07:50 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

    Your best bet to troubleshoot would be to use the developer toolbar - F12 in most browsers. Click the inspect/select element arrow and target the problematic area (click on the screen where you suspect the problem lies). You can refine your choice, navigating up and down the DOM in the HTML window at the bottom of the screen, and then you use the style pane on the right to manipulate the CSS on the fly until you find the problem. Learning to use this tool is one of the best weapons in your CSS troubleshooting arsenal.
    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 (02-06-2016)

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

    Default

    Do you mean the section below the menu where I see images of audi, numbers and accessories?
    Do you want those 3 images to fill out to the width of the above menu and logo image?

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

    Default

    Hi,
    Ive used F12 like advised and kind of got my own answer of where to make the adjustment.
    Im now stuck regarding the size issue,do i use px or %
    Ive added this to my css
    Code:
    	max-width:75%;
    	margin:0 auto;
    Looking at the page in question, now you will see with a % used the white banner looks almost correct in respect of it needing it to be the same width as the shadowed box above.
    However on the iphone this white banner falls short of the edges of the shadowed box.

    Mlegg,its the white banner those icons live in.

    http://www.theremotedoctor.co.uk/acc...llto=selection
    Last edited by theremotedr; 02-06-2016 at 11:09 AM.

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

    Default

    I can't check anything from mobile but I would suggest taking your cues from the element you want to mimic - match sizing width and values, padding, margin etc., Basically, check anything that affects the box model of the element you want to modify (Not sure what the box model is? https://www.google.co.uk/search?q=html5+box+model )

    Check in the developer toolbar at your critical breakpoints (adjust browser width as necessary) to see if any of the CSS changes, then transfer your on-the-fly style edits to your CSS media queries.
    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

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

    theremotedr (02-06-2016)

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

    Default

    Basically, check anything that affects the box model of the element you want to modify
    I forgot to say, re: the element-to-mimic: you might need to check the container elements too for compounded styles, e.g) if the outer element has a padding of 20px and the inner element that has a padding of 20px, add them together to copy the combined total padding on your target element.
    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

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

    theremotedr (02-06-2016)

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

    Default

    Thanks.
    Playing around with Firebug I found the part I needed to alter.
    Having said that it didn't look to great so opted for white bar removed and now cloud background is used and looks better anyway.
    Have another question so will start a new post.

Similar Threads

  1. Replies: 53
    Last Post: 01-26-2011, 08:14 PM
  2. aligning image in correct place
    By hemi519 in forum HTML
    Replies: 4
    Last Post: 11-16-2010, 07:03 PM
  3. JS - Edit in Place
    By JamesPT in forum JavaScript
    Replies: 0
    Last Post: 08-15-2008, 12:06 AM
  4. how to implement ajax edit in place with asp 3.0
    By giselle2008 in forum JavaScript
    Replies: 0
    Last Post: 05-27-2008, 03:57 PM
  5. Edit in Place
    By alim27 in forum JavaScript
    Replies: 4
    Last Post: 01-30-2008, 11:03 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
  •