Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length

Search

 
Advanced search

28472 Posts in 7974 Topics- by 10283 Members - Latest Member: codthap
บริษัท มาร์เวลิค เอ็นจิ้น จำกัด บริการอบรมหลักสูตรการสร้างเว็บไซต์ด้วย Mambo, Joomla และ WordPress ซึ่งประกอบไปด้วยหลักสูตรการใช้งานขั้นพื้นฐาน และการใช้งานขั้นสูง และหลักสูตรอื่นๆ ที่เกี่ยวข้อง อาทิ การสร้าง Template, การใช้งาน Component หรือ Extension, การใช้งาน VirtueMart, SMF
Opensource CMS Community ForumJoomla!Templatesประสบปัญหาเกี่ยวกับการสร้าง Templeat CSS ครับ
« previous next »
Pages: [1]   Go Down
Print
Author Topic: ประสบปัญหาเกี่ยวกับการสร้าง Templeat CSS ครับ  (Read 411 times)
washiravit
มือใหม่หัดโพส
*

Karma: 0
Offline Offline

Posts: 16



WWW Email
« on: November 14, 2011, 05:31:14 pm »
มันยากเกินไปใช่ไหม ผมเลยทำไม่ได้ซักที CSS กับ Joomla ครับ ขออธิบายความฝันของผมก่อนนะครับ

Thanks: ฝากรูปฟรี, ผลบอล

ลองดูแล้วไม่ยากใช่ไหมครับ
ผมเลยบรรจงเขียน HTML ขึ้นมาเลยครับ
เขียนดังนี้ครับ

Quote
<div id="wrapper">
      <div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
        <div id="line"></div>
        <div id="article">บทความ</div>
</div>

แล้วก็บรรเลง CSS ดังนี้เลยครับ

Quote
html, body, form, fieldset {
   margin: 0;
   padding: 0;
   border: 0;
}


#wrapper
{ background-color: #e3cdbf;
height: auto ;
width: 1000px ;
margin: 10px auto 35px auto ;
padding: 4px 4px 4px 4px ;
}



#left{ float:left ; width: 28%; height: auto;
padding: 0px 0px 0px 0px;
   }




#line{ width: 2px; height: auto;
   margin: 0px 0px 0px 280px;
   background: url(../images/line.jpg); repeat-x ; repeat-y;
}


#article{ float:right;
   width: 70%; height:auto;
}

ดูๆแล้ว ไม่น่ามีปัญหานะครับ กด Preview ดูใน FireFox ดีกว่า

Thanks: ฝากรูปฟรี, ผลบอล

ไม่บอกก็รู้เลยครับ ว่าเละ
ผมเลยลองเอาคำสั่ง Float ออก ครับ
ผลที่ได้ก็คือ

Thanks: ฝากรูปฟรี, ผลบอล

ไม่เละครับ แต่ CSS ไม่ตรงตำแหน่งเดิมเลยครับ
เลยอยากจะถามเพื่อนครับ ถ้าผมต้องการเขียน CSS ให้เหมือนดั่งรูปข้างบน ผมควรจะเขียนอย่างไรดีครับ

ขอบคุณมากครับ
Logged
http://www.healingoftarot.com เว็บไซต์ไพ่ทาโรต์
http://www.hengshop.com วัตถุมงคลจีน
evilmono
มือใหม่หัดโพส
*

Karma: 0
Offline Offline

Posts: 1


Email
« Reply #1 on: November 27, 2011, 11:36:53 pm »

ตัว html
Quote
<body>
<div  id="wrapper">
    <div id="left">
      <p>กำลังศึกษาเหมือนกัน</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
</div>
  <div id="line">
       <div id="artical">
         <p>ประมาณนี้</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p> ปัญหาคือ แบคกราวอะมาแล้ว แต่ไม่มีอะไรที่ทำให้มันเกิดช่องให้ รีพีท  ส่วนที่ข้อความมันหลุดไป เพราะว่าอะไรผมก็ไม่แน่ใจผมเลยลองแค่เอามายัดไว้ในส่วนline เพื่อให้มันรีพีทออกมา</p>
         <p>&nbsp;</p>
         <p>ทำรูปให้มีขนาดตามที่คิดว่าสวยนะครับ</p>
    </div>     
  </div>
</div>
</body>

ส่วนของ CSS
Quote
body{
   margin: 0;
   padding: 0;
   border: 0;
}


#wrapper
{ background-color: #e3cdbf;
width: 1000px ;
min-height:100%;
padding: 0 4px 4px 4px ;
margin:0 auto 0  auto;
}



#left{
   float:left ;
   width: 28%;
   padding: 0px 0px 0px 0px;
   }




#line
{
   width: 72%;
   background: transparent url(siteground77/images/mpright.jpg) top left  repeat-y;
   margin: 0 0 0 28%;
   padding-left:1%;
   
}
#artical{
   
   
}

ได้ตามรูปหละครับ ผมก็ลอง ๆ ปรับเอา ลองปรับเพิ่มเอาละกัน
Logged
Pages: [1]   Go Up
Print
« previous next »
Jump to: