How do I add text or images to the right hand side of a web page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Digital Media Final Project—Using HTML5 & 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>©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!
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;
Similar Messages
-
How do i add a reminders list (to do list?) like there us d to be on the right hand side of iCal?
How do i add a reminders list (to do list?) like there used to be on the right hand side of iCal?
Sorry - I linked the article for iOS Reminders. You are posting in the Mountain Lion forum, but you have listed the OS X for Snow Leopard. What OS X are you running?
Here is the support article for all devices and computers using Reminders:
iCloud: Calendar Events, Reminders, To Dos, and Tasks behavior differs by application - Apple Support
GB -
How do I force all Tabs to the right hand side, leaving space on the left?
It feels more intuitive to have the first tab against the right hand side and it's easier to find because it always remains in the same position when, eg, closing other tabs. I use TabMixPlus, but can't find the required option. Many thanks.
You can check out code in the userChrome.css file to see that it doesn't really work well (tabs move around when you hover or click).
Add code to the <b>userChrome.css</b> file below the default @namespace line.
*http://kb.mozillazine.org/userChrome.css
<pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#tabbrowser-tabs tab:first-child {-moz-box-ordinal-group:2}
</nowiki></pre>
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the <b>chrome</b> folder in the Firefox profile folder.
*http://kb.mozillazine.org/Editing_configuration
You can use this button to go to the currently used Firefox profile folder:
*Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
* Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
* Use a plain text editor like Notepad to create a (new) userChrome.css file in this folder (the names are case sensitive)
* Paste the code in the userChrome.css file in the editor window and make sure that the userChrome.css file starts with the default @namespace line
* Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.<br>Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file -
When i type my email, the text would go on and on and overflows. I mean to say it doesn't autmatically hit the right hand side wall and change to next line! I have to manually press enter and then next line starts. Started happening suddenly.pls help.
Does it happen when you reply to an email? If so, it might be that there's content in the original email (like an image or something similar) that overflows the window content, therefore the Mail app, when you hit the border, follows the content below instead of going on a new line. You might wanna try that.
Also: Please do not post the whole question in the question title. -
For no apparent reason my Mac (2 GHz PowerPC G5) running 10.4.11 has put a mesh-like pattern over the folders on my desktop and also a band of the same pattern across the top of the screen and down the right-hand side over the dock. (See screen grabs below.)
It doesn't affect any operations but makes folder names and drop-down menus difficult to read through the pattern.
I'm not aware of changing any settings so suspect I must have clicked on something without noticing. How do I get rid of the overlaid pattern, please?Information about my computer is as follows:
Machine Name: iMac G5
Machine Model: PowerMac8,2
CPU Type: PowerPC G5 (3.1)
Number Of CPUs: 1
CPU Speed: 2 GHz
L2 Cache (per CPU): 512 KB
Memory: 1 GB
Bus Speed: 667 MHz
Boot ROM Version: 5.2.5f1
It looks like this at the back: -
I had to change my Hard Drive, now I want to work on files in iWeb, but can't access Time Machine before yesterday. The dates are there on the right hand side but are greyed out before yesterday when I changed my HD. How do I access anything from before?
Start with B5/6 in the 1st linked article.
Time Machine Troubleshooting
Time Machine Troubleshooting Problems -
How to i get the main picture to change after editing it on the right hand side?
help ..i was emailed a document that i can edit...made the corrections on the right hand side, but cannot get the main document to change it
Email edit right side main document change it may mean something to you but I bet most of us are in the dark.
Supply pertinent information for quicker answers
The more information you supply about your situation, the better equipped other community members will be to answer. Consider including the following in your question:
Adobe product and version number
Operating system and version number
The full text of any error message(s)
What you were doing when the problem occurred
Screenshots of the problem
Computer hardware, such as CPU; GPU; amount of RAM; etc. -
How do I hide the right hand side menu thing in CS3?
What's the deal with the annoying new menu in CS3 on the right hand side taking up unnecessary space on my screen? how do I get rid of it? All I want is my layer and history pallette. All the rest I want to hide. And if I want to remove the tool bar, how do I do this? it doesn't have a close box anymore? Also every time I open a file now, it opens up with the black background as default. How do I go back to the old way where it just opens a window?
What's the deal with the annoying new menu in CS3 on the right hand side taking up unnecessary space on my screen?
how do I get rid of it? All I want is my layer and history pallette. All the rest I want to hide.
Click the very top part of each pallet and this minimizes everything in that pallet to the side. If you want to close the pallet altogether, be sure it is open and then click the "x" in the top right of that pallet.
And if I want to remove the tool bar, how do I do this? it doesn't have a close box anymore?
Don't think that can be done anymore.
Also every time I open a file now, it opens up with the black background as default. How do I go back to the old way where it just opens a window?
I'm guessing you need to hit the "F"key a few times (if this fixes it then it really isn't the "background" color that has changed). Otherwise you can change it here when opening a new file: -
When viewing e-mails, how do I get the message on the right-hand side?
When viewing my e-mails, the full message does not show up on the right-hand side. How can I get the complete message to appear on the right side?
Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.
or
Reset the iPad by holding down on the sleep and home buttons at the same time for about 10-15 seconds until the Apple Logo appears - ignore the red slider - let go of the buttons. -
Downloaded the newest itunes, now I can no longer see the "cheap" movies listed on the links to the right hand side. Where did they go, and how do I now get to them? I tried search and that didn't work.
Are they gone completely from the computer, or just no longer in the library? Check your movie media folder.
If your'e in the USA you can download some movies a second time, but not all (studio dependent). You should always back up all media. -
On the mobile version of my site all the 100% width elements and images have a small white gap running along the right hand side. This looks very unprofessional. There are no other elements outside the area. Any ideas anyone? All advice would be greatly appreciated! Thanks
Hello,
I have checked you site on the phone and it seems that Zak is correct.
Please go to the phone layout and make sure there is no element out side the browser area at the right side.
You can simply do Select All to find if anything is outside the browser area. If you find anything you either need to delete it or you need to bring it in the browser area.
If still an issue please share he muse file with us and we will investigate it further.
Regards
Vivek -
How do I find a file to reconnect my missing file to when it doesn't show on the right hand side?
How do I reconnect a missing file when it doesn't show on the right hand side?
What do you mean by "missing file", or "reconnect", or "right side"?
You haven't given us enough information to understand what you're referring to, much less to help you. -
my iphone screen has gone white with a few grey lines down the right hand side.. Has anyone any idea how I can solve this and get my screen back to normal..? Thanks
Hi tag71,
If you are having issues with the display on your iPhone, you may find the Display portion of the following article helpful:
iPhone: Hardware troubleshooting
http://support.apple.com/kb/ts2802
Regards,
- Brenden -
How do I add a BG image to the adobe bridge web gallery??
Does anyone know how to add a background image to the web photo gallery in Adobe Bridge? I know how to change the bg color, but what if I wanted to add a bg image? How do I do it???
Probably by getting the answer in the Bridge forum. (this be Lightroom)
-
How do I move my tabs back to the left hand side of the screen?
Until today, all of my open tabs have appeared in a top to bottom column running down the left hand side of my screen, which works great.
When I logged in a few minutes ago, the tabs appeared for the first time in a horizontal row running across the bottom of the screen. I would like to reposition the tabs list to its original orientation and location. How do I do that?That is not a built-in option in Firefox, you must have an add-on that has added that capability. There are several add-ons that can move the tab bar, check your installed add-ons to see if one of them has that option.
Maybe you are looking for
-
Father's macbook now mine. How can I change name, admin, etc without losing apps and programs?
Hello. My father bought a Macbook Pro 15' retina 8Gb ram 256Gb SSD about 2 months ago. He set it up, bought many apps and programs but eventually got bored of it and gave it to me. He is not a Mac enthusiast and thought he should give it a try but h
-
Adding HP Laserjet 4200N Printer
I'm trying to set up this printer to work with my iMac and I'm having no luck. Someone please point me in the right direction. 1. I installed the driver found on hp.com 2. Connected the printer to my iMac with a USB printer cable 3. Went to Print & F
-
Including gauges, bars, pie-diagram etc in Web Dynpro program
Hi Experts, I am developing one Web Dynpro program. In this program, we have to include fancy features like progress bars, pie-diagram, gauges etc. These items should be related to some R/3 table. For example, if total hours allocated for some work i
-
XML File Tags Validation Using Oracle.
Dear Forum Members, I have a doubt regarding XML File Tags Validation. First I will explain My Requirement. 1. I have to generate an XML File in a Predefined Format. 2. User will add some data in the elements, or he may copy the same elements and cha
-
Capture the rows selected in a multiselect table view (BSP)
Hi, My requirement is: I have a table view in which I can select multiple rows. I will be selecting some rows, and pressing a button. Functionality of button is written in Javascript, to open a popup window. But how will I capture which all rows were