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

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

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

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

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

max30012540

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

.content {
float: left;
width: 60%;
}

.rightcontent {
float: right;
width: 40%;
}

dekmv

#21
08 กรกฎาคม 2013, 13:36:14
แบบนี้มั้ยครับ HTML5 + CSS3



โค้ด เลือก

<!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>

aofiezzangz

#22
08 กรกฎาคม 2013, 13:52:49
อ้างถึงจาก: dekmv ใน 08 กรกฎาคม 2013, 13:36:14
แบบนี้มั้ยครับ HTML5 + CSS3



โค้ด เลือก

<!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:

dekmv

#23
08 กรกฎาคม 2013, 14:18:03
อย่าไปสนใจครับ ... โพลเดอร์เปล่าๆครับ ... :P

dekmv

#24
08 กรกฎาคม 2013, 16:06:51
อ้างถึงจาก: 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:

bluepotion

#25
09 กรกฎาคม 2013, 00:44:05
อธิบายง่ายๆ ขนาดมันเกินมันเลยล้นมาข้างล่าง

คุณตั้ง div ใหญ่ไว้ 1240px
แบ่งเป็นซ้าย 840px
ขวา 400px

ซึ่งก็น่าจะะพอดีใช่มะ

แต่คุณลืมไปว่าตั้ง padding ไว้ 10px นั่นคือขนาดของด้านซ้ายจะกลายเป็น 860px และด้านขวากลายเป็น 420px

จากโค้ดด้านซ้ายมาก่อน พอด้านขวามาพื้นที่มันไม่พอ CSS แลยตัดลงไปอยู่ด้านล่างเท่านั้นเอง

แก้ไขง่ายๆ ก็เอา padding ออก หรือปรับขนาดด้านซ้ายเป็น 780px ด้านขวาเป็น 400px เท่านั้นได้ชัวร์ (ถ้าอันใหญ่ 1240px ไม่ได้ตั้ง padding นะ)
พิมพ์
ขึ้น หน้า 1 2 ทั้งหมด
การกระทำของผู้ใช้