CSS Layout help

[joym]

I am trying to get the images on this page, http://vha0018.moc.gbahn.net/rss_test.html, to display beside each other.

I am using the existing div tags to style the items but it's not working for me.

I'm not very good with CSS so any help would be greatly appreciated!

You can see the code used to build the page here, http://vha0018.moc.gbahn.net/rss/rss2js.php?rss_url=http://vha0018.moc.gbahn.net/celebrate/rss.php?action=images&rss_chars=100&rss_target=_top (view source)

and here is my stylesheet:

/* Channel title & link */
.rsslibchannel,.rsslibchannel:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
float:left;
margin-right:4px;
}
.rsslibchannel:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFF99;
text-decoration: none;
font-weight: bold;
float:left;
margin-right:4px;
}

/* Item title & link */
.rsslibitem,.rsslibitem:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000099;
font-weight: bold;
float:left;
margin-right:4px;
}
.rsslibitem:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #990000;
text-decoration: none;
font-weight: bold;
float:left;
margin-right:4px;
}

/* Item description */
.rsslibdesc {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
margin-bottom: 0px;
float:left;
border:0px;
margin-right:4px;
}

/* Channel Editor */
.rsslibeditor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #999999;
float:left;
margin-right:4px;
}

/* Channel Date */
.rsslibdate {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #999999;
float:left;
margin-right:4px;
}

/* Channel Copyright */
.rsslibcopyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #AAAAAA;
float:left;
margin-right:4px;
}

.gallery_item {float:left;margin-right:4px;}
.gallery_item img {float:left;border:0px;margin-right:4px;}


rsslibitem {float:left;margin-right:4px;}
.rsslibitem {float:left;margin-right:4px;}

rsslibdesc {float:left;margin-right:4px;}
.rsslibdesc {float:left;margin-right:4px;}

rsslibitem img {float:left;border:0px;margin-right:4px;}
.rsslibitem img {float:left;border:0px;margin-right:4px;}

rsslibdesc img {float:left;border:0px;margin-right:4px;}
.rsslibdesc img {float:left;border:0px;margin-right:4px;}

rsslibdate {float:left;margin-right:4px;}
.rsslibdate {float:left;margin-right:4px;}

rsslibcopyright {float:left;margin-right:4px;}
.rsslibcopyright {float:left;margin-right:4px;}

rsslibchannel {float:left;margin-right:4px;}
.rsslibchannel {float:left;margin-right:4px;}

[robhon]

You need to place your text links within the same container as the image and then they should line up.


<div class="rsslibdesc">
<a class="rsslibitem" target="_top" href="http://vha0018.moc.gbahn.net/celebrate/details.php?image_id=4">girls</a><br />

<a href="http://vha0018.moc.gbahn.net/celebrate/details.php?image_id=4"><img ...="" src="http://vha0018.moc.gbahn.net/celebrate/data/thumbnails/4/small-f000.JPG"/></a>

</div>


At the moment you have the text and then a floating container. Then the text of the next object aligns itself to the top of the previous floating container so everything is shifting down.

[joym]

Unfortunatly the code is output by a script and I do not see a way to change that.

I will see if there is any possible way to add another div class somehow to the code to wrap around all the object.

That would work?

[joym]

the code from the script is below. How do I add a div tag around all of the code in java?

function rss2js($url,$m=0,$w=0,$target="_blank",$cssprefix="rsslib") {
global $channel,$items,$display_channel_name;

getrss($url);


if($display_channel_name) {
if($channel[1])
print "document.write(\"<a href='{$channel[1]}' target='{$target}' class='{$cssprefix}channel'>";
else
print "document.write(\"<span class='{$cssprefix}channel'>";
print addslashes($channel[0]);
if($channel[1])
print "</a><br>\");\n";
else
print "</span><br>\");\n";
}

if($m==0) $m=count($items);
for($i=0;$i<$m;$i++) {
print "//".$i."\n";
// display items
if($items[$i][1])
print "document.write(\"<a href='{$items[$i][1]}' target='{$target}' class='{$cssprefix}item'>";
else
print "document.write(\"<div class='{$cssprefix}item'>";
print str_replace("\n","\\n",addslashes($items[$i][0]) );
if($items[$i][1])
print "</a><br>\");\n";
else
print "</div>\");\n";
if($items[$i][2]) {
print "document.write(\"<div class='{$cssprefix}desc'>";
if(($w)&&($w<strlen($items[$i][2])))
print str_replace("\n","\\n",addslashes(substr($items[$i][2],0,strpos($items[$i][2]," ",$w))) )." ...";
else
print str_replace("\n","\\n",addslashes($items[$i][2]) );
print "</div>\");\n";
}

}

if($channel[4]) print "document.write(\"<div class='{$cssprefix}editor'>By ".addslashes($channel[4])."</div>\");\n";
if($channel[5]) print "document.write(\"<div class='{$cssprefix}date'>".addslashes($channel[5])."</div>\");\n";
if($channel[3]) print "document.write(\"<div class='{$cssprefix}copyright'>".addslashes($channel[3])."</div>\");\n";
print "document.write(\"<div class='{$cssprefix}copyright'></div><br>\");\n";


}

[robhon]

Just need to add something like <div id="Container"> before the output of your code and an extra </div> at the end.

Have amended your code below to demonstrate but you may need to tweak it. Then just float the container left in style sheet.


function rss2js($url,$m=0,$w=0,$target="_blank",$cssprefix="rsslib") {
global $channel,$items,$display_channel_name;

getrss($url);


if($display_channel_name) {
if($channel[1])
print "document.write(\"<a href='{$channel[1]}' target='{$target}' class='{$cssprefix}channel'>";
else
print "document.write(\"<span class='{$cssprefix}channel'>";
print addslashes($channel[0]);
if($channel[1])
print "</a><br>\");\n";
else
print "</span><br>\");\n";
}

if($m==0) $m=count($items);
for($i=0;$i<$m;$i++) {
print "//".$i."\n";
// display items
if($items[$i][1])
print "document.write(\"<div id="Container"><a href='{$items[$i][1]}' target='{$target}' class='{$cssprefix}item'>";
else
print "document.write(\"<div class='{$cssprefix}item'>";
print str_replace("\n","\\n",addslashes($items[$i][0]) );
if($items[$i][1])
print "</a><br>\");\n";
else
print "</div>\");\n";
if($items[$i][2]) {
print "document.write(\"<div class='{$cssprefix}desc'>";
if(($w)&&($w<strlen($items[$i][2])))
print str_replace("\n","\\n",addslashes(substr($items[$i][2],0,strpos($items[$i][2]," ",$w))) )." ...";
else
print str_replace("\n","\\n",addslashes($items[$i][2]) );
print "</div></div>\");\n";
}

}

if($channel[4]) print "document.write(\"<div class='{$cssprefix}editor'>By ".addslashes($channel[4])."</div>\");\n";
if($channel[5]) print "document.write(\"<div class='{$cssprefix}date'>".addslashes($channel[5])."</div>\");\n";
if($channel[3]) print "document.write(\"<div class='{$cssprefix}copyright'>".addslashes($channel[3])."</div>\");\n";
print "document.write(\"<div class='{$cssprefix}copyright'></div><br>\");\n";


}