私はプログラミングに非常に慣れておらず、現在ウェブサイトのコーディングを試みています。過去 2 日間で約 5 時間を費やして、さまざまなブラウザーで正しく並べ替えようとしましたが、いくつかの問題が発生しています。最初に、この質問が以前にどこかで回答されていたら申し訳ありません。私と同様の問題に対する多くの解決策を見てきましたが、完全に機能するものは何もないので、しばらくお待ちください. まず、さまざまなブラウザーでランダムな場所に表示されるという問題があります。CSS でこれを修正しようとすると、他のブラウザーで新しい問題が発生します。次に、ブラウザー ウィンドウのサイズが変化すると、ページ上のすべての要素がウィンドウの外に隠れるのではなく、移動して重なり始めます。私が抱えている 3 つ目の問題 (一種) は、私のコードが見栄えが悪いことです。-5% のマージンを必要とする他の要素と並べるために、一部の要素に -4.5% のマージンが必要な理由がわかりません。そもそも、特定の要素にマイナスのマージンを設定しなければならない理由がわかりません! あなたの助けと、私が郵便に行くのを防いでくれて、前もって感謝します.
ジョシュ
<!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>
<title>Horton Computer Solutions Home</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="site_title", style="float:left">
<span class="titleleft">Horton</span>|<span class="titleright">Computer Solutions</span>
</div>
<div id="title_bar", style="float:right">
<ul>
<pre><a href="#">Home</a> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Guarantee</a> <a href="#">Blog</a> <a href="#">Contact</a></pre>
</ul>
<br style="clear:both"/>
</div>
<div id="mainContent">
<div id="subContent1">
</div>
<div id="subContent2">
</div>
<div id="subContent3">
</div>
</div>
</div>
</body>
</html>
そして、CSS
/* language: css */
BODY
{
font-family: Calibri, Arial, Helvetica, "Helvetica Neue", "Times New Roman";
font-size: 16px;
color: #FFF;
text-align: left;
background-color: #062134;
margin: auto;
padding: 20px 0 60px;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
A
{
font-family: Helvetica;
}
DIV#title_bar UL A
{
text-decoration: none;
color: #FFFFFF;
}
DIV#title_bar UL A:hover
{
text-decoration: underline;
color: #FFFFFF;
}
DIV#title_bar UL A:visited
{
text-decoration: none;
color: #FFFFFF;
}
DIV#site_title
{
font-family: Helvetica;
font-weight: bold;
font-size: 27px;
color: #FFFFFF;
margin: -4.5% 0 0 6.9%;
}
DIV#title_bar
{
font-family: Helvetica;
font-size: 16px;
color: #FFFFFF;
list-style: none;
margin: -5% auto auto 40%;
text-align: center;
position: absolute;
}
DIV#contentBox
{
background-color: #1468A8;
border-style: none;
width: 338px;
height: 185px;
padding: 19px;
}
#site_title .titleleft
{
color: #FFFFFF;
}
#site_title .titleright
{
color: #46C8FF;
}
DIV#mainContent
{
border: 1px solid #FFFFFF;
/*+box-sizing:border-box;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 950px;
height: 1135px;
background-color: #FFFFFF;
margin: 10% 6%;
padding: 15px;
}
DIV#subContent1
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: 440px 0 0;
}
DIV#subContent2
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: -255px 0 0 313px;
}
DIV#subContent3
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: -255px 0 0 626px;
}
#site_title .floatleft
{
float: left;
position: relative;
left: 0px;
top: 0px;
}
#title_bar .floatright
{
float: right;
position: relative;
left: 0px;
top: 0px;
}