<li> <h2>Welcome to Retail.com</h2> We, in our retail market suite, measure and analyze the past and future performance of major retail products, categorized in two basic segments - Food (like milk & dairy products), and Non-food (like footwear, apparel, consumer electronics and cosmetics & personal care products) in detail. Our market research reports provide extensive and in-depth analysis of expanding retail industry with foci on retail formats, retail consumption, retail spending, retail space, retail coverage, modern retailing, retail penetration, and supply chain.</p> Our industry experts extensively research the high potential emerging markets, like India, China, and Brazil, to provide fact-based market forecast to our clients. We offer broad spectrum of retail reports that provide details on distribution channels, consumer behavior, business strategies, challenges and opportunities for retail products to help clients in identifying growth areas and strengthening their position.<br/> ....<a href=\"#\">click here to know more </p> </a></li> <li><li> </ul> </div> <!-- Menu start here -->
Thanks for the live version it works so much better when you can see it :)
Now for the bad news...
Really sorry to say this but its such a mess it would be quicker to start again :S But don't be disheartened you are nearly there with it all.
I just ran it though the http://validator.w3.org and came up with 20 errors and 2 warnings. Its always good to validate your code, even if it doesn't validate fully its a great bug catcher.
What I would recommend is for you to check out some PSD to HTML video tutorials, this will give you a good idea of how to transfer a design into HTML/CSS from your design.
Unfortunately, there doesn't seem to be anything right for you to work out from. As Robski said, it's probably easier to start again.
A few quick pointers...
Set your background in your body tag, then create a wrapping div to hold everything in place according to that background. In other words, your background white area is about 1000px wide, so create a wrap div that's approx 970px wide and auto margin it to center. This means you can now nest everything within this div without having to push them in from the edge of the screen - the wrap will do this for you.
Your header div is supposed to be just that - for your header. It seems however you have nested everything on the page within it. Limit its content to just the header stuff, then create further 'content' and 'footer' divs for the rest. All three should be relatively positioned so they'll stack nicely on top of one another. Robski has some excellent articles on positioning.
Try to avoid using padding for positioning - different browsers render padding in different ways. If possible avoid it altogether, although this can be difficult. You also seem to be unconciously relying on your content overflowing some of your divs in order to be visible. Make your divs as big as they need to be to hold their content (+padding!) and you can delve into overflow properties later. Chris did an article on overflowing not too long ago.
Be careful with how you name your elements, an id should be unique and only appear once per page. Classes can appear as many times as you like.
i don't know where i am missing but when ever i re-size my broswer the content inside the div tags changes it position and html goes messy..
here is my CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
margin: 0px;
padding: 0px;
text-align:center;
background-color: #eeeeee;
background-image:url(images/backGroundFade-gray.gif);
background-repeat:repeat-y;
background-position:center;
}
#logo {
width: 200px;
height:90px;
margin: 0 auto;
padding: 0 10px 0 70px;
background: url(images/Retail.jpg) no-repeat left top;
margin-left:138px;
}
#logo ul {
background: url(images/eZ-Publish-Website-Design.gif);
height:111px;
margin-top:-100px;
margin-left:600px;
background-repeat:no-repeat;
}
#logo li {
list-style: none;
background-image:none;
margin-top:50px;
margin-left:50px;
}
h1 {
margin-top:65px;
font-family: Georgia, \"Times New Roman\", Times, serif;
font-size: 12px;
color:#4d728a;
}
h2 {
font-family: Georgia, \"Times New Roman\", Times, serif;
font-size: 15px;
color:#FF0000;
text-align:center;
}
#line {
background-image:url(images/line.jpg);
background-repeat:repeat-x;
width:1000px;
margin-top:20px;
background-color: #636C94;
}
/* Menu start here */
#menu {
width: 1000px;
margin: 0 auto;
padding: 0;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
height: 25px;
margin: 0;
padding:5px 20px 0px 50px;
text-decoration: none;
text-transform: capitalize;
background: url(images/Subscribe.jpg) no-repeat center;
font-family: Georgia, \"Times New Roman\", Times, serif;
font-size: 12px;
color:#000000;
}
#menu a:hover {
color:#FF0000;
}
/* Body start here */
#Content ul {
list-style: none;
background-image: url(images/retail_store.gif);
background-repeat:no-repeat;
height:361px;
margin-left:138px;
padding:0px 0px 0px 7px;
}
#Content ul li {
display:block;
margin-left:380px;
margin-top:5px;
background-color: #F1F0EF;
height: auto;
width: auto;
width: 41%;
border: 1px solid #000000;
}
and HTML
Welcome to the forums btw :)
http://chakkapayyan.org/del/home.html
Plz help me. if there are any kind of suggestion, they are welcome too!!!
Thanks in advance!!!
Thanks for the live version it works so much better when you can see it :)
Now for the bad news...
Really sorry to say this but its such a mess it would be quicker to start again :S But don't be disheartened you are nearly there with it all.
I just ran it though the http://validator.w3.org and came up with 20 errors and 2 warnings. Its always good to validate your code, even if it doesn't validate fully its a great bug catcher.
What I would recommend is for you to check out some PSD to HTML video tutorials, this will give you a good idea of how to transfer a design into HTML/CSS from your design.
http://css-tricks.com/video-screencasts ... rt-1-of-3/
http://net.tutsplus.com/site-builds/fro ... p-by-step/
try and get your head around positioning, using margin to position things is bad. (I should make a macro for this)
http://alteredaspect.info/the-art-of-css-positioning/
I hope these shed lots of light! I am sure they will :D
Unfortunately, there doesn't seem to be anything right for you to work out from. As Robski said, it's probably easier to start again.
A few quick pointers...
Set your background in your body tag, then create a wrapping div to hold everything in place according to that background. In other words, your background white area is about 1000px wide, so create a wrap div that's approx 970px wide and auto margin it to center. This means you can now nest everything within this div without having to push them in from the edge of the screen - the wrap will do this for you.
Your header div is supposed to be just that - for your header. It seems however you have nested everything on the page within it. Limit its content to just the header stuff, then create further 'content' and 'footer' divs for the rest. All three should be relatively positioned so they'll stack nicely on top of one another. Robski has some excellent articles on positioning.
Try to avoid using padding for positioning - different browsers render padding in different ways. If possible avoid it altogether, although this can be difficult. You also seem to be unconciously relying on your content overflowing some of your divs in order to be visible. Make your divs as big as they need to be to hold their content (+padding!) and you can delve into overflow properties later. Chris did an article on overflowing not too long ago.
Be careful with how you name your elements, an id should be unique and only appear once per page. Classes can appear as many times as you like.
Best of Luck! :)
Thanks Again, your help is really appericated....