www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div Above Content

  1. #1
    Join Date
    Jul 2010
    Location
    Woodbridge, VA
    Posts
    7

    Div Above Content

    Greetings,

    Is it possible to place a div so it is sitting above the content? For example, lets say I have a photo and I want to put a navigation bar above it so the navigation is part of the photo instead of being an extra bar of interface taking up screen realestate: Back | Thumbnails | Gallery | Next

    Since I am limited on x height in this particular case, I would like the navigation to float above (z axis) the photo. I am using PNGs for the nav so that only the icon outline appears over the photo.

    I should probably also note that this is for displaying a series of photos on a mobile device, hence the reason I am limited on the vertical x axis.

    Lastly, can someone point me to the best resource info on how to design for mobile devices? I'm new at it.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use something like this as a guide:


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--

    #container {
    positionrelative;
    width70&#37;;
    border1px solid red;
    margin0px auto 0px auto 0px;
    padding20px 20px 20px 20px;
    overflowhidden}
     
    #myLinks {
    positionabsolute;
    top70px;
    left70px;
    border1px solid blue;
    width30%}
     
    #myLinks ul li {
    list-style-typenone;
    displayinline}

    #myPic {
    border1px solid green}
     
    -->
    </
    style>
    </
    head>
    <
    body>
     
    <
    div id="container">
        <
    div id="myLinks">
            <
    ul>
                <
    li>|<a href="#">link 1</a></li>
                <
    li>|<a href="#">link 2</a></li>
                <
    li>|<a href="#">link 3</a></li>
                <
    li>|<a href="#">link 4</a>|</li>
            </
    ul>
        </
    div>
        <
    div id="myPic">
               <
    img src="pic1.jpg" alt="" />
        </
    div>
    </
    div>
     
    </
    body>
    </
    html

  3. #3
    Join Date
    Jul 2010
    Location
    Woodbridge, VA
    Posts
    7
    I will give it a try and let you know. Thanks again!

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    no problem - you're welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles