Layout of Web Page

[seafordcrownfc]

Really wasn't sure which room this should go in, so I went for general.

http://i178.photobucket.com/albums/w268/seafordcrownfc/eg1.jpg

Basically I want the information shown underneath the picture to be on the right hand side of the picture as opposed to underneath it. I'm not too sure how to do this though. Below is my HTML/ASP.Net.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:Repeater id="rptProfile" runat="server" DataSourceID="AccessDataSource1">
<ItemTemplate>
<div class="pageTitle">
<%# Eval("playername") %>
</div>
<div class="pageBody">
<asp:Image ID="imgplayer" runat="server" ImageUrl='<%# Eval("picture") %>' />

</div>
<div class="pageBody">
DOB : <%# Eval("dob") %>
<br />
Position : <%# Eval("favouriteposition") %>
<br />
Joined Club : <%# Eval("joinedclub") %>
<br />
Left Club : <%# Eval ("leftclub") %>
<br />
<%# Eval ("profile") %>
</div>

</ItemTemplate>
</asp:Repeater>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/stfc.mdb"
SelectCommand="SELECT [playername], [nickname], [dob], [favouriteposition], [joinedclub], [leftclub], [profile], [picture] FROM [player] where [playerID] = @playerID">
<SelectParameters>
<asp:QueryStringParameter Name="playerID" QueryStringField="playerID" />
</SelectParameters>
</asp:AccessDataSource>
</asp:Content>

Thanks in advance

[stormyeyedbear]

For that section, I would suggest creating a wrapper for the divs containing the pic and the info. Shown in red below. Then you could float the two inner divs, pic to the left, info to the right. Shown in blue below.


<div id="userinfobox"><!--Begin userinfobox-->
<div class="pageBody" style="Float:left">
<asp:Image ID="imgplayer" runat="server" ImageUrl='<%# Eval("picture") %>' />

</div>
<div class="pageBody" style="Float:right">
DOB : <%# Eval("dob") %>
<br />
Position : <%# Eval("favouriteposition") %>
<br />
Joined Club : <%# Eval("joinedclub") %>
<br />
Left Club : <%# Eval ("leftclub") %>
<br />
<%# Eval ("profile") %>
</div>
</div><!--End userinfobox-->

Hope that gets you going in the right direction.

[seafordcrownfc]

Thanks for that, that works perfectly.

The only problem I have however, is that I want some information to go underneath all of that (4 data grids) and when I try and do that they get mixed up in the right hand side as well.

[stormyeyedbear]

You could try putting the data grids in a new div, and giving it the style property style="Clear:Both" This should cause the grids to drop below the other user information box. See the red code below.


<div id="datagrid" style="Clear:Both"><!--Begin Data Grid-->
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/stfc.mdb"
SelectCommand="SELECT [playername], [nickname], [dob], [favouriteposition], [joinedclub], [leftclub], [profile], [picture] FROM [player] where [playerID] = @playerID">
<SelectParameters>
<asp:QueryStringParameter Name="playerID" QueryStringField="playerID" />
</SelectParameters>
</asp:AccessDataSource>
</div><!--End Data Grid-->


Hope that helps some.

[ray326]

I'd be wary of playing fast and loose with capitalization, though.