asked on

asp.net - Master Page Issue - Margins...

See the code snippet attached..I have the master page set, the way it should be..but now I have an issue with surrounding the page/margins...I I want to add color, add a border pic...not sure..any ideas how to do that?

Paul MacDonald

I don't see a code snippet, but since the content container is usually a function of the master page, page margins, etc, should be set there. If you can post your code sample, someone may be able to lend a hand.

GlobaLevel

ASKER

oops...

<%@ Master Language="VB" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:white;
            font:14px Georgia,Serif;
        }
        .content
        {
            width:1000px;
            margin:auto;            
            background-color:white;
            padding:10px;
        }
        .header
        {
            width:1000px;
            height:150px;
            border:1px solid grey;
        } 
        .submenu
        {
            z-index:9999; /* ie8 fix*/
            /*http://stackoverflow.com/questions/3882319/asp-net-menu-control-horizontal-not-showing-sub-options*/

        }
    
        .breadCrumb
        {
            width:1000px;
            height:30px;
            border:1px solid red;
        }
        .menu
        {
            width:1000px;
            height:100px;
            border:1px solid blue;
        }
        
        .menu_top_margin
        {
            width:1000px;
            height:30px;
            border:1px solid blue;
        }
        .centerSection
        {
            width:1000px;
            height:502px;
        }
        .leftSide
        {
            width:200px;
            height:500px;
            border:1px solid green;
            float:left;
        }
        
        .firstbuffer
        {
            width:30px;
            height:500px;
            border:1px solid orange;
            float:left;
        }
        
        
        .mainContent
        {
            width:482px;
            height:500px;
            border:1px solid orange;
            float:left;
        }
        
        .secondbuffer
        {
            width:30px;
            height:500px;
            border:1px solid orange;
            float:left;
        }
        
        .rightSide
        {
            width:248px;
            height:500px;
            border:1px solid orange;
            float:right;
        }
        
        .rightSide_margin_top
        {
            width:212px;
            height:30px;
            border:1px solid orange;
            float:left;
        }   
        
        .rightSide_top
        {
            width:212px;
            height:200px;
            border:1px solid orange;
            float:left;
        }
        
        .rightSide_margin_mid
        {
            width:212px;
            height:30px;
            border:1px solid orange;
            float:left;
        }     
        
        .rightSide_bottom
        {
            width:212px;
            height:200px;
            border:1px solid orange;
            float:left;
        }      
        
        .upperFooter
        {
            width:1000px;
            height:200px;
            border:1px solid brown;
        }
        
        
        .footer
        {
            width:1000px;
            height:80px;
            border:1px solid grey;
        }
        
        .1_nav_button
        {
            float:left;
            top:60%;
            width:26%;
            border: 1px solid #000;
            text-align:left;
           position:absolute;
        }
        
        .2_nav_button
        {
             float:left;
            width:26%;
            border: 1px solid #000;
            text-align:left;
            position:absolute;
        }
        
        .3_nav_button
        {
            float:left;
            width:26%;
            border: 1px solid #000;
            text-align:left;
            position:absolute;
        }
        
        .4_nav_button
        {
            float:left;
            width:26%;
            border: 1px solid #000;
            text-align:left;
            position:absolute;
        }
        
        .5_nav_button
        {
            float:left;
            width:26%;
            border: 1px solid #000;
            text-align:left;
            position:absolute;
        }
        
        
        </style>
        
        
    <title>Site Master</title>
</head>
<body>
<form id="form1" runat="server">    
<div class="content">
    <div class="header">
        <asp:contentplaceholder id="Header" runat="server">    
        </asp:contentplaceholder>
    </div>

    <div class="menu">
        <asp:contentplaceholder id="Menu" runat="server">
        </asp:contentplaceholder>
        
        
        
        
        
    </div>
    
    
    <div class="breadCrumb"> 
        <asp:contentplaceholder id="Bread_Crumb" runat="server">        
        </asp:contentplaceholder>
    </div>
    
    
    <div class="centerSection">
    
        <div class="leftSide">
            <asp:contentplaceholder id="Left_Side_Nav" runat="server">            
            </asp:contentplaceholder>
        </div>
        
           <div class="firstbuffer">
            <asp:contentplaceholder id="first_buffer_nav" runat="server">              
            </asp:contentplaceholder>
        </div>
        
        
        <div class="mainContent">
            <asp:contentplaceholder id="Main_Content" runat="server">              
            </asp:contentplaceholder>
        </div>
        
             <div class="secondbuffer">
            <asp:contentplaceholder id="second_buffer_Nav" runat="server">              
            </asp:contentplaceholder>
        </div>
        
        <div class="rightSide">
            <asp:contentplaceholder id="right_side_Nav" runat="server">              
            </asp:contentplaceholder>
            
                        
              <div class="rightSide_margin_top">
                <asp:contentplaceholder id="rightSide_margin_top_nav" runat="server">              
                </asp:contentplaceholder>
            </div>
          
            <div class="rightSide_top">
                <asp:contentplaceholder id="rightSide_top_nav" runat="server">              
                </asp:contentplaceholder>
            </div>
            
            <div class="rightSide_margin_mid">
                <asp:contentplaceholder id="rightSide_margin_mid_nav" runat="server">              
                </asp:contentplaceholder>
            </div>
            
            <div class="rightSide_bottom">
                <asp:contentplaceholder id="rightSide_bottom_nav" runat="server">              
                </asp:contentplaceholder>
            </div>            
            
            
        </div>
        
    </div>
    
    
    <div class="upperFooter">
        <asp:contentplaceholder id="Upper_Footer" runat="server">        
        </asp:contentplaceholder>
    </div>   
    
    
    <div class="footer">    
        <asp:contentplaceholder id="Footer" runat="server">              
        </asp:contentplaceholder>
    </div>        
</div>
</form>
</body>
</html>

Open in new window

Paul MacDonald

What is it specifically you're trying to do that isn't working?

GlobaLevel

ASKER

if you run the master page...it is centered fine and everything in the 'box' is centered correctly...Im talking about outside of the box...I need to effect the margins outside the box, with background color and .jpgs....everything in the borders is fine...does that make sense?

Paul MacDonald

You mean everything that's not in the content area? I made these changes to your CSS, do they help illustrate what you want?

html
{
background-color: yellow /*White*/ ;
font:14px Georgia,Serif;
}

.content
{
width:1000px;
margin:auto;
background-color:white;
border: 5px dotted red;
padding:10px;
}

GlobaLevel

ASKER

You mean everything that's not in the content area?
...yes I will try that...

GlobaLevel

ASKER

what if I wanted an image that filled all that background space?

GlobaLevel

ASKER

I suppose this:

html
{

background="images/backtile.gif
font:14px Georgia,Serif;
}

Paul MacDonald

Yes, something like that:

html
{
background: white url('images/backtile.gif') no-repeat;
font:14px Georgia,Serif;
}

Here's more information:
http://www.w3schools.com/css/css_background.asp

GlobaLevel

ASKER

okay so if my background image is 100px x 100 px...how can I enlarge so it covers the whole bcakground without repeating?

disrupt

background: url("images/backtile.gif") no-repeat;
background-size: 100%;

Paul MacDonald

Try...

html
{
background: white url('images/backtile.gif') no-repeat center center;
font:14px Georgia,Serif;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

ASKER CERTIFIED SOLUTION

Paul MacDonald

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GlobaLevel

ASKER

I built an icon that is 2000x2000, and it works pretty well,as i read that the icon cant be syretched out. The only problem is that the quality of the image is not that good,and im thinking it has to do with size.

SOLUTION

disrupt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial