• Locked
4 replies [Last post]
Tue, 2010-05-04 13:38
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

Hi there, I am trying to create in html and css a layout exactly the same as what I have included ( example.jpg)

example.jpg

I beleive the best way to have this would be to have

    and

I would like to ahve Div's inside Div's, would this be the best way ?

I ahve included my html code so far and my css.

I hope someone can help.

Thank you Smile

HTML:

Paragraph - some text here

  • Latest News
    Title 2

    Paragraph - some moretext here

    • CSS:

    {
    width:415px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 60px;
    padding-left: 0px;

    }

    #news-care ul
    {
    list-style: none;
    margin: 0;

    }

    #news-format ul
    {
    background-color: #efeee4;
    background: #efeee4;

    }

    Top
    Tags:
    Tue, 2010-05-04 13:39
    #1
    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

    amean_n wrote: Hi there, I am

    amean_n wrote:
    Hi there, I am trying to create in html and css a layout exactly the same as what I have included ( example.jpg)

    example.jpg

    I beleive the best way to have this would be to have

      and

    I would like to ahve Div's inside Div's, would this be the best way ?

    I ahve included my html code so far and my css.

    I hope someone can help.

    Thank you Smile

    HTML:

    <div class="elLinks" id="news-care">
<ul>
<li> <img alt="Latest News" class="floatLeft" src="/_assets/images/about/about_bulletnews.jpg" title="Latest News" />
<h3>Title1</h3>
<p>Paragraph - some text here</p>
</li>
<li> <img alt="Latest News" class="floatLeft" src="/_assets/images/about/about_bulletcare.jpg" title="Latest News" />
<h3>Title 2</h3>
<p>Paragraph - some moretext here</p>
</li>
</ul>
</div>

    CSS:

    {
	width:415px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 60px;
	padding-left: 0px;
 
}
 
#news-care ul
{
	list-style: none;
	margin: 0;
 
}
 
#news-format ul
{
	background-color: #efeee4;
	background: #efeee4;
 
 
}

    Top
    Tue, 2010-05-04 13:40
    #2
    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

    amean_n wrote: Hi there, I am

    Sorry I edited it sot hat the code appeared as code

    Laughing out loud

    Thanks

    Top
    Tue, 2010-05-04 15:18
    #3
    Panda
    Panda's picture
    User offline. Last seen 1 year 46 weeks ago. Offline
    rank Enthusiast
    Enthusiast
    Timezone: GMT+1
    Joined: 2010-04-25
    Posts: 98
    Points: 110

    First off I would check your

    First off I would check your padding.

    Simple answer, float the img...

    You have a div class of elLinks, are you going to turn these into links?

    If so, you will probably want to rethink your html...

    Top
    Tue, 2010-05-04 15:48
    #4
    CupidsToejam
    CupidsToejam's picture
    User offline. Last seen 16 weeks 1 day ago. Offline
    rank Guru
    Guru
    Timezone: GMT-6
    Joined: 2008-08-15
    Posts: 2634
    Points: 1552

    have you tried something like

    have you tried something like this?

    ul {
	width: 500px;
	list-style: none;
}
ul img {
	float: left;
	margin-right: 20px;
}


    First basic few steps in building a webpage
    1. Gather and collect content.
    2. Organize the content into meaningful semantic valid HTML
    3. Design the prototype
    4. Style using CSS

    http://www.pixelbehavior.com

    Top
    • Locked