Skip navigation
chineseadam
chineseadam Calculating status...
Currently Being Moderated

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

Jul 5, 2012 11:32 AM

Tags: #dreamweaver #html5 #js #css3

<!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!

913 Views   2 Replies   Latest reply: chineseadam, Jul 6, 2012 4:20 AM
 
Replies
  • mytaxsite.co.uk
    Currently Being Moderated
    1. mytaxsite.co.uk,
    Jul 5, 2012 5:43 PM   in reply to chineseadam
    Report

    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.

     
    |
    Mark as:
  • chineseadam
    Currently Being Moderated
    2. chineseadam,
    Jul 6, 2012 4:20 AM   in reply to mytaxsite.co.uk
    Report

    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;

              }

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points