aspx Web Page heading positioning

Question

0.00/5 (No votes)

See more:

, +

Hi, I seem to have a problem regarding the positioning of the heading in my local server web pages.

The following is the problem:

http://i622.photobucket.com/albums/tt301/kidown/HomeScreen.jpg

here is the code I currently have.

at site.master page

XML

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Project_Thesis.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <%--   <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />--%>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Project Thesis V2.0</title>
<meta name="Carlos Buhagiar" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
    <h1><a href="#">Project Thesis 2.0</a></h1>
    <h2>By Carlos Buhagiar</h2>
</div>
<div id="menu">
    <ul>
        <li><a href="Home.aspx">Home</a></li>
        <li><a href="Results.aspx">Search</a></li>
        <li><a href="Results.aspx">Current Book Database</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>
<hr />
<div style="clear: both;">&nbsp;</div>
<!-- end #page -->
<hr />
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear">
</div>
<div id="footer">
    <p>(c) 2014 Project V2.0.</p>
    <p>Design and Source from <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a></p>
</div>
</body>
</html>

at the home.aspx page

XML

<%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Home.aspx.cs" Inherits="Project_Thesis._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <div id="home">
	<div id="content">
		<div class="post">
			<h2 class="title"><a>Introduction Project V2.0</a></h2>
			<div class="entry">
				<p>Welcome to my Book Search Project V2.0</p>
				<p>In order to search a book click on 'Search' at the top of the screen.</p>
                <p>Enjoy and Happy Searching! :)</p>
			</div>
			<!--<p class="meta"><span class="byline">Posted by <a href="#">Someone</a> on December 22, 2007</span> <a href="#" class="comments">18 comments</a></p>-->
		</div>
        </div>
     </div>
</asp:Content>

When I try to move the location of stuff using the design view it does not let me. Only 1 thing in each line, cant even do spaces in the same line which is strange.

Also sometimes I get the error with direct browsing not enabled. any ideas on how to enable it?

here is the style CSS of the template:

CSS

  1  /*
  2  Design by Free CSS Templates
  3  http://www.freecsstemplates.org
  4  Released for free under a Creative Commons Attribution 2.5 License
  5  */
  6  
  7  * {
  8      margin: 0;
  9      padding: 0;
 10  }
 11  
 12  body {
 13      background: #000000 url(images/img01.gif) repeat-x;
 14      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 15      font-size: 13px;
 16      color: #999999;
 17  }
 18  
 19  h1, h2, h3 {
 20  }
 21  
 22  h1 {
 23      font-size: 3em;
 24  }
 25  
 26  h2 {
 27      letter-spacing: -1px;
 28      font-size: 2em;
 29  }
 30  
 31  h3 {
 32      font-size: 1em;
 33  }
 34  
 35  p, ul, ol {
 36      margin-top: 1.8em;
 37      line-height: 180%;
 38  }
 39  
 40  ul, ol {
 41      margin-left: 3em;
 42  }
 43  
 44  blockquote {
 45      margin-left: 3em;
 46      margin-right: 3em;
 47  }
 48  
 49  a {
 50      color: #CCCCCC;
 51  }
 52  
 53  a:hover {
 54      text-decoration: none;
 55      color: #FFFFFF;
 56  }
 57  
 58  hr {
 59      display: none;
 60  }
 61  
 62  /* Header */
 63  
 64  #header {
 65      width: 960px;
 66      height: 80px;
 67      margin: 0 auto;
 68      background: url(images/img02.jpg);
 69  }
 70  
 71  #header h1, #header h2 {
 72      float: left;
 73      margin: 0;
 74      text-transform: uppercase;
 75      color: #FFFFFF;
 76  }
 77  
 78  #header h1 {
 79      padding: 30px 0 0 20px;
 80      font-size: 3em;
 81  }
 82  
 83  #header h2 {
 84      padding: 47px 0 0 8px;
 85      font-size: 1.8em;
 86      font-style: italic;
 87  }
 88  
 89  #header a {
 90      text-decoration: none;
 91      color: #FFFFFF;
 92  }
 93  
 94  /* Menu */
 95  
 96  #menu {
 97      width: 960px;
 98      height: 51px;
 99      margin: 0 auto;
100      background: url(images/img03.jpg);
101  }
102  
103  #menu ul {
104      margin: 0;
105      padding: 0;
106      list-style: none;
107      line-height: normal;
108  }
109  
110  #menu li {
111      float: left;
112      padding: 12px 10px 0 20px;
113  }
114  
115  #menu a {
116      text-decoration: none;
117      letter-spacing: -1px;
118      font-size: 1.2em;
119      font-weight: bold;
120  }
121  
122  #menu a:hover {
123      text-decoration: underline;
124  }
125  
126  /* Page */
127  
128  #page {
129      width: 920px;
130      margin: 0 auto;
131      padding: 30px 20px 20px 20px;
132      background: url(images/img04.jpg) no-repeat;
133  }
134  
135  /* Content */
136  
137  #content {
138      float: left;
139      width: 605px;
140  }
141  
142  .post {
143      margin-bottom: 40px;
144  }
145  
146  .post .title {
147      border-bottom: 1px solid #454545;
148  }
149  
150  .post .title a {
151      text-decoration: none;
152  }
153  
154  .post .entry {
155      padding: 0 20px;
156  }
157  
158  .post .meta {
159      height: 20px;
160      padding: 15px 20px;
161      background: url(images/img05.gif) no-repeat;
162      line-height: normal;
163  }
164  
165  .post .meta a {
166      text-decoration: none;
167      font-weight: bold;
168  }
169  
170  .post .meta a:hover {
171      text-decoration: underline;
172  }
173  
174  .post .meta .byline {
175      float: left;
176  }
177  
178  .post .meta .comments {
179      float: right;
180  }
181  
182  /* Sidebar */
183  
184  #sidebar {
185      float: right;
186      width: 295px;
187  }
188  
189  #sidebar ul {
190      margin: 0;
191      padding: 0;
192      list-style: none;
193  }
194  
195  #sidebar li {
196  }
197  
198  #sidebar li ul {
199      padding: 0 0 20px 20px;
200      list-style: square inside;
201  }
202  
203  #sidebar h2 {
204      height: 50px;
205      padding: 13px 20px 0 20px;
206      background: url(images/img06.gif) no-repeat;
207      font-size: 1.6em;
208  }
209  
210  /* Search */
211  
212  #search {
213      padding: 20px;
214      text-align: center;
215  }
216  
217  #search input {
218      margin-bottom: 10px;
219      padding: 3px 5px;
220      background: #1F1F1F url(images/img06.gif) no-repeat center center;
221      border: 1px solid #454545;
222      font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
223      color: #FFFFFF;
224  }
225  
226  #search #s {
227      width: 80%;
228      background: #1F1F1F;
229  }
230  
231  /* Calendar */
232  
233  #calendar {
234      padding-bottom: 20px;
235  }
236  
237  #calendar table, #calendar caption {
238      width: 80%;
239      margin: 0 auto;
240      text-align: center;
241  }
242  
243  #calendar caption {
244      text-transform: uppercase;
245      letter-spacing: .25em;
246      font-weight: bold;
247  }
248  
249  #calendar thead th {
250      background: #333333;
251  }
252  
253  #calendar tbody td {
254      background: #111111;
255  }
256  
257  #calendar a {
258      text-decoration: none;
259      font-weight: bold;
260  }
261  
262  #calendar a:hover {
263      text-decoration: underline;
264  }
265  
266  /* Footer */
267  
268  #footer {
269      width: 960px;
270      margin: 0 auto;
271      padding: 20px 0;
272      background: url(images/img07.gif) no-repeat;
273  }
274  
275  #footer p {
276      margin: 0;
277      line-height: normal;
278      text-align: center;
279  }

I found another CSS called site.css, here are the contents

CSS

/* DEFAULTS
----------------------------------------------------------*/

body
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline
{
    display: inline;
}

legend
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

Thanks!!

Posted 26-Jan-14 8:32am

slayasty

Updated 27-Jan-14 8:13am

Kornfeld Eliyahu Peter

v4

Add a Solution

Comments

Kornfeld Eliyahu Peter 26-Jan-14 15:05pm

It seems as CSS problem - can you share your css with us...

slayasty 26-Jan-14 15:33pm

well this is also the problem with the default template.

but here is the link of the template: http://www.freecsstemplates.org/preview/stargazer/

Kornfeld Eliyahu Peter 27-Jan-14 2:35am

I can't see that code for you - please bring up the relevant CSS (for your page) and put it into the OP (improve question)...

slayasty 27-Jan-14 4:43am

mm would it make a difference if here index.html is in the project or not? i cant improve the question right now because im not at my computer. i shall update the question when i get home later. thanks

slayasty 27-Jan-14 13:15pm

ok i added the css. i tried to copy the style.css of the template into the site.css (i think thats the one that is used for the program) but now gives me the "Web server is configured to not list the contents of this directory." and i cant seem to fix it :/

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2014-01-27T07:30:00

Solution 2

My response is about the first CSS you posted...
In the rule .footer add clear:both; to put the footer under main content.

See line 268 in the first CSS and change like this:

CSS

#footer {
  clear: both;
  width: 960px;
  margin: 0 auto;
  padding: 20px 0;
  background: url(images/img07.gif) no-repeat;
}

Posted 27-Jan-14 7:30am

Kornfeld Eliyahu Peter

Updated 27-Jan-14 8:16am

v2

Comments

slayasty 27-Jan-14 14:08pm

mm I did do that but now everytime I run the program it gives the The Web server is configured to not list the contents of this directory error. I did enable the directory browsing but did not work. hope it can be solved! :)

Kornfeld Eliyahu Peter 27-Jan-14 14:14pm

First of all never enable directory browsing!
Roll back your changes and then see updated solution...

slayasty 27-Jan-14 15:07pm

ooh. can you tell me why never enable directory browsing? :) mm its still giving me the same error :x

Kornfeld Eliyahu Peter 27-Jan-14 15:42pm

Directory browsing is unsafe as it can expose info about your directory structure - most successful hacking start with a bit of inside intelligent...
"still giving me the same error" - can you elaborate on it?

slayasty 27-Jan-14 16:06pm

mm. well here is a screenshot: http://s622.photobucket.com/user/kidown/media/forbidden403.jpg.html

Kornfeld Eliyahu Peter 27-Jan-14 16:12pm

It's about missing default document. Right-click on your default page in the solution and select 'Set as default page'

V5709 · Answer 2 · 2014-01-30T18:18:00

Hi, try to use div elements to arrange controls in your page..
Replace your particular design part with fallowing & make modifications as per your requirement..If possible after getting your proper design try to remove inline styles for div to centralized css file . Hope this will help you! :)

ASP.NET

<div style="height: 200px">
     <div style="float: left; width: 40%">
         <p>
             <asp:label id="lblBookTitle" runat="server" text="Book Title" ></asp:label>
              :</p>
         <p>
             <asp:textbox id="txtBookTitle" runat="server" ></asp:textbox>
         </p>
         <p>
             <asp:label id="lblISBNNo" runat="server" text="ISBN Number :" ></asp:label>
         </p>
         <p>
             <asp:textbox id="TXtISBNNo" runat="server" ></asp:textbox>
         </p>
         <p>
             <asp:button id="btnSearch" runat="server" text="Search"  />
         </p>
     </div>
     <div style="float: left; width: 50%">
         <p>
             <asp:image id="Image1" runat="server" imageurl="http://i622.photobucket.com/albums/tt301/kidown/backgroundpic.jpg"
                 Height="150px" Width="120px" />
         </asp:image></p>
     </div>
 </div>

V5709 · Answer 3 · 2014-01-26T19:31:00

Solution 1

Check for all css classes & also attributes which are uncommon.Check if there is any online reference in your site for css,jquery or jscript. Though this problem persists with default template also,you can remove it . :)

Posted 26-Jan-14 19:31pm

V5709

Updated 26-Jan-14 19:33pm

v2

Comments

slayasty 27-Jan-14 12:12pm

hi, im afraid I do not understand what you mean. how do I check this?

V5709 28-Jan-14 1:50am

I not found any positioning issue with template specified inprovided URL. It was working fine for me.

URL-"http://www.freecsstemplates.org/preview/stargazer/"

For positioning problem, try by commenting fallowing part in css.
-------------------------
* {
margin: 0;
padding: 0;
}
------------------

** for Direct browsing problem check this link -"http://support.microsoft.com/kb/942062"

slayasty 28-Jan-14 14:09pm

mm adjusting the px on the margin seemed to work. now if I want to add a picture, is it possible to put it anywhere I want in the page? how do I do so because it will only allow me to put it in the same line as a textbox and acts part of that same <p></p>. Thanks again!

for reference here is what I have for the image: <asp:Image ImageUrl="~/images/textback1.jpg" runat="server" Height="161px" Width="173px" />

V5709 30-Jan-14 0:16am

Why it will restrict for putting contents in different line ?
May be i am not getting your question clearly.. So if possible post your design part as just you posted above. Where you want to use image in page & for what purpose? tell me what you want to do in little bit brief..

slayasty 30-Jan-14 12:09pm

Hi, here is the screenshot of the design view.http://s622.photobucket.com/user/kidown/media/backgroundpic.jpg.html

I would like to have that book picture to the right without having to seperate the label from the textboxes. I hope that clarifies my problem :)

V5709 31-Jan-14 0:10am

Please refer my second one solution...

aspx Web Page heading positioning

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0

aspx Web Page heading positioning

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us