エラーメッセージを表示するための非常に基本的なasp.net Webページを作成しています。静的ページだけで機能はありません。私の問題は、中央の警告メッセージ ボックス パネルが正しいワード ラッピングを有効にするための最小サイズを持っていることですが、ブラウザーのサイズをそのパネルよりも小さくすると、ページの横に空白ができます。私は Web サイト、css、さらには html を扱った知識や経験があまりないので、誰かがこの問題に光を当てることができれば、それは素晴らしいことです:D
通常の外観と、ブラウザのサイズを変更して右にスクロールするとどうなるかを確認できるように、いくつかの画像をアップロードしました。
また、私がテストしたすべてのブラウザ(Chrome、IE、Mozilla)で発生するので、知識不足が原因であると確信しています:)
これが私のhtml/cssです:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Unauthorised.aspx.cs" Inherits="_Default" %>
<!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>
<style>
html, body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding:0; width:100%; height:100%; font-size:100%;}
#BannerImage {position:relative; padding:0; width:100%; height:10%;}
#OuterBackgroundPanel {position:absolute; width:100%; height:90%; z-index:0;}
#InnerBackgroundPanel{position:absolute; top:2%; left:1%; width:98%; height:94%; z-index:1;}
#MessagePanel {position:absolute; border:3px solid #000000; top:33%; left:33%; width:33%; height:33%; min-height:175px; min-width:425px; max-height:175px; max-width:450px;}
h1 {text-align:center; font-family:Calibri; font-size:2em;}
h2 {text-align:center; font-family:Calibri; font-weight:normal; font-size:1.2em;}
p {text-align:center; font-family:Calibri; font-size:1em;}
</style>
<title>Unauthorised Personnel Warning</title>
</head>
<body>
<div id="Banner">
<asp:Image ID="BannerImage" runat="server" ImageUrl="~/Resources/Gradient Banner.png" />
</div>
<div id="Backgrounds">
<asp:Panel ID="OuterBackgroundPanel" runat="server" BackColor="#D6E8FF">
<asp:Panel ID="InnerBackgroundPanel" runat="server" BackColor="#EBF3FF">
<asp:Panel ID="MessagePanel" runat="server" BackColor="#FFFFFF">
<h1>Title text.</h1>
<h2>Message text.</h2>
<p>Description text.</p>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</div>
</body>
</html>