Comment créer une mise en page 2 colonnes dans SharePoint 2010 avec une séparation invisible de 20 px entre les deux colonnes? Je suis coincé!

Question

Je suis nouveau pour SharePoint 2010 Foundation et je dois créer une mise en page personnalisée pour tenir dans ma page maître déjà créée.

J'ai besoin d'une disposition de 2 colonnes avec une séparation de 20px entre les colonnes. (La séparation doit être invisible pour permettre l'affichage de l'image d'arrière-plan)

Je viens du monde de .html et de .css et bien que ce monde et le monde SharePoint soient similaires, ils ne sont pas identiques. Et c'est pourquoi je me tourne vers internet pour vous aider s'il vous plaît.

Sur la route, je devrai être en mesure d'ajuster la largeur de chaque colonne pour l'adapter à différentes mises en page.

Toute aide serait grandement appréciée.

Answer 1

Vous devriez toujours être capable de faire ce dont vous avez besoin avec HTML et CSS. Ci-dessous est un exemple de la tête-sur-tête, mais je pense que vous devriez obtenir l'image de la façon dont vous pourriez le faire.

Master page

<div id="container"> 

    <div id="column1" style="float: left;"> 

     <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" ></asp:ContentPlaceHolder> 

    </div> 

    <div id="column2" style="float: left; margin-left: 20px;"> 

     <asp:ContentPlaceHolder id="PlaceHolderColumn2" runat="server" ></asp:ContentPlaceHolder> 

    </div> 

</div> 

Dans Mise en page

<asp:Content ContentPlaceholderID="PlaceHolderColumn1" runat="server"> 

    Your Column 1 Content 

</asp:Content> 

<asp:Content ContentPlaceholderID="PlaceHolderColumn2" runat="server"> 

    Your Column 2 content 

</asp:Content> 

Answer 2

Une autre façon:

<table width='100%'> 
    <tr> 
    <td width='50%'> 
     <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" > 
     </asp:ContentPlaceHolder> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <img src='1x1 trasnparent sharepoint image' width='20px' /> 
    </td> 
    </tr> 
    <tr> 
    <td width='50%'> 
     <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" > 
     </asp:ContentPlaceHolder> 
    </td> 
    </tr> 
</table> 

mais vous devez trouver l'image, je ne Je ne me souviens pas du nom ..

Answer 3

Messy bien qu'il semble que je me sers:

<table width='100%'> 
    <tr> 
    <td width='48%'> 
    Lorem ipsum dolor sit amet. 
    </td> 
<td width='2%'> 
    &nbsp; 
    </td> 
<td width='48%'> 
    Lorem ipsum dolor sit amet, 
    </td> 
    </tr> 
</table>