Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > กระทู้สำหรับภาษาต่าง ๆ > ถาม! เรื่องการจัด layout css ครับจัดยังไงก็จัดไม่ได้สักที

ถาม! เรื่องการจัด layout css ครับจัดยังไงก็จัดไม่ได้สักที

เริ่มหัวข้อใหม่

nut

โพสกระทู้ ( 26 )
บทความ ( 0 )

ตามโค้ดเว็บที่ผมแนบไว้ให้ครับพอดีจะจัดในส่วนของ เมนูไว้ด้านขวาแล้วเอาโลโก้ไว้ทางด้านซ้ายในแทบเดียวกัน อ่ะครับผม จัดยังไงก็ไม่ได้ซักที ไม่รู้ว่าผมเขียนผิดยังไง ช่วยรบกวนดูให้ทีนะครับผม

นี้โค้ด html ครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body >

<div class="topheard">

<div id="bar" >
	<div id="menu" >
	  <div id="navigetor" >
      
			<ul>
				<li ><div id="openpage">หน้าแรก</div>
                </li>
                <li><a href="#">รายวิชาที่เปิดสอน</a>
                <ul>
                <div id="dropmenu">
							<li><a href="#/">test</a></li>
							<li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
						</div></ul></li>
                <li><a href="#">ลงทะเบียน</a>
                 <ul>
                <div id="dropmenu">
							<li><a href="#/">test</a></li>
							<li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
                            <li><a href="#/">test</a></li>
						</div></ul> </li>
                <li><a href="#">ลงทะเบียน</a></li>
			</ul>
	    <div id="logo"><a href="#"><img src="images/logo.png" width="204" height="57" border="0" /></a></div>
	  </div>
      </div>
	</div>
</div>

<div class="thrColFixHdr">
<div id="container">


  <div id="sidebar1">
  	<div id="froumlogin">
    <div id="head">
    Member
    </div>
     <div id="login" class="animate form">
                            <form  action="mysuperscript.php" autocomplete="on"> 

                                <p> 
                                    <label for="username" class="uname" data-icon="u" > <img src="images/arrow_drow.gif" width="18" height="10" />Your email or username </label>
                                    <input id="username" name="username" class="inputuname" required type="text" placeholder="myusername or [email protected]"/>
                                </p><br />
                                <p> 
                                  <label for="password" class="youpasswd" data-icon="p"> <span class="uname"><img src="images/arrow_drow.gif" width="18" height="10" /></span>Your password </label>
                                    <input id="password" name="password" class="inputuname" required type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="keeplogin">&nbsp;</p>
                                <p class="login button"> 
                                    <input type="submit" value="Login" /> 
								</p>
                                 <label class="change_link">
									
									<a href="#toregister" class="to_register">สมัครสมาชิก</a>
								</label>
                            </form>
        </div>
    </div>


  <!-- end #sidebar1 --></div> 

  <div id="mainContent">
    <h1>main</h1> 
  <!-- end #mainContent --></div>   

  <br class="clearfloat" /> 

  <div id="footer">
    <p>Footer<br/><br /></p>
  <!-- end #footer --></div> 

<!-- end #container --></div>
</div>
</body>
</html>

ส่วนนี้โค้ด css ครับ

*{
	margin: 0px;
	padding: 0px;
	font: 12px Verdana;
}
body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      margin: 0; 
      padding: 0;
      text-align: center;
      color: #000000;
} 


#bar { 
	  width:auto;
	  height:57px;
      background: #00CC99; 

} 
.topheard #menu {
   	  width: 900px;  
      margin: 0 auto;

}


.topheard #menu #logo a{
	margin:0;
	padding:0;
	width:210px;
	height:57px;
}
.topheard #menu #logo a:hover{
	background-color:#00A67C;
	width:210px;
	height:57px;
}

.topheard #menu #navigetor ul{
	display:block;
	position:relative;
	margin:0;
	padding:0;
}
.topheard #menu #navigetor li{
	float:left; 
	width:104px; 
	display:block; 
	text-align:center;
}

.topheard #menu #navigetor a{
	width:104px;
	height:37px;
	display:block;
	color:#fff;
	text-decoration:none;
	margin:0;
	padding:20px 0 0 0;
}

.topheard #menu #navigetor a:hover{
	width:104px;
	height:37px;
	display:block;
	color:#fff;
	background-color:#00DFA8;
	text-decoration:none;
	margin:0;
	padding:20px 0 0 0;
}

.topheard #menu #navigetor #openpage{
	color:#000;
	width:104px;
	height:37px;
	display:block;
	background-color:#fff;
	text-decoration:none;
	margin:0;
	padding:20px 0 0 0;
}

.topheard #menu #navigetor li ul{
	visibility:hidden;

}

.topheard #menu #navigetor li:hover ul{
	visibility:visible;
		
}

.topheard #menu #navigetor #dropmenu{
	position:absolute;
}

.topheard #menu #navigetor #dropmenu a{
	width:150px;
	background-color: #099;
	display:block; 
}


/* ส่วน Page Header */
.thrColFixHdr #header { 
      background: #DDDDDD; 
      padding: 0 10px 0 20px;  
} 

/* ส่วน Page Body  ที่บรรจุเนื้อหา */
.thrColFixHdr #container { 
      width: 900px;  
      background: #FFFFFF;
      margin: 0 auto;   
     
      text-align: left;
} 
 
/* ส่วน คอลัมน์ด้านซ้าย */
.thrColFixHdr #sidebar1 {
	float: left;
	width: 210px;
	height:300px;
	/* background: #00CC99; */
      padding: 0px 0px 0px 0px;
	  margin-top:10px;

}

.thrColFixHdr #sidebar1 #froumlogin {
	padding:5px;
	  height:175px;
      background-color: #fff;
	  border:solid #00CC99;
}

.thrColFixHdr #sidebar1 #froumlogin #head{
	color:#FFFFFF;
	padding:3px;
	background-color:#00BF8F;
}
.thrColFixHdr #sidebar1 #froumlogin #login label{
	margin-left:5px;
	padding:2px;
	display: inline-block;
	font-size: 12px;	
	font-style: italic;
}
.thrColFixHdr #sidebar1 #froumlogin p.button input{
	float:right;
	width: 30%;
	cursor: pointer;	
	background-color:#00BF8F;
	padding: 5px;
	color: #fff;
	font-size: 15px;	
	border: 1px solid rgb(28, 108, 122);	

}

.thrColFixHdr #sidebar1 #froumlogin .inputuname{

	width: 93%;
	cursor: pointer;	
	background-color:#fff;
	padding: 5px;
	color: #000;
	font-size: 15px;
		border: 1px solid #fff;
	border-bottom: 1px solid #00BF8F;


}

/* ส่วนเนื้อหา อยู่ระหว่าง sidebar */
.thrColFixHdr #mainContent { 
      margin: 0px 0px 0px 220px; 
	  width:auto;
      padding: 10px 10px; 
} 
 
/* ส่วน Page Footer */
.thrColFixHdr #footer { 
      padding: 0 10px 0 20px; 
      background:#DDDDDD;
} 
 
.clearfloat { 
      clear:both;
}

Tag : HTML/CSS

ประวัติการแก้ไข
2012-05-07 13:43:10
2012-05-07 13:43:55
2012-05-07 13:44:20

Date : 2012-05-07 13:41:52

By : kamekazea

View : 1294

Reply : 1

No. 1

13ankster

โพสกระทู้ ( 9 )
บทความ ( 1 )

สลับลำดับตัว <div id="logo">..</div> กับ <ul>...</ul> ใน <div id="navigetor" ></div>

<div id="navigetor" >
    <div id="logo"><a href="#"><img src="images/logo.png" width="204" height="57" border="0" /></a></div>
    <ul>
			    	<li ><div id="openpage">หน้าแรก</div></li>
        <li><a href="#">รายวิชาที่เปิดสอน</a>
             <ul>
                  <div id="dropmenu">
			 <li><a href="#/">test</a></li>
			 <li><a href="#/">test</a></li>
                         <li><a href="#/">test</a></li>
                         <li><a href="#/">test</a></li>
                         <li><a href="#/">test</a></li>
                 </div>
             </ul>
          </li>
          <li><a href="#">ลงทะเบียน</a>
                <ul>
                      <div id="dropmenu">
			  <li><a href="#/">test</a></li>
			  <li><a href="#/">test</a></li>
                          <li><a href="#/">test</a></li>
                          <li><a href="#/">test</a></li>
                          <li><a href="#/">test</a></li>
	             </div>
                </ul>
           </li>
           <li><a href="#">ลงทะเบียน</a></li>
	</ul>

แล้ว เพิ่ม css

#logo { float: left; }
#navigetor ul { float: right; }

ประวัติการแก้ไข
2012-05-07 14:52:24

Date : 2012-05-07 14:47:46

By : 13ankster

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ถาม! เรื่องการจัด layout css ครับจัดยังไงก็จัดไม่ได้สักที

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01

Registered : 109,027

ถาม! เรื่องการจัด layout css ครับจัดยังไงก็จัดไม่ได้สักที

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice