Trying to make content area wider : The Official Microsoft ASP.NET Forums

Reply

Trying to make content area wider

Apr 26, 2012 06:14 PM|LINK

Here is my masterpage and the css liked to it. I'm trying to make the part inside wider, like 1200px. I tried changing the .header class, but no change.

Can anyone see what needs to be done to widen the content area?

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>

<!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" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Stuff Here
                </h1>
            </div>
           </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>

/* 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;
}

Thank you

Jackxxx

Reply

Re: Trying to make content area wider

Apr 26, 2012 06:17 PM|LINK

Which part exactly are you trying to make wider. I notice in the css that the page class has a width of 960

"He who would learn to fly one day must first learn to stand and walk and run and climb and dance; one cannot fly into flying."

Friedrich Nietzsche

Reply

Re: Trying to make content area wider

Apr 26, 2012 06:22 PM|LINK

I had tried changing the page class also and it made no change. I need the entire inner part of the page to be wider. Currently if you load this there is a grey background and then the other area is centered within it. I need that inner area wider, like 1200px wide.

Thank you

Jackxxx

Reply

look2bar

Member

240 Points

292 Posts

Re: Trying to make content area wider

Apr 26, 2012 06:27 PM|LINK

tried chaging the size on this

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

from 420px to etc

Reply

rickjames961

Participant

775 Points

174 Posts

Re: Trying to make content area wider

Apr 26, 2012 06:28 PM|LINK

The body element is the root element of that area so explicity setting a width on that should work... What happens if you do?

"He who would learn to fly one day must first learn to stand and walk and run and climb and dance; one cannot fly into flying."

Friedrich Nietzsche

Reply

Jackxxx

Contributor

3060 Points

2809 Posts

Re: Trying to make content area wider

Apr 26, 2012 06:31 PM|LINK

I think the body is the entire area. I only want to widen the area where the page and header classes are.

Thank you

Jackxxx

Reply

rickjames961

Participant

775 Points

174 Posts

Re: Trying to make content area wider

Apr 26, 2012 06:47 PM|LINK

Im not sure where the problem is here, i would start by setting different color borders around each of my containers, and continuing to work thorugh it. I always find it sooner or later...im just not seeing it here.

"He who would learn to fly one day must first learn to stand and walk and run and climb and dance; one cannot fly into flying."

Friedrich Nietzsche

Reply

Jackxxx

Contributor

3060 Points

2809 Posts

Re: Trying to make content area wider

Apr 26, 2012 08:58 PM|LINK

Here is a funny thing. I have been pulling my hair out trying to find the issue.

What I found in my many trials is that if I leave off the px next to the 960 in the page class, the middle section is full screen width.

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

Thank you

Jackxxx

Reply

Catherine Sh...

All-Star

23382 Points

2490 Posts

Microsoft

Re: Trying to make content area wider

May 03, 2012 08:10 AM|LINK

Hi Jackxxx,

If you want to make the content area wider, you need to set the width of the page as 1200px. That will meet your reqirement. Please change the css below:

.page
{
    width: 1200px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}
.main
{
    background-color:Blue;
    padding : 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
     width:500px;
}

Please test it locally. When you use the css above, you will find the difference.

In addition, you can press F12 to open IE Develop Tool to debug. That will help you to find CSS.

Best wishes,

Please mark the replies as answers if they help or unmark if not.
Feedback to us

Develop and promote your apps in Windows Store

Marked as answer by Catherine Shan - MSFT on May 07, 2012 01:57 AM

Trying to make content area wider RSS

8 replies

Jackxxx

Trying to make content area wider

rickjames961

Re: Trying to make content area wider

Jackxxx

Re: Trying to make content area wider

look2bar

Re: Trying to make content area wider

rickjames961

Re: Trying to make content area wider

Jackxxx

Re: Trying to make content area wider

rickjames961

Re: Trying to make content area wider

Jackxxx

Re: Trying to make content area wider

Catherine Sh...

Re: Trying to make content area wider

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft