Image Placement

< Previous Demonstration Next Demonstration >

V & A Water Front - Capetown
A centred image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas at leo eget nisl porta viverra. Ut laoreet, dui at tempus vestibulum, eros leo egestas neque, id adipiscing odio eros et lectus. Vivamus pretium lorem sit amet nulla. Praesent nec dolor at augue ultrices blandit. Quisque aliquet ultrices mi.

Wine Farm
Image set to the left

Donec ac nibh. Phasellus sed sem sed mauris mattis laoreet. Ut fermentum augue ac pede. Duis vitae augue sed nulla lacinia tempor. Pellentesque non ante in magna tincidunt malesuada. Nunc eu mi. Nulla adipiscing posuere nunc. Donec congue, sem vitae aliquam sagittis, tellus lectus laoreet libero, in interdum mi dui ut tellus. Nam pulvinar nibh a ante. Maecenas laoreet placerat ante. Vivamus feugiat magna ut leo. Integer sed risus. Quisque porttitor massa a sem. Sed mollis, purus vel condimentum tristique, enim wisi gravida erat, at hendrerit libero neque sit amet felis. Duis quis erat sed est vestibulum viverra.

Sed eu wisi. Praesent nunc. Pellentesque porttitor, augue quis commodo accumsan, purus lorem ullamcorper eros, eu mollis wisi sapien vel lectus. Vivamus metus wisi, sollicitudin a, bibendum quis, dictum ut, lectus. In hac habitasse platea dictumst. Cras eget purus. Vestibulum turpis.

Light House
Image set to the right

Sed ultricies, neque id cursus pretium, nibh tellus eleifend metus, sit amet tempus augue magna at dolor. Proin eleifend. Sed laoreet pharetra quam. Sed gravida pharetra eros. Praesent feugiat. Vestibulum in ligula. Sed in tellus sed lorem pretium accumsan. Vivamus fringilla, neque ac venenatis varius, orci pede lobortis est, quis volutpat arcu leo vel mauris. Curabitur imperdiet nunc nec nunc. Sed vitae nulla ut metus pretium suscipit. Vivamus tortor mauris, consequat nec, convallis vitae, feugiat ac, eros. Nunc nulla magna, vestibulum vitae, dignissim at, convallis in, turpis. Duis scelerisque. Etiam arcu metus, consectetuer non, pretium vel, tincidunt bibendum, nibh. Mauris eget mi. Morbi ipsum. Vivamus imperdiet ullamcorper quam.

HTML
CSS
Other Resources
Contact

<p class="image-centre">
  <img src="images/capetown/sign.jpg" width="400" height="195" alt="V & A Water Front - Capetown" />
  <br />A centred image
</p>

<p class="image-left">
  <img src="images/capetown/barrel.jpg" width="200" height="150" alt="Wine Farm" />
  <br />Image set to the left
</p>

<p class="image-right">
  <img src="images/capetown/lighthouse.jpg" width="150" height="200" alt="Light House" />
  <br />Image set to the right
</p>

img{
  padding:5px;
  margin:0;
  border:#DBDBDB solid 1px;
  -moz-box-shadow: 2px 2px 5px #DBDBDB;
  -webkit-box-shadow: 2px 2px 5px #DBDBDB;
  box-shadow: 2px 2px 5px #DBDBDB;
}

.image-centre, .image-left, .image-right{
  font-family:"Times New Roman", Times, serif;
  font-style: italic;
  text-align:center;
}

.image-centre{
  text-align:center;
  padding:10px;
  margin:0;
}

.image-left{
  float:left;
  padding:5px 20px 10px 5px;
  margin:0;
}

.image-right{
  float:right;
  padding:5px 5px 10px 20px;
  margin:0;
}

CSS: Advanced mouse-over; Buttons; Centre page horizontally and vertically; Cross browser transparency; CSS3 techniques; Drop caps; Links with image prompts; MLA essay formatting; The Power of unordered lists & CSS; Simple link list; Simpe mouse-over; Web safe fonts

Pictures: Automated CSS & javascript image viewer with sliding thumbnail strip; Enhance Photographs with a caption, border & drop shadow; Fancybox photograph gallery; Lightbox photograph gallery; Image Placement and Styling; Image Rotator; Magnify images with Gzoom; Magnify photographs with jqZoom; Random photograph gallery; Shadowbox photograph gallery; Simple CSS & javascript image viewer with centred thumbnail strip; Simple CSS & javascript image viewer with sliding thumbnail strip; Zoom in on an image using MooZoom

JavaScript: Animated Scrolling; Equal column heights; Show / Hide text; Tabbed Content; Validaiting target="_blank"

PHP: Easy to implement PHP e-mail contact form; Use CSS to style your e-mail PHP form

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org

Website Development ResourcesCHouseLive

Image Placement and Styling

Website Development Resources
CHouseLive