Image and text list : li « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. li

Image and text list

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Art Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@charset "utf-8";

/* @group Reset */
html,body {
  background: #fff;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  color: #9FA11D;
  border-bottom-style: none;
}

body {
  font-family: "trebuchet ms", "Lucida Sans Unicode", "LucidaGrande",
    Verdana, Sans-serif;
  font-size: 98%;
  color: #333;
  text-align: left;
  background-image: url(images/bg_header.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

a img {
  border: none;
}

#extra h2 {
  color: #46525E;
  font-size: 1.1em;
  font-family: "Lucida Sans Unicode", "LucidaGrande", Verdana, Sans-serif;
  padding: 6px 0 5px 21px;
}

#content p,#extra p,#body2 p {
  color: #444;
  font-size: 0.8em;
  line-height: 1.8;
  padding: 0 25px 10px 21px;
}

#extra p {
  padding: 5px 25px 15px 21px;
}

#extra {
  float: right;
  width: 315px;
}

#body2 {
  width: 890px;
  color: #444;
  background: #fff;
  margin: 0 auto;
}

#content h1,#body2 h1,#body2 h2 {
  color: #46525E;
  background: transparent;
  font-size: 1.1em;
  font-family: "Lucida Sans Unicode", "LucidaGrande", Verdana, Sans-serif;
  padding: 6px 0 14px 21px;
}

#content .img {
  border: 1px solid #ddd;
  margin: 0 8px 5px 21px;
  padding: 3px;
}

#content .leftimg,#body2 .leftimg {
  float: left;
  background-color: #E5E5E5;
  margin: 0 8px 0 21px;
  padding: 4px;
}

#content a:hover .leftimg,#body2 a:hover .leftimg {
  float: left;
  background-color: #FF9900;
  margin: 0 8px 0 21px;
  padding: 4px;
}

#extra .rightimg {
  float: left;
  background-color: #FFF;
  margin: 0 8px 0 0;
  padding: 4px;
  border: 1px solid #DDDCE1;
}

#extra a:hover .rightimg {
  float: left;
  background-color: #DDD;
  margin: 0 8px 0 0;
  padding: 4px;
}

#extra .blocimg {
  background-color: #E5E5E5;
  margin: 0 8px 0 0;
  padding: 4px;
}

#body ul li {
  line-height: 1.5em;
  font-size: .8em;
  color: #444;
  margin: 0 25px 0 60px;
  padding: 0;
}

#content ul li {
  line-height: 1.5em;
  font-size: 0.8em;
  color: #444;
  margin: 0 25px 10px 30px;
}

h1 {
  letter-spacing: -1px;
  font-size: 30px;
}

h2 {
  font-size: 24px;
  color: #B94244;
}

h3 {
  font-size: 13px;
  color: #292929;
}

a {
  text-decoration: none;
  background-color: #FFF;
  color: red;
}

a:link {
  color: #8BA11D;
}

a:visited {
  color: red;
  background-color: #FFF;
}

a:hover {
  color: #333;
  background-color: transparent;
  text-decoration: none;
}

p,ul,ol {
  margin-bottom: 2em;
  text-align: justify;
  line-height: 200%;
}

img {
  border: none;
}

.tn img {
  border: 8px solid #F5F5F5;
}

hr {
  display: none;
}

/* Logo */
#logo {
  width: 890px;
  height: 147px;
  margin: 0 auto;
}

#logo h1 {
  float: left;
  height: 54px;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -2px;
  padding: 0 37px 0 0;
}

#logo h2 {
  float: left;
  text-transform: lowercase;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  height: 135px;
  width: 460px;
  padding: 10px 0 0;
}

#logo a {
  text-decoration: none;
  color: #333;
}

/* Menu */
#menu {
  width: 919px;
  height: 60px;
  margin: 0 auto;
}

#menu ul {
  list-style: none;
  line-height: normal;
  margin: 0;
  padding: 10px 0 0;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  height: 35px;
  text-transform: none;
  text-decoration: none;
  font-size: 1em;
  font-weight: 400;
  color: #666666;
  margin: 0 10px;
  padding: 5px 20px 0;
  background-color: #F5F5F5;
}

#menu ul li a:hover {
  color: #FFFFFF;
  background-color: #FFCFCE;
}

#menu .active a {
  background-color: #FFCFCE;
}

/* Page */
#page {
  width: 918px;
  margin: 0 auto;
}

/* Content */
#content {
  float: left;
  width: 550px;
  padding: 0 0 0 24px;
}

/*------------ end header --------------- 

/*------------------------------------------------footer--------------------*/
#footer {
  width: 960px;
  height: 83px;
  margin: 0 auto;
  border-top-width: thin;
  border-top-style: dotted;
  border-top-color: #E5E5E5;
}

#footer p {
  padding-top: 20px;
  text-align: center;
  font-size: .8em;
  font-weight: bold;
}

a.link,a:visited.link {
  background: white;
  border-bottom: 1px dotted #6e99bf;
  color: #02689b;
  line-height: 1.6em;
  outline: none;
  padding: 1px;
  text-decoration: none;
}

a:hover.link,a:focus.link {
  background: #eaf3f8;
  color: black;
  text-decoration: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #E30078;
}

</style>
</head>
<body>
<div id="logo">
  <h1><a href=""></a></h1>
  <h2 class="leftimg"><a href=""><img src="images/logo.gif" alt="" width="249" height="93" class="leftimg" /></a></h2>
</div>
<div id="menu">
  <ul>
    <li class="active"><a href="" accesskey="1">Home</a></li>
    <li><a href="" accesskey="2">Portfolio</a></li>
    <li><a href="" accesskey="3">Services</a></li>
    <li><a href="" accesskey="4">About Us</a></li>
    <li><a href="" accesskey="5">Contact Us</a></li>
  </ul>
</div>
<div id="bg">
  <div id="page">
    <!-- end #content -->
    <div id="body">
      <div id="content">
        <h1>&nbsp;</h1>
        <h1><a href="">About Art Design</a></h1>
        <a href=""><img src="images/grafic1.gif" alt="" width="174" height="65" class="leftimg" /></a>
        <p><strong>Art Design</strong> is a free, W3C-compliant, CSS-based website   template by <strong>xy-media.de</strong>. This work is   distributed under the Creative Commons Attribution 2.5 License, which means that you   are free to use and modify it for any purpose. All I ask is that you include a   link back to my website in your   credits.This template has been tested and proven compatible with all major browser   environments and operating systems. For more free designs, you can visit my   website to see my other works.</p>
        <p class="important"><a href=""><strong>Nunc euismod, felis et adipiscing volutpat</strong></a></p>
        <p><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla.</p>
        <h1><span class="title">Fusce ultrices fringilla</span></h1>
        <p><a href=""><img src="images/grafic6.gif" alt="" width="174" height="65" class="leftimg" /></a><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla.</p>
        <h1>&nbsp;</h1>
      </div>
      <div id="extra">
        <h2>&nbsp;</h2>
        <h2><span class="title"><a href="" class="link">Fusce ultrices fringilla</a></span></h2>
        <p><a href=""><img src="images/grafic2.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href=""><img src="images/grafic4.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href=""><img src="images/grafic3.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href=""><img src="images/grafic.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p>&nbsp;</p>
      </div>
      <!--end extra-->
    </div>
    <!-- end #sidebar -->
    <div style="clear: both; height: 20px;">&nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<!-- end #bg -->
<div id="footer">
  <p>&copy;2007 Art Design All Rights Reserved. &nbsp;&bull;&nbsp; Design by <a href="http://www.xy-media.de" class="link">xy-media.de</a> &nbsp;&bull;&nbsp; Valid <span class="link"><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="link">CSS</a> </span>| <span class="link"><a target="_blank" href="http://validator.w3.org/check?uri=referer" class="link">XHTML Strict</a></span></p>
</div>
</body>
</html>








Related examples in the same category

1.'li' creates one item in a list
2.Nested LI tag
3.Add style to an anchor in a LI tag
4.Define class for
  • to set its font weight to bold
    • 5.LI width: 33%
    6.LI margin: 0 0 0.25em 0
    7.LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
    8.Set display to inline to a LI under a UL in DIV
    9.Alignment of list items
    10.Alignment of list items with margin
    11.Three level list
    12.Inline centred list
    13.Right-aligned bullets
    14.Tab like list
    15.li list-style-type: lower-roman;
    16.li text-indent: -0.75em;
    17.UL LI bullet image
    18.LI display: inline;
    19.LI list-style-type: none;
    20.LI line-height: 44px;
    21.List with no margin
    22.Margin for list
    23.Without list type
    24.li { list-style-image: url("http://java2s.com/style/logo.png");}
    25.list-style-position:inside;list-style-position:outside;
    26.list-style: lower-roman inside;
    27.List order and start
    28.nested ordered and unordered lists
    29.HTML for a definition list
    30.HTML and CSS for vertical and horizontal lists
    31.Selecting elements in nested lists
    32.HTML and CSS for two lists with different list-style properties
    33.HTML and CSS for displaying ordered list style types
    34.HTML and CSS for mixed list-style-type values
    35.Using the display property to make a list display inline
    36.Definition List Example
    37.Unordered List Example
    38.Scrolled List Example
    39.Nested Lists
    40.List types
    41.Lists as navigation
    42.Here is a definition list
    43.a nested ordered list
    44.Dropdown List Example
    45.Link list inside a DIV
    46.Page list bottom bar
    47.ul li list-style-type: square;
    48.Using Arrow Image for LI list
    49.For unordered lists, there are three: disc, square, and circle.
    50.For ordered lists, there are eleven different styles of marker:
    51.The marker can be removed from either ordered or unordered lists with the none keyword.
    52.Setting style for LI inside a DIV
    53.line-height: 44px; for li
    54.Using double arrow sign for UI LI
    55.Link styles