...

View Full Version : Can i style two horizotal and left menu in one external stylesheet.



kingot
04-04-2011, 04:03 PM
Hi sir,

Please i want to create links using css...Now i want one to be horizontal and one to be at the left menu links.

I style all in one external stylesheet..and after previewing it is not working..

Please do i have to style each one in separate external stylesheet or what do i do..please help me

Here is the external stylesheet code..please check and correct me.


/* css file for practicals */

body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}

#firstbar{background-color:#f7f7f7; align:center; width:70%; height:20px; text-align:left; color:#ffffff

margin:40px 0px 0px 0px;}
#secondbar{background-color:#000000; align:center; width:70%; height:30px;}

#searchbox{align:center; background-color:#cccccc; width:200px;}

/* horizontal links here */

#hori ul{list-style-type:none; padding:0px; margin:0px;}

#hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder;

background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px;

border: 2px dashed #336699;}

#hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder;

background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px;

border: 2px dashed #ffffff;}

#hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#hori float:right;

/*left menu links here */

#leftmenu{align:left; right-border-style:2px dotted red;}
#veti ul{list-style-type:none; padding:0px; margin:0px;}

#veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder;

background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px;

border: 1px dotted #336699;}

#veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder;

background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px;

border: 1px dotted #ffffff;}

#veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#veti float:left;

/* main page here */
#maincontentpage{align="center" width:70%; height:150%; valign="top" margin:40px 0px 0px 0px;

border:1px dotted #ffffff;}



Please help me to know what to style even many links style either in one external sheet or separate..Any help will be highly appreciated

Thanks.
Clement Osei

teedoff
04-04-2011, 04:13 PM
Of course you can style as many navigation menus as you'd like in one stylesheet. You have several css validation (http://jigsaw.w3.org/css-validator/#validate_by_uri)errors in the code above though. Without going into greater detail as to why your stying isnt working for your menus, you should fix the errors first.

Then check back here is the problem is still there, and post all your code..html and css as well.

kingot
04-04-2011, 05:37 PM
Hi,

Please i have validated the css code and it has no error now
but the page is still not showing well
here is the css code only


/* css file for practicals */

body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}

#firstbar{background-color:#f7f7f7; width:70%; height:20px; text-align:left; color:#ffffff; margin:40px 0px 0px 0px;}
#secondbar{background-color:#000000; width:70%; height:40px;}

/* horizontal menu here */

#hori ul{list-style-type:none; padding:0px; margin:0px;}

#hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #336699;}

#hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #ffffff;}

#hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#hori li{float:right;}

/*left menu link */

#veti ul{list-style-type:none; padding:0px; margin:0px;}

#veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #336699;}

#veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #ffffff;}

#veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#veti li{float:left;}

/* main page here */
#maincontentpage{ width:70%; height:150%; margin:40px 0px 0px 0px; border:1px dotted #ffffff;}
And here is the HTML and css page i am creating

here is the code


<!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">

<html>
<head>
<title>my first practical css page</title>
<link href="main.css" rel="stylesheet"/>

<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet"/>
<![endif]-->

<!--[if it IE 6]>
<link href="ie5.css" rel="stylesheet"/>
<![endif]-->

<link rel="stylesheet" type="text/css" href="test1.css"/>
<link rel="stylesheet" type="text/css" href="leftmenu.css"/>
</head>

<body>
<div id="firstbar">
Welcome to purely css page...Expect!
</div>
<div id="secondbar">
<ul id="hori">
<li id="hori"><a href="#.html">Porfolio</a></li>
<li id="hori"><a href="#.html">Sales Products</a></li>
<li id="hori"><a href="#.html">Consultancy</a></li>
<li id="hori"><a href="#.html">Services</a></li>
<li id="hori"><a href="#.html">Products</a></li>
<li id="hori"><a href="#.html">Help</a></li>
</ul>
</div>

<ul id="veti">
<li id="veti"><a href="#.html">Home</a></li>
<li id="veti"><a href="#.html">Contact Us</a></li>
<li id="veti"><a href="#.html">About Us</a></li>
<li id="veti"><a href="#.html">Help</a></li>
</ul>


<div id="maincontentpage">
<p>I love to be a programer all my life long years</p>
</div>


</body>
</html>

Please help me.

Thanks Clement Osei

kingot
04-04-2011, 05:37 PM
Hi,

Please i have validated the css code and it has no error now
but the page is still not showing well
here is the css code only


/* css file for practicals */

body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}

#firstbar{background-color:#f7f7f7; width:70%; height:20px; text-align:left; color:#ffffff; margin:40px 0px 0px 0px;}
#secondbar{background-color:#000000; width:70%; height:40px;}

/* horizontal menu here */

#hori ul{list-style-type:none; padding:0px; margin:0px;}

#hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #336699;}

#hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #ffffff;}

#hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#hori li{float:right;}

/*left menu link */

#veti ul{list-style-type:none; padding:0px; margin:0px;}

#veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #336699;}

#veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #ffffff;}

#veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
#veti li{float:left;}

/* main page here */
#maincontentpage{ width:70%; height:150%; margin:40px 0px 0px 0px; border:1px dotted #ffffff;}
And here is the HTML and css page i am creating

here is the code


<!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">

<html>
<head>
<title>my first practical css page</title>
<link href="main.css" rel="stylesheet"/>

<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet"/>
<![endif]-->

<!--[if it IE 6]>
<link href="ie5.css" rel="stylesheet"/>
<![endif]-->

<link rel="stylesheet" type="text/css" href="test1.css"/>
</head>

<body>
<div id="firstbar">
Welcome to purely css page...Expect!
</div>
<div id="secondbar">
<ul id="hori">
<li id="hori"><a href="#.html">Porfolio</a></li>
<li id="hori"><a href="#.html">Sales Products</a></li>
<li id="hori"><a href="#.html">Consultancy</a></li>
<li id="hori"><a href="#.html">Services</a></li>
<li id="hori"><a href="#.html">Products</a></li>
<li id="hori"><a href="#.html">Help</a></li>
</ul>
</div>

<ul id="veti">
<li id="veti"><a href="#.html">Home</a></li>
<li id="veti"><a href="#.html">Contact Us</a></li>
<li id="veti"><a href="#.html">About Us</a></li>
<li id="veti"><a href="#.html">Help</a></li>
</ul>


<div id="maincontentpage">
<p>I love to be a programer all my life long years</p>
</div>


</body>
</html>

Please help me.

Thanks Clement Osei

teedoff
04-04-2011, 06:24 PM
I really think you should do some reading and learning. I think you're wanting a simple two column layout, but your code is nowhere near that.

Here (http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/)is a good article/tutorial that walks you through creating such a layout with a horizontal and verticle nav section.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum