この質問が何度も出されていることは承知していますが、すべて私の問題とは関係ありません。ブラウザのサイズを変更すると、「position:absolute」を使用したすべての要素が画面上を移動します。つまり、私が設計したブラウザとは異なるブラウザを使用しているすべての人がこれを見ることになります。それは壊滅的です！絶対配置を使用する必要があります。これにより、サイトに不可欠な別の画像の上に画像を重ねることができます。では、これを修正してすべての要素を同じように動作させるにはどうすればよいでしょうか? ブラウザを 1366 x 768 (私のブラウザ サイズ) に強制する方法はありますか? これはサイトが適切に表示されるサイズです。あなたが私を助けてくれたら、どうもありがとう。
HTMLとCSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #cdcdff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
}
.twoColFixLtHdr #container {
width: 1024px;
background: #f2f2ff;
margin: 0 auto;
text-align: left;
height: 1050px;
}
.twoColFixLtHdr #header {
background: #DDDDDD;
width: 1024px;
height: 200px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp {
margin-top: 3%;
visibility: visible;
z-index: 10000;
text-decoration: none;
color: #000;
}
.twoColFixLtHdr #container #sidebar1 #ptext {
font-family: Calibri;
font-size: 12px;
width: 80%;
line-height: 125%;
margin-left: 8%;
margin-top: 2%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #second-pic {
width: 115px;
height: 170px;
margin-left: 6%;
}
.twoColFixLtHdr #container #header #home1 {
width: 110px;
height: 30px;
position: absolute;
top: 170px;
right: 617px;
z-index: 200;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp {
width: 100%;
height: 100%;
margin-top: 5%;
font-size: 12px;
font-family: Calibri;
color: #000;
text-transform: none;
text-decoration: none;
margin-left: 9%;
}
.twoColFixLtHdr #container #header #about1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 507px;
}
.twoColFixLtHdr #container #header #information1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 397px;
}
.twoColFixLtHdr #container #header #contact1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 287px;
}
.twoColFixLtHdr #container #header #usefullinks1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 177px;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 25%;
background: #f2f2ff;
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp2 {
margin-top: 3%;
margin-bottom: 6%;
color: #000;
}
#bolden {
margin-top: 4%;
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
margin-left: 8%;
}
h1 {
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}
.twoColFixLtHdr #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
position: absolute;
width: 1024px;
height: 100px;
top: 1020px;
}
.twoColFixLtHdr #container #mainContent #yourweddingcerelogo {
width: 650px;
height: 49px;
position: absolute;
top: 213px;
left: 503px;
}
.twoColFixLtHdr #container #mainContent #secondlogo {
height: 49px;
width: 650px;
margin-bottom: 4%;
position: absolute;
left: 503px;
top: 650px;
margin-top: 1%;
}
.twoColFixLtHdr #container #mainContent #band {
position: absolute;
width: 130px;
visibility: visible;
left: 27
.%;
top: 200px;
left: 400px;
height: 122
..5%;
height: 1050px;
}
.twoColFixLtHdr #container #mainContent #contenttext {
margin-left: 13.5%;
margin-top: 10%;
width: 80%;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.twoColFixLtHdr #container #mainContent #secondarytext {
margin-left: 10%;
margin-top: 10%;
width: 60%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext2 {
width: 170px;
position: absolute;
right: 43
.%;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
right: 525px;
top: 722px;
}
w {
font-family: Calibri;
font-size: 16px;
font-style: italic;
line-height: 1.6;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #2ndcoltext2 {
font-family: calibri;
font-size: 14px;
font-weight: bold;
position: absolute;
width: 14.2%;
right: 80%;
top: 87.7%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcoltxt {
position: absolute;
right: 200px;
width: 175px;
top: 720px;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolmaintxt {
height: 140px;
width: 320px;
position: absolute;
left: 833px;
top: 820px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext3 {
width: 280px;
margin-left: 3.5%;
margin-top: 0%;
height: 200px;
position: absolute;
right: 538px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolpic {
position: absolute;
height: 95px;
width: 130px;
right: 385px;
clear: both;
top: 723px;
}
.twoColFixLtHdr #container #mainContent #contenttext c {
font-family: Calibri;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p {
font-family: Calibri;
font-size: 14px;
font-weight: 500;
}
-->
/*]]>*/
</style><!--[if IE 5]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
</head>
<!-- Main Class Plan -->
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<!--img containing necc header elements -->
<img height="100%" src="BaseImages/MainHeader.png" width="100%" />
<div id="home1">
<!-- hyperlinks following -->
<a href="HomePage.html">
<img height="100%" src="BaseImages/1%20Home%20button.png" width="100%" />
</a>
</div>
<div id="about1">
<a href="AboutBriony.html">
<img height="100%"
src="BaseImages/2%20about%20briony%20button.png"
width="100%" />
</a>
</div>
<div id="information1">
<a href="Information.html">
<img height="100%"
src="BaseImages/3%20Information%20button.png"
width="100%" />
</a>
</div>
<div id="contact1">
<a href="ContactDetails.html">
<img height="100%"
src="BaseImages/4%20contact%20button.png"
width="100%" />
</a>
</div>
<div id="usefullinks1">
<a href="UsefulLinks.html">
<img height="100%"
src="BaseImages/usefullinks1.png"
width="100%" />
</a>
</div>
<!-- end hyperlinks -->
</div>
<!-- end #header -->
<div id="sidebar1">
<img height="30%"
src="BaseImages/label%201%20ceremonies.png"
width="100%" />
<div id="serieshyp">
<!--var of hyperlinks -->
<div id="hyp">
<a href="HomePage.html"
style="text-decoration:none">
Wedding Ceremonies
</a>
</div>
<div id="hyp">
<a href="SameSexWeddingCeremonies.html"
style="text-decoration:none">
Same-Sex Commitment Ceromonies
</a>
</div>
<div id="hyp">
<a href="RenewalofVows.html"
style="text-decoration:none">
Renewal of Vows
</a>
</div>
<div id="hyp">
<a href="CeremonyOptions.html"
style="text-decoration:none">
Ceremony Options
</a>
</div>
<div id="hyp2">
<a href="FrequentlyAskedQuestions.html"
style="text-decoration:none">
Frequently Asked Questions
</a>
<br />
</div>
</div>
<!-- hyp end-->
<img height="30%"
src="BaseImages/label%20extras%20and%20ideas.png"
width="100%" />
<!--uniform label -->
<div id="bolden">
Choosing the Right Celebrant
</div>
<div id="ptext">
When choosing your Celebrant, it’s not all about the money.
it will help if you consider the personality you are looking for, not just the fee.
Choosing a celebrant whose personal style fits in well with the type of ceremony you have in mind is far more important than finding the cheapest price.
The right celebrant can have a hugely positive impact on your wedding
and help make your day go smoothly and happily.
</div>
<div id="bolden">
Poetry
</div>
<div id="ptext">
I have a wide variety of poetry and readings for you to choose from
or you can use special verses which have special meaning to you both.
These can be seamlessly included in your marriage ceremony and often
are a real highlight.
You might like to consider having friends and family members
read one or two poems for you on the day, or I can do it for you.
It’s completely up to you.
<br />
<br />
<br /> <!--find sub for br breaks -->
<br />
<br />
<br />
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="yourweddingcerelogo">
<img height="100%"
src="BaseImages/page%201%20label%20your%20wedding%20ceremony.png"
width="100%" />
</div>
<div id="band">
<!-- change according to page -->
<img height="100%"
src="BaseImages/ElongatedFlower3.png"
width="100%" />
</div>
<div id="contenttext">
<h1>
A Ceremony Designed Especially for You
</h1>
<p>
I believe that you should have exactly what you want on your special day.
</p>
<c>
I understand how much time and effort goes into planning your dream wedding,
so I workwith you to ensure your special day is exactly how you want it.
It means the world to me to help you find the perfect verse,
write the most meaningful vows and put together
a service you will remember for the rest of your lives.
<br />
</c>
<p>
You’re certain to have wonderful ideas and plans for how you would
like your wedding to be, from the cake and flowers, to the head-dresses
for the flower girls, everything has to be considered and plans put
into action to make it work. The Marriage Ceremony should also be considered
as a crucial element in your special day and it too needs
advance planning so that it goes exactly how you want it.
<br />
<br />
Together, we can design a ceremony that fits the style of your wedding
and is all about the two of you. It can be as long or short as you want it.
You can choose the content. Whether modern or traditional, your wedding ceremony
should be as unique as you are and together
we can make one that works perfectly for you both.
<br />
<br />
There are requirements that are integral to the solemnisation
and registration of a marriage and I will ensure that the process
runs smoothly and nothing is overlooked. I’m happy to
explain all of the requirements more fully at our first meeting.
</div>
<div id="secondlogo">
<!-- change according to page -->
<img height="100%"
src="BaseImages/label%20wedding%20client%20testimonials.png"
width="100%" />
</div>
<div id="secondarytext">
<!-- change according to page -->
<div id="second-pic">
<img height="100%"
src="BaseImages/testimonial%20pic%201.png"
width="100%" />
</div>
<div id="secondtext2">
<w>
Thank you so much for making our day so special.
The ceremony you planned for us was perfect!
It fit in with our theme and reflected our individuality perfectly.
</w>
</div>
<div id="nekcolpic">
<img src="BaseImages/testimonial pic 2.png"
alt=""
width="100%"
height="100%" />
</div>
<div id="nekcoltxt">
<w>
Hi Briony,
We can’t thank you enough for the time and
attention to detail you put into our wedding.
</w>
</div>
<div id="nekcolmaintxt">
<w>
Your professionalism was outstanding and helped make our wedding day
run smoothly with everything going off without a hitch.
Thank you for all the different options you gave us.
We ended up with exactly the service we wanted,
even though at the start we had no idea what that was!
</w>
</div>
<div id="secondtext3">
<w>
Thanks for all your time and patience and being there
for us all the way through the process.
It would not have been the same glorious wedding without you.
</w>
</div>
</div>
<!-- end #mainContent -->
</div>
<br class="clearfloat" />
<div id="footer">
<img height="100%"
src="BaseImages/footer.png"
width="100%" />
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>