Login | Register | FAQ
Anonymous

Need help with making article previews if possible?

+ Post a reply

9 posts Page 1 of 1


Need help with making article previews if possible?

by TechBiteReviews » Mon Apr 23, 2012 5:53 am

Hi, my name is Hayden Barton and iv just recently joined this wounderful forum :)

I was wondering if anyone could help me and tell me what i could do or even if it is possible, so heres what i would want to do:

I am a product review and im making a website for my reviews, but on the home page i would like boxes roughly 700pxx300px to link and show a little preview of the latests reviews and articles, i would not mind if it either would update its self with the latest 10~ or if i just need to fill in the newest one, but what i would not like to do is move every single article preview down 1 just to add 1 more at the top.

I hope you can understand what im talking about and thanks in advanced for any help :)

Gaming96.
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am

Re: Need help with making article previews if possible?

by XainPro » Mon Apr 23, 2012 7:18 am

could you please share the link of your website to understand it well.
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Need help with making article previews if possible?

by TechBiteReviews » Tue Apr 24, 2012 5:59 am

XainPro wrote:could you please share the link of your website to understand it well.


i currently dont yet have and hosting space or domain, i was going to leave that until it is finished.
is there any other way to show you?

thanks!
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am

Re: Need help with making article previews if possible?

by XainPro » Tue Apr 24, 2012 6:42 am

1st you can take a screen shots and upload it,
2.You can upload html files.
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Need help with making article previews if possible?

by TechBiteReviews » Tue Apr 24, 2012 6:50 am

XainPro wrote:1st you can take a screen shots and upload it,
2.You can upload html files.


i will do it shortly :) i am just getting ready for school now lol, thanks
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am

Re: Need help with making article previews if possible?

by TechBiteReviews » Wed Apr 25, 2012 6:31 am

Here they are :) the imae is of the website (im just basicly laying it out first then editing text and things after so please try understand the different colour boxes lol) the red is where the newest articles would go, i will be having roughly 10.
Image


and here is the HTML:
Code: Select all
<!DOCTYPE html>
   
   <head>
      <title>Home | TechBite Reviews</title>
        <link rel="stylesheet" type="text/css" href="CSS/Background and Layout.css"/>
   </head>
     
       
   <body id="full_page">
   
       <div id="middle_page">
                   
                <div id="logo">
                    <a href="http://techbitereviews.com">
                    <img src="Images/TBR COM.png" alt="TechBite Reviews Logo" width="450" height="83"/>
                    </a>
                </div>
               
            <div id="middle_page_background">
               
                <div id="top_navigation" width="1000px">
                  <a href="http://techbitereviews.com" class="main-navigation">Home</a>
                  <a href="http://reviews.techbitereviews.com" class="main-navigation">Reviews</a>
                  <a href="http://Guides.techbitereviews.com" class="main-navigation">Guides</a>
                  <a href="http://News.techbitereviews.com" class="main-navigation">News</a>
                  <a href="http://downloads.techbitereviews.com" class="main-navigation">Downloads</a>
                  <a href="http://Competitions.techbitereviews.com" class="main-navigation">Compititions</a>
                  <a href="http://Links.techbitereviews.com" class="main-navigation">Links</a>
                  <a href="http://about-us.techbitereviews.com" class="main-navigation">About Us</a>
                  <a href="http://contact-us.techbitereviews.com" class="main-navigation">Contact Us</a>
                </div> 
               
              <div id="main_column">
                   
                  <div id="top_adverts">
                      <div id="top_advert_1">Advert</div>
                  </div>
                 
                  <div id="latest_articles">                 
                     <div id="latest_articles_title">Latest Reviews & Articles
                     </div>
                   
                    <div id="article_preview">
                       
                      <div id="article_preview_1">
                           <div class="article-title">Article Preview 1
                            </div>
                            <div class="article-content">
                               <div class="preview-writing">
                                </div>
                                <div class="preview-image">
                                </div>
                     </div>
                        </div>
                    </div>
                     
                  </div>
                   
              </div>
               
                <div id="right_column">
               
                    <div id="search">
                   
                       <div id="seach_box">
                        Search Box
                       </div>
                   
                       <div id="seach_button">
                       </div>
                   
                    </div>
                   
                    <div id="sidebar_reviews_selection">
                    </div>
                   
                    <div id="right_adverts">
                       
                        <div id"right_advert_1">
                        </div>
                       
                       
                        <div id"right_advert_2">
                        </div>
                       
                    </div>
                   
            </div>
               
            </div>
           
        </div>
       
   </body>
   
</html>
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am

Re: Need help with making article previews if possible?

by XainPro » Wed Apr 25, 2012 7:39 am

1st of all i must say you have done good job so far and it look nice now you just need to add css to style it out i am providing the css code as internal style make it separate.
The layout you need is really simple and easy here is the code for it.

Code: Select all
<!DOCTYPE html>

<head>
<title>Home | TechBite Reviews</title>
<link rel="stylesheet" type="text/css" href="CSS/Background and Layout.css"/>
<style type="text/css">
body { /*here you need to add the background image*/
}
#wrapper {
   width:1000px;
   margin:0 auto;
   position:relative;
}
#header {
   width:100%;
   height:180px;
   position:relative;
}
#menus {
   background-color:#999;
   width:100%;
   height:80px;
}
#main_column {
   width:750px;
   float:left;
   height:800px;
   background-color:#CCC;
   margin:5px;
}
#sidebar {
   width:230px;
   float:right;
   position:relative;
   margin:5px;
    background-color:#333;
    height:800px;
}
#top_advert {
   height:80px;
   background-color:#06F;
}
#latest_articles_title {
   font-size:20px;
   font-weight:bold;
   text-align:center;
}
#article_preview {
   height:120px;
   background-color:#FFF;
   margin:5px;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header"> <!-- Header Start -->
    <div id="logo"> <a href="http://techbitereviews.com"> <img src="Images/TBR COM.png" alt="TechBite Reviews Logo" width="450" height="83"/> </a> </div>
    <div id="menus">
      <div id="top_navigation" width="1000px"> <a href="http://techbitereviews.com" class="main-navigation">Home</a> <a href="http://reviews.techbitereviews.com" class="main-navigation">Reviews</a> <a href="http://Guides.techbitereviews.com" class="main-navigation">Guides</a> <a href="http://News.techbitereviews.com" class="main-navigation">News</a> <a href="http://downloads.techbitereviews.com" class="main-navigation">Downloads</a> <a href="http://Competitions.techbitereviews.com" class="main-navigation">Compititions</a> <a href="http://Links.techbitereviews.com" class="main-navigation">Links</a> <a href="http://about-us.techbitereviews.com" class="main-navigation">About Us</a> <a href="http://contact-us.techbitereviews.com" class="main-navigation">Contact Us</a> </div>
    </div>
  </div>
  <!-- Header Ends -->
 
  <div id="main_column">
    <!-- Start Of Advertisers -->
    <div id="top_advert">Advert 1</div>
    <div id="top_advert">Advert 2</div>
    <!-- End Of Advertisers -->
   
    <div id="latest_articles_title">Latest Reviews & Articles </div>
    <div id="article_preview">
      <div class="article-title">Article Preview 1 </div>
      <div class="article-content">
        <div class="preview-writing"> </div>
        <div class="preview-image"> </div>
      </div>
    </div>
   
    <div id="article_preview">
      <div class="article-title">Article Preview 2 </div>
      <div class="article-content">
        <div class="preview-writing"> </div>
        <div class="preview-image"> </div>
      </div>
    </div>
   
   
</div>


<div id="sidebar">
      <div id="search">
        <div id="seach_box"> Search Box </div>
        <div id="seach_button"> </div>
      </div>
      <div id="sidebar_reviews_selection"> </div>
      <div id="right_adverts">
        <div id"right_advert_1"> </div>
        <div id"right_advert_2"> </div>
      </div>
    </div>
  </div>

</div>
<!-- Wrapper Ends Here -->
</body>
</html>


good luck nice effort !
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Need help with making article previews if possible?

by TechBiteReviews » Wed Apr 25, 2012 8:02 am

Hi, thank you very much! Is there a reputaultion system on this forum? I would like to +REP if there is :) and i will try that css, thanks! And i have already made some css, could you tell me how it is and here it is:
Code: Select all
body {
   background-color: #000000;
   background-image: url(../Images/Background.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: center top;
   width: autopx;
   height: 2520px;
   }

#full_page {
}

   #middle_page {
      width: 900px;
      margin: auto;
   }
      
      #logo {
         margin-top: 25px;
         margin-right: 550px;
         margin-bottom: 25px;
         margin-left: 0px;
      }
      
      #middle_page_background {
         margin-top: 0px;
         margin-right: 0px;
         margin-bottom: 10px;
         margin-left: 0px;
         background: url(../Images/centre-background.png);
         width: 900px;
         height: 2387px
      }
      
         #top_navigation {
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   width: 900px;
   height: 45px;
   text-align: center;
   text-height: 30px;
   padding-top: 10px;
   color: #D6D6D6;
         }
            
         #main_column {
            margin-top: 10px;
            margin-right: 0px;
            margin-bottom: 10px;
            margin-left: 10px;
            background: url(../Images/middle-column.png);
            width: 700px;
            height: 2322px;
            float: left;
         }
         
            #top_adverts {
               margin-top: 10px;
               margin-right: 10px;
               margin-bottom: 10px;
               margin-left: 10px;
               width: 680px;
               height: 92px;
               border: thin #000;
            }
            
               #top_advert_1 {
                  margin-top: 1px;
                  margin-right: 1px;
                  margin-bottom: 1px;
                  margin-left: 1px;
                  width: 678px;
                  height: 90px;
                  background-color:#0099FF;
                  text-align: center;
               }
            
            #latest_articles {
               margin-top: 10px;
               margin-right: 10px;
               margin-bottom: 10px;
               margin-left: 10px;
               width: 680px;
               height: 2200px;
            }
            
               #latest_articles_title {
                  margin-top: 0px;
                  margin-right: 0px;
                  margin-bottom: 10px;
                  margin-left: 0px;
                  width: 680px;
                  height: 30px;
                  text-align: center;
                  text-height: 20px;
                  background-color: #999
               }
            
               #article_preview {
                  margin-top: 10px;
                  margin-right: 0px;
                  margin-bottom: 10px;
                  margin-left: 0px;
                  width: 680px;
                  height: 2000px;
               }
               
                  #article_preview_1 {
                     margin-top: 10px;
                     margin-right: 0px;
                     margin-bottom: 10px;
                     margin-left: 0px;
                     width: 680px;
                     height: 200px;
                     text-align: center;
                     text-height: 20px;
                     background-color:#FFFFFF
                  }
                  
                     #article-title {
                        margin-top: 10px;
                        margin-right: 0px;
                        margin-bottom: 10px;
                        margin-left: 0px;
                        width: 680px;
                        height: 20px;
                     }
                     
                     #article-content {
                        margin-top: 10px;
                        margin-right: 0px;
                        margin-bottom: 10px;
                        margin-left: 0px;
                        width: 660px;
                        height: 170px;
                     }
                     
                        #preview-writing {
                           margin-top: 10px;
                           margin-right: 0px;
                           margin-bottom: 10px;
                           margin-left: 0px;
                           width: 580px;
                           height: 150px;
                           float: right;
                        }
                        
                        #preview-image {
                           margin-top: 10px;
                           margin-right: 10px;
                           margin-bottom: 0px;
                           margin-left: 10px;
                           width: 100px;
                           height: 100px;
                           float: left;
                        }
                        
         #right_column {
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 0px;
            margin-left: 0px;
            background: url(../Images/right-column.png);
            width: 170px;
            height: 2322px;
            float: right;
         }
         
            #search {
               margin-top: 10px;
               margin-right: 10px;
               margin-bottom: 10px;
               margin-left: 10px;
               width: 150px;
               height: 92px;
               background-color: #FFF;
               text-align: center;
            }
            
               #search_box {
                  margin-top: 10px;
                  margin-right: 0px;
                  margin-bottom: 10px;
                  margin-left: 0px;
                  width: 150px;
                  height: 100px;
               }
               
               #search_button {
                  margin-top: 0px;
                  margin-right: 0px;
                  margin-bottom: 0px;
                  margin-left: 0px;
                  width: ;
                  height: ;
               }
            
            #sidebar_reviews_selection {
               margin-top: 10px;
               margin-right: 10px;
               margin-bottom: 10px;
               margin-left: 10px;
               width: 150;
               height: 500;
               border: thin #000;
            }
            
            #right_adverts {
            }
               
               #right_advert_1 {
               }
               
               #right_advert_2 {
               }
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am

Re: Need help with making article previews if possible?

by TechBiteReviews » Wed Apr 25, 2012 5:07 pm

Hi, i tried your HTML and CSS but i just noticed that i may have given you the wrong idea :( I am looking to have the latest articles i have made come up in the article preview boxes. so maybe able to pull something from a excel spreadsheet or a database to automatically enter the last added 10 entries to the excel or database file, into the 10 article preview boxes on the homepage. It is a bit confusing but otherwise i would have to enter the small amount of text my self (which is no problem at all) but the thing that puts me off is having to move all 9 other article previews down 1 box manually :( I was also thinking: would it maybe be better of instead having the 10 latest articles, having a few categories of different types of articles with 1 box next to it showing the latest article in that category, instead of 10? that way i will only have to change 1 box at a time when i write new articles :)
Thanks!
User avatar

TechBiteReviews

  • Posts: 13
  • Joined: Fri Apr 20, 2012 3:52 am


+ Post a reply

Page 1 of 1

?>