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

View Full Version : 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/website-layout-table.aspx
And another one: http://www.ironspider.ca/webdesign102/tables4layout2.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/post/2012/06/19/css-layout-without-tables/
And another: http://girlswhogeek.com/tutorials/2006/create-a-tableless-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!:
:)



<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> </p>
<p> </p>
<p> </p>
</div>
<div id="sidebar">
<p>Sidebar</p>
<p> </p>
<p> </p>
</div>

</body>
</html>

</td>