The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> A little problem with Frames - Please Assist, frames problem
Skylinefox
post Sep 22 2009, 09:33 AM
Post #1





Group: Members
Posts: 2
Joined: 19-April 09
Member No.: 8,377
Hey there,

I am trying to create a layout with an image wrapped around a form table. However I cannot get the right image to align with the header. I would appreciate any help or suggestions on how to fix this.


Here is the screen shot:


IPB Image


Here's the code :


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /
padding: 0;
text-align: center;
color: #000000;
}
.thrColFix #container {
width: 576px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFix #sidebar1 {
float: left;
width: 150px; /
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
.thrColFix #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
.thrColFix #mainContent {
margin: 0 200px;
padding: 0 10px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
.thrColFix #sidebar1 { width: 180px; }
.thrColFix #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFix #sidebar2, .thrColFix #sidebar1 { padding-top: 30px; }
.thrColFix #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColFix">

<div id="container">
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<img src="images/Shure-Header.jpg" width="576" height="406" /><br class="clearfloat" />


<form method="post" action="mailto:stephaniep@sfma.ca">
<table width="359" cellpadding="5" bo >
<tr>
<td width="200">Shure headphones model number</td>
<td width="147">
<input type="text" name="Modelname" size="20">
</td>
</tr>
<tr>
<td height="33"><p>First name</p></td>
<td><input type="text" name="Firstname" size="20"></td>
</tr>
<tr>
<td height="33">Last name</td>
<td><input type="text" name="Lastname" size="20"></td>
</tr>

<tr>
<td height="33">E-mail address</td>
<td><input type="text" name="Email" size="20"></td>
</tr>
<tr>
<td height="33">Studio/Company name</td>
<td><input type="text" name="Company/sStudio" size="20"></td>
</tr>
</table>
<img src="images/Shure-Right-.jpg" width="208" height="412" align="right" />
<div align="top"></div>

<table width="358" >
<tr>
<td>Briefly indicate your experience with your SHR headphones:</td>
</tr>
<td><input type="text" name="Opinion" size="50" height="60"> </td>

</table>
<p><input type="Submit" value="Submit" name="b1"></p>

</form>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 22 2009, 09:58 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Can you post the address (url) of that page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 22 2009, 01:24 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
If you use align="right" on an image, then it will float to the right of where it would have appeared without the attribute. Without the attribute, it would appear below the table, so with the attribute, it appears below the table and to the right.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 07:58 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC