Avatar of GlobaLevel
GlobaLevel
Flag 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?
ASP.NET.NET ProgrammingVisual Basic.NET

Avatar of undefined
Last Comment
disrupt

8/22/2022 - Mon
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?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
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...
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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;
        }




Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Paul MacDonald

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.