Placing pictures in rows

casho · #1 (**permalink**) Nov 27th, 2007, 07:06

Hi, I'm just wondering how I would put pictures in rows like this

But its only going in one row
Could this be moved to the CSS forum.

Monie · #2 (**permalink**) Nov 27th, 2007, 08:23

Are you using table or css?
Just put this code:

<img src="yourImageHere.jpg">

welshstew · #3 (**permalink**) Nov 27th, 2007, 11:07

Your solution will depend on what you want to use the images for. If you want them just for decoration then you can use the css background images method.

If they contribute to the content then you should place them in your mark up.

What will your images be doing, presentational or content?

I only have 5 mins but if you can answer the above then I will come back with some examples.

casho · #4 (**permalink**) Nov 27th, 2007, 14:48

Well they would be used for content but I want to put the images in two separate rows or more.

Monie · #5 (**permalink**) Nov 28th, 2007, 00:37

When you say row, that's mean you are using table to layout them..
you could do that using css, don't use table. table are for tabular data, css are for layouting your page

post your full html code here..

casho · #6 (**permalink**) Nov 28th, 2007, 06:43

I'm not using a table I'm trying to do it in CSS.
HTML

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>Home | PlayNes</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
    
</head>

<body>

<div id="body">
<div id="menu">
<p>

    <a href="a.html">A</a>
    <a href="b.html">B</a>
    <a href="c.html">C</a> 
    <a href="d.html">D</a> 
    E 
    F 
    <a href="g.html">G</a> 
    H 
    I 
    J 
    <a href="k.html">K</a> 
    <a href="l.html">L</a> 
    <a href="m.html">M</a> 
    O 
    P 
    Q 
    R 
    <a href="s.html">S</a>
    T 
    U 
    V 
    X 
    Y 
    <a href="z.html">Z</a>
 </p>
 </div>

<div id="content">
<p>
    I post Videos of me playing NES games<br /> that I find. So far I haven't<br /> got many but more will come.
</p>

<p>
    You can email me if you want me for
    <br /> me to play a specific game and
    <br /> I will see if I can find it for you.
    <br />cat.casho@gmail.com
</p>
</div>

<div id="videos">

<p>
<a href="http://screencast.com/t/kf0j6iSp">
    <img src="http://www.webforumz.com/images/snoopyGame.png" alt="Snoopy Game" width="150" height="150" />
</a>
    <br />Snoopy
</p>

<p>
    <a href="http://screencast.com/t/XHay5x8M">
    <img src="http://www.webforumz.com/images/snoopyRiverJump.png" alt="Snoopy River Jump" width="150" height="150" />
</a>
    <br />Snoopy River Jump
</p>

<p>
    <a href="http://screencast.com/t/sKNmq2akJ">
    <img src="http://www.webforumz.com/images/donkeyKong3.png" alt="Donkey Kong 3" width="150" height="151" />
</a>
    <br />Donkey Kong 3
</p>

<p>
<a href="http://screencast.com/t/LrRVnC84">
    <img src="http://www.webforumz.com/images/cybernoid.png" alt="Cybernoid" width="150" height="150" />
</a>
    <br />Cybernoid
    
    
</p>

</div>

<div id="footer">
</div>

</div>
</body>

</html>

CSS

HTML: Select all

body{
background-color: #5E5E5E;

}

#body{
    width: 850;
    color: #A3A3A3;
    background-color: #212121;
    border-style: solid;
    padding: 1em;
    border-width: 4pt;
    border-color: red;
    font-family: "Helvetica Neue", Arial, verdana;
}

#content{
float: right;
}

#menu{
    width: 100%;
    
}

#videos{
     float: left;
    width: 200;
}

#footer{
width: 100%;
clear: both;
}

a.:link {
    color: #BEBEBE;
}

a.snowman:visited {
    color: #FF7F00;
}

a.snowman:active {
    color: #FF2400;
}

a.snowman:hover {
    text-decoration: none;
    color: #EE0;
    background-color: none;
}

karinne · #7 (**permalink**) Nov 28th, 2007, 13:52

A link would be preferable since you are having problems with images ... we can't see them right now.

casho · #8 (**permalink**) Nov 28th, 2007, 14:57

Here you go.
http://detabeta.com/home.html

casho · #9 (**permalink**) Nov 29th, 2007, 17:34

Could this be moved to CSS forum I might get some more replies to solve my problem.

karinne · #10 (**permalink**) Nov 29th, 2007, 17:46

Instead of putting the images in <p> tags put them in <div> tags.

Then float each div.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Blank Space between 2 rows	JunkFood	Web Page Design	1	Mar 26th, 2008 22:33
[SOLVED] Placing navbar	unitedcraig	Web Page Design	5	Jan 31st, 2008 15:27
Placing Logo on top	CodyFunderburg	Web Page Design	1	Dec 16th, 2007 09:04
Columns and Rows	tlo5	JavaScript Forum	4	Nov 20th, 2007 16:13
Placing tables	squirrel	Web Page Design	8	Jun 30th, 2006 23:05

		Webforumz.com > Main Forums > Planning Your Website > Website Planning
Placing pictures in rows