ส่วนนี้ให้คุณดูโพสต์ทั้งหมดของสมาชิกท่านนี้ (เฉพาะโพสต์ในส่วนที่คุณมีสิทธิ์เข้าถึง)
อ้างถึงจาก: darkknightza ใน 13 มิถุนายน 2017, 10:11:40อ้างถึงจาก: chingza ใน 13 มิถุนายน 2017, 06:55:04ผมก็งง
คืออะไร ยังไง ยังงง คร้าบบบบ ได้เงินยังไงหรอออ
อ้างถึงจาก: goldxp ใน 24 พฤษภาคม 2017, 12:23:39
การคำนวณ margin ของ position absolute
โดยไม่กำหนด left ก่อนอาจจะมีปัญหาในบาง browser ครับ เพราะค่าเริ่มต้นอาจจะคำนวณต่างกัน
ให้กำหนดค่า left ก่อนแล้วถ้าจะเปลี่ยนอะไรเพิ่มเติมค่อยใส่ margin แทนครับ
.input_user{
position:absolute;
-webkit-border-radius: 1em;
height:25px;
width:auto;
top:180px;
/*margin-left:-80px;*/
left:194px;
}
.input_pass{
position:absolute;
-webkit-border-radius: 1em;
height:25px;
top:220px;
left:194px;
/*margin-left:-80px;*/
}
อ้างถึงจาก: goldxp ใน 24 พฤษภาคม 2017, 10:56:46
<div id="area_form" hidden="1">
<div class="circle_profile"><img src="images/logo.png"
></div>
<input name="txtuser" type="text" class="input_user" id="txtuser"/>
<input name="txtpass" type="password" class="input_pass" id="txtpass"/>
<input name="Submit" type="submit" value="Login" class="btn_login"/><div class="label_user">ID EMP :</div><div class="label_pass">Password :</div>
<div class="close_login"><img src="<?php echo $root?>images/shops-close-icon-65321.png" width="30" height="30" /></div>
</div>
ไม่เจอ css ที่เกี่ยวข้องกับส่วนนี้เลยครับ css น่าจะยังไม่ครบนะครับ
<link rel="stylesheet" href="<?php echo $root?>css/login.css" type="text/css" />#area_form{
position:fixed;
left:35%;
top:23%;
height:330px;
margin:0px;
top:10px
padding:0px;
width:500px;
/*height:55%;*/
background-color:#C6C6FF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* เงาของรูป */
text-align:center;
}
.circle_profile{ /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
position:absolute;
height: 230px; /* ความสูงปรับให้เป็นออโต้ */
width: 230px; /* ความสูงปรับให้เป็นออโต้ */
/* border: 3px solid #CCCCFF; เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
background-color:#6699FF;
border-radius: 50%; /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* เงาของรูป */
text-align:center;
left:27%;
top:-22%;
}
.circle_profile img{
margin-top:5px;
height: 220px; /* ความสูงปรับให้เป็นออโต้ */
width: 220px;
border-radius: 50%;
}
.input_user{
position:absolute;
-webkit-border-radius: 1em;
height:25px;
width:auto;
top:180px;
margin-left:-80px;
}
.input_pass{
position:absolute;
-webkit-border-radius: 1em;
height:25px;
top:220px;
margin-left:-80px;
}
.label_user{
position:absolute;
height:265px;
width:auto;
top:182px;
margin-left:94px;
}
.label_pass{
position:absolute;
height:26px;
width:auto;
top:222px;
margin-left:85px;
}
.btn_login{
position:absolute;
font-size:18px;
top:270px;
left:40%;
width:100px;
height:50px;
}
.area_form label_user{
position:absolute;
height:25px;
top:180px;
left:5px;
}
.area_form label_pass{
position:absolute;
height:25px;
top:220px;
left:5px;
}
.close_login{
position:absolute;
height:25px;
width:25px;
top:-5px;
right:-5px;
}
#login_click
{
position:absolute;
padding:0px;
top:0px;
right:50%;
width:50px;
height:20px;
background-color:#F0F0FF;
opacity:0.9;
}
#status{
position:absolute;
bottom : 10px;
left: 10 px;
width:50px;
height:30px;
background-color:#F0F0FF;
}
อ้างถึงจาก: goldxp ใน 24 พฤษภาคม 2017, 10:14:45
ขอดูโค้ด html,css กับหน้าจอบน browser ที่ขึ้นสวยงาม ได้ไหมครับ ถ้ามีน่าจะพอเดาได้ว่าเพราะโค้ดตรงไหนครับ
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<link rel="stylesheet" href="<?php echo $root?>css/template.css" type="text/css" />
<!-- ==================== Counter TIme ====================-->
<script src="js/jquery.min.js.download"></script>
<script src="js/circletimer.min.js.download"></script>
<!-- ==================== END Counter TIme ====================-->
<link rel="stylesheet" href="<?php echo $root?>css/chat.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $root?>css/login.css" type="text/css" />
<!-- <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <?php //echo $root?>js/jquery-1.12.4.js-->
<script src="<?php //echo $root?>js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="<?php echo $root?>js/jquery.fullscreen-min.js"></script>
<script type="application/javascript" src="<?php echo $root?>js/event.js"></script>
<script src="js/jquery.js.download"></script>
<script src="js/TweenMax.min.js.download"></script>
<script src="js/jquery.pietimer.min.js.download"></script>
<title>LEARN IT YOUR SELF</title>
</head>
<div id="body">
<!--
<div id="LOGIN_PAGE">
<div class="BG_BOTTOM"></div>
</div>
-->
<div id="System_PAGE" >
<div class="default_PAGE" hidden="1">
<h1>default_PAGE</h1>
</div>
<!-- Start System_PAGE-->
<div class="elearning_PAGE" hidden="1">
<h1>E-learning</h1>
</div>
<!-- End elearning_PAGE-->
<!-- Start Orientation_PAGE-->
<div class="Orientation_PAGE" hidden="1">
<h1>Orientation</h1>
</div>
<!-- End Orientation_PAGE-->
<!-- Start Quiz_PAGE-->
<div class="Quiz_PAGE" hidden="1">
<h1>Quiz</h1>
</div>
<!-- End Quiz_PAGE-->
<!-- Start Evaluation_PAGE-->
<div class="Evaluation_PAGE" hidden="1">
<h1>Evaluation</h1>
</div>
<!-- End Evaluation_PAGE-->
<!-- SUB PAGE AREA -->
<div class="READ_PAGE" hidden="1">
<h1>READ</h1>
</div>
<div class="TEST_PAGE" hidden="1">
<h1>READ</h1>
</div>
<!-- End Evaluation_PAGE-->
<!-- -END SUB PAGE AREA->
</div>
<!-- Start Form Login -->
<div id="area_form" hidden="1">
<div class="circle_profile"><img src="images/logo.png"
></div>
<input name="txtuser" type="text" class="input_user" id="txtuser"/>
<input name="txtpass" type="password" class="input_pass" id="txtpass"/>
<input name="Submit" type="submit" value="Login" class="btn_login"/><div class="label_user">ID EMP :</div><div class="label_pass">Password :</div>
<div class="close_login"><img src="<?php echo $root?>images/shops-close-icon-65321.png" width="30" height="30" /></div>
</div>
<span>Move the mouse over the div.</span> <span> </span>
<!-- END Form Login -->
<div id="left_menu"><div id="login_click">LOGIN</div>
<div class="left_menu_btn"><img src="images/close_btn.png" width="30" height="30" /></div>
</div>
<!-- Start Mainmenu-->
<div class="main_menu" >
<div class="btn_menu1"><img src="images/elearning_icon.png" width="61" height="88" /></div>
<div class="btn_menu2"><img src="images/orientation_icon.png" width="75" height="88" /></div>
<div class="btn_home"><img src="images/home_icon.png" width="80" height="85" /></div>
<div class="btn_menu3"><img src="images/quiz_icon.png" width="61" height="88" /></div>
<div class="btn_menu4"><img src="images/evaluation_icon.png" width="61" height="88" /></div>
</div>
<!-- End Main menu-->
</div>
<div class="default_PAGE"></div>
ทุกปุ่มทำงานได้บน Chrome เวอร์ชั่น 58.0.3029.110 แต่พอไปเปิด IE แล้วเป็นแบบภาพที่เปิดกระทู้
แต่ถ้าเปิดใน Firefox ทำงานได้เหมือน Chrome Laypout ไม่เพี้ยน แต่ภาษาจะเป็น �����»�ͧ�ѹ��л�Һ� จร้าา
</html>
* {
margin:0;
padding:0;
}
#body
{
/*background-image : url(http://172.22.1.155/km2015/template/default/images/1extra-bg-green.jpg); *//*template/default/images/bg-body.jpg <?php echo $root?>template/default/images/bg_km.jpg #edd1ed*/
background-image:url(../images/default.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-color: ;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.fontDefault{
font-size:14px;
}
.search_topic{
font-size:18px;
color:#06F;
}
.search_keyword{
font-size:20px;
color:#06F;
}
.search_details{
font-size:14px;
color:#000;
}
.search_link{
font-size:10px;
color:#000;
}
.font_topic{
font-size:16px;
color:#FFF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.main_menu{
position:absolute;
bottom:0%;
padding:0px;
left:0%;
width:100%;
height:50px;
background-color:#8888FF;
/*opacity:0.2;*/
}
.btn_menu1{
position:absolute;
margin-top:-50px;
height:10px;
left : 25%;
text-align:center;
}
.btn_menu2{
position:absolute;
margin-top:-50px;
height:10px;
left : 35%;
text-align:center;
}
.btn_home{
position:absolute;
margin-top:-60px;
height:10px;
left : 45%;
text-align:center;
}
.btn_menu3{
position:absolute;
margin-top:-50px;
left : 55%;
text-align:center;
}
.btn_menu4{
position:absolute;
margin-top:-50px;
height:10px;
left : 65%;
text-align:center;
}
/* css กำหนดพื้นที่ของ div ข้อความเลื่อน */
.containMarquee{
bottom:-15px;
position:relative;
width:100%;
margin:auto;
display:block;
height:20px;
border:1px dashed #CCC;
line-height:20px;
background-color:#FFAA00;
overflow:hidden;
}
/* css กำหนดข้อความ สำหรับการทำ marquee */
.obj_marquee{
position:absolute;
display:block;
white-space:nowrap;
}
#left_menu{
position:absolute;
padding:0px;
top:30%;
left:1%;
width:300px;
height:30%;
background-color:#FFFFFF;
opacity:0.5;
/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); เงาของรูป */
}
.left_menu_btn{
position:absolute;
padding:0px;
top:30%;
right:-8%;
width:30px;
height:20px;
opacity:0.9;
}
#LOGIN_PAGE{
position:fixed;
height:36px;
margin:0px;
margin-top:0px;
marg
padding:0px;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#DFDFFF;
text-align:left;
}
.BG_BOTTOM{
position:fixed;
height:36px;
margin:0px;
padding:0px;
bottom:0px;
left:0px;
width:100%;
height:55%;
background-color:#CCCCFF;
opacity:0.3;
text-align:center;
}
#System_PAGE{
position:fixed;
top : 0%;
width:100%;
height:98%;
background-color:#C6C6FF;
text-align:center;
/*background-image:url(../images/default.jpg); */
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.default_PAGE{
background-color:#C6C6FF;
opacity:1.0;
width:100%;
height:100%;
}
.elearning_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
left:1%;
top:2%;
}
.Orientation_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
left:1%;
top:2%;
}
.Quiz_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
left:1%;
top:2%;
}
.Evaluation_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
left:1%;
top:2%;
}
.READ_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
overflow: scroll;
left:1%;
top:2%;
}
.TEST_PAGE{
position:absolute;
background-color:#B3B3FF;
-webkit-border-radius: 1em;
opacity:1.0;
width:98%;
height:90%;
overflow: scroll;
left:1%;
top:2%;
}
System_PAGE h1{
opacity:100;
filter:alpha(opacity=100);
color:#0F6;
transform:translateY(100%);
transition:transform .5s .5s, opacity .5s;
}
#countdown{
position:relative;
padding:0px;
margin-left:0px;
top:1%;
left:0.5%;
width:150px;
height:150px;
opacity:1.0;
}
#ct-circle-container{
width:100%;height:100%
}
#ct-circle-container svg{
height:100%;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);width:100%;
}
#ct-circle-container svg circle{
fill:none;stroke:#17a768;stroke-dashoffset:0;stroke-width:50%;
}
#head_bar{
position:fixed;
height:36px;
margin:0px;
padding:0px;
top:0px;
left:0px;
width:100%;
background-color:#FA0;
text-align:center;
}
#info_bar{
position:fixed;
height:38px;
padding:0px;
bottom:0px;
left:0px;
width:100%;
background: rgba(255, 255, 255, 1);
text-align:center;
alignment-baseline:middle;
}
#rigthbanner {
position:fixed;
width:165px;
height:65%;
bottom:120px;
right:1px;
margin-right:0px;}
#leftBottomBanner {
position:fixed;
width:100;
margin:0px;
bottom:16px;
right:1px;
}
#Information_Index {
position:fixed;
width:970px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-485px;
background-color:#FA0;
overflow: scroll;
}
#Information_bg {
position:fixed;
left:0px;
width:100%;
height:100%;
top:0px;
background: rgba(0, 0, 0, 0.7);
overflow:visible;
overflow: scroll;
}
#Index_page {
position:relative;
left:50%;
top:40px;
width:975px;
height:100%;
margin-left:-475px;
}
#exam_area{
position:absolute;
opacity:1.0;
width:50%;
height:50%;
left:25%;
top:5%;
}
/*background: rgba(255, 200,0, 0.9);*/
/*background-color:#FA0;*/
/* border-radius: 25px;
padding:8px 8px;
overflow: scroll;
}
#article {
position:fixed;
left:50%;
top:50px;
width:1000px;
height:100%;
margin-left:-500px;
background-color:#EFE;
overflow: scroll;
}
#board {
position:fixed;
left:50%;
top:50px;
width:1000px;
height:100%;
margin-left:-500px;
background-color:#EFE;
overflow: scroll;
}
#slideshow-carousel { float:left;
width:206px;
position:relative
}
#slideshow-main {
width:628px;
float:left;
margin-right:3px;
}
#slideshow-main ul {
margin:0;
padding:0;
width:429px;
}
#slideshow-main li {
width:810px;
height:290px;
display:none;
position:relative;
}
#slideshow-main li.active {
display:block !important;
}
#slideshow-main li span.opacity {
position:absolute;
bottom:-1px;
left:1px;
display:block;
width:100%;
height:60px;
background:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:500;
}
#slideshow-main li span.content {
position:absolute;
bottom:-4px;
left:0px;
display:block;
width:100%;
height:60px;
z-index:1000;
color: #FFF;
}
#slideshow-main li span.content h1 {
font-size:17px;
margin:5px 0;
padding:0 5px;
;
color:#FFF;
text-align: center;
}
#slideshow-main li span.content p {
font-size:15px;
margin:5px 0;
padding:0 5px;
;
color:#FFF;
text-align: center;
}
#slideshow-carousel {
float:left;
width:230px;
height:270px
position:relative
}
#slideshow-carousel ul {
margin:0;
padding:0;
list-style:none;
}
#slideshow-carousel li {
background:#fff;
height:97px;
position:relative
}
#slideshow-carousel li .arrow {
left:3px;
top:28px;
position:absolute;
width:20px;
height:40px;
background:url(<?php echo $root;?>module/slider/images/arrow_white.png) no-repeat 0 0;
display:block;
}
#slideshow-carousel li a {
background:#000;
display:block;
width:230px;
height:90px;
}
#slideshow-carousel .active {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
#slideshow-carousel .faded {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#searchbox
{
width:200px;
border:solid 1px #000;
padding:3px;
}
#display
{
width:200px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px;
border-top:solid 1px #dedede;
font-size:12px;
height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#frame_previewtopic
{
background-color:#000;
border-color:#000;
position:fixed;
height:100px;
top:0px;
left:0px;
width:100px;
text-align:center;
}
อ้างถึงจาก: kondam ใน 09 พฤษภาคม 2017, 09:19:32
ต้องดูลูกค้าด้วยครับ ว่าช่วงนี้คนในพื้นที่มีกระแสอะไรกัน
สำหรับแถวบ้านผมช่วงนี้นิยมปลูกกล้วยหอมกันครับ คนขายพันธุ์กับคนขายมูลสัตว์ขายดีมาก
