[kimmi_baby]

Hi,
I'm having a problem with an ASP.net website and CSS.

I've pasted my CSS code from a previous website (HTML and CSS) to have a look at it.
I've copied the basic divs etc into the masterpage.

But I'm finding that the layout isn't centered. The layout would normally be centered with a border but now it's actually positioned left. I've tried this with a few different stylesheets I had and I'm having the same problem.

Is there something special that needs to be done for ASP.net?

Any help would be appreciated!

Thanks!

[marinus]

Do you have link to you're website?

You can try

body{

margin: 0 auto;

}

[kimmi_baby]

Hi,
Thank you for your reply. Unfortunately, I'm creating the website in Visual Studio so it's working off the local host at the moment.

If it helps, here is the css:

body,
html {
	margin:0 auto;
	padding:0;
	background: black; 
	font-family:Helvetica, Arial, sans-serif;
	
	}

h3 {
	color:#09F;
	font-family:Verdana, Arial, sans-serif;
	

}

#wrap {
	width:900px; /* This is the width of the wrap */
	margin:0 auto; /* This is set to auto so that the layout will be centered */ 
	border:1px #000 solid;
	background:white;
	height:700px;
	
	
	
	
}

#header {
	
	
	
}

#maincontent{
	background:white;
}

[marinus]

goto you main container div then add align="center" in that div tag


e.g

<div id="wrap" align="center">

See if that works...

This post has been edited by marinus: 04 May 2011 - 06:24 AM

[BrairMoss]

Additionally, you could try to just use

margin: auto;

instead of putting a 0 in front. I have found that sometimes VS renders the CSS really weirdly if you use one 0 instead of all four.

I personally have not come across any issues with this way. Could you perhaps attach a zip file or at very least the code to the masterpage for us to take a look at?

[Nakor]

also make sure the width isn't wider than the width that's viewable or it won't look like it's centering since it will be taking up the whole screen.

[souptoy]

Is that the only CSS you're working with? I would make sure you don't have any inline styles that are overriding the styles in your CSS file. I have noticed that position trips people up sometimes, as well.

Without a zip of your files or a complete listing of what you're working with, we can only offer suggestions.

[kimmi_baby]

marinus, on 04 May 2011 - 03:26 AM, said:

goto you main container div then add align="center" in that div tag


e.g

<div id="wrap" align="center">

See if that works...

I've tried this and I noticed that it centered all of the content (all the text) but unfortunately, the div is still on the left side of the page and not in the middle.

BrairMoss, on 04 May 2011 - 04:56 PM, said:

Additionally, you could try to just use

margin: auto;

instead of putting a 0 in front. I have found that sometimes VS renders the CSS really weirdly if you use one 0 instead of all four.

I personally have not come across any issues with this way. Could you perhaps attach a zip file or at very least the code to the masterpage for us to take a look at?

Thanks for your help but this didn't seem to change it

Nakor, on 04 May 2011 - 05:19 PM, said:

also make sure the width isn't wider than the width that's viewable or it won't look like it's centering since it will be taking up the whole screen.

Thank you for your reply. The width is much smaller than whats viewable as I can see the background. I can see the page is on the left and there's a big space of background on the right.

[kimmi_baby]

souptoy, on 05 May 2011 - 09:31 AM, said:

Is that the only CSS you're working with? I would make sure you don't have any inline styles that are overriding the styles in your CSS file. I have noticed that position trips people up sometimes, as well.

Without a zip of your files or a complete listing of what you're working with, we can only offer suggestions.

Thank you for replying! Umm... How do I know if there are any inline styles (sorry I'm new to visual studio)? I'll have a look and hopefully that might fix it.

If not, I'll add my file for everyone to look at.

[souptoy]

Inline styles are like <div id="someDiv" style="width:960px;"></div> The style attribute will override whatever you have in your CSS file.

So, for example, if in your CSS file you have #someDiv {width:1024px;} but you have the div tag above, someDiv will be 960px, not 1024px.

I have had issues with Safari not picking up CSS file changes right away, as well...maybe due to a cache issue.

[kimmi_baby]

souptoy, on 08 May 2011 - 05:13 PM, said:

Inline styles are like <div id="someDiv" style="width:960px;"></div> The style attribute will override whatever you have in your CSS file.

So, for example, if in your CSS file you have #someDiv {width:1024px;} but you have the div tag above, someDiv will be 960px, not 1024px.

I have had issues with Safari not picking up CSS file changes right away, as well...maybe due to a cache issue.

Oh well in that case.. as far as I know there isn't any in there....

It won't let me add the file, but here is my masterpage:

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>


<html>
<head runat="server">
<link href="css/stylesheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>

<div id="wrap">

<form id="form1" runat="server">

<div id="header"><h1>LOGO GOES HERE</h1></div>
<div id="navbar">



    <asp:Menu ID="Menu1" runat="server" BackColor="#F7F6F3" 
    
        DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
        ForeColor="#7C6F57" StaticSubMenuIndent="10px" Orientation="Horizontal" 
        Width="421px">
        <StaticSelectedStyle BackColor="#5D7B9D" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
        <DynamicMenuStyle BackColor="#F7F6F3" />
        <DynamicSelectedStyle BackColor="#5D7B9D" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
        <Items>
            <asp:MenuItem NavigateUrl="~/index.aspx" Text="Home" Value="Home">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/about.aspx" Text="About" Value="About">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/galleries.aspx" Text="Galleries" Value="Galleries">
                <asp:MenuItem NavigateUrl="~/create.aspx" Text="Create a Gallery" 
                    Value="Create a Gallery"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/upload.aspx" Text="Upload Photos" 
                    Value="Upload Photos"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/view.aspx" Text="View Galleries" 
                    Value="View Galleries"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/contact.aspx" Text="Contact" Value="Contact">
            </asp:MenuItem>
            
          </Items>
    </asp:Menu>



</div>
<div id="maincontent">

<asp:ContentPlaceHolder id="main" runat="server">

</asp:ContentPlaceHolder>

</div>

<div id="footer">
footer goes here
</div>





</form>

</div> 
</body>
</html>

and the css:

body,
html {
	margin:auto;
	padding:0;
	background: black; 
	font-family:Helvetica, Arial, sans-serif;
	
	}

h3 {
	color:#09F;
	font-family:Verdana, Arial, sans-serif;
	

}

#wrap {
	width:900px; /* This is the width of the wrap */
	margin:auto; /* This is set to auto so that the layout will be centered */ 
	border:1px #000 solid;
	background:white;
	height:700px;
	position:absolute;
	
	
	
}

#header {
	
	
	
}

#maincontent{
	background:white;
}

If anyone could help me, it would be so great! I have no idea why its doing this

[Nakor]

Try puutting your "wrap" div inside another div and give that div a width of 100%. Might could also try specifying the width of the body element.

And remove the position absolute from the wrap div

[kimmi_baby]

I just tried putting it inside another div and gave it a width of 100% and it didn't change... I also tried making the body element a width of 100% too.

I removed the position absolute as well. I'm sure this is probably something really simple that I'm missing.. but I just can't see it :S if I float the wrap div right, it moves to the right. I just can't seem to center it.

[BrairMoss]

Have you tried placing your wrap div inside the form tags? I notice that sometimes that causes an error. I'm not sure why though.

[Nakor]

nevermind, see my next post

This post has been edited by Nakor: 09 May 2011 - 06:00 AM