Help me with CSS please

krishnandu · Apr 20, 2010

Hey friends, please look in to the index.html

Download cgs pages.rar, upload your files and earn money. pages.rar

Now, can you please do the necessary edit or simply suggest me what to do to bring the menus in the top at center?? There are 16 menus I want them to appear as first 8 in the first line and last 8 in the next line.

Please help.

thetechmind · Apr 21, 2010

tada, its me again :bleh: .....give me some time...will get back....

krishnandu · Apr 21, 2010

It's ok......Thank you for the help.

You can edit the css file and upload it or otherwise if you are running short of time you can post the changes here too....!!

krishnandu · Apr 22, 2010

Hey 126 views and no replies?? Please help me yaar. I need it badly.

NAV33N · Apr 22, 2010

here this might help - CSS Tutorial

whatsinaname · Apr 22, 2010

krishnandu said:
Hey 126 views and no replies?? Please help me yaar. I need it badly.

A couple of things you could try.

Break your <ul> with the 8 [*] elements into two parts.

So instead of

Code:

<div class="xxx">

<ul>

[*]

[*]

[*]

[*]

[*]

[*]

[*]

[*]

[/list]

<div>

Try

Code:

<div class="xxx">

<ul>

[*]

[*]

[*]

[*]

[/list]

</div>

<div class="xxx1">

 <ul>

[*]

[*]

[*]

[*]

[/list]

<div>

Remove top margin for xxx1. Remove left padding for your [*] elements.

Set width for <ul> elements to the parent <div>'s width.

PS: Haven't tested any of this out. Just throwing out blind suggestions.

krishnandu · Apr 22, 2010

Thank you. I'll try them out and post the results here.

Sanjeet Arora · Apr 25, 2010

Hope u are aware about the developer tools! eg. Firebug for mozilla firefox. Just install any of them according to ur browser and editing will be very easy.

Here's the solution.

hyeah: Did it using chromeplus developer tool. Next time try yourself.

/*
Credit: Free CSS Templates
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #444444;
background: #ffffff;
}

a:link, a:visited { color: #006699; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #CC0000; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.fl { float: left; }
.fr { float: right; }

.m_right { margin-right: 30px; }

.button_01 a {
display: inline-block;
padding: 10px 15px 5px 5px;
background: url(images/templatemo_more_button.png) bottom right no-repeat;
text-align: center;
color: #026181;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

h1 {
margin: 0px;
padding: 0px;;
font-size: 30px;
font-weight: bold;
color: #000;
}

h2 {
margin: 0 0 15px 0;
padding: 3px 0;
font-size: 20px;
font-weight: bold;
color: #000000;
}

h3 {
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: bold;
font-weight: bold;
color: #000;
}
.image_wrapper {
border: 4px solid #d6d6d6;
padding: 1px;
background: #ffffff;
margin-top: 3px;
margin-bottom: 5px;
}

.fl_image {
float: left;
margin-right: 15px
}

.fr_image {
float: right;
margin-left: 15px
}

.em_text {
color: #000000;
}

/* site title */

#templatemo_site_title_bar_wrapper {
width: 100%;
height: 100px;
margin: 0 auto;
background: url(images/templatemo_site_title_bg_wrapper.jpg) top repeat-x;
}

#templatemo_site_title_bar {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 0 10px;
background: url(images/templatemo_site_title_bg.jpg) center top no-repeat;
}

#site_title {
float: left;
margin: 0px;
padding: 30px 0 0 0;
}

#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 26px;
color: #0981a9;
font-weight: bold;
text-decoration: none;
}

#site_title h1 a:hover {
font-weight: normal;
text-decoration: none;
}

#site_title h1 a span {
display: block;
font-size: 13px;
color: #333;
font-weight: normal;
margin-top: 10px;
}

#site_title_bar_right_section {
float: left;
width: 900px;
}

/* end of menu */

#templatemo_menu {
float: center;
margin-top: 20px;
width:900px;
}

#templatemo_menu ul {
padding: 0;
margin: 0 auto;
list-style: none;
width:900px;
}

#templatemo_menu ul li {
padding: 0;
margin: 0px;
display: inline;
}

#templatemo_menu ul li a {
float: left;
display: block;
height: 20px;
padding: 2px 10px 0 5px;
margin-left:10px;
margin-bottom:10px;
margin-right:0px;
margin-top:0px;
font-size: 14px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #074256;
outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
position: relative;
color: #ffffff;
background: url(images/templatemo_menu_hover_right.png) right no-repeat;
}

#templatemo_menu li a:hover span, #templatemo_menu li .current span {
position: absolute;
top: 0;
left: -5px;
width: 6px;
height: 22px;
background:url(images/templatemo_menu_hover_left.png) no-repeat;
}

.call_no {
float: right;
margin: 20px 0 0 0;
width: 300px;
color: #ffffff;
font-size: 30px;
}

.call_no span {
color: #ffffff;
}

/* end of menu */

/* end of site title */

/* banner */

#templatemo_banner_wrapper {
width: 100%;
height: 280px;
margin: 0 auto;
background:url(images/templatemo_banner_bg_wrapper.jpg) top repeat-x;
}

#templatemo_banner {
width: 900px;
height: 160px;
margin: 0 auto;
padding: 60px;
background: url(images/templatemo_banner_bg.jpg) center top no-repeat;
}

#templatemo_banner h2 {
color: #000000;
font-weight: bold;
margin-bottom: 20px;
}

#templatemo_banner h2 span {
color: #af0303;
font-weight: bold;
}

#templatemo_banner p {
font-size: 16px;
letter-spacing: 1px;
line-height: 25px;
margin-bottom: 20px;
}

#templatemo_banner a {
font-size: 16px;
font-weight: bold;
color: #af0303;
}

#templatemo_banner a span {
font-size: 20px;
}

/* end of banner */

/* content */

#templatemo_content_wrapper {
width: 100%;
margin: 0 auto;
background: #c1c1c1 url(images/templatemo_content_bg.jpg) top repeat-x;
}

#templatemo_content {
width: 960px;
margin: 0 auto;
padding: 0 10px 30px 10px;
background: none;
}

#templatemo_content p {
margin-bottom: 10px;
}

#templatemo_content .service_box {
position: relative;
float: left;
width: 260px;
height: 125px;
padding: 10px 30px;
background: url(images/templatemo_service_box_bg.jpg) top center no-repeat;
}

.service_box h3 {
font-size: 14px;
font-weight: bold;
color: #0981a9;
margin-bottom: 10px;
}

.service_box img {
position: absolute;
top: 80px;
right: 30px;
}

#templatemo_conten .service_box p {
padding: 0px;
margin: 0px;
}

.section_w960 {
clear: both;
width: 960px;
}

.section_w600 {
float: left;
width: 600px;
padding-right: 40px;
}

.section_w320 {
float: left;
width: 320px;
}

.news_section {
clear: both;
margin-bottom: 10px;
}

.news_section h3 a {
color: #af0303;
font-weight: bold;
}

/* end of content */

/* footer */

#templatemo_footer_wrapper {
width: 100%;
margin: 0 auto;
background: #ffffff url(images/templatemo_footer_bg.jpg) top repeat-x;
}

#templatemo_footer {
width: 960px;
margin: 0 auto;
padding: 20px 10px;
text-align: center;
background: none;
color: #666;
}

#templatemo_footer a {
color: #333333;
}

#templatemo_footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}

.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #7c7471;
}

.footer_menu .last_menu {
border: none;
}

/* end of footer */

krishnandu · Apr 25, 2010

Hey thank you. Let me try it out.

But hey most importantly I didn't knew about these tools.

Could you name a few and instruct how to use them?? Please...!!

Hey your posted solution worked like charm. Thanks a lot. Please mention the tools you are talking about and how to use them??

Sanjeet Arora · Apr 26, 2010

Every browser has a developer tool. They allow the developer with the information that he requires to develop web pages compatible with that browser.
for eg.
Firebug for mozilla firefox:- this is an addon for mozilla. Once u install this addon u can start it by simply right clicking on any part of the web page and then selecting "inspect element" . this command will be available only after u have installed the aforementioned addon. it will show u a window which will contain information about the element u right clicked on. all info like css, script, html etc are accessible and most of them are editable. so u can make changes temporarily first and then permanantly in the original files once u are satisfied with the output.

Similarly all browsers have such tools and u will find ample documentation on google.

Hope this helps.

krishnandu said:
Hey thank you. Let me try it out.

But hey most importantly I didn't knew about these tools.

Could you name a few and instruct how to use them?? Please...!!

Hey your posted solution worked like charm. Thanks a lot. Please mention the tools you are talking about and how to use them??

krishnandu · Apr 26, 2010

^^Hey, thanks, let me try it out.

Search

Search

Help me with CSS please

krishnandu

thetechmind

krishnandu

krishnandu

NAV33N

whatsinaname

krishnandu

Sanjeet Arora

krishnandu

Sanjeet Arora

krishnandu