|
CSS - Remove Text Decor But Only In Menu
I have googled; I have read; I have read some more....
</popeye>That's all I can reads and I can't reads no more!</popeye> a {text-decoration:none} YEA! ....now; what if I only want to remove the underline on links in my menu and NOT the whole freakin' document???? lol..sorry I just spent the last three hours trying to fix this and no luck so far. the DOCTYPE is XHTML STRICT. Similar TutorialsI have a CSS menu. How to I remove the RIGHT border for that last link item? I tried a bunch of stuff, I can change the colour of it but I can't seem to get rid of it. Quote: /* ------------------------------------ PVII Menu CSS Express Drop-Down Menu by Project Seven Development www.projectseven.com ------------------------------------ */ /*body { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; background-color: #FFFFFF; margin: 24px 0; padding: 0; background-image: url(images/p7exp_pbg.jpg); background-repeat: repeat-x; }*/ /* Container for the menu. We set top and bottom borders only because the menu container stretches the entire window width. Note that this container can go inside a fixed width element that is centered on the page, if you so desire. It can even go inside a table cell. It carries a background image for aesthetics. */ #menuwrapper { border-top: 1px solid #000; border-bottom: 1px solid #333; background-color: #FFFFFF; background-image: url(../images/menu_bg.gif); background-repeat: repeat-x; } /*Clears the floated menu items. Assigned to a BR tag placed just before menuwrapper's closing DIV tag*/ .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } /* p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs. We set padding and margin to zero to eliminate all indentation, turn bullets off, and set a font-family different from the global font-family declared for the body element above. This sets font for just the menu. Do not add a font-size here. */ #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; } /* Root-Level Links. Do not change the first two properties. Adjust padding values to make the root links taller and to offset them from the left and right edges of the link box. The border right creates a separator between links. Font-size is set here and will apply to all menu levels. Font color is set to light gray. */ #p7menubar a { display: block; text-decoration: none; border-right: 1px solid #333; font-size: 1em; color: #FFFFFF; padding-top: 5px; padding-right: 14px; padding-bottom: 5px; padding-left: 14px; } /* Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased to accomodate the display of background image depicting a downward pointing arrow. */ #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(../images/p7PM_dark_south.gif); background-repeat: no-repeat; background-position: right center; } /* The Root-Level list items. Floating left allows them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional. As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text. */ #p7menubar li { float: left; width: 9em; } /* Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers. */ #p7menubar li ul, #p7menubar ul li { width: 12em; } /* The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links. */ #p7menubar ul li a { color: #666666; border-right: 0; padding-top: 3px; padding-right: 12px; padding-bottom: 3px; padding-left: 16px; } /* Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over. Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned. */ #p7menubar li ul { position: absolute; display: none; background-color: #FFFFFF; border-right: 1px solid #333333; border-bottom: 1px solid #333333; background-image: url(../images/menu_bg_pulldown.gif); background-repeat: repeat-x; } /* Changes the Text color and background color when the Root-Level menu items are moused over. The second selector sets color and background when Root-Level items are accessed with the keyboard tab key. The third selector sets an active state to support keyboard access in MSIE. The fourth selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script. Note that IE7 supports hover on elements other than links and so behaves like Firefox, Opera, and Safari - making the menu operable even if JavaScript is not enabled. */ #p7menubar li:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #999999; } /* Set the Sub-Menu UL to be visible when its associated Root-Level link is moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. */ #p7menubar li:hover ul, #p7menubar li.p7hvr ul { display: block; } /* Sets the Text color of the Sub-Level links when the Root-Level menu items are moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. The color set should march the normal Sub-Level link color in the rule: #p7menubar ul li a. The background color must be transparent to allow the underlying gradient background on the UL to show through. */ #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a { color: #000000; background-color: transparent; } /* The normal hover class for Sub-Level links. The Important directive is required for older browsers. We set a background color, which shows over the gradient background. We set text color to white. */ #p7menubar ul a:hover { background-color: #606060!important; color: #FFFFFF!important; } /* The single backslash \ character inside this comment causes IE5 Mac to ignore the following rule, which allows other browsers to render top-level menu items to their natural width. Do not edit this rule in any way. */ #p7menubar li {width: auto;} Hi. Here's my site in development: bongbay.spacemakeover.com/homemade-bong.php In Internet Explorer it looks fine, the menu's align to the top fine - BUT in firefox there is a big annoying gap from the top. Does anyone please know how I can fix this?? When I allow scripts and active x to run in IE I get a dotted border around each letter of hyperlinked text. It looks fine in other browsers and also in IE if I block scripts. Does anybody have any ideas how to fix this or if it really is a CSS problem? Thanks Let say you have this: <a href="#"> <img src="some.gif" alt=""> Some text </a> I want to have underline for the text on hover, but not for image. How do I do that for the above A IMG text? I want both the IMG and text within the A tag. Would appreciate a solution that worked in at least: IE, FF, OP, NE, Safari For me it is working in IE and OP but not in the gecko browsers.... FF, NE Regards Hey, i've had this issue for some time now with no resolve... see here I have tried adding a background image to the menu, but to no avail. Here's the menu CSS; Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
thanks! Any ideas why the text isn't showing up in the main site menu (top left hand side of screen): http://www.thepartyparty.ca Take a look in Firefox and then IE. Firefox works wonderfully (surprise), IE shows no text. Any suggestions? Ryan I'm having a problem getting the text of an <a> tag to be what I want where I want. No one in the javascript forum wants to tackle this. maybe it is a css thing. I made this interlocking tabbed menu which I do by javascript updating the position of the background graphic and its neighbor. I have done buttons before with a background and text overlayed. but they were always <input>'s and whatever I put in the value field just kinda showed up on top of the background graphic. These are actually <a>'s I assumed the text I put in between the <a> and the </a> tag would just show up but it doesn't. I tried making special divs for them but then I run in to position problems. If I make it absolute the first one is fine, then they all pile on top of it. If I make it relative, NONE of them show. Here is a test http://colleenweb.com/tests/bartest.php There is nothing like css for turning my brain into industrial waste. This has to be doable. Someone who understands this stuff please advise? Hi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he http://www.abhiram.astahost.com/trialcss/index.html and the CSS file is: http://www.abhiram.astahost.com/trialcss/mystyle.css Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button. Thanks a lot. Hello, I have a vertical menu on the left hand side of my page that I'm working on. I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment. Here's the code I'm using for the menu: Code:
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}
#menu li {
margin-bottom: 4px; /* space between each menu item */
}
#menu li a { /* text */
font-weight: bold;
height: 25px; /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
If anyone could help me out that'd be great. Thanks! Hey folks, strange issue here. despite the fact that i've set the z-index to 400 for the vertical drop down part of the menu, it's still being displayed underneath some of the text in the content part of the page. here's the menu style: Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
you can see what i'm talking about here. thanks Hey everyone. I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu. The menu is text based, vertically stacked and has two main criteria: 1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options. 2. When the above occurs, the text of the Work menu changes to a specific colour. Eg: Work - HIMALAYAS | LIONS EDITORIAL About Links Blog At the moment I am using the following code to show and hide: <a href="#"onmouseover="showhide('script'); return(false); ">WORK</a> <div style="display: none;" id="script"> <a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a> </div> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> Can anyone help me out? Ray. I am learning to do drop down menus and so far, so good. What I cannot figure out is that in the drop downs the text seems to be indented. For example, if the text said "New information", the "New" part starts what appears to be a few spaces to the right. I did, most recently, set the text to be centered but it still does this. The effect is that if the text wraps to a second line, then the second line is further to the left. Looks odd to me but I can't figure out how to fix it. Thanks for any help. Richard Hello, I've always made my menu buttons with the text built into the image but is there a better way to do it? Thanks for the help. Hey guys, I searched for this but didn't find an exact answer. I'm working on a really weird navigation header and have run into what should be a really basic problem. I have everything working except for the submenus. I want them to have a red background when rolled over, but white text. No matter what combination I've tried in the code, I cannot achieve this. What gives? You can see what I mean by going he johngibby[dot]com/blbr/ (sorry admins, but it's too complicated to explain without showing it) the CSS is Code: #navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 0;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color:#FFF;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
color: #000; }
#navbar li li a:hover {
background-color: #eb1b24;}
/*dropdown list item positioning*/
#navbar li.facility {
top:-28px;
left:73px;
position:relative;
}
#navbar li.membership {
top:-90px;
left:78px;
position:relative;
}
#navbar li.contact {
top:-126px;
left:80px;
position:relative;
}
#navbar li.teams {
top:-122px;
left:360px;
position:relative;
}
#navbar li.camps {
top:-85px;
left:360px;
position:relative;
}
#navbar li.links {
top:-38px;
left:360px;
position:relative;
}
#navbar ul.facilitydropdown {
position:relative;
top:50px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.membershipdropdown {
position:relative;
top:60px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.teamsdropdown {
position:relative;
top:60px; left:-20px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.campdropdown {
position:relative;
top:60px; left:-20px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
Thanks! Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png - having trouble to get it showing the image with the bbcodes :S As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down. Anyone has any idea how to fix this? Style Sheets Code: body
{
text-align: center;
background: #800000;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}
#spacer {
height: 50px;
}
#header {
height: 100px;
width: 100%;
background: url(ctfiles/logo.png) no-repeat top center #000;
}
#container {
background: #fff;
padding: 10px;
}
#main {
background: #000;
color: #fff;
width: 700px;
}
.sidebar {
float: right;
text-align: right;
background: #000;
color: #fff;
width: 30%;
padding-left: 8px
padding-right: 12px
}
.content {
color: #fff;
background: #000;
width: 70%;
margin-left: 2px;
margin-right: 2px
}
HTML/Template/PHP w/e Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one. PHP 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"> <head> <title>[(site_name)] | [*pagetitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" /> <base href="[(site_url)]" /> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */ #content { margin-left: 22px; } /* to avoid the BMH */ a, a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */ </style> <script type="text/javascript" src="assets/js/sleight.js"></script> <![endif]--> </head> <body> <div id="page"> <div id="spacer"> </div> <div id="container"> <div id="header"> </div> <div id="main"> <div class="sidebar"> [[Wayfinder? &startId=`0`]] </div> <div class="content"> <h4>[*longtitle*]</h4> [*#content*] </div> </div> <div id="footer"> [(site_name)] is powered by <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a> <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br /> MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^]. </div> </div> </div> </body> </html> i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? |
|||||||