Issue with ASP.NET and CSS- Layout isn't centered

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 2476 Views - Last Post: 10 May 2011 - 08:23 AM Rate Topic: -----

#1 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 01:57 AM

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!

Is This A Good Question/Topic? 0
  • +

Replies To: Issue with ASP.NET and CSS- Layout isn't centered

#2 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 03:07 AM

Do you have link to you're website?

You can try

body{

margin: 0 auto;

}

Was This Post Helpful? 0
  • +
  • -

#3 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 03:17 AM

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

Was This Post Helpful? 0
  • +
  • -

#4 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 03:26 AM

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

Was This Post Helpful? 0
  • +
  • -

#5 BrairMoss  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 15
  • View blog
  • Posts: 81
  • Joined: 13-April 10

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 04:56 PM

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?
Was This Post Helpful? 0
  • +
  • -

#6 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 04 May 2011 - 05:19 PM

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.
Was This Post Helpful? 0
  • +
  • -

#7 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 05 May 2011 - 09:31 AM

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.
Was This Post Helpful? 0
  • +
  • -

#8 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 08 May 2011 - 12:56 AM

View Postmarinus, 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.

View PostBrairMoss, 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 :(


View PostNakor, 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.
Was This Post Helpful? 0
  • +
  • -

#9 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 08 May 2011 - 01:01 AM

View Postsouptoy, 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.
Was This Post Helpful? 0
  • +
  • -

#10 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 08 May 2011 - 05:13 PM

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.
Was This Post Helpful? 0
  • +
  • -

#11 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 03:58 AM

View Postsouptoy, 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 :(
Was This Post Helpful? 0
  • +
  • -

#12 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 04:40 AM

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
Was This Post Helpful? 0
  • +
  • -

#13 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 04:50 AM

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.
Was This Post Helpful? 0
  • +
  • -

#14 BrairMoss  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 15
  • View blog
  • Posts: 81
  • Joined: 13-April 10

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 05:24 AM

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.
Was This Post Helpful? 0
  • +
  • -

#15 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 05:33 AM

nevermind, see my next post

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

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2