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 .
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 am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
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 know this is pretty basic, but it is giving me hangups. I have a basic list:
<ul>
<li>Insert Link Here</li>
<li>Insert Link Here</li>
<li>Insert Link Here</li>
</ul>
What do I need to do to make sure the last <li> item gets cleared? I've tried adding style="clear:both" to the end with no avail. Also I've added a 'div' after the last <li> tag before the closing </ul> tag, that works, but I know it doesn't validate.
If you want to have the background behind a block item which has only floated items inside, then:
ul {
overflow: auto;
}
Given that you've found "[adding] a div after the last <li>...works" why not try adding another <li>, give it a class-name of, for example clearing and:
li.clearing {display: block; clear: both; }
If you need this to take up little, or no, room then adding height: 0; background-color: transparent; border: 0 none transparent; should prevent its being visible, while still causing the clearing to occur.
It would almost certainly be a benefit if you could add your use-case, and explain, as the comment asked: what do you want? (and I say that with trepidation, after watching too much Babylon 5 recently).
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.