0
저는 현재 가족 구성원을 위해 웹 사이트를 제작하고 있습니다. 그러나 저는 HTML과 CSS에 비교적 익숙하며 페이지에 정확하게 항목을 배치하는 데 많은 어려움을 겪고 있습니다.CSS 포지셔닝에 대한 조언
디스플레이를 사용하여 모든 CSS를 여러 번 다시 실행 해 보았습니다. 인라인 블록을 사용하거나 테이블을 사용하려고했지만 항상 문제가있는 것 같습니다.
내가 필요한 것은 cna가 내가 필요한 것을 수행하는 가장 좋은 방법으로 조언과 조언을주는 주제에 대한 지식을 가진 사람들입니다.
아래의 css 및 html 소스 코드와 google 크롬을 통해 실행될 때 보이는 모습의 스크린 샷을 포함합니다. 도움이나 조언을 주신 분께 감사드립니다.
여기 이미지의 링크 (바로 아래)입니다. 잘못된 편집에 대해 사과드립니다. 현재 상단 접촉 영역 비트가 너무 낮아서 주요 텍스트 영역이 탐색 바 아래로 떨어지고 마침내 하단 BHA 로고가 페이지를 벗어났습니다.
http://s23.postimg.org/uolfw96wb/screenshot_edited.png
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<meta name="###########" content=""/>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="page">
<div class="toparea">
<img src="Client's Logo.png" id="logo"/>
<h1 id="title">Significant Ceremonies by ##########</h1>
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
</div>
<div class="sidearea">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Humanism</a></li>
<li><a href="">Planning</a></li>
<li><a href="">Specialist Areas</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</div>
<div class="mainarea">
<h2 id="subtitle">Home</h2>
<p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
divine beings." - ###########</p>
<p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to
navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
</div>
<div class="bottomarea">
<ul>
<li>Tel: </li>
<li>E-mail: </li>
</ul>
<img src="BHA logo.jpg" id="bhalogo"/>
</div>
</div>
</body>
</html>
CSS 코드
body
{
background-color: #CCCCCC;
}
#page
{
position: absolute;
left: 25%;
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #E6F5E6;
font-family: vijaya;
}
#logo
{
float: left;
width: 200px;
height: 220px;
margin-left: 20px;
margin-right: 20px;
}
#title
{
padding-top: 80px;
padding-right: 260px;
text-align: center;
color: #002E00;
}
.toparea ul
{
float: right;
padding-right: 20px;
list-style: none;
}
.sidearea
{
clear: both;
float: left;
}
.sidearea ul
{
list-style-type: none;
}
.sidearea ul li
{
margin-top: 5px;
margin-left: 5px;
margin-bottom: 10px;
margin-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
text-align: center;
border-style: solid;
border-radius: 5px 5px 5px 5px;
background-color: #4DB84D;
border-color: #002E00;
font-size: 25px
}
.sidearea ul li a
{
text-decoration: none;
color: black;
}
.mainarea
{
float: left;
margin-left: 80px;
background-color: #EEF8EE;
}
.bottomarea ul
{
clear: both;
float: left;
list-style-type: none;
}
#bhalogo
{
float: right;
width: 150px;
height: 100px;
margin-bottom: 20px;
padding-right: 20px;
}
가 다시 어떤 조언과 도움을 주셔서 감사합니다,이 질문은 심하게 제출 된 경우 미안 해요 정말이 고민하고 .
저는 Wordpress와 같은 CMS를 사용하고 기존 테마를 수정하는 것이 좋습니다. * 많은 문제를 해결해야합니다 ... – UIlrvnd