PDA

View Full Version : Alignment question



SteveH
Feb 25th, 2010, 12:39 PM
Hello

I have a page here:

http://proofreading4students.com/index.asp

I am hoping to put a Flash poll (or possibly another image) alongside the image you can see (of the university graduate). This is scripted as follows:


<ul>
<li><a href="#">Home</a></li>
<li><a href="work.asp">Our work</a></li>
<li><a href="rates.asp">Rates</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
</div>

<img src="./images/banner4.jpg" width="218" height="254" alt="Graduate" title="Graduate">


The page is governed by a main.css file.

Do I simple need another <div></div> to fit the image alongside (I know tables have long gone!)?

Thanks.

Steve

Excavator
Feb 25th, 2010, 06:25 PM
Hello SteveH,
First you'll need to float that image so you can put something beside it. Make your markup look like this - <img src="./images/banner4.jpg" alt="Graduate" title="Graduate" width="218" height="254" id="graduate" />
To float an element you have to specify a width. You have one already, I've also added an id so we can style it from the CSS.

In your CSS, add this - #graduate {float:left;}

Now we can put something beside that photo.
In your markup, add the following bit -
<li><a href="rates.asp">Rates</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
</div>

<img src="./images/banner4.jpg" alt="Graduate" title="Graduate" width="218" height="254" id="graduate">
<div id="newBox">div for new content here</div>
<div id="#">

<h3 class="features">features</h3>
<div id="features">

<p class="main">Nobody likes to read scruffy work, essays peppered with spelling mistakes, or poor
grammar. Our
And in your CSS, something like this -
a { color: #607293; text-decoration: none; }
a:hover { color: #354158;}
#container { width: 500px; margin: auto; padding-top: 30px; padding-bottom: 50px;}
#container #logo { background: url(../img/logo.gif) no-repeat top left; height: 44px; padding-bottom: 5px; border-bottom: 1px solid #797979; margin-bottom: 20px;}
#container #logo h1 { text-indent: -9999px;}
#graduate {float:left;}
#newBox {
height: 254px;
margin: 0 0 0 225px;
background: #fc6;
}
#footer {
width:750px;
margin: 40px 0 0 0;
clear:both;
background: #000;
color: #08088A;

SteveH
Feb 26th, 2010, 02:56 PM
Hello Excavator

Wow! That seems quite involved (a little more complicated than the old <tr><td></td></tr>!!), but I have done it. Or rather you have done it.

What I have noticed is that unless the images (or Flash content) stretch to the full 500px width, a yellow vertical bar appears to compensate.

It's OK I will just refashion the images to fill up the space - it will look a lot better given your input, so many thanks again.

Steve