Is it possible to align images in a div class?

AdRock · #1 Jul 29th, 2006, 00:00

Is it possible to align an image in a div class?

I use some php to display some news items whcih uses a 2 different div classes alternating them so in theory in one class the image can be aligned right and the other class, the image aligned left.

I don't know if this is even possible and how I do it.

This is the php to alternate the div classes

PHP: Select all


if($i % 2) { //this means if there is a remainder
echo "<div class=\newstop\">\n";
} else { //if there isn't a remainder we will do the else
echo "<div class=\"newsbottom\">\n";
}
echo "<b>".$code['title']."</b><br>".$code['time']."<br>".$code['content']."<br><br>\n";
echo "</div>\n";

These are the div classes (need to be tidies up when working correctly

Code: Select all

 
.newstop /* used for when adding news items */
{
width: 500px;
float: right;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
text-align: justify;
border: solid 1px #383838;
background-color: #323232;
}
.newsbottom /* used for when adding news items */
{
width: 500px;
float: right;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
text-align: justify;
border: solid 1px #383838;
background-color: #232323;
}

Is what i'm trying to do possible or am i going to have to stick them all being aligned left or right?

ukgeoff · #2 Jul 29th, 2006, 17:22

The two class definitions you give are the same so you only need one - .news

Then have two id definitions:
#top, #bottom

Now extend your defintion with two more:

Code: Select all

#top img{
   float: left;
   ...
}

#bottom img{
   float: right;
   ...
}

There after, any image that appears in the top nes div will float left and any in the bottom news div will float right.

AdRock · #3 Jul 29th, 2006, 22:06

I don't know if this is the right forum but i did what you said...

i changed the div class to news and I added #top and #bottom.

I have noticed however that only one div is displyed at a time and the other div seems to be hidden or not shown as i have about 18 records and only 9 are shown

PHP: Select all


$code = mysql_fetch_array($q);
if($i % 2) { //this means if there is a remainder
echo "<div class=\"news\" id=\"top\">\n";
} else { //if there isn't a remainder we will do the else
echo "<div class=\"news\" id=\"bottom\">\n";
}
echo "<b>".$code['title']."</b><br>".$code['time']."<br>".$code['content']."<img src=\"images/jack1.jpg\"><br><br>\n";
echo "</div>\n";
}

This is what I have changed it to

Would it be easier to use a table instead? I didn't want to use a table becuase i was taught it was frowned upon by the w3c

ukgeoff · #4 Jul 30th, 2006, 09:29

Can you post a link to the actual page so I can look at the html and css on my system?

AdRock · #5 Jul 30th, 2006, 13:14

i've attached the stylesheet and the page which is used to display the news items

the link to the page on my site is http://www.project-sw.co.uk/jack/
so you can see what i mean. If you click on menu item 3 and click newsitems you will see what I mean.

The site is in it's developmental stage.

Also can you have a look at the navigation. I have managed to underline the bullet (images) but would like the margin top and bottom spacing equal. I would think it's pretty simple but it's the last thing on my list to sort out.

Thanks ukgeoff for all your help so far

ukgeoff · #6 Jul 30th, 2006, 16:17

Had a look at the scripts. CSS seems ok.

In the php;
This line - $t = mysql_query("SELECT * FROM `news`"); doesn't need the single quotes around 'news'.

Where are the values for variables such as $limit coming from.

I would be inclined to echo these values out to the screen and see if they are what you think they are supposed to be.

I can see no obvious reason at the moment why you would get any number of news items less than what you are calculating.

AdRock · #7 Jul 30th, 2006, 17:35

I orignally put this code in but it would only align images on one side whereas I would like one image on the left and another image on the right as there would only be two items of news per page.

This code works perfectly if i didn't mind that

PHP: Select all


while($code = mysql_fetch_array($q)) {?>
     <? $date = $code['date'];  ?>
     
     <b><?php echo $code['title']; ?></b><br>
     Added on: <?php echo $date; ?><br>
     <p class="style3"><?php echo $code['content']; ?></p><img src="images/jack1.jpg"><br>
<?}

ukgeoff · #8 Jul 30th, 2006, 21:15

You didn't actually answer my previous post.

AdRock · #9 Jul 30th, 2006, 22:04

I got the tutorial from http://www.allsyntax.com/tutorials/P...with-PHP/2.php
so i don't know about the variables.

If i set the limit to 10 it will display 10 records per page

I just tried this basic code and i noticed the first div is displayed but the second is not.

Code: Select all

<html>
<head>
<link href="includes/jack.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="news" id="top">
<img src="images/jack2.jpg"></div>
<div class="news" id="bottom">
<img src="images/jack1.jpg"></div>
</body>
</html>

I have noticed that if i remove the first div (id="top") then nothing is displayed. It seems that the problem is with the <div class="news" id="bottom">

AdRock · #10 Jul 30th, 2006, 23:11

I got it sorted. i had to delete the dodgy id and change where I put the <div> tag and now it works....even though the timestamp is displayed anymore

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] div class and div id	danny322	Web Page Design	1	Nov 22nd, 2007 12:52
Class of images... mental blank here...	minute44	Web Page Design	6	Nov 7th, 2007 14:37
array of class	janper	Flash & Multimedia Forum	4	Apr 9th, 2007 13:54
creating new div class + making images links	TardPress	PHP Forum	1	Jun 19th, 2006 03:04
Problems with defining class	jj1234	Web Page Design	3	Feb 6th, 2006 07:47

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Is it possible to align images in a div class?