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 12
  1. #1
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    I'm working on a proposed layout a friend wants. I have positioned the elements using CSS and a "Dummies" book for a guide. This is the page: http://www.17minutes.f2s.com/Media.html

    It works okay on my monitor ONLY in Chrome, nothing else. On my laptop in ANY browser it doesn't work.
    I've used absolute positioning coupled with % units of measurement. I've put a red border round everything so I can see the div's positions and sizes, it's only temporary ;-) Here's my CSS:
    Code:
    body {
        background-color: #000000;
        }
    #all    {
        width: 90%;
        height: 90%;
        position: absolute;
        left: 5%;
        top: 5%;
        background-color: #000000;
        color: #FFFFFF;
                }
    #kleft    {
            border: 1px red solid;
            width: 21%;
            height: 33%;
            position:absolute; left:13%; top:11.5%;
            }
    #kright    {
            border: 1px red solid;
            width: 21%;
            height: 33%;
            position:absolute; right:13%; top:11.5%;
            }
    #fadeshow1    {
        border: 1px red solid;
        width: 22%;
        height: 29.5%;
        text-align: center;
        margin: 0px auto;
        position: absolute; top:2%;
        }
    #Tich    {
        border: 1px red solid;
        width: 9%;
        height: 8%;
        font-family: Impact;
        text-align: center;
        font-size: 360%;
        position: absolute; top:2%; left: 20%;
            }
    #Vango    {
        border: 1px red solid;
        width: 11%;
        height: 8%;
        font-family: Impact;
        text-align: center;
        font-size: 360%;
        position: absolute; top: 2%; right: 18%;
            }
    #Video    {
        border: 1px red solid;
        width: 30%;
        height: 51%;
        text-align: center;
        margin: 0px auto;
        position: absolute; top: 48%; left: 35%;
                }
    Here is my html:

    Code:
    <body>
    <div id="all">
    <div id="kleft">
    <img src="Images/Piano.jpg"/>
    </div>
    <div id="Tich">
    Tich
    </div>
    <div id="fadeshow1">
    </div>
    <div id="Vango">
    Vango
    </div>
    <div id="kright">
    <img src="Images/Piano.jpg"/>
    </div>
    <div id=Video>
    <object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/EoR0BkYmv8c?fs=1&amp;hl=en_GB&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/EoR0BkYmv8c?fs=1&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed></object>
    </div>
    </div>
    </body>
    Perhaps I'm making the idiot mistake's, or it's something subtle. I just want to design something that works on most browsers and if possible mobile devices.
    Let the tuition begin please.....

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Absolute positioning will get you into trouble - what many people don't understand at first is that an absolutely positioned element is actually absolutely positioned relative to its parent element, not to the page.
    Read this, it may help you understand.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks for the link I'll have another go at it. According to the book I read "absolute" was the way to go when coupled with % measurements. Time for Plan B!

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Then take the book, a Piezo lighter, and some butane and give that book the treatment it so richly deserves.

    The only time to use absolute positioning is when you intentionally want to put something outside of the document flow. An example of that would be a menu if you want it to load last while the content loads first. That's okay. It's also extremely tricky and not something I'd recommend for a newbie (took me several tries to get it right myself).

    The question I have is...what is this thing supposed to look like? If it looks right in Chrome, screen capture it so we can all see what it is that you want, because I can't tell which is right, wrong or indifferent from what I'm seeing.
    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)

  6. #5
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    It would appear that this book has steered me somewhat awry. here is a screenshot for my friend to look at. At the moment it's all bouncing ideas for layout and content but I still have to be able to get the damned thing looking right on most computers and browsers.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    All you really need for this layout are centered divs and floats. Here's the concept, using your Youtube div as an example:
    Code:
    div#youtube-video-container {margin:  0px auto;  width:  425px;  text-align:  center;}
    That will center your Youtube clip in a 425-pixel container. You can set the height on it as well if you want to.

    The other three divs (your keys and your photo) can work the same way, except that you'll want to include some floats in there (be sure to clear them!)

    Mess with those ideas for a while and see how much further along you can get.
    Lol999 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
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks for taking the time. I'm actually dumping this idea before my friend see's it as it's too "busy". I had already decided to try floats so I'm glad I was thinking along the right lines!

    Cheers, Lol

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Cheers, man. Keep us posted on what you come up with.
    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)

  10. #9
    Junior Member OrlWebDesign's Avatar
    Join Date
    Aug 2010
    Location
    Orlando, FL
    Posts
    13
    Member #
    23123
    Quote Originally Posted by Lol999, post: 201731
    I'm working on a proposed layout a friend wants. I have positioned the elements using CSS and a "Dummies" book for a guide. This is the page: http://www.17minutes.f2s.com/Media.html

    It works okay on my monitor ONLY in Chrome, nothing else. On my laptop in ANY browser it doesn't work.
    I've used absolute positioning coupled with % units of measurement. I've put a red border round everything so I can see the div's positions and sizes, it's only temporary ;-) Here's my CSS:
    Code:
    body {
        background-color: #000000;
        }
    #all    {
        width: 90%;
        height: 90%;
        position: absolute;
        left: 5%;
        top: 5%;
        background-color: #000000;
        color: #FFFFFF;
                }
    #kleft    {
            border: 1px red solid;
            width: 21%;
            height: 33%;
            position:absolute; left:13%; top:11.5%;
            }
    #kright    {
            border: 1px red solid;
            width: 21%;
            height: 33%;
            position:absolute; right:13%; top:11.5%;
            }
    #fadeshow1    {
        border: 1px red solid;
        width: 22%;
        height: 29.5%;
        text-align: center;
        margin: 0px auto;
        position: absolute; top:2%;
        }
    #Tich    {
        border: 1px red solid;
        width: 9%;
        height: 8%;
        font-family: Impact;
        text-align: center;
        font-size: 360%;
        position: absolute; top:2%; left: 20%;
            }
    #Vango    {
        border: 1px red solid;
        width: 11%;
        height: 8%;
        font-family: Impact;
        text-align: center;
        font-size: 360%;
        position: absolute; top: 2%; right: 18%;
            }
    #Video    {
        border: 1px red solid;
        width: 30%;
        height: 51%;
        text-align: center;
        margin: 0px auto;
        position: absolute; top: 48%; left: 35%;
                }
    Here is my html:

    Code:
    <body>
    <div id="all">
    <div id="kleft">
    <img src="Images/Piano.jpg"/>
    </div>
    <div id="Tich">
    Tich
    </div>
    <div id="fadeshow1">
    </div>
    <div id="Vango">
    Vango
    </div>
    <div id="kright">
    <img src="Images/Piano.jpg"/>
    </div>
    <div id=Video>
    <object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/EoR0BkYmv8c?fs=1&amp;hl=en_GB&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/EoR0BkYmv8c?fs=1&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed></object>
    </div>
    </div>
    </body>
    Perhaps I'm making the idiot mistake's, or it's something subtle. I just want to design something that works on most browsers and if possible mobile devices.
    Let the tuition begin please.....

    I know you said you've scrapped this, and I agree that absolute positioning is NOT the way to go, especially for a complete layout. However, that being said, what you lacked was a div that had relative positioning. Had you nested all of this in a, say 100% by 100% div with the "position: relative;" attribute, I am fairly certain your layout would have worked.

    But, you were absolutely (pun intended) going about that the wrong way. It would have been SO much easier with floats. (Don't forget to clear them!)

  11. #10
    Member LavaEagle's Avatar
    Join Date
    Dec 2010
    Location
    Seattle, WA
    Posts
    46
    Member #
    25843
    Liked
    1 times
    I suggest checking out:
    w3schools.com
    google css tips
    Attached Images Attached Images


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 05:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com