0
3列のWebページを作成しようとしています。ヘッダーと段落を中央の列に合わせるにはどうすればよいですか？最後の列に情報を入力すると、テキストをどのように整列させることができますか？おかげさまで、感謝します。列内のテキストを揃える方法は？
また、ページ中央のコピーを右に並べるにはどうすればよいですか？あなたは、単にテキスト揃え
すなわち使用する必要が
*{
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body{
background-color: #6B6A67;
}
#container{
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto; /*will center your page*/
margin-right: auto; /*will center your page*/
}
h1, h2{
text-align: center;
}
li{
text-align: center;
padding: 5px;
}
h4{
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header{
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px; /*To add empty space to bottom of the element*/
}
#container #navigation{
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content{
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px; /*To add empty space to bottom of the element*/
}
#container #content #sidebar1{
background-color: #ADA9A0;
float: left;
width: 200px;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1{
background-color: white;
min-height: 300px;
margin-bottom: 3px;
margin-left: 200px;
margin-right: 200px;
margin: 0;
}
#container #content #sidebar2{
background-color: #ADA9A0;
float: right;
width: 200px;
min-height: 300px;
margin-bottom: 3px;
margin-top:-300px;
}
#container #footer{
padding-top: 1px;
border-top: 1px solid black;
}
.CR{
text-align: left;
position: fixed;
}
.Instructor{
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a{
color: white;
text-decoration: none; /*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover{
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title> My Portfolio </title>
</head>
<body>
\t <div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
<a href="http://tdevoll16f.heyuhnem.com/index1.html/CIS 2336/My Portfolio/MyPage1.html">Home</a>
<a href="#">HTML/CSS</a>
<a href="#">PHP</a>
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li> Lectures </li>
<li> Syllabus </li>
<li> Helpful Videos </li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language)
and CSS (Cascading Style Sheets) are two
of the core technologies
for bulding a website. <p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page. </p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. </p>
</p>
</div>
<div id="sidebar2">
dddd
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<a href="http://heyuhnem.com/"><h4>Copyright Natalie Fofanova </h4> </a>
</div>
</footer>
</body>
</html>
これは純粋なHTML/CSSの問題であり、すべてでPHPとは何の関係も持っていません。 –
ここには動作中のフィドルです：https://jsfiddle.net/15pz3t6b/ –
も 'html5'とは関係ありません。 – vsync