2 Replies Latest reply on Jul 6, 2012 4:20 AM by chineseadam

    How do I add text or images to the right hand side of a web page?

    chineseadam

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8" />

      <title>Digital Media Final Project&mdash;Using HTML5 &amp; CSS3</title>

      <meta name="Digital Media MA 2012" content="width=device-width" />

      <link rel="stylesheet" href="css/html5reset-1.6.1.css" media="screen" />

      <link rel="stylesheet" href="css/default.css" media="screen" />

      <link rel="stylesheet" href="css/css3enterprise.css" media="screen" />

       

       

      <!--[if lte IE 8]>

                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                <link rel="stylesheet" href="css/ie.css" media="screen" />

                <link rel="stylesheet" href="css/pie.css" media="screen">

      <![endif]-->

      <!--[if gte IE 7]>

                <link rel="stylesheet" href="css/pie78.css" media="screen" />

      <![endif]-->

      <!--[if IE 8]>

                <link rel="stylesheet" href="css/ie8.css" media="screen" />

      <![endif]-->

      <!--[if lte IE 7]>

                <link rel="stylesheet" href="css/ie7.css" media="screen" />

      <![endif]-->

      <!--[if lte IE 6]>

                <link rel="stylesheet" href="css/ie6.css" media="screen" />

      <![endif]-->

      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Six+Caps" />

                          <link rel="stylesheet" type="text/css" href="styles/screen.css" />

                          <!--[if lte IE 9]>

                                    <link rel="stylesheet" type="text/css" href="styles/ie.css" />

                          <!--<![endif]-->

      </head>

      <body>

                <div id="page" class="group">

                          <header id="site-header" role="banner">

                                    <hgroup>

                                              <h1>Silence in Vogue</h1>

                                              <h2>A sociological artifact using technology to tell stories.</h2>

                                    </hgroup>

                                    <a id="skip-nav" href="#content">Skip to main content</a>

                          </header>

                          <nav id="site-nav" role="navigation">

                                    <ul class="inline-list flush-left">

                                              <li><a href="index.html">Home</a></li>

                                              <li><a href="about.html">Mission Statement</a></li>

                                              <li><a href="research.html">Research</a></li>

                                              <li><a href="artifacts.html" class="active"></a></li>

                                              <li><a href="upload.html">Upload</a></li>

                                              <li><a href="http://www.renaissancedigital.co.uk/" title="Home | Renaissance Digital">Renaissance.Digital</a></li>

                                    </ul>

                          </nav>

                          <nav id="user-nav">

                                    <ul class="inline-list flush-left">

                                              <li><a href="#">@username</a></li>

                                              <li><a href="#">dashboard</a></li>

                                              <li><a href="#">inbox (42)</a></li>

                                              <li><a href="#">logout</a></li>

                                    </ul>

                          </nav>

                  <div id="content" role="main">

                                    <section id="content-main" role="region">

                                      <h1>Artifacts</h1>

       

       

                                              <ul class="rollover">

                                                        <li><img src="images/image1.jpg" width="282" height="211" margin-right= "20" alt="The Earth" />

                                                          <h3>The Earth</h3>

                            <hr/>

                                                <a class="button" href="#" title="Click here for more information"><h6>More Info</h6></a> </li>

                                      <p><li>

                                                                  <img src="images/image2.jpg" width="282" height="211" margin-right= "20" alt="E-Mirror" />

                                                          <h3>EMirror</h3>

                            <hr/>

                                                          <a class="button" href="#" title="Click here for more information"><h6>More Info</h6></a> </li>

                                      <p><li>

       

                                                                  <img src="images/image3.jpg" width="282" height="211" margin-right= "20" alt="void" />

      <h3>something else</h3>

                                                                  <hr/>

                                                                  <a class="button" href="#" title="void"><h6>More Info</h6></a>

                                                        </li>

      <li>

                                                                  <img src="images/image4.jpg" width="282" height="211" alt="Monkey's Dream" />

      <h3>A Monkey's Dream</h3>

                                                                  <hr />

                                                                  <a class="button" href="#" title="Click here for more information"><h6>More Info</h6></a>

                                                </li>

                          <li> <img src="images/image3.jpg" width="282" height="211" margin-right= "20" alt="void" />

      <h3>something else</h3>

                                                                  <hr/>

                                                                  <a class="button" href="#" title="void"><h6>More Info</h6></a><li>

                                                                  <img src="images/image3.jpg" width="282" height="211" margin-right= "20" alt="void" />

      <h3>something else</h3>

                                                                  <hr/>

                                                                  <a class="button" href="#" title="void"><h6>More Info</h6></a></li>

                                                        </li>

       

       

      <li><img src="images/image3.jpg" width="282" height="211" margin-right= "20" alt="void" />

      <h3>something else</h3>

                                                                  <hr/>

                                                                  <a class="button" href="#" title="void"><h6>More Info</h6></a>

                                                </li>

      <li>

                                                                  <img src="images/image3.jpg" width="282" height="211" margin-right= "20" alt="void" />

      <h3>something else</h3>

                                                                  <hr/>

                                                                  <a class="button" href="#" title="void"><h6>More Info</h6></a>

                                                </li>

       

                                              </ul>

                                    </div>

       

                  </div>

             <!-- //#content-main --><!-- //#content-sub -->

                          </div><!-- //#content -->

                          <footer id="site-footer" role="contentinfo">

                                    <p id="awkward">Our Think Tank is virtual:</p>

                                    <ul id="footer-icons" class="inline-list no-bullets">

                                              <li><a id="icon-twitter" href="#">Twitter</a></li>

                                              <li><a id="icon-wordpress" href="#">Wordpress</a></li>

                                              <li><a id="icon-facebook" href="#">Facebook</a></li>

                                              <li><a id="icon-linkedin" href="#">LinkedIn</a></li>

                                              <li><a id="icon-vimeo" href="#">Vimeo</a></li>

                                              <li><a id="icon-flickr" href="#">Flickr</a></li>

                                              <li><a id="icon-dribbble" href="#">Dribbble</a></li>

                                              <li><a id="icon-gowalla" href="#">Gowalla</a></li>

                                              <li><a id="icon-sharethis" href="#">ShareThis</a></li>

                                              <li><a id="icon-technorati" href="#">Technorati</a></li>

                                              <li><a id="icon-rss" href="#">RSS</a></li>

                                    </ul>

                                    <div id="copy">

                                              <p>&copy;2012 Renaissance.Digital ltd. </p>

                                    </div><div id="container">

                                    <div id="head">

       

                                    </div>

       

                </div><!-- //#page -->

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

      <!--[if lte IE 8]>

                <script src="js/selectivizr.js"></script>

                <script src="js/css3-mediaqueries.js"></script>

      <![endif]-->

      <!--[if lte IE 6]>

                <script src="js/ie6.js"></script>

      <![endif]-->

      <script src="js/functions.js"></script>

      </body>

      </html>

       

      not sure if there is a conflict with css's!

       

      Message was edited by: chineseadam  I put a little note at the very bottom of the document!

        • 1. Re: How do I add text or images to the right hand side of a web page?
          mytaxsite.co.uk Level 6

          You will be better off posting a link to your test page for us to help

          you.  We need to see the page to advice you.

           

          However, you may want to look at float properties of CSS.  float:

          right;  is something you need to look at to get some ideas.

          • 2. Re: How do I add text or images to the right hand side of a web page?
            chineseadam Level 1

            Ok.  Here you are...

            http://www.silenceinvogue.org/artifacts.html

             

            I added float right as you said but the images moved into the middle.

             

            Here is the css:

             

            body {

                                margin:                              0;

                                padding:                    0;

             

                                font-size:                    62.5%;

                      }

             

                      #container {

                                position:                    relative;

                                width:                              960px;

                                margin:                              auto;

             

                      }

             

                      #head {

                                position:                    relative;

                                text-align:                    center;

                      }

             

                      h1 {

                                font-size:                    6em;

                                font-weight:          normal;

                                text-transform:          uppercase;

                      }

             

                      #content {

                                position:                    relative;

             

                      }

             

                      ul.rollover {

                                position:                    relative;

                                margin:                              0;

                                padding:                    0;

                      }

             

                      ul.rollover li {

                                background:                    #d1d694 url(libg.jpg) no-repeat center center;

                                position:                    relative;

                                list-style:                    none;

                                margin:                              0;

                                padding:                    0;

                                width:                              200px;

                                height:                              125px;

                                overflow:                    hidden;

                                border:                              20px solid white;

                                float:                              left;

                                margin-right:          20px;

                                margin-left:          20px;

                                margin-bottom:          40px;

                                -webkit-box-shadow:                    0px 0px 10px #333;

                                -moz-box-shadow:                    0px 0px 10px #333;

                                -ms-box-shadow:                    0px 0px 10px #333;

                                -o-box-shadow:                    0px 0px 10px #333;

                                box-shadow:                    0px 0px 10px #333;

                      }

             

                      ul.rollover li img {

                      z-index:                    30;

                      position:                    absolute;

                      top:                              0px;

                      left:                              0px;

                      -webkit-transition:all 0.7s ease-out;

                      -moz-transition:all 0.7s ease-out;

                      -ms-transition:all 0.7s ease-out;

                      -o-transition:all 0.7s ease-out;

                      width: 280px;

                      height: 168px;

                      }

             

                      ul.rollover li:hover img {

                                -webkit-transform: scale(6);

                                -moz-transform:           scale(6);

                                -ms-transform:           scale(6);

                                -o-transform:           scale(6);

                                opacity:                              0;

                      }

             

                      ul.rollover li h2 {

                                font-size:                              3em;

                                color:                                        #333;

                                margin:                                        0;

                                padding:                              0;

                                line-height:                    1.5em;

                                letter-spacing:                    0.1em;

                                text-align:                              center;

                                text-transform:                    uppercase;

                                -webkit-transition: all 0.5s ease-in;

                                -webkit-transform:          scale(0.1);

                                -moz-transition:           all 0.5s ease-in;

                                -moz-transform:                    scale(0.1);

                                -ms-transition:           all 0.5s ease-in;

                                -ms-transform:                    scale(0.1);

                                -o-transition:           all 0.5s ease-in;

                                -o-transform:                    scale(0.1);

                                opacity:                              0;

                      }

             

                      ul.rollover li:hover h2 {

                                padding-top:                    30px;

                                -webkit-transform:          scale(1);

                                -moz-transform:                    scale(1);

                                -ms-transform:                    scale(1);

                                -o-transform:                    scale(1);

                                opacity:                              1;

                      }

             

                      ul.rollover li hr {

                                width:                                        0px;

                                color:                                         #333;

                                background-color:           #333;

                                border:                                        none;

                                height:                               2px;

                                margin:                                        auto;

                                -webkit-transition:          all 0.6s linear;

                                -moz-transition:          all 0.6s linear;

                                -ms-transition:                    all 0.6s linear;

                                -o-transition:                    all 0.6s linear;

                      }

             

                      ul.rollover li:hover hr {

                                width:                                        100px;

                      }

             

             

                      ul.rollover li p {

                                font-family:                    helvetica, arial, sans-serif;

                                text-transform:                    uppercase;

                                margin:                                        0;

                                padding:                              0;

                                font-size:                              1.1em;

                                padding:                              20px;

                                text-align:                              center;

                                text-tranform:                    uppercase;

                                -webkit-transition: all 0.6s ease-in;

                                -webkit-transform:          scale(0.1);

                                -moz-transition:           all 0.6s ease-in;

                                -moz-transform:                    scale(0.1);

                                -ms-transition:           all 0.6s ease-in;

                                -ms-transform:                    scale(0.1);

                                -o-transition:                     all 0.6s ease-in;

                                -o-transform:                    scale(0.1);

                                opacity:                              0;

                      }

             

                      ul.rollover li:hover p {

                                -webkit-transform:          scale(1);

                                -moz-transform:                    scale(1);

                                -ms-transform:                    scale(1);

                                -o-transform:                    scale(1);

                                opacity:                              1;

                      }

             

                      ul.rollover li a.button {

                                display:                              block;

                                text-align:                              center;

                                font-family:                    helvetica, arial, sans-serif;

                                position:                              relative;

                                text-transform:                    uppercase;

                                letter-spacing:                    0.2em;

                                padding:                              4px;

                                text-decoration:          none;

                                font-size:                              1.6em;

                                background:                              #333;

                                color:                                        #d1d694;

                                width:                                        60px;

                                margin-left:                    125px;

                                border:                                        none;

                                -webkit-transition: all 0.6s ease-in;

                                -webkit-transform:          translateY(230px) scale(5);

                                -moz-transition:           all 0.6s ease-in;

                                -moz-transform:                    translateY(230px) scale(5);

                                -ms-transition:           all 0.6s ease-in;

                                -ms-transform:                    translateY(230px) scale(5);

                                -o-transition:                     all 0.6s ease-in;

                                -o-transform:                    translateY(230px) scale(5);

                                opacity:                              0;

                                cursor:                                        pointer;

                                z-index:                              50;

                      }

             

                      ul.rollover li:hover a.button {

                                -webkit-transform:          translateY(0) scale(1);

                                -moz-transform:                    translateY(0) scale(1);

                                -ms-transform:                    translateY(0) scale(1);

                                -o-transform:                    translateY(0) scale(1);

                                opacity:                              1;

                      }