Link to home
Create AccountLog in
Avatar of GlobaLevel
GlobaLevelFlag for United States of America

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?
Avatar of Paul MacDonald
Paul MacDonald
Flag of United States of America image

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.
Avatar of 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

What is it specifically you're trying to do that isn't working?
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?
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;
        }
You mean everything that's not in the content area?
...yes I will try that...
what if I wanted an image that filled all that background space?
I suppose this:

 html
        {

                 background="images/backtile.gif
                 font:14px Georgia,Serif;
        }
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

okay so if my background image is 100px x 100 px...how can I enlarge so it covers the whole bcakground without repeating?
 background: url("images/backtile.gif") no-repeat;
  background-size: 100%;
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
Avatar of Paul MacDonald
Paul MacDonald
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account