fake_field가 input안에 안들어가요..
159
minje621
작성한 질문수 6
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</head>
<body>
<section id = "container">
<header id = "header">
<section class = "inner">
<h1 class = "logo">
<a href="index.html">
<div class = "sprite_insta_icon"></div>
<div class = "sprite_write_logo"></div>
</a>
</h1>
<div class="search_box">
<input type="text" placeholder="검색" id = "search-field">
<div class="fake_field">
<span class="sprite_small_search_icon"></span>
<span>검색</span>
</div>
</div>
<div class="right_icons">
<div class="sprite_camera_icon"></div>
<div class="sprite_compass_icon"></div>
<div class="sprite_heart_icon_outline"></div>
<div class="sprite_user_icon_outline"></div>
</div>
</section>
</header>
</section>
</body>
</html>
------------------------------
.sprite_insta_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -53px -235px;
width: 22px;
height: 22px;
}
.sprite_write_logo {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -94px -72px;
width: 103px;
height: 29px;
}
.sprite_compass_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -130px -286px;
width: 23px;
height: 23px;
}
.sprite_user_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -272px -182px;
width: 22px;
height: 24px;
}
.sprite_heart_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -52px -261px;
width: 24px;
height: 22px;
}
.sprite_small_search_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -337px -246px;
width: 10px;
height: 10px;
}
.sprite_more_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -301px -218px;
width: 15px;
height: 3px;
}
.sprite_bubble_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -239px -202px;
width: 24px;
height: 24px;
}
.sprite_share_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -324px -52px;
width: 21px;
height: 24px;
}
.sprite_bookmark_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -237px -286px;
width: 19px;
height: 24px;
}
.sprite_bookmark_outline.on {
background: url('../imgs/background01.png') no-repeat -159px -286px;
width: 19px;
height: 24px;
}
.sprite_small_heart_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -323px -274px;
width: 12px;
height: 11px;
}
.sprite_camera_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -271px -104px;
width: 24px;
height: 22px;
}
.sprite_insta_big_logo {
display: inline-block;
background: url('../imgs/background02.png') no-repeat -98px -150px;
width: 175px;
height: 51px;
}
.sprite_plus_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -187px -202px;
width: 23px;
height: 23px;
}
body{
background: #fafafa;
}
#header{
width: 100%;
position: absolute;
left:0;
top:0;
z-index: 999;
background: white;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
#header .inner{
width: 975px;
height: 77px;
margin: auto;
display:flex;
justify-content: space-between;
align-items: center;
}
#header .inner .logo > a {
color: transparent;
}
#header .inner .logo .sprite_insta_icon {
position: relative;
margin-right: 30px;
}
#header .inner .logo .sprite_insta_icon:after{
/* :을 찍으면 가상선택자 after는 그 후에 뭔가를 만들겠다. 콘텐츠를 받아야함.*/
content: '';
width: 1px;
height: 28px;
background: #000;
position: absolute;
right : -15px;
top : 0;
}
#header .inner .logo div{
vertical-align: middle;
}
#header .search_box{
position: relative;
}
#search-field{
width: 185px;
height: 28px;
background: #fafafa;
border: 1px solid #dbdbdb;
border-radius: 3px;
padding: 3px 30px;
color: #999;
font-weight: 400;
text-align: left;
font-size: 14px;
outline: none;
}
#header .search_box .fake_field{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
이 코드인데 문제를 찾을 수 가 없어용..
답변 1
0
안녕하세요 ^^
캡쳐해주신 화면으로는 문제가 없어보입니다~
자세한 확인을 위해 메일로 파일을 보내주시면 빠르게 확인하고 회신 드리도록 할게요 ^^~
kindtigerr@gmail.com 으로 보내주세요 ^&^
variableWidth.style.width 실행이 안되는것 같습니다.
0
304
0
알수없는 에러,,
0
210
0
postgresql: unrecognized service
0
291
0
AssertionError
0
214
0
\d 해도 작동이 안되고 에러가 납니다.
0
317
3
혹시 안내사항이 무슨 말인가요??
0
250
1
팔로잉 부분이 아예 작동이 안되네요. 분명히 똑같이 적은거 같은데 글자도 그림 뒤에 숨고 잘 작동이 안되요
0
283
3
전체 완성된 코딩소스는 어디잇나요?
0
191
2
4:10 쯤에 보이는 네모칸(빨, 주, 노, 초, ...) 치는 앱은 무엇인가요?
0
268
2
웹을 조금 해본사람이 들어야하나요 ?
1
212
1
제가 models.py의 Comment에서 post 변수를 안쓰고
0
230
0
여기까지 따라하고 runserver를 했더니 오류가 떠요
0
423
2
너무 저급한 질문 일 수도 있긴한데
0
173
0
화면이 오류가 안뜨는데
0
237
0
해결은 했지만 궁금합니다.
0
187
0
config폴더에 있는것과 accounts폴더에 있는 것들은 어떻게 다른건가요?
0
358
1
acoount 아래에 urls.py가 없는데 만들어야하나요?
0
191
1
링크가 안생겨요
0
203
1
상위폴더로 어떻게 이동하나요?
0
1112
1
psql이 안돼요
0
212
0
똑같이 했는데 오류가 뜹니다
0
289
1
6분 54초
0
180
0
저도 왜 좋아요가 안뜨는 걸까요?
1
541
6
top :50% 가 왜 가운데로 안가는건가요?
0
458
1