ขอถามเรื่อง CSS หน่อยครับ

Rabbitinblack · 03 ก.ย. 2011, 00:50 น.

จะเอาไปใช้ทำอะไรอะ จะได้หามาอธิบายถูกอะ

ณัฏฐ์ · 03 ก.ย. 2011, 01:20 น.

ก็ทำแบบที่ว่าล่ะครับ แต่ทำเป็น bg เป็น grid ที่แรนดอมสี (นึกถึงแนวๆ ดิสโก้)
หรือแบบ อยากแรนดอมรูปขึ้นมาโชว์หน้าแรกซัก 10 รูป อะไรแบบนี้

ลองดูถ้าใช้ javascript ธรรมดามันจะ random ให้แค่ div แรก

โค้ด เลือกทั้งหมด


<script type="text/javascript">
			function rcolor(){
				document.getElementById("rcolor").style.backgroundColor = "#" Math.floor(Math.random()*16777215).toString(16);
			}
</script>

<div id="rcolor" style="height:10%; width:10%; position:relative; top:0%; float:left;"></div>
<div id="rcolor" style="height:10%; width:10%; position:relative; top:0%; float:left;"></div>

Rabbitinblack · 03 ก.ย. 2011, 04:09 น.

ลองใช้ jQuery คำสั่ง .css({background:XXX}); อะไรแบบนี้อะ แล้วก็ไปเขียน script random background เอา

ส่วนจะสร้าง div ตัวเดียวกันกี่ตัวลอง loop ตัวนี้มั้ยอะ

$('.create-div').append('<p>Test</p>');

สมมติว่าตอนแรกว่ามี

<div class="create-div"></div>

แล้วพอรันแล้วมันจะได้เป็น

<div class="create-div"><p>Test</p></div>

ถ้า loop มันสามรอบ เราก็ได้จะได้

<div class="create-div"><p>Test</p><p>Test</p><p>Test</p></div>

อะไรแบบนี้อะ

ตอบถูกประเด็นปะ

หนุ่ม · 03 ก.ย. 2011, 12:12 น.

แบบนี้พอจะได้ไหม

อ้างอิง
<!DOCTYPE html>
<head>
<title>Random Color</title>
<style>
body {background:#fff;color:#000;font:9px Tahoma}
p {float:left;display:inline;height:100px;width:40px;margin:5px;text-align:center}
</style>
</head><body>
<div class="outer"></div>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
$(document).ready(function() {
   var numDiv = 120, colorBG
   for (var i = 0; i < numDiv; i ) {
      colorBG = Math.floor(Math.random()*16777215).toString(16);
      $('.outer').append('<p style="background:#' colorBG '">' colorBG '</p>');
   };
});
</script>
</body></html>

ณัฏฐ์ · 03 ก.ย. 2011, 14:10 น.

อ้อ ขอบคุณครับ

น่าจะได้แล้วแหละๆ
คือทีแรกจะลองแบบไม่ใช้ jQuery ไง(กลัวว่ามันจะอืดจะช้ารึเปล่าอะไรแบบนี้)
แต่พอใช้แค่ javascript แล้วยากชะมัด

ยุนเอ · 04 ก.ย. 2011, 01:26 น.

copy paste

อิคคิว · 08 ก.ย. 2012, 19:01 น.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" href="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/flexslider.css" type="text/css">
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js"></script>
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.navigation').navigation();
  });
</script>

  ส่วนใช้งานครับ
</div>  
</div>
</div>
<div id="navigation">
<div class="navigation">
  <ul class="slides">
    <li>
     <img src="../Desktop/webasianbox/img/1.png" width="600" height="auto">
    </li>
    <li>
      <img src="../Desktop/webasianbox/img/2.png" width="600" height="auto">
    </li>
    <li>
      <img src="../Desktop/webasianbox/img/3.png" width="600" height="auto">
    </li>
       <li>
      <img src="../Desktop/webasianbox/img/4.png" width="600" height="auto">
    </li>
   <li>
      <img src="../Desktop/webasianbox/img/5.png" width="600" height="auto">
    </li>
  </ul>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

พอดีจะทำslidesภาพครับแต่ไม่รู้ผิดตรงไหนไม่ยอมขึ้น
ใครพอรู้รบกวนช่วยดูให้หน่อยครับ

ยุนเอ · 08 ก.ย. 2012, 19:14 น.

อ้างคำพูดจาก: อิคคิว เมื่อ 08 ก.ย. 2012, 19:01 น.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" href="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/flexslider.css" type="text/css">
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js"></script>
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider.js"></script>

1.ซ้ำ เลือกเอาซักตัว .min เอาไว้ขึ้น production ถ้าแก้โค๊ดไม่เป็นเลยและกะจะไม่แก้เอา .min เลยก็ได้
2.ไฟล์นี้อยู่ที่ไหน ถ้าอยุ่บน hosting path ผิดชัวร์ๆ ../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.navigation').navigation();
จาก doc ของ http://www.woothemes.com/flexslider/
มันไม่ได้เรียกยังงี้นะ

ต้องเป็น
 $('.navigation').flexslider();
  });
</script>

  ส่วนใช้งานครับ
</div>  
</div>
</div>
<div id="navigation">
<div class="navigation">
  <ul class="slides">
    <li>
     <img src="../Desktop/webasianbox/img/1.png" width="600" height="auto">
    </li>
    <li>
      <img src="../Desktop/webasianbox/img/2.png" width="600" height="auto">
    </li>
    <li>
      <img src="../Desktop/webasianbox/img/3.png" width="600" height="auto">
    </li>
       <li>
      <img src="../Desktop/webasianbox/img/4.png" width="600" height="auto">
    </li>
   <li>
      <img src="../Desktop/webasianbox/img/5.png" width="600" height="auto">
    </li>
  </ul>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

พอดีจะทำslidesภาพครับแต่ไม่รู้ผิดตรงไหนไม่ยอมขึ้น
ใครพอรู้รบกวนช่วยดูให้หน่อยครับ

ปล. อย่าลืมใส่ jquery ด้วย
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
ไม่ชัวร์ลิงก์ลองเช็คดูอีกที

อิคคิว · 09 ก.ย. 2012, 07:56 น.

โอได้แล้วครับขอบคุณมากครับ

ขอถามอีกเรื่องนะครับทำไมอันนี้ผมใส่ลิงค์แต่มันไม่ยอมทำงาน

อ้างอิง.mynavi{
   display: block;
   width: 130px;
   height: 20px;
   text-align: center;
   text-decoration: none;
   background-color: #C2CFDF;
   color: #434951;
   float: left;
   margin: 5px;
   font: 12px/20px Georgia, "Times New Roman", Times, serif;
}
.mynavi:hover{
   display: block;
   width: 130px;
   height: 20px;
   text-align: center;
   text-decoration: none;
   margin-right: 3px;
   background-color: #434951;
   color: #FFFFFF;
   float: left;
   font-size: 12px;
   line-height: 20px;
}
.pgnavi{
display:block;
height:25px;
font-size:12px;
line-height:20px;
float:left;
margin-right:3px;
}
<div id="wrapper">
<div id="content">
<table width="95%" height="47" border="0">
<tr><td width="25%">
<td width="23%"><a href="LayoutGala38.html" target="_parent" class="mynavi">STORY OF BOX</a>
</td>
<td width="23%"><a class="mynavi" href="LayoutGala38 2.html">MENU IN BOX</a>
</td>
<td width="23%"><a class="mynavi" href="#">CONTACT OF BOX</a>
</td>
<td width="6%"> </td>
</tr>
</table>

แต่ลิงค์ปุ่มอื่นทำงานปกตินะครับ
ออะทำได้แล้วครับคอมผมช้ามันเลยไม่ขึ้น

อิคคิว · 09 ก.ย. 2012, 17:09 น.

ขอถามต่อนิดนึงนะครับ

อ้างอิงdiv#header h1{
   height: 150px;
   line-height: 80px;
   padding-left: 10px;
   background: #FFF;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-color: #C2CFDF;
   border-bottom-color: #C2CFDF;
   border-top-width: medium;
   border-bottom-width: medium;
   text-align: center;
}

<center><div id="header"><h1><img src="img/logohead.png" width="411" height="54"></h1>
</div></center>

อยากทำให้รูปใน <div id="header"> อยู่ตรงกลาง บน ล่าง ซ้าย ต้องทำยังไงหรอครับทำไมขยับได้แค่ซ้ายขวาแต่บนล่างขยับไม่ได้เลย
รูปมันชิดบนอย่างเดียวเลยครับ

หนุ่ม · 09 ก.ย. 2012, 18:52 น.

เพิ่ม margin-top: XXpx; เข้าไปก็น่าจะขยับได้ครับ

Rabbitinblack · 09 ก.ย. 2012, 19:05 น.

แบบนี้หรือเปล่า http://rabbitinblack.com/2011/10/css-middle/

อิคคิว · 10 ก.ย. 2012, 04:36 น.

ของพี่บิ๊กตอนแรกseach ในgoogleแล้ว ลองทำตามแล้วครับไม่ได้ 5555

อันนี้ก็ขยับไม่ได้ครับ

อ้างอิง<div id="header"><h1><img src="img/logohead.png"margin-top:30px;></h1>
</div>

Rabbitinblack · 10 ก.ย. 2012, 08:13 น.

งั้นอธิบายให้ฟังก่อนว่า การที่เราใส่ margin-top ให้ตัว img มันไม่ทำให้ตัว img ขยับขึ้นลงอยู่แล้วครับ ด้วยคุณสมบัติเฉพาะตัวของ img นั้น มันเป็น display:inline ซึ่งเราไปทำอะไรเกี่ยวกับด้านสูงไม่ได้

ถ้าต้องการให้มันขยับขึ้นลง เราต้องไปสั่งที่ตัว h1 ซึ่งคลุมตัว img แทนการสั่งที่ตัว img โดยตรง

สมมติเรารู้ความสูง ความกว้างของ img นะ สมมติให้กว้าง 200px และสูง 100px นะ

code ก็น่าจะประมาณนี้

โค้ด เลือกทั้งหมด


<div id="header"><h1><img src="img/logohead.png" /></h1></div>

ดังนั้นเราก็เขียน CSS ให้มันแบบนี้ครับ

โค้ด เลือกทั้งหมด


#header h1 {
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-50px;
}

แบบนี้จะทำให้เราได้ Logo ที่อยู่ตรงกลางจอแล้วครับ แต่ถ้าไม่ได้ต้องการให้อยู่ตรงกลางจอ แต่อยู่ตรงกลางในกรอบ header

สมมติว่า header เราสูง 300px กว้าง 960px นะครับ ก็เพิ่ม CSS ตัวนี้ลงไป

โค้ด เลือกทั้งหมด


#header {
position:relative;
width:960px;
height:300px;
}

ประมาณนี้ละครับ

ปล. แต่แนะนำว่า ตัว html ของตัวนี้ น่าจะเขียนแบบนี้มากกว่านะครับ

โค้ด เลือกทั้งหมด


<div id="header"><div id="logo"><img src="img/logohead.png" /></div></div>

อิคคิว · 22 พ.ย. 2012, 18:05 น.

ถ้าผมอยากจะเปลี่ยนสี กับขนาดฟอนต์ ในtdแต่ละอันแต่ในtrเดียวกัน ต้องทำยังไงหรอครับ? เพราะพอทำแบบในรูปมันเปลี่ยนทีทั้งหมดเลยอะครับ