0

Visual Studio 2010 で Asp.net と CSS を使用して Web ページをデザインしようとしています。問題は単純ですが、修正方法がわかりません。私のページにヘッダーを作成しています。このヘッダーは div で、色付けのためにスタイルシートにリンクされています。divに画像を入れて、ラベルを追加しました。しばらくして、画像を div の中央に配置し、その下にテキストを配置した後、Web サイトを実行すると、Label は div を完全に離れて外に出ます。これを修正するにはどうすればよいですか? 今後の参考のために、実行前のWebページが実行後も常に同じように見えるようにするには、どのような手法または方法に従うのですか? すべてのページにスタイルシートを作成し、すべてのスタイルをそこに配置することにしました。

すみません、ここです。

<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />

</head>
 <body>
<form id="form1" runat="server">
<div class="HeaderDiv">
    <img alt="" class="Logo"  longdesc="http://localhost:17260/MECIT_Logo.png" 
        src="MECIT_Logo.png" />
        <asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS"> 
         </asp:label>                                                                                                                                                                                                                                                                                                                                                                                                     
        </div>  
      </form>
    </body>
    </html>


 body 
 {
background-color:Gray;
 }
 .HeaderDiv
  {
background-color: #0099FF;
height: 121px;
  }
 .Logo
  {
 position:absolute;
 left:40%;
  }
  .Title
  {
 position:absolute;
 left:38%;
 bottom:83%;
 font-size:xx-large;
 font-family:Cambria;
 font-weight:bold;
 color:Navy;
 width: 336px;
 }
4

1 に答える 1

1

なぜコンテナ内に要素を絶対に配置しているのかわかりません。これらはすべて、マージンと配置で処理できます。これが私の提案です：

フィドルを表示するには、ここをクリックしてください

CSS：

 body 
 {
background-color:Gray;
 }
 .HeaderDiv
  {
background-color: #0099FF;
height: 121px;
    text-align:center;
  }
 .Logo
  {
margin:5 auto;
  }
  .Title
  {
 font-size:xx-large;
 font-family:Cambria;
 font-weight:bold;
 color:Navy;
 width: 336px;
 }​

HTML：

<div class="HeaderDiv">
    <img alt="" class="Logo"  longdesc="http://localhost:17260/MECIT_Logo.png" 
    src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
    //Used a <span> for the Label, as I believe that is what it renders as
    <span class="Title" id="WelcomeLabel">Some Title</span>                                                                                                                                                                                                                                                                                                                                                                                                    
        </div>
于 2012-11-26T19:10:57.353 に答える