|
 |
| |
รบกวนช่วยดูโค๊ด html5 css3 กับการจัดหน้าเพจทีครับ มีคลิปวีดีโอประกอบ |
| |
 |
|
|
 |
 |
|
เรื่องแรก
https://www.youtube.com/watch?v=eOG90Q8EfRo
จากคลิปนี้ ตรงช่วงเวลา 41.01 ในคลิปนี้จะทำการเอาแถบ side bar ไปไว้ด้านข้าง แล้วเข้าก็ไปทำการลบ overflow : hidden
ตัว side bar ดังกล่าวก็ย้ายไปอยู่ด้านข้างตามปกติ แต่พอผมทำมันกลับไปย้ายไปข้างบนอ่าครับ อยากจะขอรบกวนช่วยตรวจสอบหน่อยครับ
อันนี้ html
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example Responsive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, inital-scale=1.0"/> <!-- การทำ responsive ค้องใส่ meta ส่วนนี้ -->
</head>
<body class="body">
<header class="mainheader">
<img src="img/logo.gif">
<nav><ul>
<li class="active"><a href="#">Home</a></li> <!-- <li>คือ tag link -->
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul></nav>
</header>
<div class="mainContent">
<div class="Content">
<article class="topcontent">
<header>
<h2><a href="#" title="First post">First post</a></h2>
</header>
<footer>
<p class="post-info">This post is written by Adisorn</p>
</footer>
<content>
<p>A role-playing game (RPG and sometimes roleplaying game) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting or through a process of structured decision-making or character development. Actions taken within many games succeed or fail according to a formal system of rules and guidelines.</p>
</content> <!-- base font size is 14px -->
</article> <!-- เพราะว่าใช้ tag article ตัว text เลยเป็น responsive -->
<article class="bottomcontent">
<header>
<h2><a href="#" title="Secondpost post">Secondpost post</a></h2>
</header>
<footer>
<p class="post-info">This post is written by Adisorn</p>
</footer>
<content>
<p>A role-playing game (RPG and sometimes roleplaying game) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting or through a process of structured decision-making or character development. Actions taken within many games succeed or fail according to a formal system of rules and guidelines.</p>
</content> <!-- base font size is 14px -->
</article> <!-- เพราะว่าใช้ tag article ตัว text เลยเป็น responsive -->
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</h2>
<p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</h2>
<p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyright © AD Enterprise</p>
</footer>
</body>
</html>
ตัวนี้เป็นส่วน css ครับ
CSS
body {
background-image: url('img/bg.png');
color: #000305);
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visted{
}
a:hover, a:active{
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.maineader img{
width: 30%;
height: auto;
margin: 2% 0;
}
.mainheader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul{
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited{
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited{
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.maincontent{
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content{
width: 70%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar{
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}
.middle-sidebar{
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}
.bottom-sidebar{
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}
พอผมแก้ไขแล้วกลับได้แบบนี้แทนครับ
ทั้งที่มันควรจะชึ้นมาแบบนี้
============================================================
เรื่องที่สองหากมีเวลาอยากขอแหล่งอธิบายเรื่อง . ใน css หน่อยครับ อย่างที่ผมเคยเจอก็ body กับ .body คือแบบนี้มันคืออะไรหรอครับ
ขอรบกวนหน่อยนะครับ ขอบคุณมากครับ
Tag : - - - -
|
|
|
 |
 |
 |
 |
| Date :
2015-04-18 21:58:28 |
By :
adisorn99 |
View :
1081 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
body { // มันจะมีผลทันทีในส่วของท็ก body ไม่ต้องเรียกใช้
.body { // จะต้องเรียกใช้ถึงจะมีผล เช่น class="body"
|
| |
|
|
| |
| Date :
2015-04-19 07:44:51 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แล้วเรื่อง side bar อ่าครับ ต้องไปแก้ตรงไหน
|
| |
|
|
| |
| Date :
2015-04-20 13:38:01 |
By :
adisorn99 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
