14 years, 4 months 전-
안녕하세요.
현재 사이트 개편중에 있는데
해상도나 모니터에 따라서 제가 세팅중에 있는 페이지의 콘텐츠들이 블랙시블하게 위치가 바뀝니다.
지금은 제가 24인치 1920으로 보고 있는데 가운데 콘텐츠 내용들이 위에서부터 시작하지않고
아래 하단쪽에서부터 시작하는 문제가 있습니다.
모든 해상도와 모니터 크기에 관계없이 가운데를 중심으로 위치를 고정시키려면
어느 파일을 열어서 소스를 수정해야될지 답변 좀 부탁드리겟습니다.
감사합니다.
http://kuntrol.cafe24.com/wordpress/음, 이건 테이블 정렬 문제가 아니라 본문 넓이를 너무 넓게 설정하셔서 그런것 같습니다.
제 컴퓨터에서는 첨부한 그림과 같이 보이네요. 1280X1024해상도입니다.
블로그 전체 넓이에 비해서 본문 넓이가 과해서 본문이 이탈되어 보이네요.
style.css 파일 여셔서 container 넓이를 늘리시거나, content 넓이를 줄이셔야 할듯 합니다.
(테마마다 조금씩 달라서 확실하진 않아요;;)[attachment=9396,23]
소감공님 지금 1280 해상도에서 확인해보시면 정상적으로 페이지가 보여집니다.
허나 구현해내고 싶은 페이지의 형태가 모든 해상도에서 가운데를 중심으로 보여졌으면 하는것인데 수준이 미흡하여 어려움에 있습니다.
제가 사용하고 있는 모니터의 해상도는 지금 현재 2560 x 1600 인데 여기서 보면 컨텐츠와 사이드바의 간격이 엄청나게 멀어집니다. 이부분을 가운데를 중심으로해서 모든 해상도에서 균일하게 맞추려고 합니다.
소중한 답변 부탁드립니다.감사합니다./*
Theme Name: Blue on White
Description: A clear and simple blue and white theme made for everyone who likes simplicity.
Author: Bingo Web Design
Author URI: http://www.bingowebdesign.info
Tags: white, blue, black, two-columns
Version: 1.3
*/
.imgl {
border:0;
float:left;
margin:0;
padding:5px;
}.imgr {
border:0;
float:right;
margin:0;
padding:5px;
}
.post {
clear:both;
padding: 20px 12px 0;
}
.post-date {
width: 50px;
height: 50px;
float:left;
}
.post-month {
font-size: 11px;
text-transform: uppercase;
color: #fff;
text-align: center;
display:block;
padding: 2px;
background: #ff3733;
border-bottom: 1px dotted #ff3733;}
.post-day {
font-size: 11px;
text-transform: uppercase;
color: #3d3d3d;
text-align: center;
display:block;
background: #fff;
border-bottom: 1px dotted #2b4260;
border-right: 1px dotted #2b4260;
border-left: 1px dotted #2b4260;
padding:2px;
line-height:11px;
}.clear {
clear:both;
height:1px;
}.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}.alignleft {
float: left;
}.alignright {
float: right;
}body {
background: #ffffff;
font-size: 9pt;
line-height: 1.5;
color: #505050;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
form {
display: inline;
}
#wrapper {
width: 100%;
text-align:left;
position: auto;
}#hd {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
#blogtitle h1 {
display: inline;
}
#blogtitle h1 a {
color: #ff3733;
font-size: 16pt;
text-decoration: none;
font-weight: normal;
vertical-align:bottom;
}
#menu {
margin-top: 10px;
display: inline;
float: left;
}
#menu ul {
list-style:none outside;
margin: 0px;
padding: 0px;
}
#menu ul li {
float: left;
}
#menu ul li a {
font-size: 10pt;
padding-left: 15px;
font-weight: bold;
text-decoration: none;
color: #505050;margin-left: 15px;
border-left: 1px solid #e0e0e0;
}
#menu ul li a:hover {
color: #ff3733;
}#blogdescription {
color: #909090;
font-size:10pt;
font-weight: bold;
}#sitemeta {
float: right;
font-size: 10px;
text-decoration: none;
}
#sitemeta ul{
list-style: none;
display: inline;
text-decoration: none;
}#sitemeta li {
float: left;
text-decoration: none;
margin: 0 0 0 10px;
}#sitemeta a {
color: #252525;
text-decoration: none;
}#sitemeta a:hover {
color: #ff3733;
text-decoration: none;
}#meta li.rss {
padding: 0 0 0 15px;
background: url(images/rss-icon.gif) no-repeat left center;
}#bd {
margin: 0px 230px 0px 0px;
color: #505050;
}
#sidebar {
font-size: 8pt;
width: 400px;
float: right;
color:#606060;
padding-left: 10px;
border-left: 1px solid #e0e0e0;
}
#sidebar ul {
list-style:none outside;
margin: 0px;
padding: 0px;
}
#sidebar ul li {
display: inline;
}
#sidebar ul li ul {
list-style:none outside;
margin-top: 4px;
margin-bottom: 10px;
margin-left:5px;
}
li.vategories ul {
list-style:none outside;
margin-top: 10px;
margin-bottom: 10px;
}
#sidebar ul li ul li {
margin-top: 4px;
display: block;
}
#sidebar a {
color: #505050;
text-decoration: none;
}
#sidebar a:hover {
color: #ff3733;
}
#sidebar h2 {
font-size: 12pt;
font-weight: bold;
text-decoration: none;
display: inline;
}
#aboutme a {
color: #ff3733;
text-decoration: none;
}.date {
width: 50px;
height: 80px;
text-align:center;
font-size: 9pt;
background: url(images/background_date_grad.png) no-repeat;
float: left;
color: #ffffff;
padding: 8px 0px;
}
.date .day {
font-size: 14pt;
}.post-wrap {
margin-left: 70px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 20px;
}
#commentwrap {
margin-left: 70px;
}
#respond {
padding-top: 10px;
}
#yui-main a {
color: #ff3733;
text-decoration: none;
}
#yui-main h1 {
display: inline;
color: #ff3733;
font-size: 14pt;
text-decoration: none;
font-weight: normal;
}
#yui-main h1 a {
color: #505050;
text-decoration: none;
}
#yui-main h1 a:hover {
color: #ff3733;
}#yui-main h2 {
display: inline;
color: #ff3733;
font-size: 14pt;
text-decoration: none;
font-weight: normal;
}
#yui-main h2 a {
color: #505050;
font-size: 14pt;
}
#yui-main h2 a:hover {
color: #ff3733;
}
blockquote {
margin: 10px;
font-size: 10pt;
padding: 10px;
border: 1px dashed #ff3733;
background:#fafafa;
}
blockquote p {
padding: 0px;
margin: 0px;
}
pre {
font-family:’Courier New’, Courier, Monospace, Fixed;
line-height: normal;
overflow: auto;
padding-bottom: 25px;
margin: 0px;background-image:url(‘images/bg_pre_dots.png’);
background-repeat: repeat-x;
background-position: bottom left;
}
cite {
font-weight: bold;
font-style: normal;
margin-left: 4px;
}
#author, #email, #url, #comment, .s {
border: 1px solid #bdc1a3;
padding: 5px;
font-size: 8pt;
background:#ffffff;
color: #363636;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#author, #email, #url, #comment {
padding: 5px;
}
.s {
padding: 3px;
}
#submit, #searchsubmit {
font-size: 8pt;
background: #ff3733;
color: #ffffff;
border: 1px solid #a0a0a0;
}.searchresults ul {
list-style: none;
display: inline;
}
.categories ul {
list-style: none;
display: inline;
}
.archives ul {
list-style: none;
display: inline;
}
dl, dd, dt {
margin: 0px;
}
#footnote a {
color: #ff3733;
text-decoration: none;
}
#content {
padding: 0 0 12px;
float: left;
width: 670px;
margin: 0;
text-align:justify;}
.post-content {
clear: both;
padding: 10px 0 10px 0;
margin: 0;
}에구, 저도 전문 코더가 아니라 정확히 설명을 드릴수는 없을것 같아요.
다만, 위에보면sidebar 속성에는 float: right; //
content 속성에는 float: left; //가 있는데, Fixed된 container(sidebar와 content를 동시에 감싸주는)가 없어서 해상도가 높아지면 사이드바와 본문이 넓어지는 것 같네요. 구체적인 소스는 앞서 말씀드린데로; 전문가가 아니라
일단 일반적으로 쓰이는 container 속성은
.container { width: 880px;}
또는
#container { width:955px; }
입니다.
- 답변은 로그인 후 가능합니다.