• Locked
1 reply [Last post]
Wed, 2010-05-05 14:45
amean_n
amean_n's picture
User offline. Last seen 2 years 1 week ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-05-04
Posts: 4
Points: 6

urgent Help:

Hi I am trying to replicate the following image in HTML and CSS:

I ahve included my code so far. Could some please please help me and let me know If I'm going in the right direction or perhaps add the correct code so I can see what is happening and why.

help.jpg

MY HTML Code:

<body>
<div class="container">
<div class="image"><img height="122" src="/_assets/images/latestnews/win_btn.jpg" width="107" /></div>
<div class="background-text">
<h2>Lorem ipsum dolor sit amet, consectetur adipi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:</p>
<p>Lorem ipsum dolor sit amet</p>
<br /><br />
<div class="posted">Posted: 12/03/10</div>
<p> </p>
</div>
</div>
<p> </p>
<div class="container">
<div class="image"><img alt="product_range_btn" src="/_assets/images/latestnews/product_range_btn.jpg" /></div>
<div class="background-text">
<h2>Introducing New Freederm sensitive facial wash</h2>
<p>Freederm sensitive facial wash is a gentle foaming wash specially formulated by experts for spot-prone skin. It gently penetrates the pores to thoroughly cleanse the skin and helps to control excess oil and fight spots.</p>
<br /><br />
<div class="posted">Posted: 12/03/10</div>
<p> </p>
</div>
</div>
</body>

And this is my style sheet: (CSS code)

.image
{
	float: left;
	}
 
.background-text
{		
	background-color: #efeee4;
		height: 115px;
}
 
h2
{
	color: #e80e89;
}
 
.container
{
	width:574px;
	margin-bottom: 0;
	margin-left:30px;
	margin-top:0;
	margin:right:0;
	}
 
.posted
{
	background-color: #ffffff;
	float: right;
	position: static;
	}
 
.divline
 
{
width: 574px;
 
}

Ireciate your hel and support, Thank you Smile .

Top
Tags:
Wed, 2010-05-05 15:56
#1
Deuce
Deuce's picture
User offline. Last seen 3 weeks 6 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4421
Points: 1840

Looks kind of like a list of

Looks kind of like a list of items to me... I'd start the HTML out something like this.

<li class="item_list" id="item_1">
  <img />
  <div class="item_description">
    <h3>Item Name</h3>
    <p>Item Description and more information and what not</p>
  </div>
  <p class="item_post_date" id="item_1_post_date">Post: 11/11/11</p>
</li>

and then do the CSS somewhere along the lines of

li.item_list { list-style: none; border-bottom: 1px solid #999; }
.item_list img { float: left; margin-right: 10px; }
.item_description { float: left; background-color: #ccc; }

and then just style the rest from there.
Now your code is clean and semantic.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
  • Locked