Jump to content

Help me style and improve this html code guys.


co.ador

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="container">
<h1>French Shoes Design</h1>

<div id="sidebar">
<ul>
<li>France Boots</li>
<li>Woman Casual</li>
<li>Woman High Hills</li>
<li>Woman Conservative</li>
</ul>
</div>
<div id="shoeinfo">
<h2>French Sole Visa</h2>
<img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="500">
<h3> Rate:</h3>
<h3>Prosedimiento</h3>
<p>Women’s fashion shoes with higher 
heels generally have pre-made, thin, 
flexible, leather or resin rubber fitted 
soles, made using the bottom pattern
created from the last. Two shapes of 
sole are made this way, one for a Louis
heel, and the other for a Knock-on type. </p>
<link label="More" />
</div>
</div>

</div>

</body>
</html>

 

The image below is where i want to get to...

 

shoestoreversion2.gif

Here is a start for you, you can see how its going and make the rest up from here.

 

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<div id="main"> 
<div id="sidebar"> 
      <ul>
        <li>France Boots</li>
        <li>Woman Casual</li>
        <li>Woman High Hills</li>
        <li>Woman Conservative</li>
      </ul>
    </div>
  <div id="container"> 
    <h1>French Shoes Design</h1>
    <div class="shoeinfo"> 
      <h2>French Sole Visa</h2>
      <img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="500"> 
      <h3> Rate:</h3>
      <h3>Prosedimiento</h3>
      <p>Women’s fashion shoes with higher heels generally have pre-made, thin, 
        flexible, leather or resin rubber fitted soles, made using the bottom 
        pattern created from the last. Two shapes of sole are made this way, one 
        for a Louis heel, and the other for a Knock-on type. </p>
      <link label="More" />
    </div>
  </div>
</div>
</div>
</body>
</html>

 

css:

/* CSS Document */

body {
  background: #fff;
line-height: 1.6em;
margin-top: 0;
margin-bottom: 0; 
}

div#main {
background:#fff;
height:auto;
margin:auto;
position:relative;
width:980px;
text-align: center;
}

div#container {
width:980px;
margin-left:240px;
}

div#sidebar {
float:left;
width:220px;
padding: 5px;
background: #669999;
height: 300px;
}

.shoeinfo {
width: 200px;
height
}
.shoeinfo h2 {font-size:18px;  color:#fff; background: #cc6600; text-align: left}
.shoeinfo h3 {font-size:16px; color:#333333; text-align: left }
.shoeinfo p {font-size: 11px;}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.