ผมต้องการแบ่งหน้าเว็บเป็น 2 ส่วนครับ ตามรูป
(http://image.ohozaa.com/i/g8d/WFw3kV.png)
ส่วนนี่ 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:
เรื่องแรกนะครับ
ถ้าให้ง่าย เอาไฟล์ html มาด้วยงับ
เรื่องสอง
ถ้าจะกำหนด class ให้ใส่ . ข้างหน้า
กำหนด id ให้ใส่ # ข้างหน้า
เช่น <div class="test">
จะใส่ css ให้ div นี้
ให้ใช้
.test{บลาๆ}
อ้างถึงจาก: 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>
ใช้ 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>
โค้ดดูผ่าน ๆ นะคร้าบ ในนี้ลายตามาก :P
คิดว่าน่าจะลืมเคลีย float ครับผม ตอนผมหัดเขียนเป็นบ่อย
<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:
ผมลองเขียนใหม่แล้วครับ มันเป็นดังรูป แก้ไขอย่างไรดีครับ
(http://image.free.in.th/v/2013/iq/1untitled.png)
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;
}
ใช้ CSS Framework ไปเลยท่าน
http://960.gs 960 Grid System
http://twitter.github.io/bootstrap/ Bootstrap
css3 + html5 ไม่เหมาะกับเว็บไทยหรอกครับ คนไทยใช้ windows ปลอม windows 7 มี ie <=8 ซึ่ง ie <=9 ไม่สามารุทำงาน html5 ได้ 100% ครับ
ถามว่า html5+css3 จำเป็นมั๊ย ตอบได้เลยว่าไม่ครับ ผมก็ html4 ก็สามารถทำเว็บที่เราๆทำกันได้แล้วครับ ถ้าเว็บท่านๆไม่ได้ effect เยอะแยะมากมายมหาศาลขนาดนั้น แนะนำให้เลี่ยงนะครับ :wanwan003:
:-[
.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>
อ้างถึงจาก: 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>
ขอบคุณครับผม
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^
:wanwan031:
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 10:47:43
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^
:wanwan031:
โปรเจคจบหรอครับ ยินดีกับบัณฑิตใหม่ครับ :wanwan004:
อ้างถึงจาก: BeerKingMan ใน 08 กรกฎาคม 2013, 10:49:29
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 10:47:43
+1 ให้ทุกคนแล้วครับ ยกเว้นคุณ max30012540 บวกไม่ได้ ระบบบอกให้รอ 72 ชั่วโมง ^^
:wanwan031:
โปรเจคจบหรอครับ ยินดีกับบัณฑิตใหม่ครับ :wanwan004:
ครับตอนแรกจะทำแค่ App Mobile แต่อาจารย์ให้ทำหน้าเว็บด้วย ก็เลยไหนๆทำแล้วลองของใหม่ซะเลย
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน
ลองเปลี่ยนเป็น float เป็น right แล้วคำนวนขนาดความกว้างของบล๊อก และ margin ว่าเกินความกว้างของทั้งหมดป่าวครับ
<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;
}
CSS3 + HTML5 หากมีปัญหาเรื่อง IE แนะนำ Boilerplate ครับ ช่วยได้ :wanwan013:
dreamweaver มีแบ่งอัตโนมัติให้ครับ
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน
ขนาดของกรอบทั้ง 2 มันรวมกันแล้วเกินกรอบนอก (.box) ครับ ลงคำนวนขนาดใหม่ หรือเปลี่ยนเป็น % แทนครับ
อ้างถึงจาก: max30012540 ใน 08 กรกฎาคม 2013, 12:25:07
อ้างถึงจาก: ChilTunDer ใน 08 กรกฎาคม 2013, 11:27:15
ลองแล้วก็ไม่ได้ครับ ฝั่งขวายังตกเหมือนเดิม ตามรูปด้านบน
ขนาดของกรอบทั้ง 2 มันรวมกันแล้วเกินกรอบนอก (.box) ครับ ลงคำนวนขนาดใหม่ หรือเปลี่ยนเป็น % แทนครับ
ตัวอย่าง
.content {
float: left;
width: 60%;
}
.rightcontent {
float: right;
width: 40%;
}
แบบนี้มั้ยครับ HTML5 + CSS3
(https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn2/1049242_490560064352504_1764679580_o.jpg)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
header{
width:100%;
display:inline-block;
}
header .header{
background:#1abc9c;
width:78%;
margin:auto;
padding:1%;
}
nav{
width:100%;
display:inline-block;
}
nav .nav{
background:#3498db;
width:80%;
height:50px;
margin:auto;
}
nav .nav .sub{
width:10%;
padding:1%;
float:left;
color:#FFFFFF;
background:#CCCCCC;
margin:0.2%;
color:#333333;
}
#mainContent{
width:100%;
display:inline-block;
}
#mainContent .content{
width:80%;
margin:auto;
}
#mainContent .content .display{
width:69%;
float:left;
display:inline-block;
background:#CCCCCC;
}
#mainContent .content .display .item{
width:96%;
margin-bottom:5px;
background:#EEEEEE;
display:inline-block;
margin:1%;
padding:1%;
}
#mainContent .content .display .item h1{}
#mainContent .content .display .item p{}
#mainContent .content .aside{
width:30%;
float:right;
display:inline-block;
background:#e67e22;
}
#mainContent .content .aside .item{
width:96%;
margin-bottom:5px;
background:#EEEEEE;
display:inline-block;
margin:1%;
padding:1%;
}
#mainContent .content .aside .item h1{}
#mainContent .content .aside .item p{}
footer{
background:#ecf0f1;
width:78%;
margin:auto;
padding:1%;
}
</style>
</head>
<body>
<header>
<div class="header">
<h1>LOGO</h1>
</div>
</header>
<nav>
<div class="nav">
<div class="sub">Menu1</div>
<div class="sub">Menu2</div>
<div class="sub">Menu3</div>
<div class="sub">Menu4</div>
<div class="sub">Menu5</div>
</div>
</nav>
<div id="mainContent">
<div class="content">
<section class="display">
<?php for($i=0;$i<10;$i++){?>
<article class="item">
<h1>ร้าน Beat audio</h1>
<p>หูฟัง beats audio หาซื้อได้ที่ไหน - เปรียบเทียบราคา พบกับข้อเสนอที่ถูกที่สุด และบทวิจารณ์ ... ยเคืองต่อหู และ ป้องการหูฟังหลุดร่วง Beats EarPhone. จาก 120 บาท.</p>
</article>
<?php }?>
</section>
<aside class="aside">
<?php for($i=0;$i<3;$i++){?>
<article class="item">
<h1>ร้าน Beat audio</h1>
<p>หูฟัง beats audio หาซื้อได้ที่ไหน - เปรียบเทียบราคา พบกับข้อเสนอที่ถูกที่สุด และบทวิจารณ์ ... ยเคืองต่อหู และ ป้องการหูฟังหลุดร่วง Beats EarPhone. จาก 120 บาท.</p>
</article>
<?php }?>
</aside>
</div>
</div>
<footer>
<p>This Footer HTML5 & CSS3</p>
</footer>
</body>
</html>
อ้างถึงจาก: dekmv ใน 08 กรกฎาคม 2013, 13:36:14
แบบนี้มั้ยครับ HTML5 + CSS3
(https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn2/1049242_490560064352504_1764679580_o.jpg)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
header{
width:100%;
display:inline-block;
}
header .header{
background:#1abc9c;
width:78%;
margin:auto;
padding:1%;
}
nav{
width:100%;
display:inline-block;
}
nav .nav{
background:#3498db;
width:80%;
height:50px;
margin:auto;
}
nav .nav .sub{
width:10%;
padding:1%;
float:left;
color:#FFFFFF;
background:#CCCCCC;
margin:0.2%;
color:#333333;
}
#mainContent{
width:100%;
display:inline-block;
}
#mainContent .content{
width:80%;
margin:auto;
}
#mainContent .content .display{
width:69%;
float:left;
display:inline-block;
background:#CCCCCC;
}
#mainContent .content .display .item{
width:96%;
margin-bottom:5px;
background:#EEEEEE;
display:inline-block;
margin:1%;
padding:1%;
}
#mainContent .content .display .item h1{}
#mainContent .content .display .item p{}
#mainContent .content .aside{
width:30%;
float:right;
display:inline-block;
background:#e67e22;
}
#mainContent .content .aside .item{
width:96%;
margin-bottom:5px;
background:#EEEEEE;
display:inline-block;
margin:1%;
padding:1%;
}
#mainContent .content .aside .item h1{}
#mainContent .content .aside .item p{}
footer{
background:#ecf0f1;
width:78%;
margin:auto;
padding:1%;
}
</style>
</head>
<body>
<header>
<div class="header">
<h1>LOGO</h1>
</div>
</header>
<nav>
<div class="nav">
<div class="sub">Menu1</div>
<div class="sub">Menu2</div>
<div class="sub">Menu3</div>
<div class="sub">Menu4</div>
<div class="sub">Menu5</div>
</div>
</nav>
<div id="mainContent">
<div class="content">
<section class="display">
<?php for($i=0;$i<10;$i++){?>
<article class="item">
<h1>ร้าน Beat audio</h1>
<p>หูฟัง beats audio หาซื้อได้ที่ไหน - เปรียบเทียบราคา พบกับข้อเสนอที่ถูกที่สุด และบทวิจารณ์ ... ยเคืองต่อหู และ ป้องการหูฟังหลุดร่วง Beats EarPhone. จาก 120 บาท.</p>
</article>
<?php }?>
</section>
<aside class="aside">
<?php for($i=0;$i<3;$i++){?>
<article class="item">
<h1>ร้าน Beat audio</h1>
<p>หูฟัง beats audio หาซื้อได้ที่ไหน - เปรียบเทียบราคา พบกับข้อเสนอที่ถูกที่สุด และบทวิจารณ์ ... ยเคืองต่อหู และ ป้องการหูฟังหลุดร่วง Beats EarPhone. จาก 120 บาท.</p>
</article>
<?php }?>
</aside>
</div>
</div>
<footer>
<p>This Footer HTML5 & CSS3</p>
</footer>
</body>
</html>
แอบเลื่อนไปเห็น 18+ ในรูปด้วยนะเออ :wanwan004:
อย่าไปสนใจครับ ... โพลเดอร์เปล่าๆครับ ... :P
อ้างถึงจาก: BeerKingMan ใน 08 กรกฎาคม 2013, 10:23:35
css3 + html5 ไม่เหมาะกับเว็บไทยหรอกครับ คนไทยใช้ windows ปลอม windows 7 มี ie <=8 ซึ่ง ie <=9 ไม่สามารุทำงาน html5 ได้ 100% ครับ
ถามว่า html5+css3 จำเป็นมั๊ย ตอบได้เลยว่าไม่ครับ ผมก็ html4 ก็สามารถทำเว็บที่เราๆทำกันได้แล้วครับ ถ้าเว็บท่านๆไม่ได้ effect เยอะแยะมากมายมหาศาลขนาดนั้น แนะนำให้เลี่ยงนะครับ :wanwan003:
แต่เดี๋ยวนี้ Google Chrome , FireFox และ Browser บน มือถือก็รองรับ HTML5 หมดแล้วนะครับ ... จริงๆ ทุกวันนี IE เริ่มน้อยลงแล้วครับ ตามองค์กร หน่วยงานต่างๆ ก็ใช้ FF กับ Chrome แล้วนะครับ ... :wanwan016:
อธิบายง่ายๆ ขนาดมันเกินมันเลยล้นมาข้างล่าง
คุณตั้ง div ใหญ่ไว้ 1240px
แบ่งเป็นซ้าย 840px
ขวา 400px
ซึ่งก็น่าจะะพอดีใช่มะ
แต่คุณลืมไปว่าตั้ง padding ไว้ 10px นั่นคือขนาดของด้านซ้ายจะกลายเป็น 860px และด้านขวากลายเป็น 420px
จากโค้ดด้านซ้ายมาก่อน พอด้านขวามาพื้นที่มันไม่พอ CSS แลยตัดลงไปอยู่ด้านล่างเท่านั้นเอง
แก้ไขง่ายๆ ก็เอา padding ออก หรือปรับขนาดด้านซ้ายเป็น 780px ด้านขวาเป็น 400px เท่านั้นได้ชัวร์ (ถ้าอันใหญ่ 1240px ไม่ได้ตั้ง padding นะ)