|
CSS - Need Help Lining Up Text And A Link Button In A Horontal Menu
On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
Code: .homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}
.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}
.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}
.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}
.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}
Thank you Similar TutorialsHi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> 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. Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? The first version was not so hot, because it was developed entirely on Internet Explorer. Version 2 was an improvement, but it still required the user to code in JavaScript. But 3.0 uses CSS to trigger the effect, namely some variation of
CSS Code: Original - CSS Code a:hover { outline: outset; }
a:hover {
You may read about it and download the necessary files at http://desertowl.43i.net/link-button. Is it possible to display a submit button in a form as a regular link? I'm not allowed to use Javascript, so it has to be done in CSS. Thanks I am managing maillist, current design have troubles with Outlook 2007 Can someone advice... How i can create link that looks like button in html message for Outlook 2007 users? Without external/internal images. All samples i know don't work in Outlook 2007! Am I missing something? I am using the following code and it works if I put it in the head, but doesn't work if I put it in an external style sheet. I know I am sleep deprived but am I missing something simple? .m_isabel { display: block; width: 175px; height: 20px; background: url("jpg/m_isabel.jpg") no-repeat 0 0; } .m_isabel:hover { background-position: 0 -20px; } .m_isabel span { display: none; } In body: <a href="#" class="m_isabel" title="Isabel"><span>F. Isabel </span></a> Hi, I have pictorial buttons that really are <a href's></a> with img buttons in between. When viewed in IE i get a bluish/purple box around my buttons. I want to eliminate the link marking around the images. How do I do this? Thanks for all and any suggestions. Melroy i am trying to find anywhere that may have something to describe a collapse and expand link menu in css. I can't find one that use's mainly css it is all javascript of somekind does anyone know where i could find one. http://www.dudley.nhs.uk/ In I.E. 7, when I click on the links in the right hand menu, the whole link/block turns white. Although it doesn't strictly matter (as person gets redirected), I'd like to resolve the issue as it's quite annoying. It works when the code is: Code: .gallery a {
text-decoration:none;
display:block;
padding:5px 5px 5px 20px;
width:125px;
color:black;
background: url(../images/arrow.gif) no-repeat 10px 10px; /* Light green */
}
.gallery a:hover {
background: url(../images/arrowr.gif) no-repeat 11px 10px; /* Dark green*/
color:black;
}
but fails when I add a background colour such as: Code: .gallery a, .gallery a:visited {
text-decoration:none;
display:block;
padding:5px 5px 5px 20px;
width:125px;
color:black;
background: #cfc url(../images/arrow.gif) no-repeat 10px 10px; /* Light green */
}
.gallery a:hover {
background: #3c0 url(../images/arrowr.gif) no-repeat 11px 10px; /* Dark green*/
color:black;
}
Any clues? Thanks! Hi, I have this in the html and so on for each page <div id="nav"> <ul> <li class="current"><a href="one.htm">one</a></li> <li><a href="two.htm">two</a></li> <li><a href="three.htm">three</a></li> </ul> </div> Then css: #nav ul li.current a{ background:#CCCCCC; color:#000000; } But I don't want the first page's link to change colour until it is clicked. Otherwise the menu comes up with first link always active before anything has been selected. It looks wrong. Is there anyway around this in css? Thanks, jdl Hi All! I am hoping that someone might be able to help me out here. I am working on a page layout that consists of a header/logo then beneath that is five link nav bar and then below the content area. The header and content are fine and look great - but the nav bar seems to stepping over to the left a touch (PC IE in particular) and so is messing up the layout! I am finishing the job off for someone and there is a lot of bits and bobs that don't need to be in there - but when I take stuff out it messes up other parts of the layout! this is the layout and this is the css How can I stop the nav from moving and just make go full width (729px)????? Please save my sanity!!!! D Hi all new member, just learning css! need help targeting my menu system? Html so far! -its a dynamic menu system, and i have no control of the naming system of the li Code: <div class="nav-container"> <ul id="nav"> <li> <a href="http://localhost/">Home</a> </li> <li class="level0 nav-1 level-top first"> <a class="level-top" href="http://localhost/mens.html"> <span>Mens</span> </a> </li> <li class="level0 nav-2 level-top"> <a class="level-top" href="http://localhost/womens.html"> <span>Womens</span> </a> </li> </ul> </div> I need to target the li classes - each one individual to bring in a different image for each when rolled over. Css i have for one of the examples:- .level0 nav-2 level-top li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase; background-image:url("navigation.gif"); width:85px;} .level0 nav-2 level-top li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;} But its not right, not targetting it! - what is the correct path to target the different nav's? Thanks I have a menu where the submenu li's have a blue/darker blue background color and hover color. I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up Here's the part of my styles for the list that I'm trying to change.. Code:
/* original backgrounds for the menu */
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
Is it the way I tried to rename the style? Code:
/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
background: #afe4bf;
color: #000;
padding-left: 20px;
}
.green ul.menu li ul li a:hover {
background: #88b796;
border-left: 5px #000 solid;
padding-left: 15px;
}
thanks in advance for any help, Kathy Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css). Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script: http://javascript-array.com/scripts...drop_down_menu/ And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code: Code:
<html>
<head>
<style>
<!--
#sddm a
{ display: block;
}
#sddm span
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #3D97D6;
border: 1px solid #5970B2}
#sddm span a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #3D97D6;
color: #FFF;
font: 11px arial}
#sddm span a:hover
{ background: #2875DE;
color: #FFF}
-->
</style>
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body>
<span id="sddm">
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
<a href="#">Add as Friend</a>
<a href="#">Send message</a>
<a href="#">View Profile</a>
<a href="#">Report</a>
</span>
</span>
this text comes after the username
</body>
</html>
So i hope its clear what i wanna do, i always find it hard to explain things Hi, I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css: Code: #first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}
Now to apply style on the main menu item, i use a.mainlevel. but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu. I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it.. Thx Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. |
|||||||