Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    4
    Member #
    34079
    I first have to say I'm a complete novice web designer. I know about enough to be dangerous and that's it.

    With that said, I'm looking to put a youtube video over a picture on my website and I've read that absolute positioning or relative position may work for this. However, when I use relative positioning, I can get the picture exactly where it needs to be- but a ton of extra empty white space is created at the top of the page. I'm not sure why.

    When I use absolute positioning, I can get it as far down the page as it needs to be, but I can't get it centered in the page (the picture is centered). Below is the code for my entire site. The red text is the youtube video, and the blue text is the picture. Any idea how I can get the picture centered?

    I don't care which method is used as long as it works. I did read that it can be harder to get internet explorer to recognize a center command- so I would prefer an option that will work on internet explorer, safari, and firefox.

    Absolute Positioning example code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slurping Sarah: Order Now</title>
    <style type="text/css">
    body {
    background: url(cover%20texture%20background%20for%20widescree n.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    #wrapper {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    }
    </style>
    </head>
    <body>



    <div style="position: absolute; top: 166px; height: 360px; width: 640px; padding: 1em;">
    <iframe width="640" height="360" src="http://www.youtube.com/embed/uIWmwEnC5Vk?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>


    <div>
    <div id="wrapper"><img src="trailer_black_background.png" width="960" height="912" border="0" usemap="#Map" />
    <div>
    <font face=arial>
    <font color="white">
    <font size=1>
    &copy; 2012 Kasey Dufresne-Berry and Jeremy Ryan Rowe.<br>
    All rights reserved. Slurping Sarah is a 24 page soft cover<br>
    children's book authored by Kasey Berry<br>
    and illustrated by Jeremy Rowe.<br>
    <img src="clear_spacer.png">
    </map></div>
    </body>
    </html>

    Relative Positioning example code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slurping Sarah: Order Now</title>
    <style type="text/css">
    body {
    background: url(cover%20texture%20background%20for%20widescree n.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    #wrapper {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    }
    </style>
    </head>
    <body>

    <div style="position: relative; top: 550px; height: 360px; width: 640px; margin-right: auto; margin-left: auto; padding: 1em;">
    <iframe width="640" height="360" src="http://www.youtube.com/embed/uIWmwEnC5Vk?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div>
    <div id="wrapper"><img src="trailer_black_background.png" width="960" height="912" border="0" usemap="#Map" />
    <div>
    <font face=arial>
    <font color="white">
    <font size=1>
    &copy; 2012 Kasey Dufresne-Berry and Jeremy Ryan Rowe.<br>
    All rights reserved. Slurping Sarah is a 24 page soft cover<br>
    children's book authored by Kasey Berry<br>
    and illustrated by Jeremy Rowe.<br>
    <img src="clear_spacer.png">
    </map></div>
    </body>
    </html>

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    Can you show us a link to the real page?
    We can't visualize or test anything just by looking at some random scripting.


  4. #3
    Junior Member Jimmy Jones's Avatar
    Join Date
    Oct 2012
    Location
    Waxahachie, Texas
    Posts
    20
    Member #
    33137
    Liked
    2 times
    I don't think you need to specify the type of positioning. Absolute is for when you want to position something outside of the normal flow of the layout.

    To center a div, use margin: auto; . If you want to add padding to the top to move the div down, you can use margin-top or padding-top to do this.

    Try "margin: 166px auto 0;" This should put the div 166px down from the top, centered, with 0 margin at the bottom. If you want more bottom margin, adjust the zero to the number you want.

    Also, you have extra div tags without any closing div tags, and "font face" is not used anymore within the html, specify it with css.
    rowejere likes this.

  5. #4
    Junior Member
    Join Date
    Dec 2012
    Posts
    4
    Member #
    34079
    Thanks for taking a look at my question My website is www.slurpingsarahbook.com (I haven't added this youtube page yet though). I have a video that I'm trying to place over one of the black boxes. Currently, the menu options, black boxes, and text are all one big png file over a jpg background. Pretty primitive site, but it worked for my purposes until now. I'm pretty sure there's a better way to construct everything, but my knowledge of web design is very limited.

    In any case, I tried taking out the "absolute" command and adding in the margin suggestion, and it brought the video out of the picture I'm trying to center it inside one of the black, semi transparent boxes. I'm pretty sure the forces of the universe are against me.

  6. #5
    Junior Member Jimmy Jones's Avatar
    Join Date
    Oct 2012
    Location
    Waxahachie, Texas
    Posts
    20
    Member #
    33137
    Liked
    2 times
    I'm not sure why it wouldn't work, unless you have too few div closing tags. In the html above, you have 2 divs without closing tags. That may be your problem too.
    rowejere likes this.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Jimmy's definitely got you on the right track. Your wrapper is positioned correctly, as your menu is centered the way you want it to...if the auto left/right margins weren't working, it wouldn't do that.

    It looks like you want the video right underneath the menu. The problem in this particular case is that the image contains a whole lot of blank space under the menu itself that shouldn't be there (not white space...blank space, as in transparent). Whenever you put things underneath the image, the blank space that image uses up forces everything down. What you'll want to do is this:

    1. Take your home_text.png file (or, I'm assuming, the equivalent PSD) and crop it so that the blank space is removed. It should be approximately 60 pixels high (rough guess) when you're all said and done.
    2. Save the PNG back for web purposes.
    3. Adjust the height of your img tag.
    4. Put the iframe underneath of the image tag.

    Now, at this point you may need to center the iframe (in which case, put it inside of a div with the CSS text-align: center; property set.) But you should have your iframe positioned where you want it.

    By the way, that looks like an interesting book from the background illustration. My daughter would probably dig it.
    rowejere likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    I don't understand the part about the video going over the black box.
    What black box?
    Do you mean the ones that currently have text and a photo in them?
    Are you referring to the "About" page?

    How will the video get over the box. Does it appear like it is now and
    then you click something and the video appears? Or are you scrapping
    the text in those boxes and replacing them with videos permanently?

    When does the text appear, and when does the video appear? Very strange.


  9. #8
    Junior Member
    Join Date
    Dec 2012
    Posts
    4
    Member #
    34079
    Thanks everyone! The suggestions were very helpful and I was able to get it to work. And thanks for the compliment on my book It's on Amazon.com and there's a "look inside" feature that let's you see a couple more pictures. I'm more of an illustrator and graphic designer than a full fledged actual web designer... so I tried to teach myself through youtube. That's why I said I know just enough to be dangerous and that's about it.

    I'm still working on some finishing touches and I'll have the new and improved site with the youtube video online in a few days. The video is already on youtube, but it'll be on a separate tab on my actual website that I just created in a few days. I was hoping to put on a screenshot of the final product, but there is an error and this forum won't let me... sadness. I guess you'll just have to believe me when I say it works now. In any case, thanks again! You guys rock!

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It might be that the file's too big. I know there are width/height/file size restrictions. That could explain it.

    For those of you who want to see the video, it's below (I *heart* TinyMCE embedding, and I'm guessing Jeremy could use a plug):



    The only thing I want to know (besides what the site will look like once Jeremy uploads it) is whether the book is a board book. I'm guessing it's not because it's a softcover, but I'm hoping it is just because my daughter has a tendency to rip through paper books and she has a much harder time destroying the board ones.
    rowejere likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Junior Member
    Join Date
    Dec 2012
    Posts
    4
    Member #
    34079
    Thanks THEGAME1264! The book is softcover book with normal paper pages, but maybe she would like it anyway before she destroyed it In any case- thanks again! I'm hoping to have the new website up and running by Sunday. This was an enormous help.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com