4 replies [Last post]
amean_n
Offline
newbie
Last seen: 12 years 2 weeks ago
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;

    }

    amean_n
    Offline
    newbie
    Last seen: 12 years 2 weeks ago
    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;
     
     
    }

    amean_n
    Offline
    newbie
    Last seen: 12 years 2 weeks ago
    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

    Panda
    Panda's picture
    Offline
    Enthusiast
    UK
    Last seen: 11 years 46 weeks ago
    UK
    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...

    CupidsToejam
    CupidsToejam's picture
    Offline
    Guru
    Florida
    Last seen: 6 years 36 weeks ago
    Florida
    Timezone: GMT-4
    Joined: 2008-08-15
    Posts: 2637
    Points: 1556

    have you tried something like

    have you tried something like this?

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