Results 1 to 4 of 4

Thread: How Do I Make A Front Page Layout with photo and text between each other?

  1. #1
    Join Date
    Feb 2013
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Cool How Do I Make A Front Page Layout with photo and text between each other?

    Hi,

    How Do I Make A Front Page Layout with photo and text between each other like a magazine layout for fashion related topic?

    Is there any .php templates or what would some example of code be? Would I insert photo place holder and attach it to stylesheet to potion it?

    For example:

    1,how would I have a photo in the middle with the text around it?

    2, how would I have Photo to the left and text directly to the right of photo?

    Do I need to add some sort of table? It would be handy to get some idea.

    Many thanks,

    Travis

    P.S It seems like I'm getting there but then there is more!!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    Depending on how experienced you are with HTML and CSS, you can structure your web page layout using either tables or divs.

    New-to-HTML designers will probably be more comfortable with tables as they are easier to manipulate and visualise - just picture an excel spreadsheet where you can put text in some cells and images in others. You can still style tables quite nicely with CSS, but the markup is heavier (more element tags) and things can turn ugly quickly if you put tables inside of tables (it's very easy to miss tag-pairs and it can be difficult/confusing to edit later down the line).
    Tables can also cause problems for screen readers and Google bots, so if you can, stick to tables for statistical data only.
    Still, here is a basic tutorial on web page layouts with tables: http://www.webtutorialplus.com/html/...out-table.aspx
    And another one: http://www.ironspider.ca/webdesign10...es4layout2.htm

    If you're more experienced with HTML you should probably be looking to use a div-based layout. Div layouts are generally easier to style and maintain and provide more advanced layout potential, so they are better for creating more elaborate designs. Or just cleaner layouts in general, since the markup is more streamlined.
    Once you've got your head around 'floats', you'll find div layouts easier to work with.
    Here's a tutorial for div layouts: http://www.picnet.com.au/blogs/met/p...ithout-tables/
    And another: http://girlswhogeek.com/tutorials/20...ess-css-layout

    SO

    To answer your 1st numbered question, you *could* create a 3 celled table with text in the outer 2 cells, and an image in the middle. Or you could do it with 3 floated divs inside one main outer-div.

    To answer your 2nd numbered question, you could also do it with a 2 celled table, 2 floated divs inside a main outer-div, OR very simply - you could just float the actual images left or right, and larger bodies of text flow around them: http://www.tizag.com/cssT/float.php it just depends on the effect you want to achieve.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Feb 2013
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Thanks for the info! I spent alot of time playing around but am a bit stuck..

    I almost at the point of disappear!! Maybe I should hire a web designer!

    I have made two pages:http://www.globalglam.co.uk/test2.php

    http://www.globalglam.co.uk/test.php


    I really want to get it to look like a magazine layout for the content. Maybe just using lines to divide the sections like my nav and footer! But have vertical and horizontal lines.

    I'm sure where to add the <html> code and style ie stylesheet or as I have done the body, I understand that normally this would go above the head but I'm using a template so it's un-editable. I can use the Main template dwt so I can copy it and change the name and edit that but I need different layouts for the other pages and the dwt updates all pages. Can I change the address from dwt to php?

    I'm not sure alt all if I'm on the right path!!

    Hope that you can Help!!

    Thanks,

    Travis

  4. #4
    Join Date
    Feb 2013
    Posts
    20
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Heres the code from one of those sites, I took out the head and footer as I have one already, not sure if that was what I was supposed to do but that what I tried!:

    Code:
      <!--Finish slider-->
         
                               <html>
    
        <style>
    
          #main,
          #sidebar,
           {
            display:inline;
            position:relative;
            float:left;
            background-color:#eee;
          }
          #main {
            width:68%;
            height:300px;
            margin-right:2%;
          }
          #sidebar {
            width:30%;
            height:50%;
          }
        </style>
     
      <body>
      
        <div id="main">
          <p>Main </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="sidebar">
          <p>Sidebar</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
      
      </body>
    </html>
    
    								  <!-- #EndEditable --></td>
    Last edited by james438; 03-22-2013 at 04:36 PM. Reason: added code tags

Similar Threads

  1. Replies: 0
    Last Post: 05-22-2012, 04:52 PM
  2. Replies: 2
    Last Post: 03-27-2012, 09:30 PM
  3. Replies: 1
    Last Post: 05-02-2009, 12:24 PM
  4. Front Page Site
    By ezra in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-29-2006, 06:26 AM
  5. I am trying to run two scripts on the front page
    By paynecou in forum JavaScript
    Replies: 3
    Last Post: 05-29-2005, 01:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •