the best way to layout the image and write the css_问答_开发者

the best way to layout the image and write the css

i am a newbie of html and css.now i want to know other gurus how to layout the above image with html and less css. thank you.

my way: at first,slice eight small images and one white small background image(the rounded corner image).

the html：

<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATES开发者_如何学编程T NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>

</div>
<div id="bottom"  style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>

ps:what's the difference of when using those images as background image instead of in img tag . which is better? why?

Use ul with appropriate width and float its li's to the left for example (in case this is a navigation), divs inside a div or divs directly in the body.

This should make it more understandable:

style.css (CSS in the same directory, otherwise in link href should point the path):

ul { margin: 0; padding: 0;  width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }

HTML:

<!DOCTYPE ...>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-US" />
    <!-- ... -->
    <title>My Page</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="some js file"></script>
</head>
<body>
    <!-- .... -->
    <ul>
        <li><a href="http://target.com/target1" title="Latest News"><img alt="Latest News" src="..." /></a></li>
        <li><a href="http://outer.com" title="Outer Link" target="_blank"><img alt="Latest News" src="..." /></a></li>
        <!-- .. -->
    </ul>
    <!-- .... -->
</body>
</html>

Here you go:

http://jsfiddle.net/Wrd7F/

HTML:

<ul>
    <li class="link1"><a href="#">Lipsum</a></li>
    <li class="link2"><a href="#">Lipsum</a></li>
</ul>

CSS:

ul { width: 600px; float: left; }

ul li {
    background-image: url("http://i.stack.imgur.com/l2qJt.png");
    background-repeat: no-repeat;
    width: 137px;
    height: 46px;
    float: left;
    margin: 20px;
}

ul li a {   
    padding-left: 57px; /* Note: substract this amount from the width */
    width: 80px; /* Original width 137px - Substract the amount of padding you want to use on right */
    height: 46px;
    line-height: 46px; /* Should be same as height if you want text to stay in the middle */
    text-align: left;
    float: left;
    text-decoration: none;
    color: #222222;
}

.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }

Note that the background positions you do have to put in manually but its not that hard. Firebug helps with this if your image positions in the image document are messy..

You should follow specific style with placing the images in one image document. Like, all the images horizontally side by side and if you have hover images you put them under those side by side. After youve established vertical or horizontal positioning to the first item for hover and normal states you only have to change one of these values as the other one doesnt change from that point on.

Why to use css backgrounds over `<img>`:

In a lot of cases its more flexible ( size, padding, style )
Easier to edit ( no need to open photoshop and change the text )
:Hover state ( if you want to define :hover state ( .link1:hover { background-position: 0px 0px; } ) you dont have to resort to JS. )

Edit: In the CSS i meant to comment: "Substract the amount of padding you want to use on the left"

Edit2: Also note that This may be sort of a bear trap in this case as Limited width and text might get tricky. With rounded borders and all, this would require some trickery to make it more flexible.

first: use these as background image instead of in img tag & it's better if you use sprites for this .

second: use list style for this & give float:left to it

 <ul>
  <li>wew</li>
  <li>er</li>
  <li>rer</li>
 </ul>

css:

li{
 float:left:
 margin:5px;
}

Here is an example where the icons also stick out of the white boxes like in your screenshot

http://jsfiddle.net/RYAZp/

CSS

ul li {
    border: 1px solid #333;
    background: #FFF;
    border-radius: 10px;
    display: inline-block;
    padding: 10px 10px 10px 45px;
    overflow: visible;
    font-size: 15px;
    height: 1em;
    position: relative;
    margin-bottom: 1em;
}

ul li img {
    position: absolute;
    top: -0.5em;
    left: 5px;
}

HTML

<ul>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>  
</ul>