1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Moving iframe to line up correctly

Discussion in 'CSS' started by Peter Hutcheson, Jun 11, 2015.

  1. #1
    Hello and thanks for the help.

    I am trying to get the iframe on this page http://smartphonopoly.com/demo-app.html to line up on the phone.

    I inspected the element and thought I found where I change the positioning, but was not able to move only the iframe, the phone image moved too.

    I have researched the Bootstrap grid examples, but am a little unsure where or if this is the right place to start.
    SEMrush
    Thanks again for the help, let me know if I am missing info to assist with solving this problem.
     
    Peter Hutcheson, Jun 11, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #2
    Add a top and left margin to the iframe to push it into place inside the larger parent DIV. If the margin is being ignored, add overflow:hidden to the parent DIV (and if you care about legacy IE, a haslayout trigger like zoom)

    Though that page is a laundry list of how not to build a site -- admittedly you end up with that the moment you have bootcrap involved with idiocy like this:
    <div class="phone-holder-wrapper col-md-4 col-sm-5 col-xs-12 col-md-offset-1 col-sm-offset-1 col-xs-offste-0 col-md-pull-6 col-sm-pull-6 col-xs-pull-0">
    Code (markup):
    But there's some nonsense that can't be blamed on the fat bloated framework that just makes you work harder, not smarter...

    Like the endless pointless DIV for nothing, endless pointless classes for nothing, gibberish use of numbered headings, scripttardery doing CSS' job, tags like IFRAME that have no business on any website written after 1997, etc, etc... NOT entirely related to your problem, but thought you should at least be made aware that wasting 17k of markup on 970 bytes of plaintext and only one element I'd even go so far as to call a content image is anywhere from three to five times what's needed to do that job. Then people wonder why I say bootcrap does NOT make things simpler/easier?

    I'd HIGHLY suggest pitching bootcrap in the trash and starting over clean with ACTUAL semantic markup and separation of presentation from content, backing away from the "JS for nothing" garbage as well.

    Also, that image is pretty simple -- have you considered perhaps trying to generate that phone outline with CSS3 instead of as a separate image? Box-shadow and border-radius can do some pretty amazing stuff in that department and it would scale/zoom better. Moving the design to CSS would have the advantage that you could demo multiple different phone sizes around that iframe instead of just one fixed one.
     
    deathshadow, Jun 11, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    Oh, BTW your iframe code is busted too -- you declare attribute without their values, declare the same attribute twice, frameborder only accepts 0 or 1 (which is why I'd choose 0).
     
    deathshadow, Jun 11, 2015 IP
  4. Peter Hutcheson

    Peter Hutcheson Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    23
    #4
    Thanks for the help, this is a wrapbootstrap theme and I know this is not necessarily the best way, but for the price point (free) this is what they get. But I want it to look decent and your assistance is appreciated.
     
    Peter Hutcheson, Jun 12, 2015 IP