SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Div in Div

    I've been screwing around with this design for a Tumblr photoblog for little while, off and on. I changed some things, decided to have the date overlay the photo on hover. I've done this on other sites a million times before, I know how to do it, it's not complicated. I'm guessing I screwed it up somewhere with my tinkering and now I'm just too irritated with it to see.

    If anyone has the patience to check out my css/markup and point out the obvious.
    Code HTML4Strict:
    <!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" xml:lang="en" lang="en">
      <head>
      <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
      <link rel="shortcut icon" href="http://media.tumblr.com/bN8JmTIVwbozhj4aTZvE9HtJ_100.gif"/>
     
            <style type="text/css">
     
                 /* RESET */
                 html, body, div, span, applet, object, iframe,
                 h1, h2, h4, h5, h6, blockquote, pre,
                 a, abbr, acronym, address, big, cite, code,
                 del, dfn, em, font, img, ins, kbd, q, s, samp,
                 small, strike, strong, sub, sup, tt, var,
                 dl, dt, dd, ol, ul, li,
                 fieldset, form, label, legend,
                 table, caption, tbody, tfoot, thead, tr, th, td {
    	         margin: 0;
    	         padding: 0;
    	         border: 0;
    	         outline: 0;
    	         font-weight: inherit;
    	         font-style: inherit;
    	         font-size: 100%;
    	         font-family: inherit;
     
                 }
     
                 /* remember to define focus styles! */
                 :focus {
    	          outline: 0;
     
                 }
     
                 /* tables still need 'cellspacing="0"' in the markup */
                 table {
    	         border-collapse: separate;
    	         border-spacing: 0;
     
                 }
     
                 caption, th, td {
    	         text-align: left;
    	         font-weight: normal;
     
                 }
     
                 blockquote:before, blockquote:after,
                 q:before, q:after {
    	         content: "";
     
                 }
     
                 blockquote, q {
    	         quotes: "" "";
     
                 }
     
                /* GENERAL*/
                body {
                font: 12px/1em Helvetica, Arial, sans-serif;
                text-align: center;
                background: #FFF;
     
                }
     
                a {
                color: #000;
                text-decoration: underline;
     
                }
     
                a:hover {
                color: #999999;
                text-decoration: none;
     
                }
     
                #content {
                background: #FFF;
                color: #000;
                margin: 10px auto;
                width: 800px;
                text-align: left;
     
                }
     
                #posts li{
                list-style: none;
     
                }
     
                P {
                margin-left:0;
     
                }
     
               /* NAVBAR */
               h1 {
               color: inherit;
               font-size: inherit;
               text-transform: uppercase;
               display: inline;
               float: left;                      
               }
     
               h1 span {
               font-weight: normal;
               font-stretch: wider
     
               }
     
               .slash {
               color: inherit;
     
               }
     
               #navbar .sort {
               font-weight: normal;
               display: inline;
               float: right;
               padding: 0 0 0 10px;
     
               }
     
               #navbar {
               color: #999999;
               font-size: inherit;
               font-weight: bold;
               text-transform: uppercase;
               margin: 0 0 10px; 0;
               padding: 0;
               height: 30px;
     
               }
     
               #navbar:hover {
               color: #000;
     
               } 
     
               #navbar a {
               color: inherit;
               text-decoration: none;
     
               } 
     
               #navbar a:hover {
               border-bottom: 2px solid #000;
               padding: 0 0 2px 0;
     
               } 
     
     
               #menu {
               padding: 9.5px 0 0  0px;
     
               }
     
                #menu li {
               list-style-type: none;
               padding: 0;
     
               }
     
               /* PHOTO POST*/
     
               #hovertext {
               font-weight: bold;
               padding: 5px;
               width: 100%;
               position: relative;
               bottom: 267.5px;
               margin-left: auto;
               margin-right: auto;
               background: #FFF;
               z-index: 5;
     
               }
     
               #caption {
               margin-top: 10px;
               color: #000;
               background: #FFF;
     
               }
     
               #caption:hover {
               z-index: 3;
     
               }
     
               #bigphoto .desc {
               margin-top: 10px;
     
               }
     
               #bigphoto .date {
               background: url("http://www.websiteicons.com/icons_src/5/6/date_time_06.gif") no-repeat;
               padding-left: 16px;
     
               }
     
               #bigphoto .tags {
               background: url("http://www.websiteicons.com/icons_src/7/9/folders_03.gif") no-repeat;
               padding-left: 16px;
     
               }
     
               #bigphoto .permalink {
               background: url("http://www.websiteicons.com/icons_src/10/16/pages_06.gif") no-repeat;
               padding-left: 16px;
     
               }
     
               #bigphoto .date, #bigphoto .tags, #bigphoto .permalink {
               padding-bottom: 5px;
               margin-bottom: 5px;
     
               } 
     
               .tags span {
               padding-right: 5px;
     
               }
     
     
                #bigphoto .photolink {
               padding-bottom: 5px;
               margin-bottom: 5px;
     
               }      
     
               #bigphoto .label {
               font-weight: bold;
     
               }
     
               #bigphoto img {
               position: relative;
               border: 4px solid #000;
               width: 792px;   
               z-index: 2;
     
               } 
     
               .linktext {
               text-transform: uppercase;
               font-size: 12px;
               font-weight: bold;
               text-align: center;
               color: #000;
               width: 700px;
               position: relative;
               top: -250px;
               z-index: -1;
     
               }
     
                /* TEXT POST */
     
               #posttext {
               text-align: justify;
               padding: 0;
               color: #000;
               width: 600px;
               line-height: 120%;
     
               }
     
               #posttext ul li{
               margin-bottom: 10px;
               list-style-type: square;
               list-style-position: inside;
     
               }
     
               #posttext img {
               padding: 0 0 10px 10px;
               width: 350px;
               float: right;
     
               }
     
               h3 {
               font-weight: bold;
               color: inherit;
               font-size: inherit;
               text-transform: uppercase;
               letter-spacing: .15em;
               font-stretch: wider;
               margin: 15px 0 5px;
               padding: 0;
     
               }
     
               /* FOOTER*/
               #footer {
               color: #999999;
               margin-top: 0px;
               font-size: inherit;
               text-transform: uppercase;
               height: 30px;
     
               }
     
               #footer:hover {
               color: #000;
     
               }
     
               #footer a {
               color: inherit;
               text-decoration: none;
               margin: 5px 0 5px 0;
     
               }
     
               #footer #next:hover {
               border-bottom: 2px solid #000;
               padding: 0 0 4px 0;
     
               }
     
               #footer #prev:hover {
               border-bottom: 2px solid #000;
               padding: 0 0 4px 0;
     
               } 
     
     
               #footer #prev {
               float: left;
               margin: 10px 0 0 0px;
     
               }
     
               #footer #next {
               float: right;
               margin: 10px 0px 0 0;
     
               }
     
     
             </style>
     
    <!--[if lte IE 7]>
     
    <style type="text/css">
     
               #navbar, #footer, .bigphoto .caption {
               width: 500px;
     
               }
     
               #menu li {
               display: inline;
     
               }
     
    </style>
     
    <![endif]-->
     
        <script type="text/javascript" src="http://static.tumblr.com/txv6iau/xrIkg2ucg/tooltips.js"></script>
     
        </head>
     
        <body>
            <div id="content">
            <div id="navbar">
            <ul id="menu">
           <li><h1><a href="/">Andrew West</a><span> <span class="slash">/</span> Photography{block:TagPage} / {Tag} {/block:TagPage} {block:PermalinkPage}{block:HasTags}{block:Tags} / {Tags}{/block:Tags}{/block:HasTags} {/block:PermalinkPage} {block:PostTitle} / {PostTitle}
    {/block:PostTitle} </span></h1></li>
     
            {block:IndexPage}<li><span class="sort"><a href="/rss">RSS</a></span></li>
            <li><span class="sort"><a href="/archive">Archive</a></span></li>
            <li><span class="sort"><a href="/about">About</a></span></li>
            </ul>{/block:IndexPage}
            </div>
     
            <div id="posts">
                  {block:Posts}
     
                   {block:Text}
                        <li id="posttext">
                            {block:Title}
                                <h3>{Title}</h3>
                            {/block:Title}
     
                            {Body}
                        </li>
                    {/block:Text}
     
                    {block:Photo}
                        <div id="bigphoto">
                            {block:NextPage}<a href="{NextPage}">{/block:NextPage}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
     
     
                            {block:Caption}
                               <div id="caption">
                               {block:IndexPage}<div id="hovertext">{DayOfMonth} {Month} {Year}</div>{/block:IndexPage}  
     
                             {block:PermalinkPage}<div class="date"><span class="label">Date: </span>{ShortMonth}. {DayOfMonth} {ShortYear}</div> <div class="tags"><span class="label">Tags:</span> {block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div><div class="permalink"><span class="label">Link:</span> <a href="{Permalink}">{ShortURL}</a></div><div class="desc">{Caption}</div></div>{/block:PermalinkPage}
                            {/block:Caption}
                        </div>
                    {/block:Photo}
                {/block:Posts}
            </div>
     
            {block:IndexPage}<div id="footer">
                {block:PreviousPage}
                    <a href="{PreviousPage}" id="prev">Prev</a>
                {/block:PreviousPage}
     
                {block:NextPage}
                    <a href="{NextPage}" id="next">Next</a>
                {/block:NextPage}
            </div>{/block:IndexPage}
            </div>
     
    </body>
    </html>

    Thanks, I really appreciate the help and I'll be around to reciprocate.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi theandrewwest, welcome to SitePoint!

    You haven't really said what you want to do. Which div are trying to fix?

    That code you posted is too full of proprietary bits to be of much use to me. Could you post a live link?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •