Page layouts

[Joe_Fox]

Hi,
I'm struggling a bit here for some reason so hope someone can help me.
I'm doing some html for a web page layout and a section is really doing my head in and I cannot get it right with the table tags.

I usually use divs but can't on this occasion (for one reason or another).

The section I have has the following elements (outlined in red lines on the image):

1. Title
2. Image
3. Content

The layout I am after is this:



Could someone please knock up the basic html for this? The tricky bit is making the page content text wrap around the image.

Thanks,
Joe

 

[Macky]

If you absolutely insist on using a table (there is NO good reason for doing so) just put it all within one <td> and float the image to the left

 

[Matt_B]

If you absolutely insist on using a table (there is NO good reason for doing so) just put it all within one <td> and float the image to the left

I concur. But use divs, I don't even want to know the reason why you can't.

 

[Joe_Fox]

ok, if I could use divs, what would the html be?

 

[Macky]

ok, if I could use divs, what would the html be?

<div><img style='float:left' src='redHat.png' /><h2>Red Hat Entertainment</h2>
<p>Enter content here.....</p></div>

 

[Joe_Fox]

Ok, the complication is that it is a SharePoint page layout and uses various SharePoint web controls, etc.

Here is the code for the table currently:

<table cellpadding="2" >
<tr>
<TH valign="top" align = "left"><PublishingWebControls:RichImageField FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</TH>
<td valign="top" align="left"><div class="custom-page-title"><SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top" align="left"><PublishingWebControls:RichHtmlField id="PageContent1" FieldName="CFGPageContent1" runat="server"/>
</td>
</tr>
</table>

I can't use the float property on the image as it is using the SharePoint 'PublishingWebControls'.

 

[Matt_B]

Why can't you use align="left" on the img tag?

 

[Macky]

Ok, the complication is that it is a SharePoint page layout and uses various SharePoint web controls, etc.

Here is the code for the table currently:

<table cellpadding="2" >
<tr>
<TH valign="top" align = "left"><PublishingWebControls:RichImageField FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</TH>
<td valign="top" align="left"><div class="custom-page-title"><SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top" align="left"><PublishingWebControls:RichHtmlField id="PageContent1" FieldName="CFGPageContent1" runat="server"/>
</td>
</tr>
</table>

I can't use the float property on the image as it is using the SharePoint 'PublishingWebControls'.

What html do those web controls output?

 

[Joe_Fox]

Not sure what you mean.

Basically, if I could float the image to the top right of the (table) section and have the title always at the top next to it and let the page content fill the rest of the space to the right of the image and underneath the title and then continuing underneath the image if the content ran on past the image, I'd be happy!

 

[Macky]

Not sure what you mean.

Basically, if I could float the image to the top right of the (table) section and have the title always at the top next to it and let the page content fill the rest of the space to the right of the image and underneath the title and then continuing underneath the image if the content ran on past the image, I'd be happy!

When you view the generated page in a browser, what html replaces the code for the web controls?


You could try:

<div style='float:left'>
<PublishingWebControls:RichImageF ield FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</div>

That would have the same effect as floating the image

 

[Joe_Fox]

When you view the generated page in a browser, what html replaces the code for the web controls?

<table cellpadding="2" >
<tr>
<div style='float:left'><div id="ctl00_PlaceHolderMain_ctl00__ControlWrapper_RichImageField" style="display:inline"><span dir=""><a href="http://site" target="_blank"><img alt="Visit client's website" border=0 src="/offices/PublishingImages/redhat.png" width=150 style="border:0px solid"></a></span>&nbsp;</div>
</div>
<td valign="top" align="left"><div class="custom-page-title" align="left">Red Hat Entertainment&nbsp;</div><div id="ctl00_PlaceHolderMain_PageContent1__ControlWrapper_RichHtmlField" style="display:inline">Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter <br>
<br>
<a href="/CFG/RedHatEntertainment/Pages/ClientOverview.aspx">Click here for more details</a>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top" align="left">
</td>
</tr>
</table>

 

[Joe_Fox]

You could try:

<div style='float:left'>
<PublishingWebControls:RichImageF ield FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</div>

That would have the same effect as floating the image

What goes around the rest of this though Macky (i.e. for the title and content)

 

[Macky]

<div style='float:left'><PublishingWebControls:RichImageF ield FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</div><div class="custom-page-title"><SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField></div>
<PublishingWebControls:Rich HtmlField id="PageContent1" FieldName="CFGPageContent1" runat="server"/>

 

[Joe_Fox]

<div style='float:left'><PublishingWebControls:RichImageF ield FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</div><div class="custom-page-title"><SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField></div>
<PublishingWebControls:Rich HtmlField id="PageContent1" FieldName="CFGPageContent1" runat="server"/>

This ends up looking like this though:

View attachment 5967

If I change it to:

<table cellpadding="2" >
<tr>
<div style='float:left'><PublishingWebControls:RichImageField FieldName="CFGImage1" runat="server"></PublishingWebControls:RichImageField>
</div><div class="custom-page-title" align="left"><SharePointWebControls:TextField FieldName="Title" runat="server"></SharePointWebControls:TextField></div>
<td valign="top" align="left"><PublishingWebControls:RichHtmlField id="PageContent1" FieldName="CFGPageContent1" runat="server"/>
</td>
</tr>
</table>

Then it looks like this:



...but the text is still not wrapping around the image.

 

[Macky]

If you have the content in a separate table cell, it will never wrap around the image.

Can you post the generated html for the first image? Also, are you able to edit the stylesheet?

 

[Joe_Fox]

If you have the content in a separate table cell, it will never wrap around the image.

Can you post the generated html for the first image? Also, are you able to edit the stylesheet?

Macky, I could kiss you!

sussed it - as this section was an element of a larger page layout with other tables, rows, etc, there was an outlying TR tag that all this sat in. Removing this has meant that the text now wraps like a mo fo.

The only trouble is, when I edit the page in sharepoint, it all looks a bit weird but that's not as important as the proper view when the page is published.

Thanks Macky (and Beights a bit)

 

[Steven]

Macky, I could kiss you!

sussed it - as this section was an element of a larger page layout with other tables, rows, etc, there was an outlying TR tag that all this sat in. Removing this has meant that the text now wraps like a mo fo.

The only trouble is, when I edit the page in sharepoint, it all looks a bit weird but that's not as important as the proper view when the page is published.

Thanks Macky (and Beights a bit)

As Macky's agent that will be sixty pounds per hour or part thereof.

 

[Joe_Fox]

Ok, I'm going to reopen this one.

Apparently the code I used is not xhtml compliant:

<table>
     <divstyle="float: left;">...</div>
     <divclass="custom-page-title">...</div>
     <div>...</div>
 </table>

Any ideas what I need to do to make it compliant?

Thanks,
Joe

 

[bocadillo]

Ok, I'm going to reopen this one.

Apparently the code I used is not xhtml compliant:

<table>
     <divstyle="float: left;">...</div>
     <divclass="custom-page-title">...</div>
     <div>...</div>
 </table>

Any ideas what I need to do to make it compliant?

Thanks,
Joe

Shouldn't it be <div style... and <div class... with a space after the div in each case?

 

[Joe_Fox]

Shouldn't it be <div style... and <div class... with a space after the div in each case?

It might help if I put the code in properly! Sorry.

It is like this but still not compliant:

<table>
     <div style="float: left;">...</div>
     <div class="custom-page-title">...</div>
     <div>...</div>
 </table>