asp.net 表单的 CSS 问题答案

【问题标题】：CSS issues with asp.net formsasp.net 表单的 CSS 问题
【发布时间】：2015-03-23 16:55:32
【问题描述】：

我目前正在更新我的网站，该网站几乎全部强调使用 .NET 的后端。我有登录控制，带有 asp 角色/角色组控制。我正在使用当前标准转换我的旧 HTML/CSS。我已经为我的网站完成了我的 html/css。当我从记事本 ++ 将它作为 html 文档运行时。它以应有的方式显示。当我将它转换为 asp.net 和 .aspx 页面时，它变得一团糟。页脚与我的包装器和容器一起显示在内容部分。内容被下推到页脚应该开始的位置。我会附上一些图片，以便更容易理解。我认为它是由表单标签引起的，因为之前的 css 很好。

http://i61.tinypic.com/2mx2yax.jpg http://i57.tinypic.com/rjib76.jpg

/*  CSS Document */

/* Elements */
html, body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Chivo', sans-serif;
	font-size: 12pt;
	font-weight: 300;
}

/*#frmMain
{
 width:100%;
 margin:0;
 padding:0;   
}*/

h1, h2, h3 {
	margin: 0;
	padding: 0;
}

p, ol, ul {
	margin-top: 0px;
}

p {
	line-height: 190%;
}

strong {
}


a:hover {
	text-decoration: none;
}


/* Classes */

.container {
	width: 1200px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}
.img{

}


/* ID's by type */



/* List Styles */

	
	


/** Wrapper */

#wrapper {
	background: #FFFFFF url(images/bg01.png) repeat;
}


/* Header */

#header-wrapper
{
	overflow: hidden;
	background-size: 100%;
	padding: 6em 0em 2em 0em;
	background: #333333;
}



	#header 
	{
		position: relative;
		overflow: hidden;
		text-align: center;
	}

/*Title */

	#title 
	{
		width: 500px;
		height: 100px;
		margin: 0 auto;
		padding: 2em 0em;
		text-transform: uppercase;
	}
	
	#title h1
	{
		letter-spacing: 0.10em;
		font-size: 3em;
	}
	
	#title p 
	{
		letter-spacing: 0.10em;
		color: #FFF;
	}
	
	#title a 
	{
		text-decoration: none;
		color: #FFF;
	}


/* Menu */

#menu-wrapper
{
	background: some color
}

#menu {
	overflow: hidden;
	height: 100px;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	letter-spacing: 1px;
	padding: 0px 40px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.80em;
	line-height: 100px;
	border: none;
	color: #FFF;
}
/* replacing with cs code to highlight tab selection*/
#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}
/* replacing with cs code to highlight tab selection*/
#menu .current_page_item a {
	background: #C0005F;
}

/* page */

#page
{
	position: relative;
	overflow: hidden;
	padding: 6em 0em 5em 0em;
}

/** content */

#content
{
	float: right;
	width: 790px;
}

/* Side bar */

#sidebar
	{
		float: left;
		width: 345px;
	}
	
#sidebar .title h2
	{
		font-size: 1.6em;
	}
	
#sidebar .box1
	{
		margin-bottom: 3em;
	}

	/* Footer */
#footer
	{
	
	}

/*-Portfolio-*/
#portfolio-wrapper{


}

#column1,
#column2,
#column3,
#column4
	{
		width: 252px;
	}
	
#column1,
#column2
	{
		float: left;
		margin-right: 24px;
	}
	
#column3
	{
		float: left;
	}

#column4
	{
		float: right;
	}

【问题讨论】：

您也应该发布您的 ASPX 内容 - 这样会更容易弄清楚。
我附上了一些图片。我希望这能有所帮助。在向 aspx 页面添加任何内容之前，我正在尝试弄清楚如何使用 css 正确配置我的 masterpage&default.aspx 页面。
好的，我会尝试从 Chivo 字体定义中去掉引号并验证所有图像路径是否有效。我仍然认为您需要发布一些标记，因为无效的 CSS 路径或损坏的标签也可能导致问题。
好的，我会检查并验证一些信息。完成内容页面后，我将更新进度。感谢您的帮助。
我添加了一些内容并添加了一些占位符图像，它看起来仍然与图像中附加的内容相同。我认为最好的办法是从头开始我的 css，然后慢慢重建它，以找到问题。感谢您的帮助。

标签： css .net forms webforms

【解决方案1】：

当我尝试使用百分比来表示高度和宽度时，我偶尔会看到一些奇怪的事情，而浮动可能会让人头疼。

我不会把整个样式表都扔掉——只注释掉一个部分，让它工作，然后继续。这样你就不会回到原点。

对于行为不端的内容，我也会（对于 yuks）尝试 position:absolute 而不是 position:relative。

【讨论】：