PDA

View Full Version : CSS Question:


gigiloumill
12-21-2009, 07:03 PM
Guys, I am starting to learn CSS but I need help. I got this RSS Feed to work and I am trying to make it look good through CSS. My problem is I can't get the images that come in to align left of the text. I would like for the text to wrap around the image. Any suggestions? Thanks

<style type="text/css">
<!--
.twodiv_div {
width : 300px;
height : 450px;
position : relative;
overflow :auto;
text-align :left;

display:block;
margin-top:10px;
margin-bottom:10px;
padding-left : 20px;
padding-right : 5px;
padding-top:20px;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px dotted #BCCDF0;
background:#EBEBEB;


}


a:link {
text-decoration: none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration: none;
}



-->
</style>
</head>



<body>
<div class="twodiv_div"><?php

$num_items = 3;
$rss = fetch_rss( 'http://cgi.askmen.com/RSS/askmenRSS_channel.php?ID=dating' );
$items = array_slice($rss->items, 0, $num_items);

echo "";

foreach ($items as $item) {
$href = $item['link'];
$title = $item['title'];
$description = $item ['description'];
$created = $item['created'];

echo "<li><a href=$href>$title</a> $created</li>\n";
echo "<li><a href=$href>$description</a> $created</li>\n";
echo ": ".$row['url']."<br/><br/>";
}

echo "</ul>";
?> </div>

gentleone
12-21-2009, 11:58 PM
You have to to float the image left.

CSS:
.twodiv_div img {float:left;margin:0 10px 0 0}

If you give it a margin like I gave it in this example a right margin of 10px, then the text has some space next to the image.

gigiloumill
12-22-2009, 12:35 AM
Thank you very much G. If I can just ask you 2 more questions please.

1. On top of the image there's a "title". How can I make the font larger and give it space? I tried including some code but it didn't do anything. (see code below)

2. I would like to include the php code in several divs throughout the page, how can I link the "CSS" to all of them at the same time?

Thanks, again

.twodiv_div {
width : 300px;
height : 450px;
position : relative;
overflow :auto;
text-align :left;
margin-bottom:20px;
padding-left : 20px;
padding-right : 0px;
padding-top:20px;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 0px dotted #BCCDF0;
background:#EBEBEB;
}
.twodiv_div-title {
font-size: 14px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;

white-space : nowrap;
}

ul, li {
list-style-type: none;
}
a img {
border-style: none;
float:left;margin:0 10px 0 0
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration: none;
}




-->
</style>
</head>



<body>
<div class="twodiv_div"><?php


$num_items = 10;
$rss = fetch_rss( 'http://cgi.askmen.com/RSS/askmenRSS_channel.php?ID=dating' );
$items = array_slice($rss->items, 0, $num_items);

echo "";

foreach ($items as $item) {
$href = $item['link'];
$title = $item['title'];
$description = $item ['description'];
$created = $item['created'];

echo "<li><a href=$href>$title</a> $created</li>\n";
echo "<li><a href=$href>$description</a> $created</li>\n";
echo "".$row['url']."<br/><br/>";

}

echo "</ul>";
?>

gentleone
12-22-2009, 10:20 AM
You give the <li> a class like:
echo "<li class="title"><a href=$href>$title</a> $created</li>\n";

And the you can style the title in your CSS
.title {styling here}

If you want to include the RSS feed to several divs and you want to style them the same, you just use classes and no ID's for the tags you want to style. ID's have to be unique and classes not.

gigiloumill
12-22-2009, 01:23 PM
Thanks G, but the li code didn't work. It keeps giving me a parser error.

Corrosive
12-22-2009, 01:44 PM
Rough guess but would you need to escape the quotation marks in "title" at all?

gigiloumill
12-22-2009, 01:50 PM
Ok. I was able to save as an external Style Sheet, but in order for it to work I need to call the div for it. I still don't understand how it would tie up to all of the divs. Any suggestions? Thanks.

gigiloumill
12-22-2009, 06:12 PM
O.K. C, that did it but, I still can't get it to display as called.


.twodiv_div-title {
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;

}

Corrosive
12-22-2009, 06:18 PM
Not surprising. You have called the class "title" and yet the class in the CSS is called "twodiv_div-title".

Just call it "title".

gigiloumill
12-22-2009, 06:57 PM
O.K. I finally got it the way I want it. Now, how can I use it on all divs? thanks

gigiloumill
12-22-2009, 07:33 PM
Done deal. This CSS thing ROCKS! And to think I used to design with FrontPage.. What a joke...lol

Corrosive
12-23-2009, 10:33 AM
Once it clicks you'll be amazed that anyone would even consider building a website with anything but CSS. You'll be giving indignant replies to noobs about their table-based sites in no time ;)