|
CSS - Creating Two Styles For Two Different Navigation Menus
I have two navigation menus on my site. One that is horizontal across the top and the second is vertical along the left side. Both of these have rollover effects.
I would like to code this with as few lines as possible. So far, I only have the code for the left-side navigation menu. What else should I add for the horizontal menu? Code: #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navbar li{
border-bottom:1px solid #003366;
margin:0 /*dictates the space between navbar items */
}
#navbar li a {
display: block;
padding: 5px 0 5px 5px;
border-left: 10px solid #1958b7;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navbar li a:hover {
border-left: 10px solid #1c64d1;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
Similar TutorialsHi there. I am trying to create the attached image in style sheets. I have done everything, but now I'm stuck on the border of the bottom TD. Anyone got any suggestions on how to do this? Hi there, thanks for reading my post. I am looking to build a website using ASP, with databases. After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily". I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused. I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames . I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!! If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful. Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear. Thanks to anyone who can help, Regards, Porky I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh? Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery). Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated! You can find the sample at: http://www.myztacia.com/animated-menu2.html I figured it was easier to post the link than force you to create the webpage yourself Hi, I want to make something that works like this: dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html# (cant post proper urls as I'm new) Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens. But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it. Thanks! Hi, I have a problem: the navigation submenu is appearing underneath the floated element (the images) that is placed under it. How can I get the navigation menu to appear 'over' the images? You can see it he http://serve5.net/xcage/ http://serve5.net/xcage/stylesheets/xcage.css Thanks. Hi, I would like two columns, one with the title (i.e. menu1,2,3) and the next with the select menu. In the past, I have used tables (yikes!). I am assuming it should be a list,however, the markup could be changed if something else is more suitable. Any suggestions on appropriate CSS, or sites which give good examples? Thanks Code: <ul id="selection_list"> <li>menu1<select id="menu1" name=" menu1" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> <li>menu2<select id="menu2" name=" menu2" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> <li>menu3<select id="menu3" name=" menu3" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> </ul> Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have: Code:
.featdesc
{
margin-left: 10px;
margin-top: 10px;
width: 400px;
text-align: justify;
if (ie6)
font-size: 11pt;
else
font-size: 10pt;
color: #505050;
}
Is there a way to accomplish this? What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. I have a page that I'm building as a prototype for a working medical exam GUI. I'm using Dreamweaver and it's pretty ugly. Is there anywhere I can download some styles that will bring this site to life? Maybe OSX or Vista-looking stuff? Hi, I am having trouble setting up different link styles in my site. My code is: Code:
.menu {
font-family: Helvetica;
font-size: 18px;
color: #FFFFFF;
}
a.menu:link {
color : #FFFFFF;
text-decoration : none;
}
a.menu:visited {
color : #FFFFFF;
text-decoration : none;
}
a.menu:hover {
color : #FFFFFF;
text-decoration : underline;
}
a:link {
color : #FFFFFF;
text-decoration : underline;
}
a:visited {
color : #FFFFFF;
text-decoration : underline;
}
a:hover {
color : #FFFFFF;
font-weight : bold;
text-decoration : underline;
}
From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class. So when I use the following code: <div class="menu"><I>01</I> <a href="">HOME</a></div> .. I would have thought the link would follow the style for .menu But it doesn't. It takes the style of the default links as well. How do I properly setup an alternate link style?? Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone Hi, I'm trying to create a PDF of my site, and I want it to look EXACTLY like the site. Right now the links are coming out blue (instead of the color I've defined in my CSS), and the fonts are not displaying according to what I've defined in the CSS. Someone once told me that I can overlay the pages with a transparent gif and that would preserve my original CSS definitions. But I can't get that to work. If I add a <div> to the html page, in an effort to overlay a transparent image over the entire page, and then I convert it to a PDF, then in the PDF the big transparent image just moves to the bottom, underneath the rest of the page. Thanks to anyone who can maybe help. Laura S. I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red) Code:
<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
A
{
COLOR: red;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #993300;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
// here is the part I added a.one
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.one:hoover
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</style>
//end of what I added
{/literal}
Here is the html Code:
<td>
<a class="one" href="disclaimer.php">Disclaimer</a>
</td>
Hi folks. I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates. At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field). My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like? I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template. is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc) thanks, --Lone Hi, I have an issue where my css loads fine with Safari and Firefox. However, I have no styling when it comes to any versions of IE. I have listed the code below. Any help would be greatly appreciated. (There is a bit of php, but css is not loaded through it). Code:
<?php require_once("php/includes/sitewide.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<?php keywords(); ?>
<?php description(); ?>
<link href="css/sitestyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="active"><a href="<?php echo $link1; ?>"><?php echo $namelink1; ?></a></li>
<li><a href="<?php echo $link2; ?>"><?php echo $namelink2; ?></a></li>
<li><a href="<?php echo $link3; ?>"><?php echo $namelink3; ?></a></li>
<li><a href="<?php echo $link4; ?>"><?php echo $namelink4; ?></a></li>
<li><a href="<?php echo $link5; ?>"><?php echo $namelink5; ?></a></li>
<li><a href="<?php echo $link6; ?>"><?php echo $namelink6; ?></a></li>
<li><a href="<?php echo $link7; ?>"><?php echo $namelink7; ?></a></li>
</ul>
</div>
<!-- end #menu -->
<div id="header">
<h1><a href="<?php echo $link1; ?>"><?php echo $site_title; ?></a></h1>
<h2 style="color: #FFFFFF;"><?php echo $statement; ?></h2>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post hr">
<h1>Welcome to <em>Site Title</em></h1>
<img src="images/building_1.jpg" alt="" width="120" height="120" class="left" />
<p><strong>SiteTitle</strong>performs home inspections that exceed the standards of the American Society of Home Inspectors. After accompanying us during the inspection, reading the inspection report, the client will know more about the home they are planning to purchase and quite often will know more about the condition of the house than the seller!*</p>
</div>
<div class="post">
<h2>Home Inspections</h2>
<p><strong>Home Inspections</strong> are a necessity for homebuyers in South Carolina when purchasing a new or existing Home.*Potential homebuyers MUST be knowledgeable and informed of any and all problems that may exist prior to closing. The challenge is to find a qualified home inspector with the experience and knowledge of performing a thorough and comprehensive inspection of the property that the buyer can trust and can rely on the accuracy of the inspection.</p>
<h3>Join Us</h3>
<p>Join the hundreds of satisfied clients who have retained us to help them with their real estate transactions.</p>
<blockquote>
<p><?php quotes(); ?> </p>
</blockquote>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="updates" class="orangebox">
<h2><?php echo $header1; ?></h2>
<ul>
<li><a href="<?php echo $inspectlink_1; ?>"><?php echo $inspectname_1; ?></a></li>
<li><a href="<?php echo $inspectlink_2; ?>"><?php echo $inspectname_2; ?></a></li>
<li><a href="<?php echo $inspectlink_3; ?>"><?php echo $inspectname_3; ?></a></li>
<li><a href="<?php echo $inspectlink_4; ?>"><?php echo $inspectname_4; ?></a></li>
<li><a href="<?php echo $inspectlink_5; ?>"><?php echo $inspectname_5; ?></a></li>
<li><a href="<?php echo $inspectlink_6; ?>"><?php echo $inspectname_6; ?></a></li>
<li><a href="<?php echo $inspectlink_7; ?>"><?php echo $inspectname_7; ?></a></li>
</ul>
<h2><?php echo $header2 ?></h2>
<ul>
<li><a href="<?php echo $categorylink_1; ?>"><?php echo $categoryname_1; ?></a></li>
<li><a href="<?php echo $categorylink_2; ?>"><?php echo $categoryname_2; ?></a></li>
<li><a href="<?php echo $categorylink_3; ?>"><?php echo $categoryname_3; ?></a></li>
<li><a href="<?php echo $categorylink_4; ?>"><?php echo $categoryname_4; ?></a></li>
<li><a href="<?php echo $categorylink_5; ?>"><?php echo $categoryname_5; ?></a></li>
<li><a href="<?php echo $categorylink_6; ?>"><?php echo $categoryname_6; ?></a></li>
<li><a href="<?php echo $categorylink_7; ?>"><?php echo $categoryname_7; ?></a></li>
</ul>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal"><?php echo COPYRIGHT; ?></p>
</div>
<!-- end #footer -->
<?php analytics(); ?>
</body>
</html>
Here is the css. Code:
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(../images/img01.gif) repeat-x;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
color: #333333;
}
h1, h2 {
margin-bottom: 20px;
font-weight: normal;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 152%;
}
h3 {
font-size: 100%;
}
p, ul, ol {
margin-bottom: 20px;
line-height: 1.8em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
padding-left: 3em;
background: url(../images/img08.gif) no-repeat;
font-style: italic;
}
a:link {
color: #1953A7;
}
a:active {
color: #ED5C0C;
}
a:visited {
color: #666666;
}
a:hover {
text-decoration: none;
color: #067600;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 20px 10px 0;
}
/* Menu */
#menu {
width: 770px;
height: 65px;
margin: 0 auto;
border-right: 1px solid #EDEBD5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 109px;
height: 45px;
padding: 20px 0 0 0;
border-left: 1px solid #EDEBD5;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 144%;
color: #BABABA;
}
#menu a:hover {
background: #F7F7F4;
}
#menu .active a {
background: #F49A24;
color: #FFFFFF;
}
/* Header */
#header {
width: 770px;
height: 170px;
margin: 0 auto;
}
#header h1 {
float: left;
width: 220px;
height: 100px;
margin: 0;
padding: 70px 0 0 0;
background: url(../images/header_left.jpg) no-repeat;
text-align: center;
font-size: 36px;
}
#header h2 {
float: right;
width: 530px;
height: 86px;
margin: 0;
background: url(../images/header_right.jpg) no-repeat;
padding: 84px 20px 0 0;
text-align: right;
}
#header a {
text-transform: lowercase;
text-decoration: none;
font-style: italic;
font-weight: normal;
color: #FFFFFF;
}
/* Page */
#page {
width: 770px;
margin: 0 auto;
padding: 20px 0;
}
/* Content */
#content {
float: left;
width: 550px;
padding-top: 10px;
}
#submitButton:hover {
}
.submitButton {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.input {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.inputSmaller {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.post {
margin-bottom: 20px;
padding: 0 20px;
}
.hr {
border-bottom: 1px solid #EDEBD5;
}
/* Sidebar */
#sidebar {
float: right;
width: 210px;
padding: 5px;
background: #EDEBD5;
}
#sidebar h2 {
margin: 0;
padding: 5px 15px;
color: #FFFFFF;
}
#sidebar h3 {
font-size: 85%;
color: #FFFFFF;
}
#sidebar ul {
margin: 0;
padding: 15px;
list-style: none;
}
#sidebar li {
}
#sidebar a {
color: #FFFFFF;
}
.orangebox {
background: url(../images/img05.gif) repeat-y;
}
.orangebox h2 {
background: url(../images/img06.gif) repeat-y;
}
/* Footer */
#footer {
clear: both;
height: 100px;
padding: 25px 0;
background: #EDEBD5 url(../images/img04.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
color: #666666;
}
|
|||||||