homepage Welcome to WebmasterWorld Guest from 54.196.196.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
div tag styling issue
format the <div>
jankajg




msg:3819097
 11:11 pm on Jan 4, 2009 (gmt 0)

I have the following aspx code. I want this to look such that home link is on the left corner (left aligned) and the rest on the right corner (right aligned).

Apologies for such basic question. But I ama dumbo as far as html, css is concerned.

any help would be much appreciated.

Thank
Janak

<td colspan="10" bgcolor="#AE3B08" align="right" width="1027px">
<div style="text-align:left;color:White;display:inline">
<asp:HyperLink ID="hlHome" runat="server" ForeColor="white" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div style="text-align:right;color:White;display:inline;">
<asp:LoginView ID="LoginArea" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HlLogin" runat="server" NavigateUrl="~/Login.aspx" ForeColor="white">Login</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome, {0}" />&nbsp;&nbsp;&nbsp;&nbsp;
<asp:HyperLink ID="HLLogout" runat="server" NavigateUrl="~/Logout.aspx" ForeColor="white">Logout</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:HyperLink ID="hlAdmin" runat="server" ForeColor="white">Admin</asp:HyperLink>&nbsp;&nbsp;
</div>
</td>

 

le_gber




msg:3821984
 3:54 pm on Jan 8, 2009 (gmt 0)

Hi jankajg and welcome to WebmasterWorld,

Do you know how wide each section (home, rest of the nav) are? You could just give each a width and play with margin to separate them.

Alternatively try floating the home div to the left and the other dive to the right with
float:left and float:right replacing display:inline in both div inline styling.

jankajg




msg:3822046
 4:37 pm on Jan 8, 2009 (gmt 0)

apologies for posting the incomplete code. But that was due to lack of understanding on actual html ui + css.
After spending 'nights under the bulb' i have finally resolved the issue

here is the complete code with the solution

container{
width:100%;
}
#home-container{
width:50%;
text-align:left;
color:White;
padding-left:25px;
float:left;
}
#login-container{
width:50%;
text-align:right;
color:White;
padding-right:25px;
}

<td colspan="10" bgcolor="#AE3B08" align="right" width="1027px">

<div id="container">
<div id="home-container">
<asp:HyperLink ID="hlHome" runat="server" ForeColor="white" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</div>
<div id="login-container">
<asp:LoginView ID="LoginArea" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HlLogin" runat="server" NavigateUrl="~/Login.aspx"

ForeColor="white">Login</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome, {0}"

/>&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="HLLogout" runat="server" NavigateUrl="~/Logout.aspx"

ForeColor="white">Logout</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="hlAdmin" runat="server" ForeColor="white">Admin</asp:HyperLink>&nbsp;&nbsp;
</div>
</div>
</td>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved