aligning text exactly beneath images.I have 2 rows of images, 3 images in each row

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<html>

<head>
 
<title>Page Title</title>

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

</head>

<body>
 
<div id="wrapper">

<header>

<div id="logo" >

<h2> Company <br> Logo</h2>

</div>
 
<div id="contactbox">

<div id="contacttext">

<p>02&nbsp;9988&nbsp;7766&nbsp;(p)<br/>

info@company.com&nbsp;(e)<br/>

www.company.com&nbsp;(w)</p>

</div>

</div>
 
</header>

<section>
 
<div id ="right">

    <div id="gallery">

    <h3>Gallery</h3>

    </div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%%; margin-left: 5%;" 
 
alt="Gallerylayout"/>

<span class = "caption">Text below image</span>

</div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%; margin-left: 5%;" 
 
alt="Gallerylayout"/>
 
</div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%; margin-left: 5%;" 
 
alt="Gallerylayout"/>
 
</div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%; margin-left: 5%;" 
 
alt="Gallerylayout"/>
 
</div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%; margin-left: 5%;" 
 
alt="Gallerylayout"/>
 
</div>
 
<div class = "item">

<img src="http://bytes.com/images/personalImage.jpg" style ="float: left; width: 25%; margin-left: 5%;" 
 
alt="Gallerylayout"/>
 
</div>
 
</div>
 
<div id="left">

<div id="nav">

<h3>Navigation</h3>

</div>

<div id ="text">

<ul style="list-style-type: none;">

<li>&gt;Home</li>

<li>&gt;About&nbsp;Us</li>

<li>&gt;Gallery</li>

<li>&gt;Contact&nbsp;Us</li>

</ul>

</div>

</div>
 
</section>

<footer>

<p>Copyright&nbsp;2012&nbsp;Company&nbsp;Name</p>

</footer>

</div>
 
</body>

</html>

Expand|Select|Wrap|Line Numbers

 /*@ charset="UTF-8";*/
 
body{

background-color:grey;

font-family: ;

    margin: 0;

}
 
#wrapper

{

background-color: #fff;

margin-left:auto;

margin-right:auto;
 
width:900px;

padding:10px;

}
 
header

{
 
background-color: yellow;

    min-height: 180px;

    padding-top: 10px;

    padding-left: 10px;

    padding-right:10px;

    padding-bottom: 10px;

    margin-bottom:10px;

}

#logo

{

background-color:grey;

color:black;

font-size: 1.9em;

font-family: Verdina;

float:left;

text-align: center;

width: 300px;

height:180px;

margin:auto;
 
}
 
#contactbox

{

background-color:grey;

float:right;

width: 300px;

height:180px;

padding-right: 3%;

}
 
#contacttext

{
 
font-size: 1.3em;

color:black;

text-align:right;

font-weight: bold;

padding-top: 20px;

line-height: 150%;

}
 
#right{
 
    background-color: green;

    margin-bottom:1%;

    margin-top: 1%; 

    width:580px;

    height:600px;

    float:right;

    display: inline-block;

}
 
#gallery{

    text-indent:20px;

    font-size: 18px;

}
 
.item

{

float:left;
 
}
 
#caption{
 
    display: block;

    text-align: left;a
 
}
 
#left{

    background-color: blue;

    margin-bottom:2%;

    margin-top:1%;

    width:300px;

    height:600px;

    float:left;
 
    }
 
#text{

    text-indent: -20px;

    color: white;

    line-height: 200%;

}
 
#nav{
 
text-indent: 20px;

font-size: 18px;

}
 
footer

{

background-color: pink;

    padding-top: 1%;

    padding-right: 2%;

    padding-left: 2%;

    padding-bottom: 2%;

    height:40px;

    clear:both;

                 text-align:center;

    }

please help me thanks

Aug 4 '15 #1

Subscribe Post Reply

7867

Toxicous8

Use the

Expand|Select|Wrap|Line Numbers

 p {

     position:relative; 

     left:npx;

     top:npx; 

     bottom:npx;

     right:npx;

}

on the css."n" refers to the number you input to position it right.But you should know that they work vice versa.For example left takes it to the right.And one last tip,Don't post all your codes when asking questions.

Nov 19 '15 #2

Similar topics

Extracting text from .png images

by: Henrik Berg Nielsen | last post by:

Hi group! I need to extract some text (well numbers actually) from a bunch of similarly looking .png images. After extraction the numbers will be fed to a Python script for further processing....

Python

aligning text with space-normalized text

by: Steven Bethard | last post by:

I have a string with a bunch of whitespace in it, and a series of chunks of that string whose indices I need to find. However, the chunks have been whitespace-normalized, so that multiple spaces...

Python

Vertically aligning text, works in IE not Firebird!?

by: C.W | last post by:

I have a top box element that houses the web site title: #top_section { height: 20px; padding: 10px; text-align: left; background: navy; color: white; }

HTML / CSS

Text Falls Behind Images Contained in Floating DIVs

by: styler | last post by:

I am having difficulty with the page located here: http://tinyurl.com/2zwa9 I am creating a number of image sets (some left-, some right-aligned; an example of the right-aligned is shown the...

HTML / CSS

how to do rows of images without tables?

by: Roberto | last post by:

Hallo, I'm building a page that wants to respect XHTML 1.0 strict and CSS2 specifics. In this page I have to present thumbnails arranged to cover the entire width of the window, but there are...

HTML / CSS

document.images when prefetching images

by: Amir | last post by:

When prefetching images, why do I need the "if (document.images)" statement? if (document.images) { pic1on= new Image(300,300); pic1on.src="pic1.gif"; pic2on= new Image();...

Javascript

table linked to text file producing extra rows

by: Larry Rekow | last post by:

A friend's unix application produces various reports daily as flat text files. I link these files as tables in an Access (2000) database. After linking, all of these reports begin with a...

Microsoft Access / VBA

putting text under floating images

by: cazconv2007 | last post by:

Hi under my floating images i cant get text under them why not? it goes to the side  <div id = "mainnavigation"> <a href = "home.html">Home</a> |<a href = ...

HTML / CSS

Aligning Text

by: unstoppablekatia | last post by:

I have a website that has images on it, and underneath the images are text. My only option of aligning the images and text separate from each other, is to do <div align="right">, <center>, or <div...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General