I have a menu bar of images. What is the best way to create rollover images for the menu bar?
I am using Visual Studio 2008 in VB.Net
If it's a background image, you can use the css :hover selector to change the background image.
You can do a css solution too. It involves more work on creating the image rollovers, ie on the graphic design side.
See the css in: http://clearleft.com/
You could use a combination of the Menu control, CSS Friendly Adapters, and CSS Sprites.
I've done a lot of these, so feel free to ask any questions.
In the end, you want something like this:
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
Style it something like so:
#nav li { float: left; }
#nav a { height: 30px; width: 150px; background: transparent url("bg.png") no-repeat scroll left top; }
#nav a#page1:hover { background-image-position: -30px 0; }
etc. etc...
You'll have to set the background image position of each element, but that tutorial on image sprites should get you there.
The Css Menu Adapter in Asp.Net, unfortunately doesn't put IDs on each element. I edited the source code to do this, but you may want to just do it with html, if you don't need the abstraction the Menu control gives you.
Related
I am creating a small project on ASP.NET. I want a simple drop down menu. Most of the solutions on web use jquery. Is there any simpler way or should I learn jquery ?
One more thing. The menu should work on IE.
Some of the cleanest drop down implementations I have seen are based on semantic HTML (unordered lists, nav element(s), etc.) and the CSS :hover pseudo class. Semantic structures degrade nicely when script is not available and are interpreted well when consumed by devices like screen readers.
Older versions of IE which do not support the :hover pseudo class can be accommodated with a snippet of script (no jQuery required).
Suckerfish/Son of Suckerfish is a good example of this technique.
Code/Description
Examples
Example
Here is the simplest implementation I could create which works in IE7+, Chrome, FF, etc. No script required.
Complete sample: http://jsfiddle.net/BejB9/4/
HTML
I'd wrap this in a nav tag in a finished document
<ul class="nav">
<li>This item has a dropdown
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
<li>Item</li>
<li>So does this item
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
</ul>
CSS
UL.nav > LI {
list-style: none;
float: left;
border: 1px solid red;
position: relative;
height: 24px; /* height included for IE 7 */
}
UL.nav UL{
left: -10000px;
position: absolute;
}
UL.nav > LI:hover UL{
left: 0;
top: 24px; /* IE7 has problems without this */
}
Just Google like "CSS menu", you can pretty much find everything you need with just copy/paste once you find a menu you like. Learn a little CSS and you can then modify it to your liking.
See: 100 Great CSS Menu Tutorials
See: CSS Menu Maker
There is not really a need to learn jQuery in order to use it, or its plugins.
You can google for "jquery drop-down menu" and you will find hundreds of sites with ready-made code and / or tutorials.
example: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
All you will have to do later is construct your menu usually with a <ul><li> structure, and call the right selector.
Other option you will have is use a CSS drop-down menu - just google for it like I wrote for jQuery.
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I need to make design like this,
to make this possible i used dotted line as background of li and + icon as a list-style-image. but it's not looking same in all browsers.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li class="last">item 5</li>
</ul>
IE7 and 6 it's looking like this
This worked for me:
li{list-style-image: url(/images/list.png);_list-style-image: url(/images/list2.png);}
where list1 it's the original with 12x12(px), list2 20x15(px) transparent and positioned at bottom left. Now i got the same view in all gekos and ie's. =)
You have to go testing the size of the second image, because the size varies according to many things.
Did you try setting a line-height (or top and bottom padding values) on the LIs exclusively for IE6 and 7 to vertically center the [+] icon?
A css reset should fix the indentation - if it doesn't just use text-indent (or some margin-left or padding-left).
You can use *+html li {} to target IE7 and * html li {} for IE6.
Just use a background image rather than a list-style-image. The downside of this though is that the 2nd and any following lines of text will be padded as well.
li {
list-style: none;
background: url(path-to-image) no-repeat left center;
}
You should edit the image so it is the height of one li, and it has (transparent) padding as part of the image. It seems to be impossible (or very hard) to control the position of the image cross-browser.
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.
I have a webcontrol with a handful of links displayed at the top, eg:
Link 1 | Link 2 | Link 3
Currently they're each an asp:Hyperlink. Is there a clever solution for rendering out the dividing pipe characters?
Currently they're within the containing placeholder. We can't make any guarantees about a given link always appearing. I don't want a really big if-statement, and I'm reluctant to render all the links purely in the code-behind...
[Update]
Thanks for pointing out that CSS is the way to go. It's certainly made things easier. We did, of course, need a cross-browser solution though.
The HTML list (<ul> & <li>) structure works a treat, as the first-child / last-child properties take care of the end of the list. Note: These are automatic - you don't have to assign them in the markup.
As we only needed pipe symbols, I used the border property. If you wanted, you could use the margin-left + background image CSS properties to have an image spacer instead.
Our solution:
HTML:
<ul class="navMenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
CSS:
ul.navMenu li
{
display: inline;
margin-left: 0;
}
ul.navMenu a
{
border-left: solid 1px #333333;
padding-left: 0.4em;
padding-right: 0.4em;
}
ul.navMenu li.first-child a
{
border-left: none 0;
padding-left: 0;
}
The a + a CSS solution doesn't work across all browsers, unfortunately.
I typically mark up my list like:
<ul>
<li class="first-child">Link 1</li>
<li>Link 2</li>
<li class="last-child">Link 3</li>
</ul>
Not only does this provide better JavaScript hooks, but you can customize the left/rightmost element to turn off the border or adjust padding as necessary.
the CSS and/or JQuery method works great. Some times you really might just want <a></a> | <a></a> | <a></a> though.
It might be worth your time to look at a couple of server side controls. Depending on where you get the links (you said some might be missing?) you could just use a control, it has a where you could put the |. If the links are missing depending on who is logged in and some kind of user roles, maybe you can use the sitemap + control, it too has a .