SitePoint Sponsor

User Tag List

Results 1 to 25 of 27

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question I Need Help With Positioning a DIV under a other DIV

    I don't know what to do position a DIV under at the bottom of page im so confused on what to do. Im a intern for a web-design company but mostly Im just the photoshop/3d Animation/Modeling And Rendering and make vids for site, etc.

    Note:This a template I found online. Gosh HTML has changed so much since I was in high school.

    SAMPLE HTML MY PAGE.jpg postion

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/pop-ups.js"></script>
    <script type="text/javascript" src="scripts/nav.js"></script>
    </head>
    <body>
    <hgroup>
      <h1>Portfolio</h1>
      <h2>3D Animation/Graphic Design<h2>
    </hgroup>
    <nav>
      <ul id="menu" class="menu">
        <li> <a href="#" id="about"> <img src="images/AW.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">About me</span> <span class="descr">Know me</span> </span> </a> </li>
        <li> <a href="#" id="projects"> <img src="images/G Logo.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Projects</span> <span class="descr">My work</span> </span> </a> </li>
        <li> <a href="#" id="contact"> <img src="images/Ninja Penguin.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Contact</span> <span class="descr">Get in touch</span> </span> </a> </li>
        <li > <a href="#" id="blog"> <img src="images/GTR Render Menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Side Works</span> <span class="descr">3D-Animation-Model/Graphic Design</span> </span> </a> </li>
      </ul>
    </nav>
    <section id="bg">
      <section id="overlay"></section>
      <a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/gallery/Hankook Tire Ad 1 (Sample).jpg" id="bgimg" /></section>
    <div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
    <div id="img_title"></div>
    <div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
    <div id="thumbnails_wrapper">
      <div id="outer_container">
       <div class="container">
            <div class="content">
              <div><a href="images/gallery/Hankook Tire Ad 1 (Sample).jpg"></a></div>
            </div>
            <div class="content">
              <div><a href="images/gallery/BMW M3 GTR.jpg"></a></div>
            </div>
            <div class="content">
              <div><a href="images/gallery/Hankook Tire Ad 2 (Sample).jpg"></a></div>
            </div>
            <div class="content">
              <div><a href="images/gallery/Ninja Penguin.jpg"></a></div>
            </div>
            <div class="content">
    	<div><a href="images/gallery/Super Soldier.jpg"></a></div>
            </div>
    	<div class="customScrollBox">
    	<div class="content"><div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
            </div>
    	</div>
           </div>
          </div>
         </div>
        </div>
       </div>
    <article id="popupAbout" class="popupAbout">
      <div class="customScrollBox">
        <div class="container">
          <div class="content"> <a id="popupAboutClose"><img src="images/cross.png" width="20" alt="" /></a>
            <h>About: ME</h>
            <p class""><img src="images/globalgraffiti.jpg" alt="" class="image"/>Graduated from Lonestar Community North Harris College with Associates Degree in 3D Animation & Graphic Design. Recently now a intern for Global Graffiti.</p>
    	<a></li>
    <li><a href="http://www.globalgraffiti.net">Global Graffiti</a>
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
    </article>
    <article id="popupBlog" class="Blog">
      <div class="customScrollBox">
        <div class="container">
          <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
     <h>Side Works: ME</h>
    	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
    	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
    	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
    	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
    	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
    	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
    	<iframe width="720" height="480" 
    		src="http://www.youtube.com/embed/zuJpdEkBNVA"
    		frameborder="0" allowfullscreen>
    		</iframe>
    	<div class="border"></div>
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
    </article>
    <script type="text/javascript" src="scripts/gallery.js"></script> 
    <script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
    </div>
    </article>
    <article id="popupProjects" class="popupProjects">
      <div class="customScrollBox">
        <div class="container">
          <div class="content"> <a id="popupProjectsClose"><img src="images/cross.png" width="20" alt="" /></a>
            <h>Projects: ME</h>
           	<div class="border"></div>
     	<h>Swirled-Ice [Made New Slides]</h>
    	<p class="nomargin"><img src="images/Swirled Ice.jpg" alt="" class="image"/><a></li>
    <li><a href="http://www.swirled-ice.com/default.aspx">Swirled-Ice</a><br>
            </p>
            <div class="border"></div>
            <h>Ultimate Solutions.Inc [Rendered 3D Animations For Site]</h>
            <p class="nomargin"><img src="images/Ultimate Solutions.jpg" alt="" class="image"/><a></li>
    <li><a href="http://ultimatesolutions-inc.com">Ultimate Solutions.Inc</a><br/>
            </p>
            <div class="border"></div>
            <h>VetUSA [Made Folder And 3D VetUSA Logo]</h>
            <p><img src="images/VetUSA.jpg" alt="" class="image"/><a></li>
    <li><a href="http://vetusa.com/">VetUSA</a><br/>
            </p>
            <div class="border"></div>
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
    </article>
    <article id="popupContact" class="popupContact">
      <div class="customScrollBox">
        <div class="container">
          <div class="content"> <a id="popupContactClose"><img src="images/cross.png" width="20" alt="" /></a>
            <h>Contact: ME</h>
            <form method="post">
              <label for="name">Name:</label>
              <input type="text" name="name" id="name" required placeholder="Name" />
              <label for="name">Subject:</label>
              <input type="text" name="subject" id="subject" required placeholder="Subject" />
              <label for="email">Email:</label>
              <input type="email" name="email" id="email" required placeholder="email@example.com" />
              <label for="message">Message:</label>
              <textarea name="message" id="message" required></textarea>
              <input type="submit" value="Send Message" />
            </form>
            </br>
            <iframe width="425" height="300" class="map" src="http://maps.google.com/maps?hl=en&amp;q=701+first+ave+sunnyvale+ca&amp;ie=UTF8&amp;hq=&amp;hnear=701+1st+Ave,+Sunnyvale,+California+94089&amp;z=14&amp;ll=37.416883,-122.026022&amp;output=embed"></iframe>
            <div id="social-network"> <a href="#" target="_blank"><img src="images/facebook.png" alt="Facebook" /></a> <a href="#" target="_blank"><img src="images/flickr.png" alt="Flicker" /></a> <a href="#" target="_blank"><img src="images/linkedin.png" alt="Linkedin" /></a> <a href="#" target="_blank"><img src="images/myspace.png" alt="Myspace" /></a> <a href="#" target="_blank"><img src="images/twitter.png" alt="Twitter" /></a> </div>
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
    </article>
    <article id="popupBlog" class="Blog">
      <div class="customScrollBox">
        <div class="container">
          <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
            <h>Side Works: ME</h>
    	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
    	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
    	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
    	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
    	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
    	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
    	<iframe width="720" height="480" 
    		src="http://www.youtube.com/embed/zuJpdEkBNVA"
    		frameborder="0" allowfullscreen>
    		</iframe>
    	<div class="border"></div>
          </div>
        </div>
        <div class="dragger_container">
          <div class="dragger"></div>
        </div>
        <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
    </article>
    <script type="text/javascript" src="scripts/gallery.js"></script> 
    <script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
    <body> 
    (SOMETHING HERE ?)
    </div> 
    </body>
    </html>


    STYLE

    Code:
    */
    html, body {
    	height:100%;
    	Width: 100%;
    }
    * {
    	outline:none;
    }
    body {
    	margin:0px;
    	padding:0px;
    	background:#000;
    	font-family:'Century Gothic', arial, serif;
    }
    h1, h2, h3, h4, h5, h6 {
    	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    }
    hgroup {
    	position:fixed;
    	z-index:3;
    	left:10px;
    	top:10px;
    	padding:10px;
    	background:url(images/fs_img_g_bg.png);
    	color:#FFF;
    	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    	font-size: 20px;
    	letter-spacing: 1px;
    	text-shadow:rgba(0, 0, 0, 0.50) 0 1px 1px;
    }
    hgroup h1 {
    	margin: 0px;
    	text-shadow:rgba(0, 0, 0, 1) 3px 2px 0;
    }
    hgroup h4 {
    	font-family:'Century Gothic', arial, serif;
    	font-size: 22px;
    	font-weight:normal;
    	margin: 0px;
    }
    hgroup a {
    	text-decoration:none;
    	color: #FFF;
    	border-bottom: 1px dashed #FFF;
    	-webkit-transition: all 1s ease-out;
    	-moz-transition: all 1s ease-out;
    	-o-transition: all 1s ease-out;
    	-ms-transition: all 1s ease-out;
    	transition: all 1s ease-out;
    }
    hgroup a:hover {
    	background: rgba(0, 0, 0, 0.50);
    	-webkit-transition: all 1s ease-out;
    	-moz-transition: all 1s ease-out;
    	-o-transition: all 1s ease-out;
    	-ms-transition: all 1s ease-out;
    	transition: all 1s ease-out;
    }
    #toolbar {
    	position:fixed;
    	z-index:3;
    	right:10px;
    	top:10px;
    	padding:5px;
    	background:url(images/fs_img_g_bg.png);
    }
    #toolbar img {
    	border:none;
    }
    #img_title {
    	position:fixed;
    	z-index:3;
    	right:10px;
    	bottom: 60%;
    	padding:10px;
    	background:url(images/fs_img_g_bg.png);
    	color:#FFF;
    	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    	text-transform:uppercase;
    	font-size: 20px;
    	letter-spacing: 1px;
    }
    #bg {
    	position:fixed;
    	z-index:1;
    	overflow:hidden;
    	width: 100%;
    	height: 100%;
    }
    #overlay {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0px;
    	left: 0px;
    	background: url(images/dotted.png);
    	opacity: 0.3;
    }
    #bgimg {
    	display:none;
    	-ms-interpolation-mode: bicubic;
    }
    #preloader {
    	position:relative;
    	z-index:3;
    	width:32px;
    	padding:20px;
    	top:80px;
    	margin:auto;
    	background:#000;
    }
    #thumbnails_wrapper {
    	z-index:2;
    	position:fixed;
    	bottom:0%;
    	width:100%;
    	height: 205px;
    	background:url(images/empty.gif);
    }
    .nextImageBtn, .prevImageBtn {
    	display:block;
    	position:absolute;
    	width:50px;
    	height:50px;
    	top:50%;
    	margin:-25px 10px 0 10px;
    	z-index:3;
    	filter:alpha(opacity=40);
    	-moz-opacity:0.4;
    	-khtml-opacity:0.4;
    	opacity:0.4;
    	-webkit-transition:all .25s linear;
    	-moz-transition:all .25s linear;
    	-o-transition:all .25s linear;
    	-ms-transition:all .25s linear;
    	transition:all .25s linear;
    }
    .nextImageBtn:hover, .prevImageBtn:hover {
    	filter:alpha(opacity=80);
    	-moz-opacity:0.8;
    	-khtml-opacity:0.8;
    	opacity:0.8;
    	-webkit-transition:all .25s linear;
    	-moz-transition:all .25s linear;
    	-o-transition:all .25s linear;
    	-ms-transition:all .25s linear;
    	transition:all .25s linear;
    }
    .nextImageBtn {
    	right:0;
    	background:#000 url(images/nextImgBtn.png) center center no-repeat;
    }
    .prevImageBtn {
    	background:#000 url(images/prevImgBtn.png) center center no-repeat;
    }
    ul.menu {
    	margin:0;
    	margin-top: -70px;
    	padding:0;
    	list-style: none;
    	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    	font-size:14px;
    	width:680px;
    	position:absolute;
    	top:30%;
    	right:0%
    }
    ul.menu a {
    	text-decoration:none;
    	outline:none;
    }
    ul.menu li {
    	float:left;
    	width:170px;
    	height:85px;
    	position:relative;
    	cursor:pointer;
    }
    ul.menu li > a {
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:170px;
    	height:85px;
    	z-index:12;
    	background:transparent url(images/overlay.png) no-repeat bottom right;
    	background-color: rgba(0, 0, 0, 0.75);
    	-moz-box-shadow:0px 0px 2px #000 inset;
    	-webkit-box-shadow:0px 0px 2px #000 inset;
    	box-shadow:0px 0px 2px #000 inset;
    }
    ul.menu li a img {
    	border:none;
    	position:absolute;
    	width:0px;
    	height:0px;
    	bottom:0px;
    	left:85px;
    	z-index:100;
    	-moz-box-shadow:0px 0px 4px #000;
    	-webkit-box-shadow:0px 0px 4px #000;
    	box-shadow:0px 0px 4px #000;
    }
    ul.menu li span.wrap {
    	position:absolute;
    	top:25px;
    	left:0px;
    	width:170px;
    	height:60px;
    	z-index:15;
    }
    ul.menu li span.active {
    	position:absolute;
    	background: rgba(0, 0, 0, 0.75);
    	top:85px;
    	width:170px;
    	height:0px;
    	left:0px;
    	z-index:14;
    	-moz-box-shadow:0px 0px 4px #000 inset;
    	-webkit-box-shadow:0px 0px 4px #000 inset;
    	box-shadow:0px 0px 4px #000 inset;
    	-webkit-box-shadow: 0px 0px 4px #000 inset;
    	-moz-box-shadow: 0px 0px 4px #000 inset;
    	box-shadow: 0px 0px 4px #000 inset;
    	-webkit-border-bottom-right-radius: 15px;
    	-webkit-border-bottom-left-radius: 15px;
    	border-bottom-right-radius: 15px;
    	-moz-border-radius-bottomright: 15px;
    	border-bottom-left-radius: 15px;
    	-moz-border-radius-bottomleft: 15px;
    }
    ul.menu li span span.link, ul.menu li span span.descr, ul.menu li div.box a {
    	margin-left:15px;
    	text-transform:uppercase;
    	text-shadow:1px 1px 1px #000;
    }
    ul.menu li span span.link {
    	color:#fff;
    	font-size:24px;
    	float:left;
    	clear:both;
    }
    ul.menu li span span.descr {
    	color:#0B75AF;
    	float:left;
    	clear:both;
    	width:155px; 
    	font-size:10px;
    	letter-spacing:1px;
    }
    ul.menu li div.box {
    	display:block;
    	position:absolute;
    	width:170px;
    	overflow:hidden;
    	height:170px;
    	top:85px;
    	left:0px;
    	display:none;
    	background:#000;
    }
    ul.menu li div.box a {
    	float:left;
    	clear:both;
    	line-height:30px;
    	color:#0B75AF;
    }
    ul.menu li div.box a:first-child {
    	margin-top:15px;
    }
    ul.menu li div.box a:hover {
    	color:#fff;
    }
    article {
    	display:none
    }
    .image {
    	border: 2px solid rgba(255, 255, 255, 0.15);
    	border-radius: 5px;
    	float: right;
    	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    /* Pop Up */
    #popupAbout, #popupProjects, #popupContact, #popupBlog {
    	height: 600px;
    	width: 900px;
    	overflow: auto;
    	background-color: rgba(0, 0, 0, 0.80);
    	border: 1px solid #cecece;
    	z-index: 15;
    	padding: 20px;
    	color: #FFF;
    	-webkit-box-shadow: 0px 0px 4px #000 inset;
    	-moz-box-shadow: 0px 0px 4px #000 inset;
    	box-shadow: 0px 0px 4px #000 inset;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	-o-border-radius: 10px;
    	-ms-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	border-radius: 10px;
    	margin-top: -50px;
    	visibility: hidden;
    }
    #popupAbout p, #popupProjects p, #popupContact p, #popupBlog p {
    	padding-left: 10px;
    	font-size: 16px;
    	line-height: 24px;
    }
    #popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1 {
    	text-align: left;
    	font-size: 30px;
    	letter-spacing: 1px;
    	border-bottom: 1px dotted #D3D3D3;
    	padding-bottom: 2px;
    	margin: 0;
    }
    #popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose {
    	right: 0;
    	top: 15px;
    	position: absolute;
    	display: block;
    	opacity: 0.5;
    	-webkit-transition:all .25s linear;
    	-moz-transition:all .25s linear;
    	-o-transition:all .25s linear;
    	-ms-transition:all .25s linear;
    	transition:all .25s linear;
    }
    #popupAboutClose:hover, #popupProjectsClose:hover, #popupContactClose:hover, #popupBlogClose:hover {
    	opacity: 1;
    	-webkit-transition:all .25s linear;
    	-moz-transition:all .25s linear;
    	-o-transition:all .25s linear;
    	-ms-transition:all .25s linear;
    	transition:all .25s linear;
    }
    .border {
    	height: 3px;
    	clear: both;
    	border-bottom: 1px dotted #FFF;
    }
    *:focus {
    	outline: none;/* Prevents blue border in Webkit */
    }
    form {
    	font-family:'Century Gothic', arial, serif;
    	width: 350px;
    	margin-left: 25px;
    }
    input, textarea {
    	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    	background-color: #fff;
    	border: 1px solid #ccc;
    	width: 300px;
    	min-height: 30px;
    	display: block;
    	margin-bottom: 16px;
    	margin-top: 8px;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	-o-border-radius: 5px;
    	-ms-border-radius: 5px;
    	-khtml-border-radius: 5px;
    	border-radius: 5px;
    	-webkit-transition: all 0.5s ease-in-out;
    	-moz-transition: all 0.5s ease-in-out;
    	-o-transition: all 0.5s ease-in-out;
    	-ms-transition: all 0.5s ease-in-out;
    	transition: all 0.5s ease-in-out;
    	color: #fff;
    }
    textarea {
    	min-height: 200px;
    	resize:none;
    }
    input:focus, textarea:focus {
    	-webkit-box-shadow: 0 0 25px #ccc;
    	-moz-box-shadow: 0 0 25px #ccc;
    	box-shadow: 0 0 25px #ccc;
    }
    /* The interesting bit */
    input:not(:focus), textarea:not(:focus) {
    	opacity: 0.5;
    }
    input:required, textarea:required {
     background: url("images/asterisk_orange.png") no-repeat 280px 7px;
    }
    input:valid, textarea:valid {
     background: url("images/tick.png") no-repeat 280px 5px;
    }
    input:focus:invalid, textarea:focus:invalid {
     background: url("images/cancel.png") no-repeat 280px 7px;
    }
    input[type=submit] {
    	font-size: 24px;
    	padding: 10px;
    	background: none;
    	opacity: 1.0;
    }
    #social-network img {
    	float: right;
    	margin-left: 20px;
    	opacity: 0.6;
    	-webkit-transition: all 1s ease-out;
    	-moz-transition: all 1s ease-out;
    	-o-transition: all 1s ease-out;
    	-ms-transition: all 1s ease-out;
    	transition: all 1s ease-out;
    }
    #social-network img:hover {
    	opacity: 1;
    	-webkit-transition: all 1s ease-out;
    	-moz-transition: all 1s ease-out;
    	-o-transition: all 1s ease-out;
    	-ms-transition: all 1s ease-out;
    	transition: all 1s ease-out;
    }
    #social-network {
    	float: right;
    	margin-top: -150px;
    	float: left;
    	margin-left: 475px;
    }
    .map {
    	margin-top: -500px;
    	margin-right: 25px;
    	border: 5px solid rgba(255, 255, 255, 0.30);
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	-o-border-radius: 5px;
    	-ms-border-radius: 5px;
    	-khtml-border-radius: 5px;
    	border-radius: 5px;
    	float: right;
    }
    .date {
    	float: left;
    	position: relative;
    	margin-right: 10px;
    	padding: 44px 5px 0;
    }
    .date .month {
    	text-transform: uppercase;
    	font-size: 25px;
    }
    .date .day {
    	font-size: 35px;
    	line-height: 45px;
    	position: absolute;
    	left: 5px;
    	top: 0;
    }
    .date .year {
    	display: block;
    	position: absolute;
    	right: -5px;
    	top: 15px;
    	-webkit-transform: rotate(-90deg);
    	-moz-transform: rotate(-90deg);
    	-o-transform: rotate(-90deg);
    	-ms-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    Last edited by ralph.m; Dec 17, 2012 at 16:09. Reason: added code tags


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
  •