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

**Travlast** · 03-20-2013, 11:24 AM

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!!

**Beverleyh** · 03-20-2013, 02:58 PM

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.

**Travlast** · 03-22-2013, 04:24 PM

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

**Travlast** · 03-22-2013, 04:28 PM

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>

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

Thread Tools

Search Thread

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

Similar Threads

[Database store in array] Help make the order change, from the front to be the end

How do I make an object stay in front of everything while scrolling in HTML?

Make Buttons to generate text in text box on linked page?

Front Page Site

I am trying to run two scripts on the front page

Bookmarks

Bookmarks

Posting Permissions