ขอผู้รู้ช่วยด้วยครับ script template
แก้ไขครั้งสุดท้ายโดย thaiterbor เมื่อ 2012-9-29 20:40ผมจะตัดสวนรูปภาพใหญ่ออกจะขยับขอความขึ้นมาแทนแก้จากหน้า index แต่มันมีช่องว่าง เกิดขึ้น
เข้าไป ไล่ลบ จาก css ก็ยังไม่เจอ
ดูให้ทีครับ ผม งง
อันนี้ไฟล์ index.html<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_italic_400-Myriad_Pro_italic_600.font.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/jquery.faded.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-->
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, .logo, .extra-banner');
</script>
<!-->
<!-->
<script type="text/javascript" src="js/html5.js"></script>
<!-->
</head>
<body>
<!-- header -->
<header>
<div class="container_16">
<div class="logo">
<h1><a href="index.html"><strong>Hanuman</strong> Insulation</a></h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="current">หน้าแรก</a></li>
<li><a href="index-1.html">บริการของเรา</a></li>
<li><a href="index-2.html">รายละเอียด</a></li>
<li><a href="index-4.html">ถาม/ตอบ</a></li>
<li><a href="index-6.html">ติดต่อเรา</a></li>
</ul>
</nav>
<!-- faded slider begin -->
<div id="faded">
<div class="rap">
<a href="#"><img src="images/big-img1.jpg" alt="" width="571" height="398"></a>
<a href="#"><img src="images/big-img2.jpg" alt="" width="571" height="398"></a>
<a href="#"><img src="images/big-img3.jpg" alt="" width="571" height="398"></a>
</div>
<h5><strong>ส่วนหนึ่งของลูกค้าที่ใช้บริการของเรา</strong></h5>
<ul class="pagination">
<li>
<a href="#" rel="0">
<img src="images/f_thumb1.png" alt="">
<span class="left">
Villa<br />
2007 year<br />
5000 sq.ft
</span>
<span class="right">
Brick, glass<br />
3 beds<br />
2 baths
</span>
</a>
</li>
<li>
<a href="#" rel="1">
<img src="images/f_thumb2.png" alt="">
<span class="left">
Villa<br />
2009 year<br />
3500 sq.ft
</span>
<span class="right">
Brick, glass<br />
5 beds<br />
3 baths
</span>
</a>
</li>
<li>
<a href="#" rel="2">
<img src="images/f_thumb3.png" alt="">
<span class="left">
Villa<br />
2010 year<br />
4200 sq.ft
</span>
<span class="right">
Brick, glass<br />
4 beds<br />
3 baths
</span>
</a>
</li>
</ul>
<img src="images/extra-banner.png" alt="" class="extra-banner">
</div>
<!-- faded slider end -->
</div>
</header>
<!-- content -->
<section id="content">
<div class="container_16">
<div class="clearfix">
<section id="mainContent" class="grid_10">
<article>
<h2>Hanuman Insulation</h2>
<p>หนุมาน คอร์ปอเรชั่น รับเหมางาน INSULATION ทุกประเภท</p>
<p>รับเหมาประกอบ ติดตั้งงาน JACKET และ ฉนวนกันความร้อน TANK and PIPING โรงงานอุตสาหกรรม <br>
รับเหมาประกอบ ติดตั้ง งานท่อดักส์<br>
รับเหมาติดตั้ง ซ่อมแซม และ เปลี่ยนหลังคาแมนทอลชีท <br>
รับติดตั้ง ตาข่าย และ อุปกรณ์กันนก อาคาร โกดังและไลน์ผลิต<br>
รับเหมาเช็ดกระจกอาคาร ที่สูง และเปลี่ยนซิลิโคนกระจกที่สูง<br>
รับเหมาปัดหยากไย่ คราบสกปรก และทาสี อาคาร โกดัง และ โรงงานอุตสาหกรรม <br>
รับเหมาทำความสะอาดสิ่งสกปรก ที่เกิดจากกระบวนการผลิตของเครื่องจักรและ โรงงานอุตสาหกรรม<br>
<p> ปัจจุบันบริษัทฯ มีความพร้อมโดยมีทีมงานรองรับการบริการให้แก่ท่านทั่วทุกภูมิภาคทั้งนี้บริษัทฯขอเสนอรายละเอียดเกี่ยวกับการดำเนินการของบริษัทเพื่อให้ท่านได้กรุณาพิจารณาถ้าท่านต้องการข้อมูลรายละเอียดเพิ่มเติมประการใด โปรดกรุณาติดต่อ ข้าพเจ้า โทรศัพท์หมายเลข 0-4323-6565 แฟกซ์ 0-4323-6565 มือถือ 086-3188870 , เพื่อ จะได้จัดส่งเจ้าหน้าที่ ไปเรียนชี้แจงรายละเอียด และเสนอข้อมูลเพิ่มเติมได้ทันที หวังเป็นอย่างยิ่งว่าคงจะได้มีโอกาสได้รับใช้ท่านในเร็ววันนี้</p>
<a href="#" class="button">ดูรายละเอียดเพิ่มเติม</a>อันนี้ไฟล์ css ครับ/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{display:block}
mark, rp, rt, ruby, summary, time{display:inline}
/* Global properties ======================================================== */
body {background:#1d1d1d;font-family:Arial, Helvetica, sans-serif;font-size:100%;line-height:1.125em;color:#c0c0c0}
.ic, .ic a {border:0;float:right;background:#000;color:#f00;width:100%;line-height:10px;font-size:10px;margin:-50% 0 0 0;overflow:hidden;padding:0}
html {min-width:980px}
html, body {height:100%}
/* Global Structure ============================================================= */
.container_16 {font-size:.75em;position:relative}
/* Header */
header {height:625px;overflow:hidden;border-bottom:2px solid #2a2a2a;background:url(../images/header-pattern.gif) 50% 0 #1d1d1d}
/* Content */
#content {padding:37px 0 90px 0;background:#121212}
#mainContent {padding:13px 0 0 0}
/* Footer */
footer {border-top:1px solid #292929;padding:40px 0 40px 0}
/* Left & Right alignment */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.col-1, .col-2, .col-3 {float:left}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
/* The inside class provides consistent padding. To be used often! */
.inside{padding:20px}
/*----- form defaults -----*/
input, select, textarea {font-family:Arial, Helvetica, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
/*----- other -----*/
figure {margin:0 24px 0 0;float:left;padding:4px;background:#fff;position:relative;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;behavior:url(js/PIE.htc)}
figure.alt {margin-right:5px}
figure.last {margin-right:0}
.img-box {width:100%;overflow:hidden;padding-bottom:20px}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:9px}
.p2 {margin-bottom:18px}
.p3 {margin-bottom:27px}
/*----- txt, links, lines, titles -----*/
a {color:#c0c0c0;outline:none}
a:hover {text-decoration:none}
h2 {font-size:33px;color:#fff;line-height:1.2em;font-style:italic;font-weight:normal;letter-spacing:-1px;margin-bottom:.5em}
h3 {font-size:1em;line-height:16px;font-weight:normal;text-transform:uppercase;color:#c0c0c0;margin-bottom:5px}
h4 {font-size:1em;color:#616161;margin-bottom:12px}
h5 {font-size:15px;line-height:20px;font-weight:normal;color:#909090;font-style:italic;margin-bottom:1em}
hgroup h5 {margin-bottom:4px}
hgroup h4 {margin-bottom:18px}
.button {display:inline-block;position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#d42400;background:-webkit-gradient(linear, 0 0, 0 70%, from(#ed2800), to(#b21e00));background:-moz-linear-gradient(#ed2800, #b21e00 70%);background:linear-gradient(#ed2800, #b21e00 70%);-pie-background:linear-gradient(#ed2800, #b21e00 70%);behavior:url(js/PIE.htc);padding:0 18px 0 18px;line-height:35px;color:#fff;font-weight:bold;text-decoration:none;-webkit-transition-duration:0.5s}
.button:hover {background:#fff;color:#000}
/*==================boxes====================*/
.box {background:url(../images/box-bg.gif) 0 100% repeat-x #b5c83c;padding:24px 18px 40px 20px;border:1px solid #c9dd47;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;behavior:url(js/PIE.htc);position:relative;color:#fff}
.box h2 {color:#121212;background:url(../images/bd_bot.gif) 0 100% repeat-x;padding-bottom:20px;margin-bottom:20px;line-height:30px;letter-spacing:-1px}
.box h3 {font-weight:normal;color:#000;font-size:16px;line-height:22px;text-transform:none}
.box h3 a {color:#000}
.address {float:left;margin:0 30px 10px 0}
.address.last {margin-right:0}
.address dt {margin-bottom:4px;text-transform:uppercase}
.address dd {clear:both}
.address dd span {float:left;padding-right:25px}
.address dd a {color:#c0c0c0}
/* Header ---------------------------------------- */
/* Logo */
header .logo {position:absolute;left:45px;top:70px;background:url(../images/logo.png) no-repeat 0 0;padding:20px 0 0 20px}
header .logo h1 {font-size:38px;line-height:1.2em;color:#c3c3c3;font-weight:normal;font-style:italic;letter-spacing:-1px}
header .logo h1 a {color:#c3c3c3;text-decoration:none}
header .logo h1 a strong {color:#fff}
/* Navigation */
header nav {position:absolute;right:25px;top:97px}
header nav ul li {float:left;padding-left:6px}
header nav ul li a {float:left;color:#fff;text-decoration:none;width:80px;text-align:center;line-height:31px;font-size:14px}
header nav ul li a:hover, header nav ul li a.current {background:url(../images/nav-bg.gif) 0 0 repeat-x;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
/* Faded Slider */
#faded {position:absolute;left:0;top:161px;padding-bottom:20px}
/*
* Required:If fixed height, state it here
*/
#faded .rap {background:url(../images/img-wrapper-bg.jpg) no-repeat 50% 0 #d92400;border:1px solid #e46b00;width:589px;height:416px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);z-index:10;overflow:hidden}
#faded .rap img {margin:9px 0 0 9px}
#faded ul.pagination {position:absolute;left:537px;top:10px;background:url(../images/pagination-splash.gif) no-repeat 0 0 #2a2a2a;border:1px solid #3a3a3a;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:-2px 8px 5px rgba(0, 0, 0, .4);-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .4);-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .4);z-index:9;padding:25px 0 25px 0}
#faded ul.pagination li {width:429px;position:relative;background:url(../images/line-bot.gif) no-repeat 77px 100%;padding-bottom:1px;height:1%}
#faded ul.pagination li:last-child {background:none}
#faded ul.pagination li a {display:block;padding:16px 40px 14px 77px;overflow:hidden;color:#7f7f7f;text-decoration:none;font-size:13px;line-height:28px;height:1%;cursor:pointer;-moz-transition:all 0.3s ease-out; /* FF3.7+ */ -o-transition:all 0.3s ease-out; /* Opera 10.5 */ -webkit-transition:all 0.3s ease-out; /* Saf3.2+, Chrome */ }
#faded ul.pagination li a:hover, #faded ul.pagination li.current a {background-color:#1d1d1d;color:#fff}
#faded ul.pagination li a img {float:left;margin-right:28px}
#faded ul.pagination li a span.left {float:left;width:100px}
#faded ul.pagination li a span.right {float:left;width:80px}
#faded .extra-banner {position:absolute;left:485px;top:307px;z-index:11}
/* Content
---------------------------------------- */
#mainContent article {padding:0 0 32px 0;margin-bottom:30px;border-bottom:1px dashed #323232}
#mainContent article.last {padding-bottom:0;margin-bottom:0;border:none}
/* Aside */
aside article {padding-bottom:0;margin-bottom:35px}
aside article.last {margin-bottom:0}
/* List of images */
.img-list {padding-bottom:9px}
.img-list li {float:left;padding:0 9px 9px 0;width:109px;height:93px}
.img-list li a {float:left;padding:4px;background:#fff;position:relative;z-index:1;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;behavior:url(js/PIE.htc);-webkit-transition-duration:0.5s}
.img-list li a:hover {z-index:2;background:#ce2300;-webkit-transform:scale(1.5)}
/* Accordion */
.accordion dt {font-size:16px;line-height:1.2em;color:#000;position:relative;padding:10px 0 5px 40px;height:1%}
.accordion dt img {position:absolute;left:0;top:10px}
.accordion dt a {color:#000}
.accordion dd {display:none;padding:0 0 0 40px}
/* Lists */
.list1 li {background:url(../images/arrow1.gif) no-repeat 0 7px;padding:0 0 6px 15px;font-size:13px;zoom:1}
.list1 li a {color:#fff;font-weight:bold}
/*===== footer =====*/
footer .container_16 {font-size:.625em}
footer nav ul {overflow:hidden;margin:0 0 6px -11px}
footer nav ul li {display:inline;margin-left:-1px}
footer nav ul li a {border-left:1px solid #777;padding:0 9px 0 11px;color:#777;text-transform:uppercase;text-decoration:none;-moz-transition:all 0.3s ease-out; /* FF3.7+ */ -o-transition:all 0.3s ease-out; /* Opera 10.5 */ -webkit-transition:all 0.3s ease-out; /* Saf3.2+, Chrome */}
footer nav ul li a:hover {color:#e1e1e1}
footer .copy {}
footer .copy span {text-transform:uppercase;color:#e1e1e1}
footer .copy a {color:#777}
/*----- forms -----*/
#contacts-form fieldset {border:none}
#contacts-form label {display:block;height:26px;overflow:hidden}
#contacts-form span {float:left;width:66px}
#contacts-form input {float:left;background:#1e1e1e;border:1px solid #a4a4a4;width:210px;padding:1px 5px 1px 5px;color:#fff}
#contacts-form textarea {float:left;width:210px;padding:1px 5px 1px 5px;height:195px;background:#1e1e1e;border:1px solid #a4a4a4;overflow:auto;color:#fff}
#contacts-form .button {float:right;margin-left:16px;margin-top:14px}
/*==========================================*/ตามรูปครับอยากเอารูปที่ 1 ออก แล้วขยับรูปที่ 2 ขึ้นไปแทน
ผมลองลบ แล้ว มันเกิดช่องว่าง
ช่วยด้วยครับ
อันนี้รูปที่ต้องการขยับขึ้นไปแทนที่
อันนี้มันเกิดช่องว่างครับ---แก้ไขไม่ให้เกิดช่องว่างยังไง ผมมีข้อสงสัยว่า
1. นั้นเป็น template แจกใช่รึเปล่า
2. คุณได้รับจ้างออกแบบเว็บรึป่าว
ถ้าไม่จริงต้องขอโทษด้วย เพราะผมไม่ค่อยชอบ พวกที่ทำแบบนี้
แก้ที่ css ตัวนี้ ปรับที่ height:625px;header {height:625px;overflow:hidden;border-bottom:2px solid #2a2a2a;background:url(../images/header-pattern.gif) 50% 0 #1d1d1d} ผมทำเว็บให้พี่ชายครับ ผมทำงานที่ บริษัทนี้ อะครับ
จะลองดูครับ
ของฟรีครับ
ได้แล้วครับขอบคุณ ติดขัดอีก จะ ขอถามอีกครับ
หน้า:
[1]