Forums

raman2572

i got stuck in in css of my new blog , all the images are floating to left even i place them at center at the time of posting , a nice man here suggested me to give different div tag to featured image but i am just unable to do this ,, can someone help me please , here goes the url http://jesica89.blogspot.com/2011/06/video-check.html

raman2572

here goes the code

here is the style sheet

/*----------------------------------------------------
{--------} Content Left Image {--------}
----------------------------------------------------*/
#contentLeft img, #contentLeft a img {
padding: 0;
margin-right:15px;float:left;
}

now please suggest me how to get a different div tag for featured image

raman2572

sorry here is the html code

<!-- begin contentLeft -->
<div id='contentLeft'>    
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>  			
</div>
<!-- end contentLeft -->

raman2572

and style sheet

here is the style sheet 

/*----------------------------------------------------
{--------} Content Left Image {--------}
----------------------------------------------------*/
#contentLeft img, #contentLeft a img {
padding: 0;
margin-right:15px;float:left;
}

Akuseru

Well, really what do you want?

The "#contentLeft" it's the main container, the "#contentLeft img, #contentLeft a img" afecct all images with or without a link inside the main container. So, all images inside have

#contentLeft img, #contentLeft a img {
padding: 0;
margin-right:15px;
float:left;
}

The "float:left" is floating your images to the left.

If you want the three align estates (left, right, center) you can create three classes:

.left{
float:left;
margin: 5px;}
.right{
float: right;
margin: 5px;
}
.center{ /*You need to specify the width of the images in the img tag to get this method working: <img class="center" width="120px/*For example*/">*/
margin: 0 auto;
}

And get ride of the "float:left" in the "#contentLeft img, #contentLeft a img".

And with a:

.left, .right, .center{
padding: 5px;
border-radius: 3px;
background: #ccc;
border: 1px solid #aaa;
}

You can have a nice border effect... ;)
This fix your problem?

raman2572

it is not working for me ,,,actually i need featured image to float on left and remaining in the center,, so these two are conflicting

raman2572

and full css is here

/*----------------------------------------------------
          {--------}  Content Left  {--------}
----------------------------------------------------*/
#contentLeft {
	float:left;
	margin:5px 0 0 0;
	padding:10px 0 0 0;
	width:645px;
}/*----------------------------------------------------
          {--------}  Content Left Image  {--------}
----------------------------------------------------*/
#contentLeft img, #contentLeft a img {
	padding: 0;
	margin-right:15px;float:left;
}
/*----------------------------------------------------
          {--------}  Post Box  {--------}
----------------------------------------------------*/
#contentLeft .postBox {
	float:left;
	margin:0 0 15px 0;
	padding:0 0 10px;
	position:relative;
	width:580px;
	color: #1E1E1E;
	margin-left: 18px;
	padding: 20px;
	background: #fff;
	border: 1px solid #d5d5d5;
	font-family: verdana, Helvetica, arial, sans-serif; font-size: 13px;line-height: 20p/*----------------------------------------------------
          {--------}  Post Date  {--------}
----------------------------------------------------*/
#contentLeft .postDate {
    background:url(http://3.bp.blogspot.com/_nI2w1Z0MWcE/TQrBk1_TqgI/AAAAAAAAA38/GoklPlhpA7M/s1600/date_icon.png);
	background-repeat: no-repeat;
	width: 63px; height: 76px;
	position: absolute; top: 10px; left: -63px;
	text-align: center;
	color: #414040;
	padding: 13px 0 0 7px;
}

treehouse : what would you like to learn today?

Forums

Stuck with a CSS bug