Changing Default.aspx Layout

Topics: Developer Discussion, Help
Apr 24, 2007 at 8:25 AM
I entered my page information through the edit option signed in as admin got it to center, but noticed that the login, recent news, new blogs, and events got pushed down the page and are centered.

How do I get the Login box to stay at the top under the banner and nav bar and to the left?

How do I get the New blogs, news, and event boxes the same but on the right?

and keeping the main text centered which was added using the edit pencil in admin mode.
Coordinator
Apr 24, 2007 at 11:47 AM
There are 5 types of <div>s
<div id="columnright">
<div class="rightblock">
<div id="columnleft">
<div class="liftblock">
<div class="fullwidth">

You can't put a fullwidth div into a columnright or left or the page will be messed up. Paste your code... then we can better help you.
Apr 24, 2007 at 3:13 PM
Default page code:

<%@ Page Language="VB" MasterPageFile="~/Default.master" Title="Untitled Page" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register TagPrefix="Club" TagName="ImageThumbnail" Src="~/UserControls/ImageThumbnail.ascx" %>
<%@ Register TagPrefix="Club" Namespace="Clubsite" %>
<%@ Register TagPrefix="Club" TagName="WebContent" Src="~/UserControls/WebContent.ascx" %>

<script runat="server">

Function ShowDuration(ByVal starttime As Object, ByVal endtime As Object) As String
Dim starttimeDT As Date = CDate(starttime)
If Not endtime Is Nothing AndAlso Not IsDBNull(endtime) Then
Dim endtimeDT As Date = CDate(endtime)

If starttimeDT.Date = endtimeDT.Date Then
If starttimeDT = endtimeDT Then
Return starttimeDT.ToString("h:mm tt")
Else
Return starttimeDT.ToString("h:mm tt") & " - " & endtimeDT.ToString("h:mm tt")
End If
Else
Return "thru " & endtimeDT.ToString("d")
End If
Else
Return starttimeDT.ToString("h:mm tt")
End If

End Function

Sub Logout_click(ByVal sender As Object, ByVal e As EventArgs)
FormsAuthentication.SignOut()
Response.Redirect("Default.aspx")

End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
delblock.Visible = User.Identity.IsAuthenticated
If User.Identity.IsAuthenticated Then
Dim manusers As ClubSite.RolloverLink = CType(lv1.FindControl("manageusers"), ClubSite.RolloverLink)
Dim sendmail As ClubSite.RolloverLink = CType(lv1.FindControl("sendemail"), ClubSite.RolloverLink)
manusers.Visible = Page.User.IsInRole("Administrators")
sendmail.Visible = Page.User.IsInRole("Administrators")
End If
End Sub
Protected Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim user As MembershipUser = Membership.GetUser()
Dim da As New DataSetTableAdapters.MemberInfoTableAdapter
da.Delete(CType(user.ProviderUserKey, Guid))
Membership.DeleteUser(user.UserName, True)

FormsAuthentication.SignOut()
Response.Redirect("~/Default.aspx")
End Sub

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<Club:WebContent ID="WebContent1" runat="server" />
<div id="body">
<div id="columnleft">
<a title="contentstart" id="contentstart"></a> 
Apr 24, 2007 at 3:13 PM
Edited Apr 24, 2007 at 3:14 PM
Default page code Continued:

<div class="rightblock">
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>"
SelectCommand="SELECT top 5 dbo.Events.id, dbo.Events.starttime, dbo.events.endtime, dbo.Events.title, dbo.Locations.title AS locationname FROM dbo.Events LEFT OUTER JOIN dbo.Locations ON dbo.Events.location = dbo.Locations.id WHERE (dbo.Events.starttime > GETDATE()) ORDER BY dbo.Events.starttime, dbo.events.id ">
</asp:SqlDataSource>
<h2>
Upcoming Events</h2>
<div class="dashedline">
</div>
<asp:GridView AutoGenerateColumns="False" DataSourceID="SqlDataSource2" ID="GridView1"
runat="server" ShowHeader="False" Width="410px" CssClass="eventlist" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("id","~/Events/download.ashx?Eventid={0}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="id" DataNavigateUrlFormatString="events/view.aspx?eventid={0}"
DataTextField="title"></asp:HyperLinkField>
<asp:TemplateField HeaderText="id" InsertVisible="False" SortExpression="id">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("starttime", "{0:d}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="locationname" HeaderText="locationname" SortExpression="locationname">
</asp:BoundField>
</Columns>
</asp:GridView>
<div class="dashedline">
<a style="float:right;padding-top: 10px;" href="RSS/EventRss.aspx">
<asp:Image ID="Image2" SkinID="rss" runat="server" />
</a></div>
<a href="Events/Calendar.aspx">View all events »
Apr 24, 2007 at 3:21 PM


StyleSheet.css Code:


body
{
font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
margin: 0px;
background: #000000 url('images/background_main.jpg') repeat-y center top;
font-size: 0.7em;

}
a:link
{
color: #c2c2c2;
}
a:visited
{
color: #542100;
}
a:hover
{
text-decoration: none;
color: #02a1fd;
}
a:active
{
text-decoration: none;
color: #000000;
}

input, select, textarea
{
font-size:1em;
font-family: arial, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
}

h1, h2, h3, h4, h5, h6
{
margin: 2px 0 2px 0;
}

h1
{
font-size: 28px;
font-weight: bold;
margin: 5px 0 5px 0;
}


h1 a:link, h1 a:visited, h1 a:hover, h1 a:active
{
text-decoration: none;
color: #000000;
}
.membercard h3
{
font-size: 1em;
}

#loginbanner h2
{
font-size: 1em;
font-weight: normal;
margin-top: 8px;
}

#poster h2
{
font-size: 13px;
font-weight: bold;
color: #50700E;
}
.leftblock h2, .rightblock h2, .fullwidth h2
{
font-size: 1.6em;
}

.rightblock h3
{
font-size: 1em;
font-weight: bold;
margin: 0px;
padding: 0px;
display: block;
}



.eventmonth h3
{
padding-left: 20px;
padding-right: 20px;
}

.eventlist label
{
font-weight: bold;
padding-right: 4px;
}

/************************************************************************
*
  • Main navigation used by the masterpage
*
************************************************************************/

#poster
{
background: url('images/poster.jpg') no-repeat;
margin-right: auto;
margin-left: auto;
width: 726px;
height: 139px;
margin-top: 17px;
}

#navtop, #navbottom
{
background: url('images/backgroundnavmain.gif') repeat-x;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Helvetica, Helvetica-Narrow, Tahoma, sans-serif;
margin-right: auto;
margin-left: auto;
width: 726px;
height: 45px;
}
#navbottom
{
margin-top: 15px;
}

#footer
{
width: 726px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 10px;
padding-bottom: 22px;
color: #C89F3D;
}


#navtop ul, #navbottom ul
{
margin: 0px;
padding-top: 9px;
list-style-type: none;
height: 19px;
text-align: center;
}
#navtop ul li, #navbottom ul li
{
display: inline;
color: #FFFFFF;
margin-right: 25px;
}
#navtop a:link, #navbottom a:link, #navtop a:visited, #navbottom a:visited
{
color: #FFFFFF;
text-decoration: none;
}
#navtop a:hover, #navbottom a:hover
{
text-decoration: underline;
}
#navtop a:active, #navbottom a:active
{
color: #FEFFBD;
text-decoration: none;
}


/************************************************************************
*
  • Formatting common to most pages
*
************************************************************************/

#body
{
width: 726px;
margin-top: 7px;
margin-right: auto;
margin-left: auto;
position:relative;
}

#columnleft
{
float: left;
width: 240px;
}

#columnright
{
margin-left: 245px;
}

.leftblock
{
border: 1px solid #02a1fd;
padding: 15px;
margin-bottom: 10px;
background: #FFFFFF url('images/background_columnleft.gif') repeat-y;
vertical-align: top;
}

.rightblock
{
border: 1px solid #02a1fd;
padding: 15px;
margin-bottom: 10px;
background: #FFFFFF url('images/background_columnright.gif') repeat-y;
position: relative;
width:446px;
}

.clear2column
{
margin:0;
padding:0;
line-height:0;
font-size:0px;
height:0px;
clear: both;
}

/* A full width block on the page */


.fullwidth, #loginbanner
{
border: 1px solid #02a1fd;
width: 694px;
margin-right: auto;
margin-left: auto;
background: #FFFFFF url('images/background_fullwidth.jpg') repeat-y;
margin-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}

#loginbanner
{
padding-bottom: 0px;
}

/* Goes around controls that need to be presented as a block of functionality */
.controlblock
{
border: 1px solid #02a1fd;
padding: 3px;
margin: 2px 0 5px 0;
vertical-align: top;
}

.dashedline
{
border-bottom: 1px dashed #02a1fd;
padding-top: 10px;
margin-bottom: 10px;
clear:right;
}

.actionbuttons
{
text-align:right;
position: relative;
padding: 1px 1px 1px 1px;
}

/************************************************************************
*
  • Calendar specific formatting
*
************************************************************************/

/* Surrounds the calendar */
.eventmonth
{
border: 1px solid #02a1fd;
width: 694px;
margin-right: auto;
margin-left: auto;
background: #FEFFAB url('images/background_fullwidth.jpg') repeat-y;
margin-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
text-align: center;
}

/* used as the cssclass of the actual calendar */
.eventmonthtable
{
width: 694px;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: 15px;
border: 1px solid #02a1fd;
border-collapse:collapse;
}


.dayNumber
{
float: right;
border-bottom: 1px solid #02a1fd;
border-left: 1px solid #02a1fd;
clear: none;
padding: 2px;
}


.calcurrentmonth
{
/* no styles needed at this time */
}
.calothermonth
{
background-color: #DCD78E;
}
.calcurrentday
{
background-color: #FFFFC1;
}
.calweekend
{
background-color: #FEEB95;
}

.calcurrentmonth , .calcurrentmonth , .calothermonth , .calcurrentday , .calweekend
{
text-align: left;
border: 2px solid #02a1fd;
height: 60px;
vertical-align: top;
/* needed for positioning the dayNumber part */
position:relative;
border-collapse:separate;
border-spacing: 5px;

}

/************************************************************************
*
  • Next / previous specific formatting
*
************************************************************************/

.nextlink
{
position:absolute;
right:0;
padding-right:15px;
}



/************************************************************************
*
  • Global formatting
*
************************************************************************/

legend
{
font-weight: bold;
color: #666666;
font-size: 1em;
padding-left: 4px;
padding-right: 4px;
margin-bottom: 7px;
}

form
{
margin: 0px;
}

fieldset
{
margin: 0px;
padding: 0px;
border: none;
}

.hidden
{
visibility: hidden;
}
.none
{
display: none;
}


/************************************************************************
*
  • Image functionality
*
************************************************************************/

.photo
{
background: #FEFFC8 url('images/background_thumbnail.jpg') repeat-x center;
border: solid 1px #02a1fd;
padding: 5px;
}

.picture
{
background: #FEFFC8 url('images/background_thumbnail.jpg') repeat-x center;
border: solid 1px #02a1fd;
padding: 5px;
margin: 5px;
}

/************************************************************************
*
  • List type pages
*
************************************************************************/

.listitem
{
margin:0px 0px 0px 0px;
width:444px;
}

.editbuttons
{
padding-top: 6px;
}

.thumbnail
{
float: right;
margin: 0 0 0 5px;
}

.clearlist
{
clear:right;
margin:0;
padding:0;
height: 0px;
font-size:0px;
line-height:0px;
}

.PageNumbers
{
display:inline;
}

.PageNumbers span
{
padding-left: 3px;
}

.newscrumbs a
{
font-weight: bold;
padding-right: 2px;
}

.membercard
{
background-color: #FEFEB1;
border: 1px solid #02a1fd;
padding: 10px;
margin-bottom: 10px;
width: 198px;
}

.clearcard
{
clear:left;
height:0;
margin:0;
padding:0;
}

#membercardcolumnleft
{
float: left;
position: relative;
}
#membercardcolumnright
{
margin-left: 226px;
}
.membercard p
{
margin: 5px;
}

/************************************************************************
*
  • Compact Event list
*
************************************************************************/

.eventlistdate
{
padding-right: 4px;
}
.eventlisticon
{
text-align: center;
}
.eventlisttime
{
text-align: center;
width: 95px;
}
.eventlistevent
{
font-weight: bold;
}
.eventlistlocation
{
/* no styles needed at this time */
}
.eventlist td
{
padding-bottom: 4px;
}

/************************************************************************
*
  • Page specific
*
************************************************************************/

/* even dowload button */
.downloadevent img
{
margin-right: 5px;
vertical-align: middle;
border: none;
}

/* Header on view details type pages */
.itemdetails
{
font-size: 1.3em;
}



/************************************************************************
*
  • Photo selection controls
*
************************************************************************/

#popupbody
{
font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
margin: 0px;
background: #FED36B;
font-size: 0.7em;
}

#popupinner
{
border: 1px solid #02a1fd;
margin: 5px;
background: #FEFFAB;
padding-left: 15px;

Apr 24, 2007 at 3:22 PM
Stylesheet.css code Continued:

padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}

#popupbody h2
{
font-weight: bold;
margin: 0px;
padding: 1px 0px 5px 5px;
display: block;
}

.selected, .unselected
{
width: 80px;
height: 100px;
text-align: center;
padding: 2px 2px 2px 2px;
}

.unselected
{
background-color: transparent;
border: solid 1px #02a1fd;
}

.selected
{
background: #FED36B;
border: solid 1px #DBDB79;
}

.scrollablelist
{
overflow: auto;
height: 230px;
width: 460px;
border: solid 1px #02a1fd;
}

.scrollablelist2
{
overflow: auto;
height: 230px;
width: 210px;
border: solid 1px #02a1fd;
}


.scrolledtable
{
}

.selectablephoto
{
background: #FEFFC8 url('images/background_thumbnail.jpg') repeat-x center;
border: 1px solid #02a1fd;
padding: 2px;
}

.contextbuttons
{
margin: 5px 3px 5px 3px;

}

/************************************************************************
*
  • Forms
*
************************************************************************/

/* label column */
.formlabel
{
width:120px;
vertical-align: top;
}

/* value column */
.formvalue
{
vertical-align: top;
}

.txtfield
{
width:300px;
}

.txtblock
{
width:300px;
}

/* action buttons */
.button
{
cursor: hand;
background: transparent url('images/button.png') no-repeat 0% 0%;
padding: 0;
width: 123px;
height: 40px;
border: none;
overflow: hidden;
font: corbel;
font-size: 17px;
color: #02a1fd;
padding-bottom: 5px;
}
.button:hover {
background: transparent url('images/button.png') no-repeat 0% -40px;
}

Coordinator
Apr 24, 2007 at 10:37 PM
So what's the problem area?
Apr 25, 2007 at 5:55 AM
I entered my page information through the edit option signed in as admin got it to center, but noticed that the login, recent news, new blogs, and events got pushed down the page and are centered.

1How do I get the Login box to stay at the top under the banner and nav bar and to the left?

2How do I get the New blogs, news, and event boxes the same but on the right?

3and keeping the main text centered which was added using the edit pencil in admin mode.

I dont know the problem area...
Tried changing setting around in the stylesheet.css got the login box over to float left and stay at the top but the News, blog etc... on the default page is not staying even with the login under the nav bar and to the right. Float: Right; makes all the boxes dissapear and using a margin-right: Xpx; of more then 1000px makes the boxes drop way down in the page. And it leaves a 200px or so margin on the right of the screen and a scroll bar horizontal pops on the browser. Trying to get the login in box on the left top and the other boxes on the top right to the edge of the page. Without changing position with a change of viewing resolution.



-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
Banner - Poster.gif
-------------------------------------------------------------------------------------------------------------------
Navigation Bar
-------------------------------------------------------------------------------------------------------------------
------------------------------------------ --------------------------------------------------------------------------------------------------------------------- ----------------------------------------------
Login Box Center Material - Typing etc.... Edited New News
at admin logon and clicking pencil.gif
------------------------------------------ --------------------------------------------------------------------------------------------------------------------- ----------------------------------------------
----------------------------------------------
Blog top 5 etc...
----------------------------------------------
------------------------------------------------------------------------------------------------------------------------
Bottom Repeat Nav Bar
------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------
Copyright Info
----------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Drew a lilltle picture to maybe help what I was looking for the Default page layout to look like or the result of what I am tring to do...

Hope this helps and sorry about being so confusing

Apr 25, 2007 at 5:58 AM
Ok the picture got all screwed up is there an email that I can send a gif or jpeg to you so you understand what I am trying to do with this?
Coordinator
Apr 28, 2007 at 4:26 PM
yea... zowens@eagleenvision.net

send a screenshot.
Apr 28, 2007 at 9:49 PM
After a lot of tinkering and giving the default page its own section in the css I finally got it to look the way I wanted thanks though