Need help and review

[meSingh]

Hello

I am learning html/css. I tried to make a template from a psd template. but i was not able to recreate the mid part of the template. You should first see the template then you will be able to understand the problem.

http://www.devnagar.com/demo/html/traffic/

the mid part that says "This is where the rubber meets the road" and bellow images
I was not able to recreate it using css so i just used the image file for the whole area but that is what i think will trouble a user if hi wants to add his custom text.

Will anybody help me in creating this?

also review the rest of the template and tell me if i can improve it with any additions or changes.

 

[JamesD31]

Changes:

* Top navigation has white part above it, remove that (get rid of the margin)
* Make the navigation links have a hover effect (give them that blue color on hover
* Make the logo clickable, and only have it sized by the actual image - instead of padding it
* Get rid of the white padding / margin between the 2nd and 3rd horizontal dividers you have going on.
* I don't like the font, I find that just using Arial is perfect for all websites - even business, as it's the easiest to read.
* Like the navigation change above, just make ALL LINKS EVER YOU DO IN UR LIFE have a hover effect - it's for the user's benefit to easily know what they are clicking on.

Now to center that area.

[bold]HTML[/bold]

<div id="centerArea">
    <h1>This is the big text area</h1>
    <p>This is the sub-text under the big text area</p>
    <!-- <img src="mid-image.png" alt="Some text" /> -->
</div>

[bod]CSS[/bold]

#centerArea {
    margin: 0 auto;
    padding: 0;
    width: (w/e u have set)px;
    height: (not needed, but u can have it set);
    background: url(images/bg.png) no-repeat center;
    text-align: center;
    display: block;
}
#centerArea h1, #centerArea p {
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-color: #FFF;
    text-align: center;
}
#centerArea p {
   font-size: 14px;
   margin: 10px 0 0;
}
#centerArea img {
   margin: 10px 0 0;
   padding: 0;
   width: 100%;
}

 

[meSingh]

Changes:

* Top navigation has white part above it, remove that (get rid of the margin)
* Make the navigation links have a hover effect (give them that blue color on hover
* Make the logo clickable, and only have it sized by the actual image - instead of padding it
* Get rid of the white padding / margin between the 2nd and 3rd horizontal dividers you have going on.
* I don't like the font, I find that just using Arial is perfect for all websites - even business, as it's the easiest to read.
* Like the navigation change above, just make ALL LINKS EVER YOU DO IN UR LIFE have a hover effect - it's for the user's benefit to easily know what they are clicking on.

Now to center that area.

[bold]HTML[/bold]

<div id="centerArea">
    <h1>This is the big text area</h1>
    <p>This is the sub-text under the big text area</p>
    <!-- <img src="mid-image.png" alt="Some text" /> -->
</div>

[bod]CSS[/bold]

#centerArea {
    margin: 0 auto;
    padding: 0;
    width: (w/e u have set)px;
    height: (not needed, but u can have it set);
    background: url(images/bg.png) no-repeat center;
    text-align: center;
    display: block;
}
#centerArea h1, #centerArea p {
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-color: #FFF;
    text-align: center;
}
#centerArea p {
   font-size: 14px;
   margin: 10px 0 0;
}
#centerArea img {
   margin: 10px 0 0;
   padding: 0;
   width: 100%;
}

Thanks for the help bro. It really helped me a lot.
I have updated the code and also added your credit in the css file of theme.

This theme is now available for free download here:
http://devnagar.com/free-traffic-homepa ... plate.html

Got & get it now

 

[JamesD31]

Glad I could help and I appreciate the credit, good luck in the future with your new themes and this current one!