ช่วยทีครับ เรื่อง CSS3 + HTML5

เริ่มโดย ChilTunDer, 07 กรกฎาคม 2013, 23:05:13

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1 2 ทั้งหมด
การกระทำของผู้ใช้

ChilTunDer

07 กรกฎาคม 2013, 23:05:13
ผมต้องการแบ่งหน้าเว็บเป็น 2 ส่วนครับ ตามรูป



ส่วนนี่ CSS ที่ผมทำไว้ครับ (ทำแบบมึนๆ)

โค้ด เลือก
logo{
display:block;
padding: 20px 10px 0px;
position:relative;
}

nav{
display: block;
margin: 20px;
text-align: left;
width: 600px;
}

content{
float: left;
width:660px;
}

#topten{
float:left;
width:590px;
margin:0 0 10px 10px;
height:200px;
}

#article{
float: left;
width:660px;
margin: 20px;
}

#ads{
float: left;
width:660px;
margin: 20px;
}

rightcol{
float: left;
width: 300px;
}

#rightads{
float: left;
width: 300px;
margin: 20px;
}

#recommend{
float: left;
width: 300px;
margin: 20px;
}


footer{
clear:both;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display:block;
}

คือยิ่งใส่ มันยิ่งเละอะครับ ช่วยทีครับ ไม่ค่อยเก่ง CSS เท่าไหร่

:wanwan017:

bookotl

#1
07 กรกฎาคม 2013, 23:30:30
เรื่องแรกนะครับ
ถ้าให้ง่าย เอาไฟล์ html มาด้วยงับ

เรื่องสอง
ถ้าจะกำหนด class ให้ใส่ . ข้างหน้า
กำหนด id ให้ใส่ # ข้างหน้า

เช่น <div class="test">
จะใส่ css ให้ div นี้
ให้ใช้
.test{บลาๆ}

ChilTunDer

#2
07 กรกฎาคม 2013, 23:34:00
อ้างถึงจาก: bookotl ใน 07 กรกฎาคม 2013, 23:30:30
เรื่องแรกนะครับ
ถ้าให้ง่าย เอาไฟล์ html มาด้วยงับ

เรื่องสอง
ถ้าจะกำหนด class ให้ใส่ . ข้างหน้า
กำหนด id ให้ใส่ # ข้างหน้า

เช่น <div class="test">
จะใส่ css ให้ div นี้
ให้ใช้
.test{บลาๆ}




code html ครับผม

โค้ด เลือก
<body>

<logo>

<logo>
       
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>

<content>

<div id="topten">

</div>

<div id="article">

</div>

<div id="ads">

</div>

</content>

<rightcol>

<div id="rightads">

</div>

<div id="recommend">

</div>
</rightcol>
       
        <footer>

        </footer>
           
    </body>

max30012540

#3
08 กรกฎาคม 2013, 00:07:02
ใช้ float:left + display:table แล้วชีวิตจะเป็นสุขครับ  :wanwan004:

ตย.

Css
โค้ด เลือก

.blog-2{
display:table;
width:100%;
}

.blog-2 > div{
width:50%;
float:left;
}


Html
โค้ด เลือก

<div class="blog-2">
  <div>One</div>
  <div>Two</div>
</div>

woratana

#4
08 กรกฎาคม 2013, 02:15:27
โค้ดดูผ่าน ๆ นะคร้าบ ในนี้ลายตามาก  :P

คิดว่าน่าจะลืมเคลีย float ครับผม ตอนผมหัดเขียนเป็นบ่อย
[direct=http://www.designil.com/contact-us]DesignIL เรียนเทคนิคเว็บดีไซน์ใหม่ ๆ ฟรี!! รับทำเว็บไซต์ เว็บดีไซน์ ธีม WordPress
[direct=http://www.designil.com/]DesigNIL: สอนออกแบบเว็บไซด์ Web Design HTML5 CSS3
[/direct]

gubaaball

#5
08 กรกฎาคม 2013, 02:17:22
โค้ด เลือก
<div>LOGO</div>
<div>MENU</div>
<div style="width: 70%; float: left;">
  <div>CONTENT1</div>
  <div>CONTENT2</div>
  <div>CONTENT3</div>
</div>
<div style="width: 30%; float: left;">
  <div>CONTENT1</div>
  <div>CONTENT2</div>
</div>
<div style="clear:both;"></div>

ประมาณนี้ก็น่าจะได้น่ะครับ ลองดัดแปลงดู  :wanwan017:

ChilTunDer

#6
08 กรกฎาคม 2013, 09:13:03
ผมลองเขียนใหม่แล้วครับ มันเป็นดังรูป แก้ไขอย่างไรดีครับ



HTML Code

โค้ด เลือก
<div class="wrapper">

<logo>
เอาไว้ทำ Logo เสร็จ เอามาใส่จ๊ะ
<logo>

<nav>
เอาไว้ทำ Menu เสร็จ เอามาใส่จ๊ะ                           
</nav>

<div class="content">
<div id="topten">
10 อันดับ REVIEW
</div>

<div id="article">
Article 1
</div>

<div id="article">
Article 2
</div>

<div id="article">
Article 3
</div>

</div>

<div class="rightcontent">
<div id="rrecommend">
Right Recommend 1
<div>

<div id="rads">
Right ADS 1
</div>
</div>

</div>


       
        <footer> Footer </footer>

CSS Code

โค้ด เลือก
.wrapper {
width: 1240px;
margin: 40px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding-bottom: 50px;
}

logo{
display: block;
padding: 20px 10px 0px;
position: relative;
}

nav{
display: block;
margin: 20px;
text-align: left;
width: 600px;
}

.content {
float: left;
width: 840px;
padding:10px;
}

.rightcontent {
float: right;
width: 400px;
padding:10px;
}

#topten {
float: left;
width: 740px;
text-align: center;
color: red;
}

#article {
float: left;
width: 740px;
text-align: center;
color: red;
}

#recommend {
float: left;
width: 740px;
text-align: center;
color: red;
}

#ads {
float: left;
width: 740px;
text-align: center;
color: red;

}

#rrecommend {
float: left;
width: 300px;
text-align: center;
color: red;
}

#rads {
float: left;
width: 300px;
text-align: center;
color: red;
}

footer{
clear:both;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display:block;
}

execter

#7
08 กรกฎาคม 2013, 09:51:41
ใช้ CSS Framework ไปเลยท่าน

โค้ด เลือก

http://960.gs  960 Grid System
http://twitter.github.io/bootstrap/  Bootstrap
Mubaza Thailand

BeerKingMan

#8
08 กรกฎาคม 2013, 10:23:35
css3 + html5 ไม่เหมาะกับเว็บไทยหรอกครับ คนไทยใช้ windows ปลอม windows 7  มี ie <=8 ซึ่ง ie <=9 ไม่สามารุทำงาน html5 ได้ 100% ครับ

ถามว่า html5+css3 จำเป็นมั๊ย ตอบได้เลยว่าไม่ครับ ผมก็ html4 ก็สามารถทำเว็บที่เราๆทำกันได้แล้วครับ ถ้าเว็บท่านๆไม่ได้ effect เยอะแยะมากมายมหาศาลขนาดนั้น แนะนำให้เลี่ยงนะครับ  :wanwan003:

max30012540

#9
08 กรกฎาคม 2013, 10:37:38
 :-[

โค้ด เลือก

.wrapper {
width: 1240px;
margin: 40px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

logo{
display: block;
padding: 20px 10px 0px;
position: relative;
}

nav{
display: block;
margin: 20px;
text-align: left;
width: 600px;
}

.content {
float: left;
width: 840px;
padding:10px;
}

.rightcontent {
float: right;
width: 400px;
padding:10px;
}

#topten {
float: left;
width: 740px;
text-align: center;
color: red;
}

#article {
float: left;
width: 740px;
text-align: center;
color: red;
}

#recommend {
float: left;
width: 740px;
text-align: center;
color: red;
}

#ads {
float: left;
width: 740px;
text-align: center;
color: red;

}

#rrecommend {
float: left;
width: 300px;
text-align: center;
color: red;
}

#rads {
float: left;
width: 300px;
text-align: center;
color: red;
}

footer{
clear:both;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display:block;
}
.box{
display:table;
}


โค้ด เลือก

<div class="wrapper">

<logo>
เอาไว้ทำ Logo เสร็จ เอามาใส่จ๊ะ
</logo>

<nav>
เอาไว้ทำ Menu เสร็จ เอามาใส่จ๊ะ                           
</nav>
           
            <div class="box">
           
<div class="content">
<div id="topten">
10 อันดับ REVIEW
</div>

<div id="article">
Article 1
</div>

<div id="article">
Article 2
</div>

<div id="article">
Article 3
</div>

</div>

<div class="rightcontent">
<div id="rrecommend">
Right Recommend 1
</div>

<div id="rads">
Right ADS 1
</div>
</div>
        </div>
        </div>

        <footer> Footer </footer>
</div>

ChilTunDer

#10
08 กรกฎาคม 2013, 10:45:54
อ้างถึงจาก: execter ใน 08 กรกฎาคม 2013, 09:51:41
ใช้ CSS Framework ไปเลยท่าน

โค้ด เลือก

http://960.gs  960 Grid System
http://twitter.github.io/bootstrap/  Bootstrap


ขอบคุณครับ เดะจะลองศึกษาครับ

อ้างถึงจาก: BeerKingMan ใน 08 กรกฎาคม 2013, 10:23:35
css3 + html5 ไม่เหมาะกับเว็บไทยหรอกครับ คนไทยใช้ windows ปลอม windows 7  มี ie <=8 ซึ่ง ie <=9 ไม่สามารุทำงาน html5 ได้ 100% ครับ

ถามว่า html5+css3 จำเป็นมั๊ย ตอบได้เลยว่าไม่ครับ ผมก็ html4 ก็สามารถทำเว็บที่เราๆทำกันได้แล้วครับ ถ้าเว็บท่านๆไม่ได้ effect เยอะแยะมากมายมหาศาลขนาดนั้น แนะนำให้เลี่ยงนะครับ  :wanwan003:

พอดีว่าเป็น Project จบครับ เลยจะดึงลูกเล่นของ HTML 5 ออกมา แต่ก็กำลังศึกษาอยู่เหมือนกัน เว็บจะได้ดูน่าสนใจครับ และกำ Mobile App ด้วย

อ้างถึงจาก: max30012540 ใน 08 กรกฎาคม 2013, 10:37:38
:-[

โค้ด เลือก

.wrapper {
width: 1240px;
margin: 40px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

logo{
display: block;
padding: 20px 10px 0px;
position: relative;
}

nav{
display: block;
margin: 20px;
text-align: left;
width: 600px;
}

.content {
float: left;
width: 840px;
padding:10px;
}

.rightcontent {
float: right;
width: 400px;
padding:10px;
}

#topten {
float: left;
width: 740px;
text-align: center;
color: red;
}

#article {
float: left;
width: 740px;
text-align: center;
color: red;
}

#recommend {
float: left;
width: 740px;
text-align: center;
color: red;
}

#ads {
float: left;
width: 740px;
text-align: center;
color: red;

}

#rrecommend {
float: left;
width: 300px;
text-align: center;
color: red;
}

#rads {
float: left;
width: 300px;
text-align: center;
color: red;
}

footer{
clear:both;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display:block;
}
.box{
display:table;
}


โค้ด เลือก

<div class="wrapper">

<logo>
เอาไว้ทำ Logo เสร็จ เอามาใส่จ๊ะ
</logo>

<nav>
เอาไว้ทำ Menu เสร็จ เอามาใส่จ๊ะ                           
</nav>
           
            <div class="box">
           
<div class="content">
<div id="topten">
10 อันดับ REVIEW
</div>

<div id="article">
Article 1
</div>

<div id="article">
Article 2
</div>

<div id="article">
Article 3
</div>

</div>

<div class="rightcontent">
<div id="rrecommend">
Right Recommend 1
</div>

<div id="rads">
Right ADS 1
</div>
</div>
        </div>
        </div>

        <footer> Footer </footer>
</div>


ขอบคุณครับผม

ChilTunDer

#11
08 กรกฎาคม 2013, 10:47:43
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^

:wanwan031:

BeerKingMan

#12
08 กรกฎาคม 2013, 10:49:29
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 10:47:43
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^

:wanwan031:

โปรเจคจบหรอครับ ยินดีกับบัณฑิตใหม่ครับ  :wanwan004:

ChilTunDer

#13
08 กรกฎาคม 2013, 11:20:21
อ้างถึงจาก: BeerKingMan ใน 08 กรกฎาคม 2013, 10:49:29
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 10:47:43
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^

:wanwan031:

โปรเจคจบหรอครับ ยินดีกับบัณฑิตใหม่ครับ  :wanwan004:

ครับตอนแรกจะทำแค่ App Mobile แต่อาจารย์ให้ทำหน้าเว็บด้วย ก็เลยไหนๆทำแล้วลองของใหม่ซะเลย

ChilTunDer

#14
08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน

killer777

#15
08 กรกฎาคม 2013, 11:59:03
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน

ลองเปลี่ยนเป็น float เป็น right  แล้วคำนวนขนาดความกว้างของบล๊อก และ margin ว่าเกินความกว้างของทั้งหมดป่าวครับ

bomie

#16
08 กรกฎาคม 2013, 12:08:24
โค้ด เลือก
<div id="wrapper">
  <header>
    <div id="logo">LOGO</div>
    <nav>
      <ul>
        <li>MENU</li>
      </ul>
    </nav>
    </header><!--Header-->
    <div id="main">
      <div id="primary">
        <div>CONTENT 1</div>
        <div>CONTENT 2</div>
        <div>CONTENT 3</div>
      </div>
      <div id="secondary">
        <div>CONTENT 1</div>
        <div>CONTENT 2</div>
      </div>
    </div><!--Main-->
</div><!--Wrapper-->

โค้ด เลือก
#wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 40px auto;
  padding-bottom: 50px;
  width: 1240px;
}
header {
height:125px;
background-color:#DDD;
position:relative;
}
#logo {
width:60px;
height:60px;
position:absolute;
left:20px;
top:20px;
background-color:#AAA
}
header nav {
height:25px;
background-color:#EEE;
position:absolute;
left:0;
bottom:0;
width:100%;
}
header nav ul { margin:0; }
#main { display:table; width:100%; }
#primary {
float: left;
padding: 10px;
width: 840px;
background-color:#CCCCCC;
}
#primary div {
border:1px solid #999;
margin:10px 0;
padding:10px;
background-color:#EEE;
}
#secondary {
float: right;
width: 300px;
background-color:#CCC;
}
#secondary div {
border:1px solid #999;
margin:10px 0;
padding:10px;
background-color:#EEE;
}

deadclosed

#17
08 กรกฎาคม 2013, 12:09:17 แก้ไขล่าสุด: 08 กรกฎาคม 2013, 12:09:50 โดย deadclosed
CSS3 + HTML5 หากมีปัญหาเรื่อง IE แนะนำ Boilerplate ครับ ช่วยได้  :wanwan013:

kiraoji

#18
08 กรกฎาคม 2013, 12:19:09
dreamweaver มีแบ่งอัตโนมัติให้ครับ

max30012540

#19
08 กรกฎาคม 2013, 12:25:07
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน
ขนาดของกรอบทั้ง 2 มันรวมกันแล้วเกินกรอบนอก (.box) ครับ ลงคำนวนขนาดใหม่ หรือเปลี่ยนเป็น % แทนครับ
พิมพ์
ขึ้น หน้า1 2 ทั้งหมด
การกระทำของผู้ใช้